diff --git a/src/render/api/course/category.ts b/src/render/api/course/category.ts
new file mode 100644
index 0000000..fa2382a
--- /dev/null
+++ b/src/render/api/course/category.ts
@@ -0,0 +1,10 @@
+import { categories, classes } from './data'
+
+export const allIncludeClass = () => {
+  categories.map((category) => {
+    const classArray = classes.filter( clazz => clazz.category_id == category.id )
+    category.classes = classArray
+  })
+
+  return categories
+}
diff --git a/src/render/api/course/class.ts b/src/render/api/course/class.ts
new file mode 100644
index 0000000..6c484ea
--- /dev/null
+++ b/src/render/api/course/class.ts
@@ -0,0 +1,11 @@
+import { classes, courses } from './data'
+
+export const findByPkIncludeCourse = (class_id) => {
+  if (!class_id) return
+
+  const clazz   = classes.find( clazz  => clazz.id === class_id )
+  if (!clazz) return
+  clazz.courses = courses.filter( course => course.class_id === class_id )
+
+  return clazz
+}
diff --git a/src/render/api/course/course.ts b/src/render/api/course/course.ts
new file mode 100644
index 0000000..4c8f7b3
--- /dev/null
+++ b/src/render/api/course/course.ts
@@ -0,0 +1,7 @@
+import { courses } from './data'
+
+export const findByPk = (course_id) => {
+  if (!course_id) return
+
+  return courses.find( course => course.id === course_id )
+}
diff --git a/src/render/api/course/data.ts b/src/render/api/course/data.ts
new file mode 100644
index 0000000..70bc0e9
--- /dev/null
+++ b/src/render/api/course/data.ts
@@ -0,0 +1,1899 @@
+import { Category, Class, Course } from './type'
+
+export const categories: Category[] = [
+  {
+    id: 1,
+    key: 'kpk',
+    thumbnail: 'kpk.png',
+    name: '科普课',
+    classes: []
+  },
+  {
+    id: 2,
+    key: 'hdk',
+    thumbnail: 'hdk.png',
+    name: '活动课',
+    classes: []
+  },
+  {
+    id: 3,
+    key: 'gck',
+    thumbnail: 'gck.png',
+    name: '工程课',
+    classes: []
+  },
+]
+
+export const classes   : Class[]    = [
+  {
+    id: 1,
+    category_id: 1,
+    thumbnail: 'gsbd.jpg'     ,
+    name: '感受北斗',
+    courses: []
+  },
+  {
+    id: 2,
+    category_id: 1,
+    thumbnail: 'wzbd.jpg'     ,
+    name: '玩转北斗',
+    courses: []
+  },
+  {
+    id: 3,
+    category_id: 1,
+    thumbnail: 'ycbd.jpg'     ,
+    name: '研创北斗',
+    courses: []
+  },
+  {
+    id: 4,
+    category_id: 2,
+    thumbnail: 'skznkjtyk.jpg',
+    name: '时空智能科技体验课',
+    courses: []
+  },
+  {
+    id: 5,
+    category_id: 3,
+    thumbnail: 'xcbdsz.jpg'   ,
+    name: '炫彩小时钟',
+    courses: []
+  },
+  {
+    id: 6,
+    category_id: 3,
+    thumbnail: 'bdxwx.jpg'    ,
+    name: '北斗小卫星',
+    courses: []
+  },
+  {
+    id: 7,
+    category_id: 3,
+    thumbnail: 'bdwlqxz.jpg'  ,
+    name: '北斗气象站',
+    courses: []
+  },
+]
+
+export const courses   : Course[]   = [
+  {
+    id: 1,
+    class_id: 1,
+    dir:'JustGotToKnowBeidou',
+    thumbnail: 'thumbnail.jpg',
+    name: '初识北斗',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 32,
+  },
+  {
+    id: 2,
+    class_id: 1,
+    dir:'BeidouSystem',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗系统',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 36,
+  },
+  {
+    id: 3,
+    class_id: 1,
+    dir:'BeidouApplication',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗应用',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 40,
+  },
+  {
+    id: 4,
+    class_id: 1,
+    dir:'BeidouTime',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗时间',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小时钟',
+      filePath: 'bdtime_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 40,
+  },
+  {
+    id: 5,
+    class_id: 1,
+    dir:'TimeExploration',
+    thumbnail: 'thumbnail.jpg',
+    name: '时间探秘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时间探秘',
+      filePath: 'time_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 40,
+  },
+  {
+    id: 6,
+    class_id: 1,
+    dir:'Theodolite',
+    thumbnail: 'thumbnail.jpg',
+    name: '小小定位仪',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '经纬度地图',
+      command: 'LAUNCH_ONLINE_SOFTWARE',
+      params: {
+        url : 'http://test.map.hwasmart.com'
+      }
+    }],
+    images: [],
+    imageCount: 35,
+  },
+  {
+    id: 7,
+    class_id: 1,
+    dir:'BeidouQuestForTreasure',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗探宝',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 25,
+  },
+  {
+    id: 8,
+    class_id: 1,
+    dir:'BeidouTrackPlayback',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗轨迹回放',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗轨迹回放',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '轨迹回放',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDPositionTrackRetracingWindow'
+      }
+    }],
+    images: [],
+    imageCount: 30,
+  },
+  {
+    id: 9,
+    class_id: 1,
+    dir:'BeidouSpeedMeasurement',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗测速',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测速',
+      filePath: 'bdvelocity_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 10,
+    class_id: 1,
+    dir:'BeidouObservationPost',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗观察哨',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '星座图生成',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'GeneratingConstellationChartWindow'
+      }
+    }],
+    images: [],
+    imageCount: 44,
+  },
+  {
+    id: 11,
+    class_id: 1,
+    dir:'SatelliteAndCommunication',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星与通信',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [{
+      name: '通信助手',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDCommunicationAssistantWindow'
+      }
+    }, {
+      name: '星座图',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDDataAnalysisPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 41,
+  },
+  {
+    id: 12,
+    class_id: 1,
+    dir:'CommunicationRescue',
+    thumbnail: 'thumbnail.jpg',
+    name: '通信救援',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '摩尔斯电报机',
+      filePath: 'morse_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 47,
+  },
+  {
+    id: 13,
+    class_id: 1,
+    dir:'ActivityExperienceAndCourseSummary',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动体验与课程总结',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 51,
+  },
+  {
+    id: 14,
+    class_id: 1,
+    dir:'BeidouFrontierApplication',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗前沿应用',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 15,
+    class_id: 1,
+    dir:'HandPaintedCampus',
+    thumbnail: 'thumbnail.jpg',
+    name: '手绘校园',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 20,
+  },
+  {
+    id: 16,
+    class_id: 1,
+    dir:'DrawingBasis',
+    thumbnail: 'thumbnail.jpg',
+    name: '绘图基础',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 19,
+  },
+  {
+    id: 17,
+    class_id: 1,
+    dir:'CampusMapping',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园测绘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }, {
+      name: '北斗测距',
+      filePath: 'bddistance_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '距离计算工具',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'DistanceCalculationToolWindow'
+      }
+    }],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 18,
+    class_id: 1,
+    dir:'GreenCampus',
+    thumbnail: 'thumbnail.jpg',
+    name: '绿色校园',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗面积测量',
+      filePath: 'bdarea_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 22,
+  },
+  {
+    id: 19,
+    class_id: 1,
+    dir:'CampusSurveyReport',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园调查报告',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 17,
+  },
+  {
+    id: 20,
+    class_id: 1,
+    dir:'BeidouWeatherStation',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗气象站',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗气象站',
+      filePath: 'bdweather_bmp280_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 39,
+  },
+  {
+    id: 21,
+    class_id: 1,
+    dir:'BeidouDisasterWarning',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗灾难预警',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗灾难预警',
+      filePath: 'bddisaster_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗预警数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDComprehensiveExperimentalPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 54,
+  },
+  {
+    id: 22,
+    class_id: 1,
+    dir:'CreativeBrainstorming',
+    thumbnail: 'thumbnail.jpg',
+    name: '创意头脑风暴',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 23,
+    class_id: 1,
+    dir:'Screenwriter',
+    thumbnail: 'thumbnail.jpg',
+    name: '小小编剧家',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 18,
+  },
+  {
+    id: 24,
+    class_id: 1,
+    dir:'CreativeRehearsal',
+    thumbnail: 'thumbnail.jpg',
+    name: '创意彩排',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 10,
+  },
+  {
+    id: 25,
+    class_id: 1,
+    dir:'InnovationShow',
+    thumbnail: 'thumbnail.jpg',
+    name: '创新汇演',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 8,
+  },
+  {
+    id: 26,
+    class_id: 2,
+    dir:'JustGotToKnowBeidou2',
+    thumbnail: 'thumbnail.jpg',
+    name: '初识北斗',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 40,
+  },
+  {
+    id: 27,
+    class_id: 2,
+    dir:'BeidouTime2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗时间',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小时钟',
+      filePath: 'bdtime_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 41,
+  },
+  {
+    id: 28,
+    class_id: 2,
+    dir:'TimeExploration2',
+    thumbnail: 'thumbnail.jpg',
+    name: '时间探秘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时间探秘',
+      filePath: 'time_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 40,
+  },
+  {
+    id: 29,
+    class_id: 2,
+    dir:'Theodolite2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗定位仪',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '经纬度地图',
+      command: 'LAUNCH_ONLINE_SOFTWARE',
+      params: {
+        url : 'http://test.map.hwasmart.com'
+      }
+    }],
+    images: [],
+    imageCount: 53,
+  },
+  {
+    id: 30,
+    class_id: 2,
+    dir:'BeidouTrackPlayback2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗轨迹回放',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗轨迹回放',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '轨迹回放',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDPositionTrackRetracingWindow'
+      }
+    }],
+    images: [],
+    imageCount: 31,
+  },
+  {
+    id: 31,
+    class_id: 2,
+    dir:'BeidouSpeedAndDirectionFinding',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗测速与测向',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测速',
+      filePath: 'bdvelocity_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 32,
+  },
+  {
+    id: 32,
+    class_id: 2,
+    dir:'SatelliteAndCommunication2',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星与通信',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [{
+      name: '通信助手',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDCommunicationAssistantWindow'
+      }
+    }, {
+      name: '星座图',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDDataAnalysisPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 52,
+  },
+  {
+    id: 33,
+    class_id: 2,
+    dir:'MorseTelegraph',
+    thumbnail: 'thumbnail.jpg',
+    name: '摩尔斯电报机',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '摩尔斯电报机',
+      filePath: 'morse_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 46,
+  },
+  {
+    id: 34,
+    class_id: 2,
+    dir:'ActivityStart',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动启动',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 22,
+  },
+  {
+    id: 35,
+    class_id: 2,
+    dir:'ActivityDesign',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动设计',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 22,
+  },
+  {
+    id: 36,
+    class_id: 2,
+    dir:'ActivityReview',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动评审',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 9,
+  },
+  {
+    id: 37,
+    class_id: 2,
+    dir:'ActivityPreparation',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动筹备',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 8,
+  },
+  {
+    id: 38,
+    class_id: 2,
+    dir:'ActivityCompetition',
+    thumbnail: 'thumbnail.jpg',
+    name: '活动竞技',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 67,
+  },
+  {
+    id: 39,
+    class_id: 2,
+    dir:'CourseSummary',
+    thumbnail: 'thumbnail.jpg',
+    name: '课程总结',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 9,
+  },
+  {
+    id: 40,
+    class_id: 2,
+    dir:'BeidouFrontierApplication2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗前沿应用',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 41,
+    class_id: 2,
+    dir:'BeidouObservationPost2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗观察哨',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '星座图生成',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'GeneratingConstellationChartWindow'
+      }
+    }],
+    images: [],
+    imageCount: 43,
+  },
+  {
+    id: 42,
+    class_id: 2,
+    dir:'CampusMapping2',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园测绘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }, {
+      name: '北斗测距',
+      filePath: 'bddistance_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '距离计算工具',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'DistanceCalculationToolWindow'
+      }
+    }],
+    images: [],
+    imageCount: 39,
+  },
+  {
+    id: 43,
+    class_id: 2,
+    dir:'BeidouObservationPostReport',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗观察哨报告',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 24,
+  },
+  {
+    id: 44,
+    class_id: 2,
+    dir:'CampusSurvey',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园调查',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗面积测量',
+      filePath: 'bdarea_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 36,
+  },
+  {
+    id: 45,
+    class_id: 2,
+    dir:'GreenSpaceProgramImprovement',
+    thumbnail: 'thumbnail.jpg',
+    name: '绿地方案改进',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 21,
+  },
+  {
+    id: 46,
+    class_id: 2,
+    dir:'CampusSurveyReport2',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园调查报告',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 9,
+  },
+  {
+    id: 47,
+    class_id: 2,
+    dir:'BeidouWeatherStation2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗气象站',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗气象站',
+      filePath: 'bdweather_bmp280_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 36,
+  },
+  {
+    id: 48,
+    class_id: 2,
+    dir:'BeidouDisasterWarning2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗灾难预警',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗灾难预警',
+      filePath: 'bddisaster_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗预警数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDComprehensiveExperimentalPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 51,
+  },
+  {
+    id: 49,
+    class_id: 2,
+    dir:'BeidouApplicationInnovation',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗应用创新',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 32,
+  },
+  {
+    id: 50,
+    class_id: 2,
+    dir:'Presentation',
+    thumbnail: 'thumbnail.jpg',
+    name: '汇报展示',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 7,
+  },
+  {
+    id: 51,
+    class_id: 3,
+    dir:'BeidouFoundationAndIndustry',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗基础及产业',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 46,
+  },
+  {
+    id: 52,
+    class_id: 3,
+    dir:'BeidouPositioning',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗定位',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '经纬度地图',
+      command: 'LAUNCH_ONLINE_SOFTWARE',
+      params: {
+        url : 'http://test.map.hwasmart.com'
+      }
+    }],
+    images: [],
+    imageCount: 37,
+  },
+  {
+    id: 53,
+    class_id: 3,
+    dir:'PositioningAndErro',
+    thumbnail: 'thumbnail.jpg',
+    name: '定位与误差',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '距离计算工具',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'DistanceCalculationToolWindow'
+      }
+    }],
+    images: [],
+    imageCount: 27,
+  },
+  {
+    id: 54,
+    class_id: 3,
+    dir:'RecognitionTime',
+    thumbnail: 'thumbnail.jpg',
+    name: '认识时间',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时间探秘',
+      filePath: 'time_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 34,
+  },
+  {
+    id: 55,
+    class_id: 3,
+    dir:'DiscoveryPhysicsClock',
+    thumbnail: 'thumbnail.jpg',
+    name: '物理钟探寻',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时间探秘',
+      filePath: 'time_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 56,
+    class_id: 3,
+    dir:'BeidouTiming',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗授时',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小时钟',
+      filePath: 'bdtime_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 39,
+  },
+  {
+    id: 57,
+    class_id: 3,
+    dir:'SpeedAndCourse',
+    thumbnail: 'thumbnail.jpg',
+    name: '速度与航向',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测速',
+      filePath: 'bdvelocity_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 32,
+  },
+  {
+    id: 58,
+    class_id: 3,
+    dir:'CampusExploration1',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园探宝1',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 24,
+  },
+  {
+    id: 59,
+    class_id: 3,
+    dir:'SatelliteAndCommunication3',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星与通信',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [{
+      name: '通信助手',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDCommunicationAssistantWindow'
+      }
+    }, {
+      name: '星座图',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDDataAnalysisPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 35,
+  },
+  {
+    id: 60,
+    class_id: 3,
+    dir:'MorseTelegraph2',
+    thumbnail: 'thumbnail.jpg',
+    name: '摩尔斯电报机',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '摩尔斯电报机',
+      filePath: 'morse_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 39,
+  },
+  {
+    id: 61,
+    class_id: 3,
+    dir:'CommunicationProtocolDesign',
+    thumbnail: 'thumbnail.jpg',
+    name: '通信协议设计',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 31,
+  },
+  {
+    id: 62,
+    class_id: 3,
+    dir:'CampusExploration2',
+    thumbnail: 'thumbnail.jpg',
+    name: '校园探宝2',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }, {
+      name: '摩尔斯电报机',
+      filePath: 'morse_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 19,
+  },
+  {
+    id: 63,
+    class_id: 3,
+    dir:'CelestialPositionDescription',
+    thumbnail: 'thumbnail.jpg',
+    name: '天体位置描述',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 24,
+  },
+  {
+    id: 64,
+    class_id: 3,
+    dir:'BeidouObservationPost3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗观察哨',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '星座图生成',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'GeneratingConstellationChartWindow'
+      }
+    }],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 65,
+    class_id: 3,
+    dir:'BeidouSignalExplorationReport',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗信号探究报告',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 21,
+  },
+  {
+    id: 66,
+    class_id: 3,
+    dir:'TermSummary',
+    thumbnail: 'thumbnail.jpg',
+    name: '学期总结',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 10,
+  },
+  {
+    id: 67,
+    class_id: 3,
+    dir:'BeidouFrontierApplication3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗前沿应用',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 41,
+  },
+  {
+    id: 68,
+    class_id: 3,
+    dir:'GreenTask',
+    thumbnail: 'thumbnail.jpg',
+    name: '绿色任务',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 20,
+  },
+  {
+    id: 69,
+    class_id: 3,
+    dir:'GreenCampus2',
+    thumbnail: 'thumbnail.jpg',
+    name: '绿色校园',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测距',
+      filePath: 'bddistance_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '距离计算工具',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'DistanceCalculationToolWindow'
+      }
+    }],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 70,
+    class_id: 3,
+    dir:'GreenQuantitySurveyReport',
+    thumbnail: 'thumbnail.jpg',
+    name: '绿量调查报告',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗面积测量',
+      filePath: 'bdarea_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 20,
+  },
+  {
+    id: 71,
+    class_id: 3,
+    dir:'BeidouTrackPlayback3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗轨迹回放',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗轨迹回放',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '轨迹回放',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDPositionTrackRetracingWindow'
+      }
+    }],
+    images: [],
+    imageCount: 23,
+  },
+  {
+    id: 72,
+    class_id: 3,
+    dir:'BeidouWeatherStation3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗气象站',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗气象站',
+      filePath: 'bdweather_bmp280_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 35,
+  },
+  {
+    id: 73,
+    class_id: 3,
+    dir:'BeidouDisasterWarning3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗灾难预警',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗灾难预警',
+      filePath: 'bddisaster_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗预警数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDComprehensiveExperimentalPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 47,
+  },
+  {
+    id: 74,
+    class_id: 3,
+    dir:'BeidouFunctionDescription',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗功能描述',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 22,
+  },
+  {
+    id: 75,
+    class_id: 3,
+    dir:'CreativeBrainstorming2',
+    thumbnail: 'thumbnail.jpg',
+    name: '创意头脑风暴',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 19,
+  },
+  {
+    id: 76,
+    class_id: 3,
+    dir:'InnovativeApplicationScenarioProduction',
+    thumbnail: 'thumbnail.jpg',
+    name: '创新应用场景制作',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 15,
+  },
+  {
+    id: 77,
+    class_id: 3,
+    dir:'InnovativePlanWriting',
+    thumbnail: 'thumbnail.jpg',
+    name: '创新方案撰写',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 20,
+  },
+  {
+    id: 78,
+    class_id: 3,
+    dir:'ExhibitionAndSharingOfWorks',
+    thumbnail: 'thumbnail.jpg',
+    name: '作品展示分享',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [],
+    images: [],
+    imageCount: 11,
+  },
+
+  // 活动课
+  {
+    id: 79,
+    class_id: 4,
+    dir:'BeidouTime3',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗时间',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小时钟',
+      filePath: 'bdtime_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 64,
+  },
+  {
+    id: 80,
+    class_id: 4,
+    dir:'TimeExploration3',
+    thumbnail: 'thumbnail.jpg',
+    name: '时间探秘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时间探秘',
+      filePath: 'time_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 64,
+  },
+  {
+    id: 81,
+    class_id: 4,
+    dir:'BeidouTheodolite',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗定位仪',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '经纬度地图',
+      command: 'LAUNCH_ONLINE_SOFTWARE',
+      params: {
+        url : 'http://test.map.hwasmart.com'
+      }
+    }],
+    images: [],
+    imageCount: 56,
+  },
+  {
+    id: 82,
+    class_id: 4,
+    dir:'BeidouObservationPost4',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗观察哨',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '星座图生成',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'GeneratingConstellationChartWindow'
+      }
+    }],
+    images: [],
+    imageCount: 62,
+  },
+  {
+    id: 83,
+    class_id: 4,
+    dir:'SatelliteSignalExploration',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星信号探究',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗观察哨',
+      filePath: 'bdgsv_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 62,
+  },
+  {
+    id: 84,
+    class_id: 4,
+    dir:'BeidouTrackPlayback4',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗轨迹回放',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗轨迹回放',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '轨迹回放',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDPositionTrackRetracingWindow'
+      }
+    }],
+    images: [],
+    imageCount: 55,
+  },
+  {
+    id: 85,
+    class_id: 4,
+    dir:'BeidouSpeedAndDirectionFinding2',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗测速与测向',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测速',
+      filePath: 'bdvelocity_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 55,
+  },
+  {
+    id: 86,
+    class_id: 4,
+    dir:'BeidouWeatherStation4',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗气象站',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗气象站',
+      filePath: 'bdweather_bmp280_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 60,
+  },
+  {
+    id: 87,
+    class_id: 4,
+    dir:'BeidouDisasterWarning4',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗灾难预警',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗灾难预警',
+      filePath: 'bddisaster_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗预警数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDComprehensiveExperimentalPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 75,
+  },
+  {
+    id: 88,
+    class_id: 4,
+    dir:'IntelligentFan',
+    thumbnail: 'thumbnail.jpg',
+    name: '智能风扇',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '智能风扇',
+      filePath: 'autofan_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 26,
+  },
+  {
+    id: 89,
+    class_id: 4,
+    dir:'IntelligentFlowerWateringDevice',
+    thumbnail: 'thumbnail.jpg',
+    name: '智能浇花器',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '智能浇花器',
+      filePath: 'autowater_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 90,
+    class_id: 4,
+    dir:'MagicSwitch',
+    thumbnail: 'thumbnail.jpg',
+    name: '神奇的开关',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '神奇的开关',
+      filePath: 'magicbutton_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 29,
+  },
+  {
+    id: 91,
+    class_id: 4,
+    dir:'MorseTelegraph3',
+    thumbnail: 'thumbnail.jpg',
+    name: '摩尔斯电报机',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '摩尔斯电报机',
+      filePath: 'morse_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 46,
+  },
+  {
+    id: 92,
+    class_id: 4,
+    dir:'MysteriesOfElectronicOrgan',
+    thumbnail: 'thumbnail.jpg',
+    name: '探究电子琴奥秘',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '电子小钢琴',
+      filePath: 'piano_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 29,
+  },
+  {
+    id: 93,
+    class_id: 4,
+    dir:'BeidouSurveyingAndMapping',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗测绘体验',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗测距',
+      filePath: 'bddistance_mix_core.ino.esp32.bin'
+    }, {
+      name: '北斗面积测量',
+      filePath: 'bdarea_mix_core.ino.esp32.bin'
+    }, {
+      name: '北斗定位仪',
+      filePath: 'bdlocation_mix_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '距离计算工具',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'DistanceCalculationToolWindow'
+      }
+    }],
+    images: [],
+    imageCount: 51,
+  },
+  {
+    id: 94,
+    class_id: 4,
+    dir:'BeidouElectronicFence',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗电子围栏',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗抵近报警',
+      filePath: 'bdapproach_mix_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 35,
+  },
+
+  // 工程课
+  {
+    id: 95,
+    class_id: 5,
+    dir:'BeidouAndTime',
+    thumbnail: 'thumbnail.jpg',
+    name: '北斗与时间',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [{
+      name: '北斗授时',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDAndTimeWindow'
+      }
+    }],
+    images: [],
+    imageCount: 43,
+  },
+  {
+    id: 96,
+    class_id: 5,
+    dir:'DisplayOfElectronicImages',
+    thumbnail: 'thumbnail.jpg',
+    name: '电子图像的显示',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时钟教学',
+      filePath: 'clock_study_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '电子屏幕设计',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'ElectronicScreenDesignWindow'
+      }
+    }],
+    images: [],
+    imageCount: 27,
+  },
+  {
+    id: 97,
+    class_id: 5,
+    dir:'DisplayEffectDesign',
+    thumbnail: 'thumbnail.jpg',
+    name: '显示效果设计',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时钟教学',
+      filePath: 'clock_study_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '电子屏幕设计',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'ElectronicScreenDesignWindow'
+      }
+    }, {
+      name: '字体设计',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'FontDesignWindow'
+      }
+    }],
+    images: [],
+    imageCount: 24,
+  },
+  {
+    id: 98,
+    class_id: 5,
+    dir:'IntelligentControl',
+    thumbnail: 'thumbnail.jpg',
+    name: '智能控制',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '时钟教学',
+      filePath: 'clock_study_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '手势识别',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'GestureRecognitionWindow'
+      }
+    }, {
+      name: '红外电压监测',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'VoltageMonitoringWindow'
+      }
+    }],
+    images: [],
+    imageCount: 27,
+  },
+  {
+    id: 99,
+    class_id: 5,
+    dir:'ClockAssemblyAndInteractiveEffectDesign',
+    thumbnail: 'thumbnail.jpg',
+    name: '时钟组装及互动效果设计',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '炫彩北斗时钟',
+      filePath: 'clock_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '时钟配置',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'ClockConfigWindow'
+      }
+    }],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 100,
+    class_id: 6,
+    dir:'JustGotToKnowSatellite',
+    thumbnail: 'thumbnail.jpg',
+    name: '初识卫星',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小卫星',
+      filePath: 'sat_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 31,
+  },
+  {
+    id: 101,
+    class_id: 6,
+    dir:'SatelliteClock',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星时钟',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小卫星',
+      filePath: 'sat_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '卫星授时',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDSatelliteTimeConfigurationWindow'
+      }
+    }],
+    images: [],
+    imageCount: 31,
+  },
+  {
+    id: 102,
+    class_id: 6,
+    dir:'SatelliteConditionMonitoring',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星状态监测',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小卫星',
+      filePath: 'sat_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '卫星监测中心',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDSatelliteParameterMonitoringPlatformWindow'
+      }
+    }, {
+      name: '卫星3D姿态',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDSatellite3DPostureDisplayWindow'
+      }
+    }, {
+      name: '太阳能电压监测',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'VoltageMonitoringWindow'
+      }
+    }],
+    images: [],
+    imageCount: 33,
+  },
+  {
+    id: 103,
+    class_id: 6,
+    dir:'SatelliteOrbitControl',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星轨道控制',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小卫星',
+      filePath: 'sat_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '卫星姿态控制',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDSatelliteAttitudeControlWindow'
+      }
+    }],
+    images: [],
+    imageCount: 25,
+  },
+  {
+    id: 104,
+    class_id: 6,
+    dir:'SatelliteAssemblyAndProduction',
+    thumbnail: 'thumbnail.jpg',
+    name: '卫星组装与生产',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '北斗小卫星',
+      filePath: 'sat_core.ino.esp32.bin'
+    }],
+    softwares: [],
+    images: [],
+    imageCount: 29,
+  },
+  {
+    id: 105,
+    class_id: 7,
+    dir:'WirelessCommunicationModuleConfiguration',
+    thumbnail: 'thumbnail.jpg',
+    name: '无线通信模块配置',
+    description: 'descriptiondescription',
+    programs: [],
+    softwares: [{
+      name: '无线通信模块配置软件',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'WirelessCommunicationModuleConfigurationWindow'
+      }
+    }, {
+      name: '通信助手',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDCommunicationAssistantWindow'
+      }
+    }],
+    images: [],
+    imageCount: 35,
+  },
+  {
+    id: 106,
+    class_id: 7,
+    dir:'MeteorologicalDataAcquisitionAndCommunicationProtocol',
+    thumbnail: 'thumbnail.jpg',
+    name: '气象数据的采集与通信协议',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '气象站采集端',
+      filePath: 'weather_s_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }, {
+      name: '气象数据协议',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataProtocolWindow'
+      }
+    }, {
+      name: 'PM2.5电压监测',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'VoltageMonitoringWindow'
+      }
+    }],
+    images: [],
+    imageCount: 28,
+  },
+  {
+    id: 107,
+    class_id: 7,
+    dir:'DataDisplayAndDigitalTubeDisplayPrinciple',
+    thumbnail: 'thumbnail.jpg',
+    name: '数据展示与数码管显示原理',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '气象站显示端',
+      filePath: 'weather_c_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '数码管配置',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'NixieTubeConfigurationWindow'
+      }
+    }],
+    images: [],
+    imageCount: 21,
+  },
+  {
+    id: 108,
+    class_id: 7,
+    dir:'MakingOfWeatherStations',
+    thumbnail: 'thumbnail.jpg',
+    name: '气象站的制作',
+    description: 'descriptiondescription',
+    programs: [{
+      name: '气象站采集端',
+      filePath: 'weather_s_core.ino.esp32.bin'
+    }, {
+      name: '气象站显示端',
+      filePath: 'weather_c_core.ino.esp32.bin'
+    }],
+    softwares: [{
+      name: '北斗气象数据展示',
+      command: 'LAUNCH_LOCAL_SOFTWARE',
+      params: {
+        subWindowName: 'BDMeteorologicalDataDisplayPlatformWindow'
+      }
+    }],
+    images: [],
+    imageCount: 41,
+  },
+]
diff --git a/src/render/api/course/type.d.ts b/src/render/api/course/type.d.ts
new file mode 100644
index 0000000..c2d6419
--- /dev/null
+++ b/src/render/api/course/type.d.ts
@@ -0,0 +1,39 @@
+export class Category {
+  id          : Number
+  key         : String
+  thumbnail   : String
+  name        : String
+  classes     : Class[]
+}
+
+export class Class {
+  id          : Number
+  category_id : Number
+  thumbnail   : String
+  name        : String
+  courses     : Course[]
+}
+
+export class Course {
+  id          : Number
+  class_id    : Number
+  dir         : String
+  thumbnail   : String
+  name        : String
+  description : String
+  programs    : Program[]
+  softwares   : Software[]
+  images      : String[]
+  imageCount  : Number
+}
+
+export class Software {
+  name        : String
+  command     : String
+  params      : Object
+}
+
+export class Program {
+  name        : String
+  filePath    : String
+}
diff --git a/src/render/api/program/data.ts b/src/render/api/program/data.ts
new file mode 100644
index 0000000..c38ba49
--- /dev/null
+++ b/src/render/api/program/data.ts
@@ -0,0 +1,154 @@
+import { Program } from './type'
+
+export const programs: Program[] = [
+  {
+    id: 1,
+    name: '智能风扇',
+    filePath: 'autofan_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 2,
+    name: '智能浇花器',
+    filePath: 'autowater_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 3,
+    name: '北斗抵近报警',
+    filePath: 'bdapproach_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 4,
+    name: '北斗面积测量',
+    filePath: 'bdarea_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 5,
+    name: '北斗灾难预警',
+    filePath: 'bddisaster_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 6,
+    name: '北斗测距',
+    filePath: 'bddistance_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 7,
+    name: '北斗实时测距',
+    filePath: 'bddistance_rt_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 8,
+    name: '北斗观察哨',
+    filePath: 'bdgsv_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 9,
+    name: '北斗定位仪',
+    filePath: 'bdlocation_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 10,
+    name: '北斗小时钟',
+    filePath: 'bdtime_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 11,
+    name: '北斗测速',
+    filePath: 'bdvelocity_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 12,
+    name: '北斗气象站',
+    filePath: 'bdweather_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 13,
+    name: '北斗模块波特率设置工具9600',
+    filePath: 'beidou_setband_9600.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 14,
+    name: '北斗模块波特率设置工具115200',
+    filePath: 'beidou_setband_115200.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 15,
+    name: '炫彩北斗时钟',
+    filePath: 'clock_core.ino.esp32.bin',
+    common: false
+  },
+  {
+    id: 16,
+    name: '时钟教学',
+    filePath: 'clock_study_core.ino.esp32.bin',
+    common: false
+  },
+  {
+    id: 17,
+    name: '神奇的开关',
+    filePath: 'magicbutton_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 18,
+    name: '摩尔斯电报机',
+    filePath: 'morse_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 19,
+    name: '电子小钢琴',
+    filePath: 'piano_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 20,
+    name: '北斗小卫星',
+    filePath: 'sat_core.ino.esp32.bin',
+    common: false
+  },
+  {
+    id: 21,
+    name: '时间探秘',
+    filePath: 'time_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 22,
+    name: '气象站显示端',
+    filePath: 'weather_c_core.ino.esp32.bin',
+    common: false
+  },
+  {
+    id: 23,
+    name: '气象站采集端',
+    filePath: 'weather_s_core.ino.esp32.bin',
+    common: false
+  },
+  {
+    id: 24,
+    name: '北斗轨迹回放',
+    filePath: 'bdlocation_mix_core.ino.esp32.bin',
+    common: true
+  },
+  {
+    id: 25,
+    name: '北斗气象站（探秘版）',
+    filePath: 'bdweather_tm_mix_core.ino.esp32.bin',
+    common: true
+  },
+]
diff --git a/src/render/api/program/index.ts b/src/render/api/program/index.ts
new file mode 100644
index 0000000..b647402
--- /dev/null
+++ b/src/render/api/program/index.ts
@@ -0,0 +1,5 @@
+import { programs } from './data'
+
+export const findAllCommon = () => {
+  return programs.filter((program) => program.common)
+}
diff --git a/src/render/api/program/type.d.ts b/src/render/api/program/type.d.ts
new file mode 100644
index 0000000..1cbf58a
--- /dev/null
+++ b/src/render/api/program/type.d.ts
@@ -0,0 +1,6 @@
+export class Program {
+  id      : Number
+  name    : String
+  common  : Boolean
+  filePath: String
+}
diff --git a/src/render/api/satellite/type.d.ts b/src/render/api/satellite/type.d.ts
new file mode 100644
index 0000000..fbf695f
--- /dev/null
+++ b/src/render/api/satellite/type.d.ts
@@ -0,0 +1,7 @@
+export class Satellite {
+  svid  : Number
+  cn0   : Number
+  ele   : Number
+  az    : Number
+  active: Boolean = true
+}
diff --git a/src/render/app/BD&time/index.ts b/src/render/app/BD&time/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BD&time/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BD&time/index.vue b/src/render/app/BD&time/index.vue
new file mode 100644
index 0000000..0a9c1a7
--- /dev/null
+++ b/src/render/app/BD&time/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="BD_timing" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="授时" name="BD_timing">
+          <TimingView class="w-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="转换" name="time_format_conversion">
+          <ConversionView />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { TimingView } from '@/views/BD&time/TimingView'
+import { ConversionView } from '@/views/BD&time/ConversionView'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+</script>
+
+<style scoped lang="less">
+// 实现pane中的内容水平垂直居中
+.n-tab-pane {
+  display: flex;
+  place-items: center;
+}
+</style>
diff --git a/src/render/app/BDCommunicationAssistant/index.ts b/src/render/app/BDCommunicationAssistant/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDCommunicationAssistant/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDCommunicationAssistant/index.vue b/src/render/app/BDCommunicationAssistant/index.vue
new file mode 100644
index 0000000..55eebf3
--- /dev/null
+++ b/src/render/app/BDCommunicationAssistant/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space vertical :item-style="itemStyle" class="BD-communication-assistant-view h-full">
+        <SerialPortSendingMessageView ref="serialPortSendingMessageViewRef">
+          <template #extra>
+            <n-button type="info"
+              size="large"
+              @click="sendNMEABtnClick">
+              NMEA
+            </n-button>
+          </template>
+        </SerialPortSendingMessageView>
+        <SerialPortReceivingMessageView />
+      </n-space>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NButton } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SerialPortSendingMessageView, SerialPortReceivingMessageView } from '@/components/SerialPort'
+
+const itemStyle = { flex: '1 1 50%'}
+
+const NMEA = '$GNGGA,055528.000,4002.7282,N,11616.7795,E,1,12,1.0,101.2,M,0.0,M,,*79\r\n' +
+             '$GNGLL,4002.7282,N,11616.7795,E,055528.000,A,A*4C\r\n' +
+             '$GPGSA,A,3,23,08,30,07,11,09,27,16,,,,,1.7,1.0,1.4*36\r\n' +
+             '$BDGSA,A,3,03,08,09,10,,,,,,,,,1.7,1.0,1.4*22\r\n' +
+             '$GPGSV,3,1,10,07,40,311,39,08,69,222,50,09,33,254,52,11,18,192,37*7A\r\n' +
+             '$GPGSV,3,2,10,16,38,068,23,21,09,037,24,23,22,212,45,26,14,085,*7F\r\n' +
+             '$GPGSV,3,3,10,27,66,049,24,30,13,313,38*7D\r\n' +
+             '$BDGSV,1,1,04,03,44,189,35,08,39,170,35,09,15,214,31,10,67,318,15*6D\r\n' +
+             '$GNRMC,055528.000,A,4002.7282,N,11616.7795,E,0.00,263.91,270418,,,A*7C\r\n' +
+             '$GNVTG,263.91,T,,M,0.00,N,0.00,K,A*2C\r\n' +
+             '$GNZDA,055528.000,27,04,2018,00,00*4D\r\n' +
+             '$GPTXT,01,01,01,ANTENNA OPEN*25\r\n'
+
+const serialPortSendingMessageViewRef = ref()
+const sendNMEABtnClick = () => serialPortSendingMessageViewRef.value.update(NMEA)
+</script>
+
+<style scoped lang="less">
+.BD-communication-assistant-view {
+  padding: 8px 12px;
+}
+</style>
diff --git a/src/render/app/BDComprehensiveExperimentalPlatform/index.ts b/src/render/app/BDComprehensiveExperimentalPlatform/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDComprehensiveExperimentalPlatform/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDComprehensiveExperimentalPlatform/index.vue b/src/render/app/BDComprehensiveExperimentalPlatform/index.vue
new file mode 100644
index 0000000..ab5a651
--- /dev/null
+++ b/src/render/app/BDComprehensiveExperimentalPlatform/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="map" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="地图" name="map">
+          <MapView />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { MapView } from '@/views/BDComprehensiveExperimentalPlatform/MapView'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+</script>
diff --git a/src/render/app/BDDataAnalysisPlatform/index.ts b/src/render/app/BDDataAnalysisPlatform/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDDataAnalysisPlatform/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDDataAnalysisPlatform/index.vue b/src/render/app/BDDataAnalysisPlatform/index.vue
new file mode 100644
index 0000000..d2a69e2
--- /dev/null
+++ b/src/render/app/BDDataAnalysisPlatform/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="data" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="数据" name="data">
+          <BasicInfoView class="mx-auto"/>
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="星座图" name="planisphere">
+          <PlanisphereView class="w-h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="载噪比" name="snr">
+          <SNRView class="w-h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="地图" name="map">
+          <MapView />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+import { BasicInfoView } from '@/views/BDDataAnalysisPlatform/BasicInfoView'
+import { PlanisphereView } from '@/views/BDDataAnalysisPlatform/PlanisphereView'
+import { SNRView } from '@/views/BDDataAnalysisPlatform/SNRView'
+import MapView from '@/views/BDDataAnalysisPlatform/MapView.vue'
+
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { useNMEAStore, NMEADataSource } from '@/stores/nmea'
+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 onSerialPortOpen = isOpen => {
+  if (!isOpen) return
+  
+  dataSource.emit('open')
+}
+
+const serialPort = useSerialPortStore()
+watch(() => serialPort.isOpen, onSerialPortOpen)
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style scoped lang="less">
+// 实现pane中的内容水平垂直居中
+.n-tab-pane {
+  display: flex;
+  place-items: center;
+}
+</style>
diff --git a/src/render/app/BDMeteorologicalDataDisplayPlatform/index.ts b/src/render/app/BDMeteorologicalDataDisplayPlatform/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDMeteorologicalDataDisplayPlatform/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDMeteorologicalDataDisplayPlatform/index.vue b/src/render/app/BDMeteorologicalDataDisplayPlatform/index.vue
new file mode 100644
index 0000000..208aa39
--- /dev/null
+++ b/src/render/app/BDMeteorologicalDataDisplayPlatform/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="map" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="地图" name="map">
+          <MapView />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { MapView } from '@/views/BDMeteorologicalDataDisplayPlatform/MapView'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+</script>
diff --git a/src/render/app/BDMeteorologicalDataProtocol/index.ts b/src/render/app/BDMeteorologicalDataProtocol/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDMeteorologicalDataProtocol/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDMeteorologicalDataProtocol/index.vue b/src/render/app/BDMeteorologicalDataProtocol/index.vue
new file mode 100644
index 0000000..538f911
--- /dev/null
+++ b/src/render/app/BDMeteorologicalDataProtocol/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space vertical>
+        <DataProtocolView ref="dataProtocolViewRef" @refresh="onRefresh" />
+        <DataFormView ref="dataFormViewRef" @submit="onSubmit" />
+        <CorrectAnswerView ref="correctAnswerViewRef" />
+      </n-space>
+    </Layout>
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref, toRaw } from 'vue'
+import { NSpace } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { DataFormView } from '@/views/BDMeteorologicalDataProtocol/DataFormView'
+import DataProtocolView from '@/views/BDMeteorologicalDataProtocol/DataProtocolView.vue'
+import CorrectAnswerView from '@/views/BDMeteorologicalDataProtocol/CorrectAnswerView.vue'
+
+const dataProtocolViewRef  = ref()
+const dataFormViewRef      = ref()
+const correctAnswerViewRef = ref()
+
+let originalData
+const onRefresh = data => {
+  if (!data) return
+
+  originalData = toRaw(data)
+  dataFormViewRef.value.setOriginalData(originalData)
+  correctAnswerViewRef.value.clearAnswer()
+}
+
+const onSubmit  = () => correctAnswerViewRef.value.showAnswer(originalData)
+</script>
+
+<style lang="less" scoped>
+.n-layout {
+  :deep(.n-layout-scroll-container) {
+    padding: 8px 24px;
+  }
+}
+</style>
diff --git a/src/render/app/BDPositionTrackRetracing/index.ts b/src/render/app/BDPositionTrackRetracing/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDPositionTrackRetracing/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDPositionTrackRetracing/index.vue b/src/render/app/BDPositionTrackRetracing/index.vue
new file mode 100644
index 0000000..c1a0a85
--- /dev/null
+++ b/src/render/app/BDPositionTrackRetracing/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <Application>
+    <Layout class="layout">
+      <template #header>
+        <InteractionView @read="onRead" @play="onPlay" @clear="onClear" @delete="onDelete" />
+      </template>
+
+      <MapView ref="mapViewRef" :path="path" />
+    </Layout>
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/FixHeader.vue'
+import MapView from '@/views/BDPositionTrackRetracing/MapView.vue'
+import InteractionView from '@/views/BDPositionTrackRetracing/InteractionView.vue'
+import { lonlat2Position } from '@/components/Map'
+import { hasIpcRenderer } from '@/utils'
+
+const mapViewRef = ref()
+const path       = ref()
+const onRead     = () => {
+  const positions = readDataFromTFCard()
+  
+  if (!positions || positions.length < 2) {
+    alert('读取数据出错')
+    return
+  }
+
+  path.value = positions
+}
+const onPlay     = () => mapViewRef.value.play()
+const onClear    = () => path.value.length = 0
+const onDelete   = (count: number) => {
+  if (count <= 0 || !path.value || path.value.length < 2) return
+
+  path.value.splice(0, count)
+}
+
+const readDataFromTFCard = () => {
+  if (!hasIpcRenderer()) {
+    alert('当前浏览器环境不支持轨迹数据读取')
+    return 
+  }
+
+  const { err, data } = window.ipcRenderer.sendSync('GET_DATA')
+  if (err) {
+    alert(err.message)
+    return
+  }
+  
+  const positions = handleData(data)
+  return positions
+}
+
+const handleData = (data: string) => {
+  if (!data) return
+  
+  const protocols = data.split('\r\n')
+  const positions = []
+  for (let i = 0; i < protocols.length; i++) {
+    const protocol = protocols[i];
+    if(isMeetFormat(protocol)) {
+      const items = protocol.split(',')
+
+      const lon = parseFloat((items[8] === 'E' ? '' : '-') + items[7])
+      const lat = parseFloat((items[6] === 'N' ? '' : '-') + items[5])
+
+      positions.push(lonlat2Position(lon, lat))
+    }
+  }
+
+  return positions
+}
+
+const regexp       = /@(V|W),\w{4,6},(\d|-){10},(\d|:){8},A,\d{1,2}\.\d{6},(N|S),\d{1,3}\.\d{6},(E|W),[^*]*\*$/
+const isMeetFormat = (protocol: string) => {
+  if (regexp.test(protocol)) {
+    return true
+  } else {
+    return false
+  }
+}
+</script>
+
+<style scoped lang="less">
+.layout {
+  --hwa-header-height: 60px;
+
+  :deep(.n-layout-header) {
+    z-index: 10;
+    height: var(--hwa-header-height);
+  }
+
+  :deep(.n-layout-content) {
+    padding-top: var(--hwa-header-height);
+  }
+}
+</style>
diff --git a/src/render/app/BDSatellite3DPostureControl/index.ts b/src/render/app/BDSatellite3DPostureControl/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDSatellite3DPostureControl/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDSatellite3DPostureControl/index.vue b/src/render/app/BDSatellite3DPostureControl/index.vue
new file mode 100644
index 0000000..f99e8f5
--- /dev/null
+++ b/src/render/app/BDSatellite3DPostureControl/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="satellite" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="卫星" name="satellite">
+          <SatelliteModelView class="w-h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SatelliteModelView } from '@/views/BDSatellite3DPostureControl/SatelliteModelView'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+</script>
diff --git a/src/render/app/BDSatelliteAttitudeControl/index.ts b/src/render/app/BDSatelliteAttitudeControl/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDSatelliteAttitudeControl/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDSatelliteAttitudeControl/index.vue b/src/render/app/BDSatelliteAttitudeControl/index.vue
new file mode 100644
index 0000000..50b7880
--- /dev/null
+++ b/src/render/app/BDSatelliteAttitudeControl/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <Application>
+    <Layout>
+      <RemoteControlView class="h-full" />
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { RemoteControlView } from '@/views/BDSatelliteAttitudeControl/RemoteControlView'
+</script>
diff --git a/src/render/app/BDSatelliteParameterMonitoringPlatform/index.ts b/src/render/app/BDSatelliteParameterMonitoringPlatform/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDSatelliteParameterMonitoringPlatform/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDSatelliteParameterMonitoringPlatform/index.vue b/src/render/app/BDSatelliteParameterMonitoringPlatform/index.vue
new file mode 100644
index 0000000..e97fcc5
--- /dev/null
+++ b/src/render/app/BDSatelliteParameterMonitoringPlatform/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="monitor" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="监测" name="monitor">
+          <ParameterMonitoringView class="w-h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+import { ParameterMonitoringView } from '@/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView'
+</script>
+
+<style scoped lang="less">
+// 实现pane中的内容水平垂直居中
+.n-tab-pane {
+  display: flex;
+  place-items: center;
+}
+
+.drawer-control-button {
+  position: fixed;
+  right: 80px;
+  bottom: 100px;
+  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px 0px;
+}
+</style>
diff --git a/src/render/app/BDSatelliteTimeConfiguration/index.ts b/src/render/app/BDSatelliteTimeConfiguration/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/BDSatelliteTimeConfiguration/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/BDSatelliteTimeConfiguration/index.vue b/src/render/app/BDSatelliteTimeConfiguration/index.vue
new file mode 100644
index 0000000..3179fa2
--- /dev/null
+++ b/src/render/app/BDSatelliteTimeConfiguration/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space class="h-full" :item-style="itemStyle">
+        <SystemTimingView class="h-full" />
+        <CustomTimingView class="h-full" />
+      </n-space>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SystemTimingView } from '@/views/BDSatelliteTimeConfiguration/SystemTimingView'
+import { CustomTimingView } from '@/views/BDSatelliteTimeConfiguration/CustomTimingView'
+
+
+const itemStyle = {
+  flex: '1 1 0%',
+}
+</script>
diff --git a/src/render/app/ClockConfig/index.ts b/src/render/app/ClockConfig/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/ClockConfig/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/ClockConfig/index.vue b/src/render/app/ClockConfig/index.vue
new file mode 100644
index 0000000..f1dc2e5
--- /dev/null
+++ b/src/render/app/ClockConfig/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="screen_config" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="屏幕" name="screen_config">
+          <ScreenConfigView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="声音检测模块" name="sound_detection_module_config">
+          <SoundDetectionModuleConfigView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="手势识别" name="gesture_recognition_config">
+          <GestureRecognitionConfigView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="动画" name="animation_config">
+          <AnimationConfigView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { ScreenConfigView } from '@/views/ClockConfig/ScreenConfigView'
+import { AnimationConfigView } from '@/views/ClockConfig/AnimationConfigView'
+import { GestureRecognitionConfigView } from '@/views/ClockConfig/GestureRecognitionConfigView'
+import { SoundDetectionModuleConfigView } from '@/views/ClockConfig/SoundDetectionModuleConfigView'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+</script>
diff --git a/src/render/app/DistanceCalculationTool/index.ts b/src/render/app/DistanceCalculationTool/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/DistanceCalculationTool/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/DistanceCalculationTool/index.vue b/src/render/app/DistanceCalculationTool/index.vue
new file mode 100644
index 0000000..acf28c8
--- /dev/null
+++ b/src/render/app/DistanceCalculationTool/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <Application>
+    <Layout>
+      <div class="w-h-full flex result-view-container">
+        <ResultView :start_point="start_point" :end_point="end_point" />
+      </div>
+      <PointInfoInputFormView class="point-info-input-form-view" @submit="onSubmit" @reset="onReset" />
+    </Layout>
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import ResultView from '@/views/DistanceCalculationTool/ResultView.vue'
+import { PointInfoInputFormView } from '@/views/DistanceCalculationTool/PointInfoInputFormView'
+
+const start_point = ref(null)
+const end_point   = ref(null)
+
+const onSubmit = (value) => {
+  if (!value) return
+
+  start_point.value = [value.start_point.lng, value.start_point.lat]
+  end_point.value   = [value.end_point.lng  , value.end_point.lat]
+}
+
+const onReset = () => {
+  start_point.value = null
+  end_point.value   = null
+}
+</script>
+
+<style scoped lang="less">
+.result-view-container {
+  align-items: center;
+  justify-content: center;
+}
+.point-info-input-form-view {
+  position: absolute;
+  top: 10px;
+  left: 15px;
+}
+</style>
diff --git a/src/render/app/ElectronicScreenDesign/index.ts b/src/render/app/ElectronicScreenDesign/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/ElectronicScreenDesign/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/ElectronicScreenDesign/index.vue b/src/render/app/ElectronicScreenDesign/index.vue
new file mode 100644
index 0000000..8b28e1c
--- /dev/null
+++ b/src/render/app/ElectronicScreenDesign/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space vertical justify="space-between" :item-style="itemStyle" class="electronic-screen-design h-full">
+
+        <n-space align="center" :item-style="itemStyle" class="top-container">
+          <ColorPickerView class="color-picker-view" ref="colorPickerViewRef" @change="changeLEDPanelColor" />
+          <ClearButtonView class="clear-button-view" @clear="onClear" />
+        </n-space>
+
+        <LEDPanelView ref="ledPanelViewRef" />
+      </n-space>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NSpace } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import  { LEDPanelView } from '@/views/ElectronicScreenDesign/LEDPanelView'
+import ColorPickerView from '@/views/ElectronicScreenDesign/ColorPickerView.vue'
+import ClearButtonView from '@/views/ElectronicScreenDesign/ClearButtonView.vue'
+
+const itemStyle = {
+  flex: '1 1 50%',
+  textAlign: 'center',
+}
+
+const ledPanelViewRef     = ref()
+const onClear             = () => ledPanelViewRef.value.clear()
+
+const colorPickerViewRef  = ref()
+const changeLEDPanelColor = () => ledPanelViewRef.value.changeColor(colorPickerViewRef.value.$el.value)
+
+onMounted(changeLEDPanelColor)
+</script>
+
+<style scoped lang="less">
+.electronic-screen-design {
+
+  .top-container {
+    width: 100vw;
+    height: 100%;
+    gap: 0 !important;
+
+    .color-picker-view, .clear-button-view {
+      transform: scale(2)
+    }
+  }
+}
+</style>
diff --git a/src/render/app/FontDesign/index.ts b/src/render/app/FontDesign/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/FontDesign/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/FontDesign/index.vue b/src/render/app/FontDesign/index.vue
new file mode 100644
index 0000000..3bc07c6
--- /dev/null
+++ b/src/render/app/FontDesign/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <Application>
+    <Layout>
+      <Tabs default-value="dot_matrix_screen_display" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="点阵显示" name="dot_matrix_screen_display">
+          <DotMatrixScreenDisplayView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="编辑字库" name="edit_font">
+          <EditFontView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { EditFontView } from '@/views/FontDesign/EditFontView'
+import { DotMatrixScreenDisplayView } from '@/views/FontDesign/DotMatrixScreenDisplayView'
+</script>
diff --git a/src/render/app/GeneratingConstellationChart/index.ts b/src/render/app/GeneratingConstellationChart/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/GeneratingConstellationChart/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/GeneratingConstellationChart/index.vue b/src/render/app/GeneratingConstellationChart/index.vue
new file mode 100644
index 0000000..f70c22b
--- /dev/null
+++ b/src/render/app/GeneratingConstellationChart/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <Application>
+    <Layout :siderAttrs="siderAttrs" class="layout">
+      <template #sider>
+        <SatelliteDataFormView @submit="onSubmit" @clear="onClear" />
+      </template>
+      
+      <template #default>
+        <ConstellationChartView ref="constellationChartViewRef" />
+      </template>
+    </Layout>
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref, toRaw, provide } from 'vue'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/RightSider.vue'
+import { SatelliteDataFormView } from '@/views/GeneratingConstellationChart/SatelliteDataFormView'
+import ConstellationChartView from '@/views/GeneratingConstellationChart/ConstellationChartView.vue'
+import { Satellite } from '@/api/satellite/type.d'
+
+const satellites = ref([new Satellite()])
+provide('satellites', satellites)
+
+const constellationChartViewRef = ref()
+const onSubmit = () => constellationChartViewRef.value.update(toRaw(satellites))
+const onClear  = () => constellationChartViewRef.value.clear()
+
+const siderAttrs = { bordered: true }
+</script>
+
+<style scoped lang="less">
+.layout {
+  --hwa-sider-width: 500px;
+
+  :deep(.n-layout-sider) {
+    width: var(--hwa-sider-width) !important;
+    max-width: var(--hwa-sider-width) !important;
+  }
+
+  :deep(.n-layout-content) {
+    margin-right: var(--hwa-sider-width);
+  }
+}
+</style>
diff --git a/src/render/app/GestureRecognition/index.ts b/src/render/app/GestureRecognition/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/GestureRecognition/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/GestureRecognition/index.vue b/src/render/app/GestureRecognition/index.vue
new file mode 100644
index 0000000..6ccf270
--- /dev/null
+++ b/src/render/app/GestureRecognition/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="param_config" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="参数配置" name="param_config">
+          <ParamConfigView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="手势识别" name="gesture_animation">
+          <GestureAnimationView class="mx-auto" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { ParamConfigView } from '@/views/GestureRecognition/ParamConfigView'
+import GestureAnimationView from '@/views/GestureRecognition/GestureAnimationView.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+</script>
+
+<style scoped lang="less">
+.n-tabs {
+  .n-tab-pane:nth-child(3) {
+    display: flex;
+    place-items: center;
+  }
+}
+</style>
diff --git a/src/render/app/NixieTubeConfiguration/index.ts b/src/render/app/NixieTubeConfiguration/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/NixieTubeConfiguration/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/NixieTubeConfiguration/index.vue b/src/render/app/NixieTubeConfiguration/index.vue
new file mode 100644
index 0000000..5394697
--- /dev/null
+++ b/src/render/app/NixieTubeConfiguration/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space justify="space-between" align="center" vertical class="nixie-tube-configuration-view h-full">
+        <NixieTubeSelectView />
+        <NixieTubeControlView />
+        <SendCMDButtonView />
+      </n-space>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from 'vue'
+import { NSpace } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { NixieTubeSelectView } from '@/views/NixieTubeConfiguration/NixieTubeSelectView'
+import { NixieTubeControlView } from '@/views/NixieTubeConfiguration/NixieTubeControlView'
+import SendCMDButtonView from '@/views/NixieTubeConfiguration/SendCMDButtonView.vue'
+
+const FOUR_DIGIT_TUBE_NUM               = 5
+const DIGIT_TUBE_NUM_OF_FOUR_DIGIT_TUBE = 4
+const LED_NUM_OF_DIGIT_TUBE             = 8
+
+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)
+  }
+}
+provide('dataArr', dataArr)
+
+
+const current = ref(0)
+provide('current', current)
+</script>
+
+<style lang="less" scoped>
+.nixie-tube-configuration-view {
+  padding: 5vh;
+
+  :deep(>div:nth-child(2)) {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/render/app/VoltageMonitoring/index.ts b/src/render/app/VoltageMonitoring/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/VoltageMonitoring/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/VoltageMonitoring/index.vue b/src/render/app/VoltageMonitoring/index.vue
new file mode 100644
index 0000000..7b4ed3b
--- /dev/null
+++ b/src/render/app/VoltageMonitoring/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <Application>
+    <Layout>
+      <!-- TODO: 优化Tabs, TabPane组件，tab添加图标 -->
+      <Tabs default-value="monitor" class="h-full">
+        <n-tab-pane display-directive="show:lazy" tab="监测" name="monitor">
+          <MonitorView class="h-full" />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="设备" name="select_device">
+          <SelectDeviceView />
+        </n-tab-pane>
+        <n-tab-pane display-directive="show:lazy" tab="信息" name="message">
+          <SerialPortReceivingMessageView class="h-full" />
+        </n-tab-pane>
+      </Tabs>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { Layout } from '@/layout/default'
+import { Tabs } from '@/components/Tabs'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+import { SerialPortReceivingMessageView } from '@/components/SerialPort'
+import { SelectDeviceView } from '@/views/VoltageMonitoring/SelectDeviceView'
+import { MonitorView } from '@/views/VoltageMonitoring/MonitorView'
+</script>
+
+<style scoped lang="less">
+// 实现pane中的内容水平垂直居中
+.n-tab-pane {
+  display: flex;
+  place-items: center;
+}
+
+.drawer-control-button {
+  position: fixed;
+  right: 80px;
+  bottom: 100px;
+  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px 0px;
+}
+</style>
diff --git a/src/render/app/WirelessCommunicationModuleConfiguration/index.ts b/src/render/app/WirelessCommunicationModuleConfiguration/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/WirelessCommunicationModuleConfiguration/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/WirelessCommunicationModuleConfiguration/index.vue b/src/render/app/WirelessCommunicationModuleConfiguration/index.vue
new file mode 100644
index 0000000..216d66f
--- /dev/null
+++ b/src/render/app/WirelessCommunicationModuleConfiguration/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <Application>
+    <Layout>
+      <n-space align="center" :item-style="itemStyle" class="h-full">
+        <SketchMapView />
+        <ConfigurationParameterFormView class="config-param-form-view" />
+      </n-space>
+    </Layout>
+
+    <SerialPortManagementDrawer />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { SerialPortManagementDrawer } from '@/components/SerialPortManagementDrawer'
+
+import SketchMapView from '@/views/WirelessCommunicationModuleConfiguration/SketchMapView.vue'
+import { ConfigurationParameterFormView } from '@/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView'
+
+const itemStyle = {
+  flex: '1 1 50%',
+  textAlign: 'center',
+}
+</script>
+
+<style scoped lang="less">
+.n-space {
+  gap: 0 !important;
+
+  .config-param-form-view {
+    margin: 0 80px;
+  }
+}
+</style>
diff --git a/src/render/app/index/index.ts b/src/render/app/index/index.ts
new file mode 100644
index 0000000..a907434
--- /dev/null
+++ b/src/render/app/index/index.ts
@@ -0,0 +1 @@
+export { default as App } from './index.vue'
diff --git a/src/render/app/index/index.vue b/src/render/app/index/index.vue
new file mode 100644
index 0000000..53b5226
--- /dev/null
+++ b/src/render/app/index/index.vue
@@ -0,0 +1,65 @@
+<template>
+  <Application>
+    <Layout class="layout">
+
+      <template #header>
+        <HeaderView />
+      </template>
+
+      <template #default>
+        <router-view />
+        <ToolbarView @systemSettings="onSystemSettings" @quickBurning="onQuickBurning" @connectUs="onConnectUs" />
+      </template>
+    </Layout>
+
+    <SystemSettingsModalView ref="systemSettingsModalRef" />
+    <QuickBurningModalView ref="quickBurningModalRef" />
+    <ConnectUsModalView ref="connectUsModalRef" />
+  </Application>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Application } from '@/components/Application'
+import { default as Layout } from '@/layout/absolute/FixHeader.vue'
+import { HeaderView } from '@/views/index/HeaderView'
+import { ToolbarView } from '@/views/index/ToolbarView'
+import { ConnectUsModalView } from '@/views/index/ConnectUsModalView'
+import { QuickBurningModalView } from '@/views/index/QuickBurningModalView'
+import { SystemSettingsModalView } from '@/views/index/SystemSettingsModalView'
+
+const systemSettingsModalRef = ref(null)
+const onSystemSettings       = () => systemSettingsModalRef.value.openModel()
+
+const quickBurningModalRef   = ref(null)
+const onQuickBurning         = () => quickBurningModalRef.value.show()
+
+const connectUsModalRef      = ref(null)
+const onConnectUs            = () => connectUsModalRef.value.show()
+</script>
+
+<style scoped lang="less">
+.layout {
+  --hwa-header-height: 56px;
+
+  --hwa-text-color: rgb(250, 250, 252);
+
+  :deep(> .n-layout-scroll-container) {
+    >.n-layout-header {
+      z-index: 10;
+      background-color: transparent;
+      height: var(--hwa-header-height);
+      padding-top: 8px;
+    }
+
+    >.n-layout-content {
+      .toolbar {
+        position: fixed;
+        top: 50px;
+        right: 24px;
+        z-index: 100;
+      }
+    }
+  }
+}
+</style>