From 983c78a2f2e62b9a8746abaf4626e58d64fed8c1 Mon Sep 17 00:00:00 2001
From: qishibo <www.qii@qq.com>
Date: Tue, 15 Sep 2020 11:01:27 +0800
Subject: [PATCH 1/2] add binary viewer

---
 src/components/FormatViewer.vue     |  6 +++++-
 src/components/KeyContentString.vue |  3 +++
 src/components/ViewerBinary.vue     | 23 +++++++++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ViewerBinary.vue

diff --git a/src/components/FormatViewer.vue b/src/components/FormatViewer.vue
index ae80ac692..c94dfecac 100644
--- a/src/components/FormatViewer.vue
+++ b/src/components/FormatViewer.vue
@@ -16,6 +16,7 @@
       ref='viewer'
       :is='selectedView'
       :content='content'
+      :contentBuff='contentBuff'
       :textrows='textrows'
       @updateContent="$emit('update:content', $event)">
     </component>
@@ -25,6 +26,7 @@
 <script type="text/javascript">
 import ViewerText from '@/components/ViewerText';
 import ViewerJson from '@/components/ViewerJson';
+import ViewerBinary from '@/components/ViewerBinary';
 import ViewerUnserialize from '@/components/ViewerUnserialize';
 
 export default {
@@ -34,6 +36,7 @@ export default {
       viewers: [
         { value: 'ViewerText', text: 'Text' },
         { value: 'ViewerJson', text: 'Json' },
+        { value: 'ViewerBinary', text: 'Binary' },
         { value: 'ViewerUnserialize', text: 'Unserialize' },
       ],
       selectStyle: {
@@ -41,10 +44,11 @@ export default {
       },
     };
   },
-  components: {ViewerText, ViewerJson, ViewerUnserialize},
+  components: {ViewerText, ViewerJson, ViewerBinary, ViewerUnserialize},
   props: {
     float: {default: 'right'},
     content: {default: ''},
+    contentBuff: {default: () => Buffer.from('')},
     textrows: {default: 6},
     binary: {default: false},
   },
diff --git a/src/components/KeyContentString.vue b/src/components/KeyContentString.vue
index d7af2d8cd..1bce27047 100644
--- a/src/components/KeyContentString.vue
+++ b/src/components/KeyContentString.vue
@@ -5,6 +5,7 @@
     <FormatViewer
       ref='formatViewer'
       :content.sync='content'
+      :contentBuff='contentBuff'
       :binary='binary'
       float='left'
       :textrows=12>
@@ -25,6 +26,7 @@ export default {
   data() {
     return {
       content: '',
+      contentBuff: '',
       binary: false,
     };
   },
@@ -33,6 +35,7 @@ export default {
   methods: {
     initShow() {
       this.client.getBuffer(this.redisKey).then((reply) => {
+        this.contentBuff = reply;
         this.content = this.$util.bufToString(reply);
         this.binary = !this.$util.bufVisible(reply);
 
diff --git a/src/components/ViewerBinary.vue b/src/components/ViewerBinary.vue
new file mode 100644
index 000000000..78fd64a3c
--- /dev/null
+++ b/src/components/ViewerBinary.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <!-- </textarea> -->
+    <el-input disabled type='textarea' :rows='textrows' :value='binaryValue'></el-input>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: ['content', 'textrows', 'contentBuff'],
+  computed: {
+    binaryValue() {
+        let binary = '';
+
+        for (let item of this.contentBuff) {
+            binary += item.toString(2).padStart(8, 0);
+        }
+
+        return binary;
+    },
+  },
+}
+</script>

From 3b0772ed008001ea9d426398ff8ba7734887f625 Mon Sep 17 00:00:00 2001
From: qishibo <www.qii@qq.com>
Date: Sat, 3 Oct 2020 20:51:28 +0800
Subject: [PATCH 2/2] binary view support

---
 src/components/FormatViewer.vue      | 17 ++++++-----
 src/components/InputBinary.vue       | 42 ++++++++++++++++++++++++++++
 src/components/KeyContentHash.vue    | 31 ++++++++++----------
 src/components/KeyContentList.vue    | 17 ++++++-----
 src/components/KeyContentSet.vue     | 29 +++++++++++--------
 src/components/KeyContentString.vue  | 13 +++------
 src/components/KeyContentZset.vue    | 33 ++++++++++++----------
 src/components/KeyDetail.vue         |  6 ----
 src/components/ViewerBinary.vue      | 20 ++++++++-----
 src/components/ViewerJson.vue        |  2 +-
 src/components/ViewerText.vue        | 15 ++++++++--
 src/components/ViewerUnserialize.vue |  2 +-
 src/main.js                          |  4 +++
 src/util.js                          | 21 ++++++++++++++
 14 files changed, 168 insertions(+), 84 deletions(-)
 create mode 100644 src/components/InputBinary.vue

diff --git a/src/components/FormatViewer.vue b/src/components/FormatViewer.vue
index c94dfecac..13994c8ff 100644
--- a/src/components/FormatViewer.vue
+++ b/src/components/FormatViewer.vue
@@ -9,14 +9,14 @@
         :value="item.value">
       </el-option>
     </el-select>
-    <span v-if='binary' class='formater-binary'>Hex</span>
+    <span v-if='!contentVisible' class='formater-binary-tag'>Hex</span>
     <br>
 
     <component
       ref='viewer'
       :is='selectedView'
       :content='content'
-      :contentBuff='contentBuff'
+      :contentVisible='contentVisible'
       :textrows='textrows'
       @updateContent="$emit('update:content', $event)">
     </component>
@@ -47,10 +47,13 @@ export default {
   components: {ViewerText, ViewerJson, ViewerBinary, ViewerUnserialize},
   props: {
     float: {default: 'right'},
-    content: {default: ''},
-    contentBuff: {default: () => Buffer.from('')},
+    content: {default: () => Buffer.from('')},
     textrows: {default: 6},
-    binary: {default: false},
+  },
+  computed: {
+    contentVisible() {
+      return this.$util.bufVisible(this.content);
+    },
   },
   methods: {
     autoFormat() {
@@ -117,8 +120,8 @@ export default {
     float: right;
     padding: 9px 0;
   }
-  .formater-binary {
-    padding-left: 5px;
+  .formater-binary-tag {
+    /*padding-left: 5px;*/
     color: #7ab3ef;
     font-size: 80%;
   }
diff --git a/src/components/InputBinary.vue b/src/components/InputBinary.vue
new file mode 100644
index 000000000..b897fe783
--- /dev/null
+++ b/src/components/InputBinary.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span v-if="!buffVisible" class='input-binary-tag'>Hex</span>
+    <el-input :value='contentDisplay' @change="updateContent($event)"></el-input>
+  </div>
+</template>
+
+<script type="text/javascript">
+export default {
+  props: ['content'],
+  computed: {
+    contentDisplay() {
+      if (!this.content) {
+        return '';
+      }
+
+      return this.$util.bufToString(this.content);
+    },
+    buffVisible() {
+      if (!this.content) {
+        return true;
+      }
+
+      return this.$util.bufVisible(this.content);
+    },
+  },
+  methods: {
+    updateContent(value) {
+      let newContent = this.buffVisible ? Buffer.from(value) : this.$util.xToBuffer(value);
+      this.$emit('update:content', newContent);
+    },
+  },
+}
+</script>
+
+<style type="text/css">
+  .input-binary-tag {
+    color: #7ab3ef;
+    font-size: 80%;
+    /*float: left;*/
+  }
+</style>
diff --git a/src/components/KeyContentHash.vue b/src/components/KeyContentHash.vue
index 4926b14ad..6de2ce2f0 100644
--- a/src/components/KeyContentHash.vue
+++ b/src/components/KeyContentHash.vue
@@ -12,12 +12,10 @@
       <el-dialog :title='dialogTitle' :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Field">
-            <span v-if='editLineItem.binaryK' class='content-binary'>Hex</span>
-            <el-input v-model="editLineItem.key" autocomplete="off"></el-input>
+            <InputBinary :content.sync="editLineItem.key"></InputBinary>
           </el-form-item>
 
           <el-form-item label="Value">
-            <span v-if='editLineItem.binaryV' class='content-binary'>Hex</span>
             <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -43,7 +41,7 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="key"
+        prop="keyDisplay"
         sortable
         resizable
         label="Key"
@@ -51,7 +49,7 @@
         >
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -92,6 +90,7 @@
 <script>
 import PaginationTable from '@/components/PaginationTable';
 import FormatViewer from '@/components/FormatViewer';
+import InputBinary from '@/components/InputBinary';
 
 export default {
   data() {
@@ -110,7 +109,7 @@ export default {
       loadMoreDisable: false,
     };
   },
-  components: {PaginationTable, FormatViewer},
+  components: {PaginationTable, FormatViewer, InputBinary},
   props: ['client', 'redisKey'],
   computed: {
     dialogTitle() {
@@ -160,10 +159,10 @@ export default {
 
         for (let i = 0; i < reply.length; i += 2) {
           hashData.push({
-            key: this.$util.bufToString(reply[i]),
-            value: this.$util.bufToString(reply[i + 1]),
-            binaryK: !this.$util.bufVisible(reply[i]),
-            binaryV: !this.$util.bufVisible(reply[i + 1]),
+            key: reply[i],
+            keyDisplay: this.$util.bufToString(reply[i]),
+            value: reply[i + 1],
+            valueDisplay: this.$util.bufToString(reply[i + 1]),
           });
         }
 
@@ -191,7 +190,7 @@ export default {
     },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -208,14 +207,14 @@ export default {
 
       client.hset(
         key,
-        before.binaryK ? this.$util.xToBuffer(after.key) : after.key,
-        before.binaryV ? this.$util.xToBuffer(after.value) : after.value
+        after.key,
+        after.value
       ).then((reply) => {
         // edit key && key changed
-        if (before.key && before.key !== after.key) {
+        if (before.key && !before.key.equals(after.key)) {
           client.hdel(
             key,
-            before.binaryK ? this.$util.xToBuffer(before.key) : before.key
+            before.key
           ).then((reply) => {
             this.initShow();
           });
@@ -239,7 +238,7 @@ export default {
       ).then(() => {
         this.client.hdel(
           this.redisKey,
-          row.binaryK ? this.$util.xToBuffer(row.key) : row.key
+          row.key
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
diff --git a/src/components/KeyContentList.vue b/src/components/KeyContentList.vue
index e2db8f85d..6cdac95e2 100644
--- a/src/components/KeyContentList.vue
+++ b/src/components/KeyContentList.vue
@@ -12,7 +12,6 @@
       <el-dialog :title="dialogTitle" :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Value">
-            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
             <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -38,7 +37,7 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -108,8 +107,8 @@ export default {
 
         for (const i of reply) {
           listData.push({
-            value: this.$util.bufToString(i),
-            binary: !this.$util.bufVisible(i),
+            value: i,
+            valueDisplay: this.$util.bufToString(i),
           });
         }
 
@@ -142,7 +141,7 @@ export default {
     },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -153,13 +152,13 @@ export default {
 
       this.editDialog = false;
 
-      if (!after.value || before.value == after.value) {
+      if (!after.value || (before.value && before.value.equals(after.value))) {
         return;
       }
 
       client.rpush(
         key,
-        before.binary ? this.$util.xToBuffer(after.value) : after.value
+        after.value
       ).then((reply) => {
         // reply return list length if success
         if (reply > 0) {
@@ -168,7 +167,7 @@ export default {
             client.lrem(
               key,
               1,
-              before.binary ? this.$util.xToBuffer(before.value) : before.value
+              before.value
             ).then((reply) => {
               this.initShow();
             });
@@ -193,7 +192,7 @@ export default {
         this.client.lrem(
           this.redisKey,
           1,
-          row.binary ? this.$util.xToBuffer(row.value) : row.value
+          row.value
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
diff --git a/src/components/KeyContentSet.vue b/src/components/KeyContentSet.vue
index 465765570..a4ff73028 100644
--- a/src/components/KeyContentSet.vue
+++ b/src/components/KeyContentSet.vue
@@ -9,11 +9,10 @@
       </el-form>
 
       <!-- edit & add dialog -->
-      <el-dialog :title="dialogTitle" :visible.sync="editDialog" :close-on-click-modal='false'>
+      <el-dialog :title="dialogTitle" :visible.sync="editDialog" @open='openDialog' :close-on-click-modal='false'>
         <el-form>
           <el-form-item label="Value">
-            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
-            <el-input type="textarea" :rows="6" v-model="editLineItem.value" autocomplete="off"></el-input>
+            <FormatViewer ref='formatViewer' :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
 
@@ -38,7 +37,7 @@
         width="150">
       </el-table-column>
       <el-table-column
-        prop="value"
+        prop="valueDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -77,6 +76,7 @@
 
 <script>
 import PaginationTable from '@/components/PaginationTable';
+import FormatViewer from '@/components/FormatViewer';
 
 export default {
   data() {
@@ -96,7 +96,7 @@ export default {
     };
   },
   props: ['client', 'redisKey'],
-  components: {PaginationTable},
+  components: {PaginationTable, FormatViewer},
   computed: {
     dialogTitle() {
       return this.beforeEditItem.value ? this.$t('message.edit_line') :
@@ -145,8 +145,8 @@ export default {
 
         for (const i of reply) {
           setData.push({
-            value: this.$util.bufToString(i),
-            binary: !this.$util.bufVisible(i),
+            value: i,
+            valueDisplay: this.$util.bufToString(i),
           });
         }
 
@@ -167,9 +167,14 @@ export default {
     getScanMatch() {
       return this.filterValue ? `*${this.filterValue}*` : '*';
     },
+    openDialog() {
+      this.$nextTick(() => {
+        this.$refs.formatViewer.autoFormat();
+      });
+    },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -180,13 +185,13 @@ export default {
 
       this.editDialog = false;
 
-      if (!after.value || before.value == after.value) {
+      if (!after.value || (before.value && before.value.equals(after.value))) {
         return;
       }
 
       client.sadd(
         key,
-        before.binary ? this.$util.xToBuffer(after.value) : after.value
+        after.value
       ).then((reply) => {
         // add success
         if (reply === 1) {
@@ -194,7 +199,7 @@ export default {
           if (before.value) {
             client.srem(
               key,
-              before.binary ? this.$util.xToBuffer(before.value) : before.value
+              before.value
             ).then((reply) => {
               this.initShow();
             });
@@ -226,7 +231,7 @@ export default {
       ).then(() => {
         this.client.srem(
           this.redisKey,
-          row.binary ? this.$util.xToBuffer(row.value) : row.value
+          row.value
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
diff --git a/src/components/KeyContentString.vue b/src/components/KeyContentString.vue
index 1bce27047..a6ce4caf5 100644
--- a/src/components/KeyContentString.vue
+++ b/src/components/KeyContentString.vue
@@ -5,9 +5,8 @@
     <FormatViewer
       ref='formatViewer'
       :content.sync='content'
-      :contentBuff='contentBuff'
       :binary='binary'
-      float='left'
+      float=''
       :textrows=12>
     </FormatViewer>
   </el-form-item>
@@ -25,8 +24,7 @@ import FormatViewer from '@/components/FormatViewer';
 export default {
   data() {
     return {
-      content: '',
-      contentBuff: '',
+      content: Buffer.from(''),
       binary: false,
     };
   },
@@ -35,10 +33,7 @@ export default {
   methods: {
     initShow() {
       this.client.getBuffer(this.redisKey).then((reply) => {
-        this.contentBuff = reply;
-        this.content = this.$util.bufToString(reply);
-        this.binary = !this.$util.bufVisible(reply);
-
+        this.content = reply;
         this.$refs.formatViewer.autoFormat();
       });
     },
@@ -47,7 +42,7 @@ export default {
 
       this.client.set(
         key,
-        this.binary ? this.$util.xToBuffer(this.content) : this.content
+        this.content
       ).then((reply) => {
         if (reply === 'OK') {
           this.initShow()
diff --git a/src/components/KeyContentZset.vue b/src/components/KeyContentZset.vue
index 33b9ae1fc..b77deee19 100644
--- a/src/components/KeyContentZset.vue
+++ b/src/components/KeyContentZset.vue
@@ -9,15 +9,14 @@
       </el-form>
 
       <!-- edit & add dialog -->
-      <el-dialog :title="dialogTitle" :visible.sync="editDialog" :close-on-click-modal='false'>
+      <el-dialog :title="dialogTitle" :visible.sync="editDialog"  @open='openDialog' :close-on-click-modal='false'>
         <el-form>
-          <el-form-item label="Member">
-            <span v-if='editLineItem.binaryM' class='content-binary'>Hex</span>
-            <el-input v-model="editLineItem.member" autocomplete="off"></el-input>
-          </el-form-item>
           <el-form-item label="Score">
             <el-input v-model="editLineItem.score" autocomplete="off"></el-input>
           </el-form-item>
+          <el-form-item label="Member">
+            <FormatViewer ref='formatViewer' :content.sync='editLineItem.member'></FormatViewer>
+          </el-form-item>
         </el-form>
 
         <div slot="footer" class="dialog-footer">
@@ -49,7 +48,7 @@
         >
       </el-table-column>
       <el-table-column
-        prop="member"
+        prop="memberDisplay"
         resizable
         sortable
         show-overflow-tooltip
@@ -89,6 +88,7 @@
 
 <script>
 import PaginationTable from '@/components/PaginationTable';
+import FormatViewer from '@/components/FormatViewer';
 
 export default {
   data() {
@@ -109,7 +109,7 @@ export default {
     };
   },
   props: ['client', 'redisKey'],
-  components: {PaginationTable},
+  components: {PaginationTable, FormatViewer},
   computed: {
     dialogTitle() {
       return this.beforeEditItem.member ? this.$t('message.edit_line') :
@@ -205,8 +205,8 @@ export default {
       for (var i = 0; i < list.length; i += 2) {
         zsetData.push({
           score: Number(list[i + 1]),
-          member: this.$util.bufToString(list[i]),
-          binaryM: !this.$util.bufVisible(list[i]),
+          member: list[i],
+          memberDisplay: this.$util.bufToString(list[i]),
         });
       }
 
@@ -215,9 +215,14 @@ export default {
     getScanMatch() {
       return this.filterValue ? `*${this.filterValue}*` : '*';
     },
+    openDialog() {
+      this.$nextTick(() => {
+        this.$refs.formatViewer.autoFormat();
+      });
+    },
     showEditDialog(row) {
       this.editLineItem = row;
-      this.beforeEditItem = JSON.parse(JSON.stringify(row));
+      this.beforeEditItem = this.$util.cloneObjWithBuff(row);
       this.editDialog = true;
     },
     editLine() {
@@ -235,13 +240,13 @@ export default {
       client.zadd(
         key,
         after.score,
-        before.binaryM ? this.$util.xToBuffer(after.member) : after.member
+        after.member
       ).then((reply) => {
         // edit key member changed
-        if (before.member && before.member !== after.member) {
+        if (before.member && !before.member.equals(after.member)) {
           client.zrem(
             key,
-            before.binaryM ? this.$util.xToBuffer(before.member) : before.member
+            before.member
           ).then((reply) => {
             this.initShow();
           });
@@ -264,7 +269,7 @@ export default {
       ).then(() => {
         this.client.zrem(
           this.redisKey,
-          row.binaryM ? this.$util.xToBuffer(row.member) : row.member
+          row.member
         ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
diff --git a/src/components/KeyDetail.vue b/src/components/KeyDetail.vue
index 053a61cce..cb2a9a5ae 100644
--- a/src/components/KeyDetail.vue
+++ b/src/components/KeyDetail.vue
@@ -91,12 +91,6 @@ export default {
     max-width: 50%;
   }
 
-  .content-binary {
-    color: #7ab3ef;
-    font-size: 80%;
-    float: left;
-  }
-
   .content-more-container {
     text-align: center;
     margin-top: 10px;
diff --git a/src/components/ViewerBinary.vue b/src/components/ViewerBinary.vue
index 78fd64a3c..ff4618bd1 100644
--- a/src/components/ViewerBinary.vue
+++ b/src/components/ViewerBinary.vue
@@ -1,22 +1,28 @@
 <template>
   <div>
     <!-- </textarea> -->
-    <el-input disabled type='textarea' :rows='textrows' :value='binaryValue'></el-input>
+    <el-input type='textarea' :rows='textrows' :value='binaryValue' @change="updateContent($event)"></el-input>
   </div>
 </template>
 
 <script type="text/javascript">
 export default {
-  props: ['content', 'textrows', 'contentBuff'],
+  props: ['content', 'textrows'],
   computed: {
     binaryValue() {
-        let binary = '';
+      let binary = '';
 
-        for (let item of this.contentBuff) {
-            binary += item.toString(2).padStart(8, 0);
-        }
+      for (let item of this.content) {
+          binary += item.toString(2).padStart(8, 0);
+      }
 
-        return binary;
+      return binary;
+    },
+  },
+  methods: {
+    updateContent(value) {
+      let newContent = this.$util.binaryStringToBuffer(value);
+      this.$emit('updateContent', newContent);
     },
   },
 }
diff --git a/src/components/ViewerJson.vue b/src/components/ViewerJson.vue
index 5afdbbdc4..ffc26c2a9 100644
--- a/src/components/ViewerJson.vue
+++ b/src/components/ViewerJson.vue
@@ -29,7 +29,7 @@ export default {
     newContent() {
       try {
         // solve big int in json
-        let jsonSolved = this.content.replace(/([\[:])?([\d\.]{15,})([,\}\]])/g, "$1\"$2\"$3");
+        let jsonSolved = this.content.toString().replace(/([\[:])?([\d\.]{15,})([,\}\]])/g, "$1\"$2\"$3");
         return JSON.parse(jsonSolved);
       } catch (e) {
         return this.$t('message.json_format_failed');
diff --git a/src/components/ViewerText.vue b/src/components/ViewerText.vue
index 238184139..93e49522f 100644
--- a/src/components/ViewerText.vue
+++ b/src/components/ViewerText.vue
@@ -1,12 +1,23 @@
 <template>
   <div>
     <!-- </textarea> -->
-    <el-input type='textarea' :rows='textrows' :value='content' @change="$emit('updateContent', $event)"></el-input>
+    <el-input type='textarea' :rows='textrows' :value='contentDisplay' @change="updateContent($event)"></el-input>
   </div>
 </template>
 
 <script type="text/javascript">
 export default {
-  props: ['content', 'textrows'],
+  props: ['content', 'contentVisible', 'textrows'],
+  computed: {
+    contentDisplay() {
+      return this.$util.bufToString(this.content);
+    },
+  },
+  methods: {
+    updateContent(value) {
+      let newContent = this.contentVisible ? Buffer.from(value) : this.$util.xToBuffer(value);
+      this.$emit('updateContent', newContent);
+    },
+  },
 }
 </script>
diff --git a/src/components/ViewerUnserialize.vue b/src/components/ViewerUnserialize.vue
index fb280f3cf..d82f1f9b3 100644
--- a/src/components/ViewerUnserialize.vue
+++ b/src/components/ViewerUnserialize.vue
@@ -29,7 +29,7 @@ export default {
   computed: {
     newContent() {
       try {
-        return unserialize(this.content);
+        return unserialize(this.content.toString());
       } catch (e) {
         return this.$t('message.php_unserialize_format_failed');
       }
diff --git a/src/main.js b/src/main.js
index 9bfcc11da..8410fb286 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,10 @@ var vue = new Vue({
 
 // handle uncaught exception
 process.on('uncaughtException', (err, origin) => {
+  if (!err) {
+    return;
+  }
+
   vue.$message.error({
     message: 'Uncaught Exception: ' + err,
     duration: 5000,
diff --git a/src/util.js b/src/util.js
index b4ab743f0..e9060e258 100644
--- a/src/util.js
+++ b/src/util.js
@@ -7,6 +7,10 @@ export default {
     this.data[name] = value;
   },
   bufVisible(buf) {
+    if (typeof buf == 'string') {
+      return true;
+    }
+
     return buf.equals(Buffer.from(buf.toString()));
   },
   bufToString(buf) {
@@ -45,6 +49,12 @@ export default {
 
     return Buffer.from(result, 'hex');
   },
+  binaryStringToBuffer(str) {
+    const groups = str.match(/[01]{8}/g);
+    const numbers = groups.map(binary => parseInt(binary, 2))
+
+    return Buffer.from(new Uint8Array(numbers));
+  },
   cutString(string, maxLength = 20) {
     if (string.length <= maxLength) {
       return string;
@@ -66,4 +76,15 @@ export default {
   base64Decode(str) {
     return (new Buffer(str, 'base64')).toString('utf8');
   },
+  cloneObjWithBuff(object) {
+    let clone = JSON.parse(JSON.stringify(object));
+
+    for (let i in clone) {
+      if ((typeof clone[i] === 'object') && (clone[i].type === 'Buffer')) {
+        clone[i] = Buffer.from(clone[i]);
+      }
+    }
+
+    return clone;
+  },
 };