refactor: adjust some styles

src/views/device/detail/components/DeviceTakeOver/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="l-flex">
-    <div class="l-flex__none c-debug u-overflow-y--auto">
+    <div class="l-flex__none c-takeover-debug u-overflow-y--auto">
       <div
         v-for="message in messages"
         :key="message.id"
@@ -387,13 +387,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.c-debug {
+.c-takeover-debug {
   width: 200px;
   padding-right: $spacing;
   margin-right: $spacing;
   color: $black;
   font-size: 14px;
   line-height: 24px;
+  word-break: break-word;
   border-right: 1px solid $gray--light;
 }
 

src/views/device/detail/components/DeviceTakeOver/takeover.js

@@ -95,9 +95,6 @@ export function takeOver (device, { onMessage, onCreated, onClose, debug }) {
 
   const mock = {
     do (event, messageId, payload) {
-      if (!__DEV__) {
-        return
-      }
       this[event](messageId, payload)
     },
     preload (messageId, payload) {
@@ -146,8 +143,11 @@ export function takeOver (device, { onMessage, onCreated, onClose, debug }) {
   const send = (event, paylaod) => {
     const messageId = createMessageId()
     messageMap.set(messageId, paylaod)
-    client.publish(`${prefix}/${event}`, createPayload(messageId, paylaod))
-    mock.do(event, messageId, paylaod)
+    if (__DEV__) {
+      mock.do(event, messageId, paylaod)
+    } else {
+      client.publish(`${prefix}/${event}`, createPayload(messageId, paylaod))
+    }
   }
 
   client.on('error', e => {

src/views/realm/debug/index.vue

@@ -178,6 +178,6 @@ export default {
   color: $black;
   font-size: 14px;
   line-height: 24px;
-  word-break: break-all;
+  word-break: break-word;
 }
 </style>

src/views/realm/debug/simulator/index.vue

@@ -135,6 +135,6 @@ export default {
   color: $black;
   font-size: 14px;
   line-height: 24px;
-  word-break: break-all;
+  word-break: break-word;
 }
 </style>