From 4bf4620a3328c817742b4adfa4b190608bd1b235 Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Sun, 10 Oct 2021 20:54:29 +0800
Subject: [PATCH] chore: major type annotation improvement

we now have auto completion and type checking in all components now
see https://github.com/vuejs/vetur/issues/1707
---
 src/api/mqtt.js                               | 11 +--
 src/components/battery.vue                    |  9 +-
 src/components/card.vue                       |  1 +
 src/components/control.vue                    |  9 +-
 src/components/countdown-button.vue           |  4 +-
 src/components/custom/custom.vue              |  3 +
 src/components/debug.vue                      |  5 +-
 src/components/depot/status.vue               |  4 +
 src/components/drone/map.vue                  | 19 ++--
 src/components/drone/monitor.vue              | 19 +++-
 src/components/drone/status.vue               |  4 +
 src/components/job-file/job-file.vue          |  1 +
 src/components/monitor/monitor.vue            |  5 +
 src/components/monitor/webrtc.vue             |  7 +-
 src/components/monitor/webrtc2-client.js      |  2 +-
 src/components/monitor/webrtc2.vue            |  7 +-
 src/components/monitor/webrtc3-client.js      |  9 ++
 src/components/monitor/webrtc3.vue            |  7 +-
 src/components/monitor/webrtc4-client.js      |  9 ++
 src/components/monitor/webrtc4.vue            |  7 +-
 .../plan-dialog/plan-dialog-item.vue          |  2 +
 src/components/plan-dialog/plan-dialog.vue    |  2 +
 src/components/plan/editable.vue              |  9 +-
 src/components/plan/plan-files.vue            |  6 +-
 src/components/plan/readonly.vue              |  9 +-
 src/components/sd-icon.vue                    |  5 +-
 src/components/settings/node-parameters.vue   | 19 ++--
 src/components/settings/settings-slider.vue   |  7 +-
 src/components/settings/settings.vue          |  7 +-
 src/components/slide-confirm.vue              |  6 ++
 src/components/status/status-meter.vue        |  2 +
 src/components/status/status-notify-item.vue  |  2 +
 src/components/status/status-notify.vue       |  6 +-
 src/components/status/status.vue              |  8 +-
 src/components/weather/alert-badge.vue        |  5 +
 src/components/weather/rain-chart.vue         |  1 +
 src/components/weather/weather.vue            |  3 +
 src/components/weather/wind-chart.vue         |  2 +
 src/components/weather/wind-icon.vue          |  2 +
 src/pages/node/node.vue                       |  9 +-
 src/pages/overview/overview-map.vue           | 37 +++++--
 src/pages/overview/overview-notify.vue        |  8 +-
 src/pages/overview/overview-popover.vue       |  1 +
 src/pages/overview/overview.vue               | 12 +--
 src/pages/panel/aside.vue                     | 23 ++---
 src/pages/panel/header.vue                    | 31 +++---
 src/pages/plan/edit.vue                       |  1 +
 src/pages/plan/plan.vue                       | 13 ++-
 src/pages/plan/view.vue                       | 42 ++++----
 src/sdwc.d.ts                                 | 96 ++++++++++++-------
 src/store/actions.js                          |  1 +
 src/store/modules/plan.js                     |  3 +-
 src/util/plugin-mqtt.js                       |  2 +-
 53 files changed, 333 insertions(+), 191 deletions(-)

diff --git a/src/api/mqtt.js b/src/api/mqtt.js
index 628b6686..42e35cf3 100644
--- a/src/api/mqtt.js
+++ b/src/api/mqtt.js
@@ -33,8 +33,7 @@ export class MqttClient extends EventEmitter2 {
    * - `nodes/:id/msg/{position,battery,weather,...}`
    * - `plans/:id/{term,dialog,running}`
    * @param {string} topic
-   * @typedef {{ entity: 'nodes'|'plans'|string, id: number, category: string, param: string }} TopicInfo
-   * @returns {TopicInfo}
+   * @returns {SDWC.MqttTopicInfo}
    */
   static parseTopic(topic) {
     const parts = topic.split('/');
@@ -150,7 +149,7 @@ export class MqttClient extends EventEmitter2 {
    * @param {number|string} target target node id
    * @param {string} method method name
    * @param {any} arg method argument
-   * @param {SDWC.MqttControlOptions} [options]
+   * @param {SDWC.MqttRpcOptions} [options]
    * @returns {Promise<any>}
    */
   invoke(target, method, arg, options) {
@@ -169,7 +168,7 @@ export class MqttClient extends EventEmitter2 {
    * @param {number|string} target target node id
    * @param {string} method method name
    * @param {any} arg method argument
-   * @param {SDWC.MqttControlOptions} [options]
+   * @param {SDWC.MqttRpcOptions} [options]
    */
   _invoke(target, method, arg, options = {}) {
     const rpcId = this.nextRpcId();
@@ -192,7 +191,7 @@ export class MqttClient extends EventEmitter2 {
   }
 
   /**
-   * @param {TopicInfo} topic
+   * @param {SDWC.MqttTopicInfo} topic
    * @param {string} str
    */
   onNode(topic, str) {
@@ -264,7 +263,7 @@ export class MqttClient extends EventEmitter2 {
   }
 
   /**
-   * @param {TopicInfo} topic
+   * @param {SDWC.MqttTopicInfo} topic
    * @param {string} str
    */
   onPlan(topic, str) {
diff --git a/src/components/battery.vue b/src/components/battery.vue
index f2a03238..d9f95edc 100644
--- a/src/components/battery.vue
+++ b/src/components/battery.vue
@@ -72,18 +72,23 @@ export default {
     }
   },
   computed: {
+    /** @returns {SDWC.NodeBattery} */
     battery() {
       return this.msg.battery;
     },
+    /** @returns {string} */
     current() {
-      const I = ((this.battery.cur || 0) / 1000);
+      const I = (this.battery.cur || 0) / 1000;
       return Math.abs(I) > 1 ? I.toFixed(1) : I.toFixed(2);
     },
+    /** @returns {string} */
     voltage() {
       return (this.battery.vol_cell || '').replace(/\//g, ' / ');
     },
+    /** @returns {string} */
     totalVoltage() {
-      return (this.battery.vol_cell || '').split('/').reduce((a, b) => +b + a, 0) / 1000;
+      const U = (this.battery.vol_cell || '').split('/').reduce((a, b) => +b + a, 0) / 1000;
+      return U.toFixed(3);
     }
   },
   watch: {
diff --git a/src/components/card.vue b/src/components/card.vue
index 70f7b403..cdf4c639 100644
--- a/src/components/card.vue
+++ b/src/components/card.vue
@@ -34,6 +34,7 @@ export default {
     }
   },
   computed: {
+    /** @returns {{ [key: string]: boolean }} */
     className() {
       return {
         'sd-card--dense': this.dense
diff --git a/src/components/control.vue b/src/components/control.vue
index 96e6069d..2c000786 100644
--- a/src/components/control.vue
+++ b/src/components/control.vue
@@ -30,7 +30,7 @@ import Icon from '@/components/sd-icon.vue';
 
 /**
  * custom control group
- * @type {{ icon: string, item: SDWC.ControlButton[] }[]}
+ * @type {ControlButtonGroup[]}
  */
 const Controls = [
   {
@@ -61,15 +61,22 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.status.code !== 0;
     },
+    /** @returns {string} */
     disabledText() {
       return this.$t('control.abnormal');
     },
+    /**
+     * override in derived class
+     * @returns {SDWC.ControlButtonGroup[]}
+     */
     staticControls() {
       return Controls;
     },
+    /** @returns {SDWC.ControlButtonGroup[]} */
     controls() {
       return this.point.params || this.staticControls;
     }
diff --git a/src/components/countdown-button.vue b/src/components/countdown-button.vue
index 945a34e0..0361c5da 100644
--- a/src/components/countdown-button.vue
+++ b/src/components/countdown-button.vue
@@ -1,7 +1,7 @@
 <template>
   <el-button v-bind="$attrs" v-on="$listeners" :disabled="disabled" ref="button">
     <span v-t="text"></span>
-    <span>{{confirmSuffix}}</span>
+    <span v-t="confirmSuffix"></span>
   </el-button>
 </template>
 
@@ -37,9 +37,11 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.mode === 'delay' && this.remain > 0;
     },
+    /** @returns {string} */
     confirmSuffix() {
       return this.remain > 0 ? ` (${this.remain})` : '';
     }
diff --git a/src/components/custom/custom.vue b/src/components/custom/custom.vue
index 982e3e8e..6c9d4415 100644
--- a/src/components/custom/custom.vue
+++ b/src/components/custom/custom.vue
@@ -27,12 +27,15 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     icon() {
       return this.point.params.icon || 'views';
     },
+    /** @returns {string} */
     title() {
       return this.point.params.title || 'custom.title';
     },
+    /** @returns {{ label: string, field: string, unit?: string, value: any }[]} */
     items() {
       const { topic = 'custom', items = [] } = this.point.params;
       const pool = this.msg[topic] || {};
diff --git a/src/components/debug.vue b/src/components/debug.vue
index 89cab2b7..013afada 100644
--- a/src/components/debug.vue
+++ b/src/components/debug.vue
@@ -61,12 +61,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.status.code !== 0;
     },
+    /** @returns {string} */
     disabledText() {
       return this.$t('control.abnormal');
     },
+    /** @returns {{ value: string }[]} */
     commands() {
       return this.point.name.trim().split(' ').filter(c => c !== '').map(value => ({ value }));
     }
@@ -118,7 +121,7 @@ export default {
      * @param {KeyboardEvent} e
      */
     onKeyPress(e) {
-      if (e.keyCode === 13 || e.key === 'Enter') {
+      if (e.key === 'Enter') {
         this.handleSend();
       }
     }
diff --git a/src/components/depot/status.vue b/src/components/depot/status.vue
index e9bef047..fb0bbe07 100644
--- a/src/components/depot/status.vue
+++ b/src/components/depot/status.vue
@@ -36,14 +36,17 @@ export default {
   name: 'sd-depot-status',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeMsg>} */
     msg: {
       type: Object,
       required: true
@@ -61,6 +64,7 @@ export default {
     }
   }),
   computed: {
+    /** @returns {SDWC.StatusItem[]} */
     items() {
       const s = this.msg.depot_status;
       const c = this.msg.charger;
diff --git a/src/components/drone/map.vue b/src/components/drone/map.vue
index 5606a39d..d521449e 100644
--- a/src/components/drone/map.vue
+++ b/src/components/drone/map.vue
@@ -67,7 +67,7 @@
 
 <script>
 import get from 'lodash/get';
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import { PlaceStyle } from '@/constants/drone-place-style';
 import NodeMap from '@/components/map/map.vue';
@@ -139,20 +139,23 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'preference'
-    ]),
-    ...mapGetters([
-      'depots'
-    ]),
+    /** @returns {SDWC.Preference} */
+    preference() { return this.$store.state.preference; },
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; },
+    /** @returns {SDWC.Node[]} */
+    depots() { return this.$store.getters.depots; },
+    /** @returns {SDWC.DroneMapControl[]} */
     commands() {
       if (!this.point.params) return DefaultCommands;
       return get(this.point, 'params.common.move', DefaultCommands);
     },
+    /** @returns {{ [key: string]: SDWC.DronePlaceStyle }} */
     placeStyle() {
       if (!this.point.params) return PlaceStyle;
       return Object.assign({}, PlaceStyle, get(this.point, 'params.common.place', {}));
     },
+    /** @return {SDWC.MapPolyline[]} */
     polylines() {
       const polylines = [];
       /** @type {{ position: SDWC.NodePosition[], place: SDWC.NodePlaces }} */
@@ -220,6 +223,7 @@ export default {
       }
       return markers;
     },
+    /** @returns {SDWC.MarkerPlace[]} */
     placeMarkers() {
       const { place } = this.msg;
       const markers = [];
@@ -235,6 +239,7 @@ export default {
       }
       return markers;
     },
+    /** @returns {SDWC.Marker[]} */
     markers() {
       return [
         ...this.waypoints.map(w => w.markers).flat(),
diff --git a/src/components/drone/monitor.vue b/src/components/drone/monitor.vue
index e2e7f72c..e23371bd 100644
--- a/src/components/drone/monitor.vue
+++ b/src/components/drone/monitor.vue
@@ -179,14 +179,17 @@ export default {
   name: 'sd-drone-mointor',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeMsg>} */
     msg: {
       type: Object,
       required: true
@@ -241,12 +244,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     allDisabled() {
       return this.status.code !== 0;
     },
+    /** @returns {{ source: string, label: string }[]} */
     videoSources() {
       return get(this.point.params, 'source', []);
     },
+    /** @returns {{ type: string, method: string, label: string }[]} */
     availableControls() {
       const controls = [];
       for (const [k, v] of Object.entries(get(this.point.params, 'control', {}))) {
@@ -255,27 +261,34 @@ export default {
       }
       return controls;
     },
+    /** @returns {boolean} */
     hasClickControl() {
       // single click `pin_screen`
       return has(this.point.params, 'control.click');
     },
+    /** @returns {boolean} */
     hasTargetControl() {
       // double click `gimbal_target`
       return has(this.point.params, 'control.target');
     },
+    /** @returns {boolean} */
     hasGimbalControl() {
       return has(this.point.params, 'control.gimbal');
     },
+    /** @returns {boolean} */
     hasZoomControl() {
       return has(this.point.params, 'control.zoom');
     },
+    /** @returns {boolean} */
     hasStickControl() {
       return has(this.point.params, 'control.stick');
     },
+    /** @returns {{ method: string, label: string }[]} */
     availableActions() {
       const enabled = this.msg.action_enabled;
       return get(this.point.params, 'action', []).filter(a => enabled.includes(a.method));
     },
+    /** @returns {{ viewBox: string, elements: { type: string, text: string }[] }} */
     overlaySVG() {
       const { width = 1280, height = 720, shapes = [] } = this.msg.overlay_screen;
       const elements = [];
@@ -295,9 +308,11 @@ export default {
       }
       return { viewBox: `0 0 ${width} ${height}`, elements };
     },
+    /** @returns {boolean} */
     gimbalDisabled() {
       return this.allDisabled || !this.control.enabled.gimbal;
     },
+    /** @returns {{ [key: string]: boolean }} */
     wrapperClass() {
       return {
         'monitor-drone-control--moving': this.gesture.moving
@@ -306,7 +321,7 @@ export default {
   },
   methods: {
     /**
-     * @param {'visual' | 'thermal' | 'msx'} source
+     * @param {string} source
      * @param {MouseEvent} event
      */
     async handleVideoSource(source, event) {
@@ -594,7 +609,7 @@ export default {
           const [min, max] = get(this, 'point.params.control.zoom.zoom', [1, 5.5]);
           if (value > max) {
             value = max;
-          } else if (value < min){
+          } else if (value < min) {
             value = min;
           }
           if (Math.abs(value - this.gimbal.zoom) < 1e-2) {
diff --git a/src/components/drone/status.vue b/src/components/drone/status.vue
index 9e2ce467..e836a7c4 100644
--- a/src/components/drone/status.vue
+++ b/src/components/drone/status.vue
@@ -28,14 +28,17 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     flightStatus() {
       const key = `air.status.${this.msg.drone_status.status}`;
       return this.$te(key) ? this.$t(key) : this.msg.drone_status.status;
     },
+    /** @returns {string} */
     flightMode() {
       const key = `air.mode.${this.msg.drone_status.mode}`;
       return this.$t(this.$te(key) ? key : 'air.mode.unknown');
     },
+    /** @returns {string} */
     flightTime() {
       const { time } = this.msg.drone_status;
       /** @type {Intl.DateTimeFormatOptions} */
@@ -48,6 +51,7 @@ export default {
       if (time >= 3600) options.hour = 'numeric';
       return new Date(time * 1000).toLocaleString('en-US', options);
     },
+    /** @returns {SDWC.StatusItem[]} */
     items() {
       const s = this.msg.drone_status;
       return [
diff --git a/src/components/job-file/job-file.vue b/src/components/job-file/job-file.vue
index 7478f1c2..0e4c6d9e 100644
--- a/src/components/job-file/job-file.vue
+++ b/src/components/job-file/job-file.vue
@@ -43,6 +43,7 @@ export default {
     }
   }),
   computed: {
+    /** @returns {string} */
     compo() {
       if (typeof this.file.filename !== 'string') return null;
       const filename = this.file.filename.toLowerCase();
diff --git a/src/components/monitor/monitor.vue b/src/components/monitor/monitor.vue
index 427103e8..22b1c194 100644
--- a/src/components/monitor/monitor.vue
+++ b/src/components/monitor/monitor.vue
@@ -53,10 +53,12 @@ export default {
   name: 'sd-node-monitor',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
@@ -68,14 +70,17 @@ export default {
     };
   },
   computed: {
+    /** @returns {{ [key: string]: boolean }} */
     monitorClassName() {
       return {
         'monitor--full': this.fullscreen
       };
     },
+    /** @returns {keyof CompoName} */
     compoName() {
       return CompoName[this.point.point_type_name] || '';
     },
+    /** @returns {boolean} */
     streamAvailable() {
       if (this.status.code !== 0) return false;
       if (this.point.point_type_name === 'livestream_webrtc2') {
diff --git a/src/components/monitor/webrtc.vue b/src/components/monitor/webrtc.vue
index 2d866d30..1c748778 100644
--- a/src/components/monitor/webrtc.vue
+++ b/src/components/monitor/webrtc.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import { reloadVideo, WebSocketSignalingChannel } from './webrtc-client';
 
 export default {
@@ -37,9 +35,8 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'config'
-    ])
+    /** @returns {SDWC.Config} */
+    config() { return this.$store.state.config; }
   },
   methods: {
     createChannel() {
diff --git a/src/components/monitor/webrtc2-client.js b/src/components/monitor/webrtc2-client.js
index 470c3f54..65719dd2 100644
--- a/src/components/monitor/webrtc2-client.js
+++ b/src/components/monitor/webrtc2-client.js
@@ -51,7 +51,7 @@ export class WebRTC2Client extends EventEmitter2 {
   }
 
   /**
-   * @param {Partial<RTCSessionDescription>} remoteSdp
+   * @param {RTCSessionDescriptionInit} remoteSdp
    */
   startSession(remoteSdp) {
     return this.pc.setRemoteDescription(remoteSdp);
diff --git a/src/components/monitor/webrtc2.vue b/src/components/monitor/webrtc2.vue
index 7702b155..ee1a27e6 100644
--- a/src/components/monitor/webrtc2.vue
+++ b/src/components/monitor/webrtc2.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import { reloadVideo } from './webrtc-client';
 import { WebRTC2Client } from './webrtc2-client';
 
@@ -38,9 +36,8 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'config'
-    ])
+    /** @returns {SDWC.Config} */
+    config() { return this.$store.state.config; }
   },
   methods: {
     createClient() {
diff --git a/src/components/monitor/webrtc3-client.js b/src/components/monitor/webrtc3-client.js
index 45ded998..e0fbd460 100644
--- a/src/components/monitor/webrtc3-client.js
+++ b/src/components/monitor/webrtc3-client.js
@@ -23,6 +23,9 @@ export class WebRTC3Client extends EventEmitter2 {
     pc.addEventListener('track', e => this.onTrack(e));
   }
 
+  /**
+   * @param {any} data
+   */
   cableSend(data) {
     trace('cableSend', data);
     this.cable.send(typeof data === 'string' ? data : JSON.stringify(data));
@@ -52,6 +55,9 @@ export class WebRTC3Client extends EventEmitter2 {
     } catch (e) { /* noop */ }
   }
 
+  /**
+   * @param {RTCSessionDescriptionInit} sdp
+   */
   async onRemoteSdp(sdp) {
     trace('onRemoteSdp', sdp);
     this.pc.addTransceiver('video', { direction: 'recvonly' });
@@ -61,6 +67,9 @@ export class WebRTC3Client extends EventEmitter2 {
     this.cableSend({ sdp: answer });
   }
 
+  /**
+   * @param {RTCIceCandidateInit} ice
+   */
   onRemoteIceCandidate(ice) {
     trace('onRemoteCandidate', ice);
     this.pc.addIceCandidate(ice);
diff --git a/src/components/monitor/webrtc3.vue b/src/components/monitor/webrtc3.vue
index 9298b299..1f3a059c 100644
--- a/src/components/monitor/webrtc3.vue
+++ b/src/components/monitor/webrtc3.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import { reloadVideo } from './webrtc-client';
 import { WebRTC3Client } from './webrtc3-client';
 
@@ -38,9 +36,8 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'config'
-    ])
+    /** @returns {SDWC.Config} */
+    config() { return this.$store.state.config; }
   },
   methods: {
     async createClient() {
diff --git a/src/components/monitor/webrtc4-client.js b/src/components/monitor/webrtc4-client.js
index e43b975b..2ccf5182 100644
--- a/src/components/monitor/webrtc4-client.js
+++ b/src/components/monitor/webrtc4-client.js
@@ -59,6 +59,9 @@ export class WebRTC4Client extends EventEmitter2 {
     });
   }
 
+  /**
+   * @param {CloseEvent} e
+   */
   onSignalClose(e) {
     trace('onSignalClose', e);
   }
@@ -84,6 +87,9 @@ export class WebRTC4Client extends EventEmitter2 {
     }
   }
 
+  /**
+   * @param {RTCSessionDescriptionInit} sdp
+   */
   async onRemoteSdp(sdp) {
     trace('onRemoteSdp', sdp);
     await this.pc.setRemoteDescription(sdp);
@@ -92,6 +98,9 @@ export class WebRTC4Client extends EventEmitter2 {
     this.candidates = [];
   }
 
+  /**
+   * @param {RTCIceCandidateInit} candidate
+   */
   onRemoteIceCandidate(candidate) {
     trace('onRemoteCandidate', candidate);
     if (this.pcAnswered) {
diff --git a/src/components/monitor/webrtc4.vue b/src/components/monitor/webrtc4.vue
index 9a2b6a18..57aaa345 100644
--- a/src/components/monitor/webrtc4.vue
+++ b/src/components/monitor/webrtc4.vue
@@ -18,8 +18,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import { reloadVideo } from './webrtc-client';
 import { WebRTC4Client } from './webrtc4-client';
 
@@ -38,9 +36,8 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'config'
-    ])
+    /** @returns {SDWC.Config} */
+    config() { return this.$store.state.config; }
   },
   methods: {
     async createClient() {
diff --git a/src/components/plan-dialog/plan-dialog-item.vue b/src/components/plan-dialog/plan-dialog-item.vue
index c4a234be..49689a2a 100644
--- a/src/components/plan-dialog/plan-dialog-item.vue
+++ b/src/components/plan-dialog/plan-dialog-item.vue
@@ -36,9 +36,11 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     levelClass() {
       return LevelColorClass[this.level] || '';
     },
+    /** @returns {string} */
     iconClass() {
       return PlanDialogLevelClass[this.level] || PlanDialogLevelClass.unknown;
     }
diff --git a/src/components/plan-dialog/plan-dialog.vue b/src/components/plan-dialog/plan-dialog.vue
index a574c625..2f565c97 100644
--- a/src/components/plan-dialog/plan-dialog.vue
+++ b/src/components/plan-dialog/plan-dialog.vue
@@ -47,10 +47,12 @@ export default {
     visible: false
   }),
   computed: {
+    /** @returns {SDWC.PlanDialogContent} */
     form() {
       const d = this.$store.state.plan.dialog.find(d => d.id === this.planId) || {};
       return d.dialog || {};
     },
+    /** @returns {string} */
     alertType() {
       if (!this.form.level) return 'info';
       if (this.form.level === 'danger') return 'error';
diff --git a/src/components/plan/editable.vue b/src/components/plan/editable.vue
index 1c642fd9..5d9907b3 100644
--- a/src/components/plan/editable.vue
+++ b/src/components/plan/editable.vue
@@ -27,8 +27,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-
 import { parseWaypoints } from '@/util/waypoint-parser';
 
 import Icon from '@/components/sd-icon.vue';
@@ -37,6 +35,7 @@ import PlanFiles from './plan-files.vue';
 export default {
   name: 'sd-plan-editable',
   props: {
+    /** @type {Vue.PropOptions<SDWC.PlanInfo>} */
     initial: {
       type: Object,
       required: true
@@ -44,13 +43,13 @@ export default {
   },
   data() {
     return {
+      /** @type {SDWC.PlanInfo} */
       plan: Object.assign({}, this.initial)
     };
   },
   computed: {
-    ...mapGetters([
-      'drones'
-    ]),
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; }
   },
   methods: {
     getPlan() {
diff --git a/src/components/plan/plan-files.vue b/src/components/plan/plan-files.vue
index 4afca5ab..c19c3391 100644
--- a/src/components/plan/plan-files.vue
+++ b/src/components/plan/plan-files.vue
@@ -65,6 +65,7 @@ import { uploadFile } from '@/api/super-dock';
 import { mapActions } from 'vuex';
 
 /**
+ * @typedef {{ key: string, label: string, hidden: boolean }} FileField
  * @typedef {{ icon: string, text: string, type?: string, disabled?: boolean }} FileButton
  * @typedef {{ key: string, blobId: string, filename: string, button: FileButton }} FileEntry
  */
@@ -100,11 +101,13 @@ export default {
   }),
   computed: {
     /**
-     * `Set<string>` of every key in `fileEntries`
+     * every key in `fileEntries`
+     * @returns {Set<string>}
      */
     occupiedKeys() {
       return new Set(this.fileEntries.map(e => e.key));
     },
+    /** @returns {boolean} */
     canAdd() {
       if (this.readonly) {
         return false;
@@ -120,6 +123,7 @@ export default {
     },
     /**
      * file field name dropdown options
+     * @returns {FileField[]}
      */
     fields() {
       const fields = [];
diff --git a/src/components/plan/readonly.vue b/src/components/plan/readonly.vue
index 86eba94d..b057266d 100644
--- a/src/components/plan/readonly.vue
+++ b/src/components/plan/readonly.vue
@@ -26,23 +26,22 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-
 import Icon from '@/components/sd-icon.vue';
 import PlanFiles from './plan-files.vue';
 
 export default {
   name: 'sd-plan-readonly',
   props: {
+    /** @type {Vue.PropOptions<SDWC.PlanInfo>} */
     plan: {
       type: Object,
       required: true
     }
   },
   computed: {
-    ...mapGetters([
-      'drones'
-    ]),
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; },
+    /** @returns {string} */
     droneName() {
       const drone = this.drones.find(d => d.info.id === this.plan.node_id);
       if (drone) return drone.info.name;
diff --git a/src/components/sd-icon.vue b/src/components/sd-icon.vue
index 6715c511..76f409b2 100644
--- a/src/components/sd-icon.vue
+++ b/src/components/sd-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <img class="el-icon-__custom" :src="imgSrc" :width="size" :height="size">
+  <img class="el-icon-__custom" :src="src" :width="size" :height="size">
 </template>
 
 <script>
@@ -17,7 +17,8 @@ export default {
     }
   },
   computed: {
-    imgSrc() {
+    /** @returns {string} */
+    src() {
       return `/assets/icons/${this.value}.svg`;
     }
   }
diff --git a/src/components/settings/node-parameters.vue b/src/components/settings/node-parameters.vue
index df940d72..ecc0462e 100644
--- a/src/components/settings/node-parameters.vue
+++ b/src/components/settings/node-parameters.vue
@@ -19,7 +19,7 @@
       <el-form label-position="left" label-width="100px" size="small">
         <el-form-item v-for="(item, key) of items" :key="key" :label="$t(item.label)">
           <component
-            :is="Compo[item.type]"
+            :is="item.type"
             :disabled="pending[key]"
             :value="item.value"
             v-bind="item"
@@ -48,6 +48,7 @@ const Compo = {
 export default {
   name: 'sd-node-parameters',
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
@@ -66,12 +67,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.statusCode !== 0 || this.fetching;
     },
+    /** @returns {string} */
     disabledIcon() {
       return this.statusCode === 0 ? null : 'el-icon-warning-outline';
     },
+    /** @returns {string} */
     disabledText() {
       return this.statusCode === 0 ? null : this.$t('control.abnormal');
     }
@@ -90,24 +94,24 @@ export default {
         val.value = params[key];
         switch (val.type) {
           case 'enum':
-            val.type = 'radio';
+            val.type = Compo.radio;
             val.values = val.type_param;
             break;
           case 'string':
-            val.type = 'input';
+            val.type = Compo.input;
             break;
           case 'float':
             val.value = Number.parseFloat(val.value) || 0;
             if (Array.isArray(val.type_param)) {
-              val.type = 'slider';
+              val.type = Compo.slider;
               val.range = val.type_param;
               val.step = 1;
             } else {
-              val.type = 'input';
+              val.type = Compo.input;
             }
             break;
           case 'bool':
-            val.type = 'switch';
+            val.type = Compo.switch;
             break;
         }
       }
@@ -149,9 +153,6 @@ export default {
       this.items = [];
     }
   },
-  created() {
-    this.Compo = Compo;
-  },
   components: {
     [Radio.name]: Radio,
     [Input.name]: Input,
diff --git a/src/components/settings/settings-slider.vue b/src/components/settings/settings-slider.vue
index 9e2c3b62..0e6b0b82 100644
--- a/src/components/settings/settings-slider.vue
+++ b/src/components/settings/settings-slider.vue
@@ -8,7 +8,7 @@
     :marks="marks"
     :show-input="true"
     :show-input-controls="false"
-    :input-size="elFormItem.elFormItemSize"
+    :input-size="size"
     v-model="model"
     @change="handleChange"
   ></el-slider>
@@ -48,8 +48,13 @@ export default {
     }
   },
   computed: {
+    /** @returns {{ [key: number]: string }} */
     marks() {
       return Object.fromEntries(this.range.map(v => [v, `${v}`]));
+    },
+    /** @returns {string} */
+    size() {
+      return this.elFormItem.elFormItemSize || 'small';
     }
   },
   methods: {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 2af21ac8..60849c27 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -11,9 +11,8 @@
           <el-divider v-if="groups.length > 1" content-position="left">{{ group.name }}</el-divider>
           <el-form-item v-for="item in group.item" :key="item.field" :label="$t(item.label)">
             <component
-              :is="ComponentName[item.type]"
+              :is="item.type"
               :disabled="pending[group.name][item.label]"
-              :value="item.value"
               v-bind="item"
               @change="handleChange(group, item, $event)"
             ></component>
@@ -63,12 +62,15 @@ export default {
     };
   },
   computed: {
+    /** @returns {boolean} */
     disabled() {
       return this.status.code !== 0;
     },
+    /** @returns {string} */
     disabledText() {
       return this.$t('control.abnormal');
     },
+    /** @returns {SDWC.SettingsGroup[]} */
     groups() {
       return this.point.params.map(group => {
         const pool = this.msg[group.topic] || {};
@@ -77,6 +79,7 @@ export default {
           method: group.method,
           item: group.item.map(item => ({
             ...item,
+            type: ComponentName[item.type],
             value: get(pool, item.field)
           }))
         };
diff --git a/src/components/slide-confirm.vue b/src/components/slide-confirm.vue
index 84c33b64..ec529340 100644
--- a/src/components/slide-confirm.vue
+++ b/src/components/slide-confirm.vue
@@ -45,17 +45,21 @@ export default {
     };
   },
   computed: {
+    /** @returns {{ [key: string]: boolean }} */
     containerClass() {
       return {
         'sd-slide-confirm--completed': this.completed
       };
     },
+    /** @returns {{ [key: string]: boolean }} */
     containerStyle() {
       return { width: `${this.width}px` };
     },
+    /** @returns {{ [key: string]: boolean }} */
     textStyle() {
       return { visibility: this.position ? 'hidden' : 'visible' };
     },
+    /** @returns {Partial<import('element-ui').Button>} */
     buttonAttrs() {
       return {
         ...this.$attrs,
@@ -63,6 +67,7 @@ export default {
         icon: this.completed ? 'el-icon-check' : this.$attrs.icon || 'el-icon-arrow-right'
       };
     },
+    /** @returns {{ [key: string]: boolean }} */
     buttonStyle() {
       if (this.completed) return { marginLeft: `${this.completedPosition}px` };
       if (!this.dragable) return {};
@@ -71,6 +76,7 @@ export default {
         transitionProperty: 'background-color',
       };
     },
+    /** @returns {number} */
     completedPosition() {
       return this.width - this.buttonWidth;
     }
diff --git a/src/components/status/status-meter.vue b/src/components/status/status-meter.vue
index 28957fc6..fde4350a 100644
--- a/src/components/status/status-meter.vue
+++ b/src/components/status/status-meter.vue
@@ -36,6 +36,7 @@ import Icon from '@/components/sd-icon.vue';
 export default {
   name: 'sd-status-meter',
   props: {
+    /** @type {Vue.PropOptions<SDWC.StatusItem[]>} */
     items: {
       type: Array,
       required: true
@@ -48,6 +49,7 @@ export default {
     }
   }),
   computed: {
+    /** @returns {string} */
     lineStyle() {
       const l = this.items.length;
       return l === 8 ? '' : `--status-count:${l}`;
diff --git a/src/components/status/status-notify-item.vue b/src/components/status/status-notify-item.vue
index 10e5a296..985531a6 100644
--- a/src/components/status/status-notify-item.vue
+++ b/src/components/status/status-notify-item.vue
@@ -19,9 +19,11 @@ export default {
     }
   },
   computed: {
+    /** @returns {boolean} */
     hasLevel() {
       return typeof this.notification.level === 'number';
     },
+    /** @returns {{ name: string, class: string }} */
     level() {
       return NodeNotificationLevels[this.notification.level] || {};
     }
diff --git a/src/components/status/status-notify.vue b/src/components/status/status-notify.vue
index 586693c3..e9fe47d4 100644
--- a/src/components/status/status-notify.vue
+++ b/src/components/status/status-notify.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
 import NotifyItem from './status-notify-item.vue';
 
@@ -68,7 +68,9 @@ export default {
     };
   },
   computed: {
-    ...mapState(['preference']),
+    /** @returns {SDWC.Preference} */
+    preference() { return this.$store.state.preference; },
+    /** @returns {string} */
     popup() {
       if (!this.canPopup) return false;
       return !this.preference.notifyNoPopup.includes(this.nodeId);
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b087f4f4..e0bf3107 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -15,7 +15,7 @@
             icon="el-icon-s-tools"
             class="status__parameters"
             :disabled="statusCode !== 0"
-            @click="$refs.parameters.open()"
+            @click="handleParametersClick"
           ></el-button>
         </el-tooltip>
         <sd-node-parameters ref="parameters" :point="parameterPoint" :statusCode="statusCode"></sd-node-parameters>
@@ -56,6 +56,7 @@ export default {
     }
   },
   computed: {
+    /** @returns {SDWC.NodePoint} */
     parameterPoint() {
       const node = this.$store.state.node.find(n => n.info.id === this.nodeId);
       if (!node) return null;
@@ -63,6 +64,11 @@ export default {
       return point;
     }
   },
+  methods: {
+    handleParametersClick() {
+      this.$refs.parameters.open();
+    }
+  },
   components: {
     [Meter.name]: Meter,
     [Notify.name]: Notify,
diff --git a/src/components/weather/alert-badge.vue b/src/components/weather/alert-badge.vue
index a6d0c657..6d4c1bb1 100644
--- a/src/components/weather/alert-badge.vue
+++ b/src/components/weather/alert-badge.vue
@@ -24,6 +24,10 @@ const AlertLevel = {
   'Red': 'red',
 };
 
+/**
+ * @typedef {{ level: string, type: string, title: string, text: string }} AlertItem
+ */
+
 export default {
   name: 'sd-weather-alert',
   props: {
@@ -32,6 +36,7 @@ export default {
     }
   },
   computed: {
+    /** @returns {AlertItem[]} */
     alerts() {
       const alerts = {};
       for (const a of this.alert) {
diff --git a/src/components/weather/rain-chart.vue b/src/components/weather/rain-chart.vue
index 154efa29..4959a43c 100644
--- a/src/components/weather/rain-chart.vue
+++ b/src/components/weather/rain-chart.vue
@@ -13,6 +13,7 @@ import { h, hs } from '@/util/create-element';
 export default {
   name: 'sd-weather-rain',
   props: {
+    /** @type {Vue.PropOptions<number[]>} */
     data: {
       type: Array,
       default: () => []
diff --git a/src/components/weather/weather.vue b/src/components/weather/weather.vue
index 91c10cde..a5e7f251 100644
--- a/src/components/weather/weather.vue
+++ b/src/components/weather/weather.vue
@@ -59,14 +59,17 @@ export default {
   name: 'sd-node-weather',
   inheritAttrs: false,
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeMsg>} */
     msg: {
       type: Object,
       required: true
diff --git a/src/components/weather/wind-chart.vue b/src/components/weather/wind-chart.vue
index 610056ec..9bf7df1c 100644
--- a/src/components/weather/wind-chart.vue
+++ b/src/components/weather/wind-chart.vue
@@ -13,10 +13,12 @@ import { h, hs } from '@/util/create-element';
 export default {
   name: 'sd-weather-wind',
   props: {
+    /** @type {Vue.PropOptions<SDWC.NodePoint>} */
     point: {
       type: Object,
       required: true
     },
+    /** @type {Vue.PropOptions<SDWC.NodeConnectionStatus>} */
     status: {
       type: Object,
       required: true
diff --git a/src/components/weather/wind-icon.vue b/src/components/weather/wind-icon.vue
index 15df7c7a..e9856bca 100644
--- a/src/components/weather/wind-icon.vue
+++ b/src/components/weather/wind-icon.vue
@@ -60,9 +60,11 @@ export default {
     }
   },
   computed: {
+    /** @returns {string} */
     transform() {
       return `translate(20 5)\nrotate(${this.direction} 20 35)`;
     },
+    /** @returns {number[]} */
     barb() {
       const barb = [];
       let remain = Math.round(this.speed) || 0;
diff --git a/src/pages/node/node.vue b/src/pages/node/node.vue
index 36f595d9..4998e7ae 100644
--- a/src/pages/node/node.vue
+++ b/src/pages/node/node.vue
@@ -5,8 +5,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import Depot from '@/components/depot/depot.vue';
 import Drone from '@/components/drone/drone.vue';
 
@@ -24,12 +22,11 @@ export default {
     }
   },
   computed: {
-    ...mapState([
-      'node'
-    ]),
+    /** @returns {SDWC.Node} */
     selectedNode() {
-      return this.node.find(node => node.info.id === this.id);
+      return this.$store.state.node.find(node => node.info.id === this.id);
     },
+    /** @returns {string} */
     componentName() {
       return ComponentName[this.selectedNode.info.type_name];
     }
diff --git a/src/pages/overview/overview-map.vue b/src/pages/overview/overview-map.vue
index 585ad6de..351fea35 100644
--- a/src/pages/overview/overview-map.vue
+++ b/src/pages/overview/overview-map.vue
@@ -39,7 +39,7 @@
 
 <script>
 import get from 'lodash/get';
-import { mapState, mapActions, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
 
 import { PlaceStyle } from '@/constants/drone-place-style';
 import SdMap from '@/components/map/map.vue';
@@ -59,14 +59,17 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      'node',
-      'preference'
-    ]),
-    ...mapGetters([
-      'depots',
-      'drones'
-    ]),
+    /** @returns {SDWC.Node[]} */
+    node() { return this.$store.state.node; },
+    /** @returns {SDWC.Preference} */
+    preference() { return this.$store.state.preference; },
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; },
+    /** @returns {SDWC.Node[]} */
+    depots() { return this.$store.getters.depots; },
+    /**
+     * @returns {{ [droneId: number]: { [placeType: string]: SDWC.DronePlaceStyle }}}
+     */
     dronePlaceStyle() {
       const style = {};
       for (const d of this.drones) {
@@ -75,6 +78,9 @@ export default {
       }
       return style;
     },
+    /**
+     * @returns {SDWC.MapPolyline[]}
+     */
     polylines() {
       const polylines = [];
       for (const d of this.drones) {
@@ -96,6 +102,9 @@ export default {
       }
       return polylines;
     },
+    /**
+     * @returns {SDWC.MarkerDrone[]}
+     */
     droneMarkers() {
       const markers = [];
       for (let d of this.drones) {
@@ -112,6 +121,9 @@ export default {
       }
       return markers;
     },
+    /**
+     * @returns {SDWC.MarkerDepot[]}
+     */
     depotMarkers() {
       const markers = [];
       for (const d of this.depots) {
@@ -130,6 +142,9 @@ export default {
       }
       return markers;
     },
+    /**
+     * @returns {SDWC.MarkerPlace[]}
+     */
     placeMarkers() {
       const markers = [];
       for (const d of this.drones) {
@@ -150,9 +165,13 @@ export default {
       }
       return markers;
     },
+    /**
+     * @returns {SDWC.MarkerBase[]}
+     */
     markers() {
       return [...this.depotMarkers, ...this.droneMarkers, ...this.placeMarkers];
     },
+    /** @returns {SDWC.Node} */
     selectedNode() {
       if (this.popover.node < 0) return null;
       return this.node.find(n => n.info.id === this.popover.node);
diff --git a/src/pages/overview/overview-notify.vue b/src/pages/overview/overview-notify.vue
index e9178a37..c327a9e7 100644
--- a/src/pages/overview/overview-notify.vue
+++ b/src/pages/overview/overview-notify.vue
@@ -5,16 +5,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import StatusNotify from '@/components/status/status-notify.vue';
 
 export default {
   name: 'sd-overview-notify',
   computed: {
-    ...mapState([
-      'node'
-    ]),
+    /** @returns {SDWC.Node[]} */
+    node() { return this.$store.state.node; },
+    /** @returns {SDWC.NodeNotification[]} */
     notification() {
       const result = [];
       for (const node of this.node) {
diff --git a/src/pages/overview/overview-popover.vue b/src/pages/overview/overview-popover.vue
index 41433662..b7e2e3b5 100644
--- a/src/pages/overview/overview-popover.vue
+++ b/src/pages/overview/overview-popover.vue
@@ -36,6 +36,7 @@ export default {
     };
   },
   computed: {
+    /** @returns {any} */
     json() {
       if (!this.node) return '';
       let val = this.node.msg.overview;
diff --git a/src/pages/overview/overview.vue b/src/pages/overview/overview.vue
index 27f34dff..b3b66233 100644
--- a/src/pages/overview/overview.vue
+++ b/src/pages/overview/overview.vue
@@ -6,9 +6,8 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
-
 import { config } from '@/api/sdwc';
+
 import Card from '@/components/card.vue';
 import OverviewMap from './overview-map.vue';
 import OverviewNotify from './overview-notify.vue';
@@ -20,15 +19,6 @@ export default {
       configLoaded: false
     };
   },
-  computed: {
-    ...mapState([
-      'plan'
-    ]),
-    ...mapGetters([
-      'depots',
-      'drones'
-    ])
-  },
   created() {
     config().then(() => this.configLoaded = true);
   },
diff --git a/src/pages/panel/aside.vue b/src/pages/panel/aside.vue
index 39335d01..dd019149 100644
--- a/src/pages/panel/aside.vue
+++ b/src/pages/panel/aside.vue
@@ -77,7 +77,6 @@
 
 <script>
 import throttle from 'lodash/throttle';
-import { mapState, mapGetters } from 'vuex';
 
 import Icon from '@/components/sd-icon.vue';
 
@@ -89,18 +88,16 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      /** @type { () => SDWC.Config[] } */
-      config: state => state.config,
-      /** @type { () => SDWC.PlanInfo[] } */
-      plans: state => state.plan.info,
-      /** @type { () => SDWC.PlanRunning[] } */
-      running: state => state.plan.running
-    }),
-    ...mapGetters([
-      'drones',
-      'depots'
-    ]),
+    /** @returns {SDWC.Config} */
+    config() { return this.$store.state.config; },
+    /** @returns {SDWC.PlanInfo[]} */
+    plans() { return this.$store.state.plan.info; },
+    /** @returns {SDWC.PlanRunning[]} */
+    running() { return this.$store.state.plan.running; },
+    /** @returns {SDWC.Node[]} */
+    drones() { return this.$store.getters.drones; },
+    /** @returns {SDWC.Node[]} */
+    depots() { return this.$store.getters.depots; },
     /** @returns {string} */
     activeIndex() {
       const { name, params: { id } } = this.$route;
diff --git a/src/pages/panel/header.vue b/src/pages/panel/header.vue
index e73f4ee2..ddea9892 100644
--- a/src/pages/panel/header.vue
+++ b/src/pages/panel/header.vue
@@ -129,7 +129,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import { locales } from '@/i18n';
 
@@ -143,6 +143,8 @@ import { NodeStatusClass } from '@/constants/node-status-class';
 import { MutationTypes as PLAN } from '@/store/modules/plan';
 import { MutationTypes as NOTI } from '@/store/modules/notification';
 
+/** @typedef {{ id: number, prefix: string, icon: string, title: string }} NotifyItem */
+
 export default {
   name: 'sd-header',
   data() {
@@ -157,16 +159,20 @@ export default {
   computed: {
     /** @returns {SDWC.Config} */
     config() { return this.$store.state.config; },
-    ...mapState([
-      'node',
-      'notification',
-      'plan',
-      'preference',
-      'ui',
-      'user'
-    ]),
+    /** @returns {SDWC.Node[]} */
+    node() { return this.$store.state.node; },
+    /** @returns {SDWC.NotificationItem[]} */
+    notification() { return this.$store.state.notification; },
+    /** @returns {SDWC.PlanState} */
+    plan() { return this.$store.state.plan; },
+    /** @returns {SDWC.Preference} */
+    preference() { return this.$store.state.preference; },
+    /** @returns {SDWC.UI} */
+    ui() { return this.$store.state.ui; },
+    /** @returns {SDWC.User} */
+    user() { return this.$store.state.user; },
+    /** @returns {NotifyItem[]} */
     dialog() {
-      /** @type {SDWC.PlanDialog[]} */
       const dialog = this.plan.dialog;
       return dialog.map(d => {
         /** @type {SDWC.PlanInfo} */
@@ -176,8 +182,8 @@ export default {
         return { id: d.id, prefix, icon, title: d.dialog.name };
       });
     },
+    /** @returns {NotifyItem[]} */
     notify() {
-      /** @type {SDWC.NotificationItem[]} */
       const notification = this.notification;
       return notification.map(n => {
         const prefix = `${n.prefix} · ${this.$d(n.time, 'time')}`;
@@ -185,8 +191,8 @@ export default {
         return { id: n.id, prefix, icon, title: n.title };
       });
     },
+    /** @returns {NotifyItem[]} */
     status() {
-      /** @type {SDWC.Node[]} */
       const nodes = this.node;
       return nodes.map(n => {
         const icon = NodeStatusClass[n.status.code];
@@ -201,6 +207,7 @@ export default {
         return { id: n.info.id, prefix, icon, title };
       });
     },
+    /** @returns {{ [key: string]: string }} */
     locales() {
       return locales;
     }
diff --git a/src/pages/plan/edit.vue b/src/pages/plan/edit.vue
index 48f32b4d..15701064 100644
--- a/src/pages/plan/edit.vue
+++ b/src/pages/plan/edit.vue
@@ -30,6 +30,7 @@ import { waypointsToMapProps } from './common';
 export default {
   name: 'sd-plan-edit',
   props: {
+    /** @type {Vue.PropOptions<SDWC.PlanInfo>} */
     initial: {
       type: Object,
       required: true
diff --git a/src/pages/plan/plan.vue b/src/pages/plan/plan.vue
index ef6a7d64..9384dde0 100644
--- a/src/pages/plan/plan.vue
+++ b/src/pages/plan/plan.vue
@@ -5,8 +5,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import Icon from '@/components/sd-icon.vue';
 import Edit from './edit.vue';
 import View from './view.vue';
@@ -20,23 +18,24 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      plans: state => state.plan.info,
-      logs: state => state.plan.log
-    }),
+    /** @returns {SDWC.PlanInfo[]} */
+    plans() { return this.$store.state.plan.info; },
+    /** @returns {SDWC.PlanInfo} */
     plan() {
       return this.plans.find(p => p.id === this.id);
     },
+    /** @returns {string} */
     key() {
       const { name, params: { id } } = this.$route;
       return `${name}-${id}`;
     },
+    /** @returns {{ plan?: SDWC.PlanInfo, initial?: SDWC.PlanInfo }} */
     componentProps() {
       if (!this.plan) {
         return { plan: {}, initial: {} };
       }
       switch (this.$route.name) {
-        case 'plan/view': return { plan: this.plan, log: this.log };
+        case 'plan/view': return { plan: this.plan };
         case 'plan/edit': return { initial: this.plan };
       }
       return {};
diff --git a/src/pages/plan/view.vue b/src/pages/plan/view.vue
index e89afbd2..abef8a19 100644
--- a/src/pages/plan/view.vue
+++ b/src/pages/plan/view.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 import { runPlanJob, getPlanJobs, cancelPlanJob } from '@/api/super-dock';
 
 import Card from '@/components/card.vue';
@@ -101,28 +101,29 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      /**
-       * @param {SDWC.State} state
-       * @returns {SDWC.PlanTermOutput[]}
-       */
-      termOutput(state) {
-        const term = state.plan.term.find(t => t.id === this.plan.id);
-        return term ? term.output : [];
-      },
-      /**
-       * @param {SDWC.State} state
-       * @returns {SDWC.PlanRunningContent}
-       */
-      runningContent(state) {
-        /** @type {SDWC.PlanRunning} */
-        const running = state.plan.running.find(r => r.id === this.plan.id);
-        return running ? running.running : null;
-      }
-    }),
+    /**
+     * @returns {SDWC.PlanTermOutput[]}
+     */
+    termOutput() {
+      /** @type {SDWC.State} */
+      const state = this.$store.state;
+      const term = state.plan.term.find(t => t.id === this.plan.id);
+      return term ? term.output : [];
+    },
+    /**
+     * @returns {SDWC.PlanRunningContent}
+     */
+    runningContent() {
+      /** @type {SDWC.State} */
+      const state = this.$store.state;
+      const running = state.plan.running.find(r => r.id === this.plan.id);
+      return running ? running.running : null;
+    },
+    /** @returns {boolean} */
     isRunning() {
       return this.runningContent !== null;
     },
+    /** @returns {SDWC.PlanInfo} */
     planToShow() {
       if (!this.isRunning) return this.plan;
       return Object.assign({}, this.plan, {
@@ -130,6 +131,7 @@ export default {
         extra: Object.assign({}, this.plan.extra, this.runningContent.extra)
       });
     },
+    /** @returns {SDWC.PlanJob[]} */
     jobsToShow() {
       const { size, current } = this.pagination;
       const end = current * size;
diff --git a/src/sdwc.d.ts b/src/sdwc.d.ts
index b02f54ea..6dd80181 100644
--- a/src/sdwc.d.ts
+++ b/src/sdwc.d.ts
@@ -37,9 +37,7 @@ declare namespace SDWC {
   export interface NodePoint {
     id: number;
     name: string;
-    params: {
-      [key: string]: any;
-    };
+    params: any;
     node_id: number;
     point_type_id: number;
     point_type_name: string;
@@ -207,27 +205,28 @@ declare namespace SDWC {
     level: number;
     msg: string;
   }
+  export interface NodeMsg {
+    weather: NodeWeather;
+    battery: NodeBattery;
+    charger: NodeCharger;
+    depot_status: NodeDepotStatus;
+    drone_status: NodeDroneStatus;
+    gimbal: NodeGimbal;
+    action_enabled: NodeActionEnabled;
+    overlay_screen: NodeOverlayScreen;
+    position: NodePosition[];
+    place: NodePlaces;
+    heatmap: NodeHeatmap;
+    waypoint: NodeWaypoint;
+    notification: NodeNotification[];
+    overview: any;
+  }
   export interface Node {
     info: NodeInfo;
     /** connection status */
     status: NodeConnectionStatus;
     network: NodeNetworkStatus;
-    msg: {
-      weather: NodeWeather;
-      battery: NodeBattery;
-      charger: NodeCharger;
-      depot_status: NodeDepotStatus;
-      drone_status: NodeDroneStatus;
-      gimbal: NodeGimbal;
-      action_enabled: NodeActionEnabled;
-      overlay_screen: NodeOverlayScreen;
-      position: NodePosition[];
-      place: NodePlaces;
-      heatmap: NodeHeatmap;
-      waypoint: NodeWaypoint;
-      notification: NodeNotification[];
-      overview: any;
-    };
+    msg: NodeMsg;
   }
   export type RawNodeMessage = Partial<{
     weather: NodeWeather;
@@ -245,16 +244,6 @@ declare namespace SDWC {
     notification: NodeNotification;
     overview: any;
   }>
-  /**
-   * interface won't work here
-   */
-  export type NodeMessageLegacy = Partial<{
-    [key in 'status' | 'heartbeat']: {
-      [key in 'battery' | 'flight' | 'gps' | 'mount']: {
-        [key: string]: NodeMessageLegacy
-      }
-    }
-  }>
 
   // store/modules/notitication.js
   export interface NotificationItem {
@@ -351,6 +340,12 @@ declare namespace SDWC {
     created_at: string;
     updated_at: string;
   }
+  export interface PlanState {
+    info: PlanInfo[];
+    term: PlanTerm[];
+    dialog: PlanDialog[];
+    running: PlanRunning[]
+  }
 
   // store/modules/preference.js
   export interface Preference {
@@ -380,12 +375,7 @@ declare namespace SDWC {
     config: Config;
     node: Node[];
     notification: NotificationItem[];
-    plan: {
-      info: PlanInfo[];
-      term: PlanTerm[];
-      dialog: PlanDialog[];
-      running: PlanRunning[]
-    }
+    plan: PlanState;
     preference: Preference;
     ui: UI;
     user: User;
@@ -409,6 +399,10 @@ declare namespace SDWC {
     /** display button type. default: `warning` */
     type?: LevelEnum;
   }
+  export interface ControlButtonGroup {
+    icon: string;
+    item: ControlButton[];
+  }
 
   // components/map.vue
   interface MarkerBase {
@@ -463,7 +457,37 @@ declare namespace SDWC {
     layers: string[];
   }
 
-  export interface MqttControlOptions {
+  // components/settings/settings.vue
+  export interface SettingsItem {
+    type: string;
+    label: string;
+    field: string;
+    value?: any;
+  }
+  export interface SettingsGroup {
+    name: string;
+    method: string;
+    topic: string;
+    item: SettingsItem[];
+  }
+
+  // components/status/status-meter.vue
+  export interface StatusItem {
+    icon: string;
+    name?: string;
+    value: string;
+    unit?: string;
+    popover?: string;
+  }
+
+  // MqttClient
+  export interface MqttTopicInfo {
+    entity: 'nodes' | 'plans' | string;
+    id: number;
+    category: string;
+    param: string;
+  }
+  export interface MqttRpcOptions {
     /** send as JSONRPC Notification */
     notification?: boolean;
   }
diff --git a/src/store/actions.js b/src/store/actions.js
index ac50a678..5de53701 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -219,6 +219,7 @@ export function subscribeNodes({ state, commit }) {
           break;
         }
         case 'settings': {
+          /** @type {SDWC.SettingsGroup[]} */
           const params = point.params;
           if (!Array.isArray(params)) break;
           params.forEach(({ topic }) => {
diff --git a/src/store/modules/plan.js b/src/store/modules/plan.js
index b9a27d7c..4f734f7b 100644
--- a/src/store/modules/plan.js
+++ b/src/store/modules/plan.js
@@ -21,8 +21,7 @@ export const MutationTypes = {
 };
 
 /**
- * @typedef {typeof state} State
- * @type {{ [x: string]: (state: State, payload: any) => void }}
+ * @type {{ [x: string]: (state: SDWC.PlanState, payload: any) => void }}
  */
 const mutations = {
   [MutationTypes.ADD_PLAN](state, /** @type {SDWC.PlanInfo} */ payload) {
diff --git a/src/util/plugin-mqtt.js b/src/util/plugin-mqtt.js
index 69257601..af6cb7e2 100644
--- a/src/util/plugin-mqtt.js
+++ b/src/util/plugin-mqtt.js
@@ -15,7 +15,7 @@ const RpcNotifications = new Map();
  * @this {Vue}
  * @param {number} id
  * @param {SDWC.ControlItem} ctl
- * @param {SDWC.MqttControlOptions} options
+ * @param {SDWC.MqttRpcOptions} options
  */
 export async function mqtt(id, { mission, arg = [] }, options = {}) {
   return MqttClient.invoke(id, mission, arg, options);