Skip to content

App Architecture Overview

The app's user interface is constructed using Vue.js components. These components encapsulate specific features, such as navigation, user prompts, and control interfaces. The interaction between components is managed through Vue Router, facilitating a smooth transition between different views.

Vuex plays a pivotal role in maintaining the state of the application. The central store, organized into modules, holds critical information like the robot's connection status, control type, and other relevant data. Mutations and actions in Vuex ensure controlled and predictable state changes, providing a foundation for the app's dynamic behavior.

├─components
│      promptBox.vue
│      rDialog.vue
│      rtcHeader.vue
│      rtcLeftControl.vue
│
├─i18n
│  │  i18n.js
│  │
│  └─locale
│          en.json
│          tw.json
│          zh-CN.json
│
├─mixin
│      Heartbeat.js
│
├─router
│      index.js
│
├─store
│      index.js
│
└─views
    ├─connect
    │      Connect.vue
    │
    ├─controller
    │      Controller.vue
    │
    ├─development
    │      Development.vue
    │
    ├─loading
    │      Loading.vue
    │
    ├─login
    │      Login.vue
    │
    ├─robotStartup
    │      RobotStartup.vue
    │
    ├─setting
    │      Setting.vue
    │
    └─startUp
            StartUp.vue

  • components: Contains Vue components that can be reused across application.

  • promptBox.vue: Vue component for displaying prompt boxes.

  • rDialog.vue: Vue component for displaying dialog boxes.
  • rtcHeader.vue: Vue component for the header of the application.
  • rtcLeftControl.vue: Vue component for the left control panel.

  • i18n: Internationalization (i18n) configuration and translation files.

  • i18n.js: Configuration for i18n.

  • locale: Translation files for different languages.

  • mixin: Contains mixins used in the application.

  • Heartbeat.js: A mixin for handling heartbeat functionality.

  • router : Configuration for the Vue Router.
  • store : Configuration for Vuex (state management).
  • views : Contains Vue components for different views/pages of the application.

  • connect : View for connecting to a device.

  • Connect.vue : The main Vue component for connecting to a device.

  • controller : View for controlling the device.

  • Controller.vue : The main Vue component for controlling the device.

  • development : Development-related view.

  • Development.vue : The main Vue component for development-related tasks.

  • loading : View for loading screens.

  • Loading.vue : The main Vue component for loading screens.

  • login : View for the login screen.

  • Login.vue : The main Vue component for the login screen.

  • robotStartup : View for robot startup tasks.

  • RobotStartup.vue : The main Vue component for robot startup tasks.

  • setting : View for application settings.

  • Setting.vue : The main Vue component for application settings.

  • startUp : View for application startup tasks.

  • StartUp.vue : The main Vue component for application startup tasks.