diff --git a/src/api/article.js b/src/api/article.js
index b17c6ae1..2a8c9226 100644
--- a/src/api/article.js
+++ b/src/api/article.js
@@ -123,7 +123,7 @@ export const ServeDownloadAnnex = (annex_id) => {
   let api = config.BASE_API_URL;
   try {
     let link = document.createElement('a');
-    link.href = `${api}/api/v1/download/article-annex?annex_id=${annex_id}&token=${getToken()}`
+    link.href = `${api}/api/v1/download/article-annex?annex_id=${annex_id}&token=${getToken()}`;
     link.click();
   } catch (e) {}
 }
diff --git a/src/components/chat/TalkCodeBlock.vue b/src/components/chat/TalkCodeBlock.vue
index 0c9180f7..7f02ebc1 100644
--- a/src/components/chat/TalkCodeBlock.vue
+++ b/src/components/chat/TalkCodeBlock.vue
@@ -36,14 +36,14 @@
         </el-header>
 
         <el-main class="main no-padding">
-          <prism-editor
+          <PrismEditor
             class="peditor"
             :code="code"
             :language="language"
             :line-numbers="true"
             @change="codeChanged"
             style="border-radius: 0"
-          ></prism-editor>
+          ></PrismEditor>
         </el-main>
 
         <el-footer class="footer no-padding" height="50px">
@@ -56,8 +56,9 @@
 
           <div class="buttom-group">
             <el-button size="small" @click="close" plain>{{
-              editMode ? "取消编辑" : "关闭预览"
+              editMode ? '取消编辑' : '关闭预览'
             }}</el-button>
+
             <el-button
               type="primary"
               size="small"
@@ -72,27 +73,27 @@
   </div>
 </template>
 <script>
-import PrismEditor from "vue-prism-editor";
-import "vue-prism-editor/dist/VuePrismEditor.css";
-import "prismjs/themes/prism-okaidia.css";
-import Vue from "vue";
-import { Select, Option } from "element-ui";
-Vue.use(Select);
-Vue.use(Option);
+import PrismEditor from 'vue-prism-editor'
+import 'vue-prism-editor/dist/VuePrismEditor.css'
+import 'prismjs/themes/prism-okaidia.css'
+import Vue from 'vue'
+import { Select, Option } from 'element-ui'
+Vue.use(Select)
+Vue.use(Option)
 
 export default {
-  name: "TalkCodeBlock",
+  name: 'TalkCodeBlock',
   components: {
     PrismEditor,
   },
   props: {
     loadCode: {
       type: String,
-      default: "",
+      default: '',
     },
     loadLang: {
       type: String,
-      default: "",
+      default: '',
     },
     editMode: {
       type: Boolean,
@@ -101,146 +102,146 @@ export default {
   },
   data() {
     return {
-      language: "",
-      code: "",
+      language: '',
+      code: '',
       options: [
         {
-          value: "css",
-          label: "css",
+          value: 'css',
+          label: 'css',
         },
         {
-          value: "less",
-          label: "less",
+          value: 'less',
+          label: 'less',
         },
         {
-          value: "javascript",
-          label: "javascript",
+          value: 'javascript',
+          label: 'javascript',
         },
         {
-          value: "json",
-          label: "json",
+          value: 'json',
+          label: 'json',
         },
         {
-          value: "bash",
-          label: "bash",
+          value: 'bash',
+          label: 'bash',
         },
         {
-          value: "c",
-          label: "c",
+          value: 'c',
+          label: 'c',
         },
         {
-          value: "cil",
-          label: "cil",
+          value: 'cil',
+          label: 'cil',
         },
         {
-          value: "docker",
-          label: "docker",
+          value: 'docker',
+          label: 'docker',
         },
         {
-          value: "git",
-          label: "git",
+          value: 'git',
+          label: 'git',
         },
         {
-          value: "go",
-          label: "go",
+          value: 'go',
+          label: 'go',
         },
         {
-          value: "java",
-          label: "java",
+          value: 'java',
+          label: 'java',
         },
         {
-          value: "lua",
-          label: "lua",
+          value: 'lua',
+          label: 'lua',
         },
         {
-          value: "nginx",
-          label: "nginx",
+          value: 'nginx',
+          label: 'nginx',
         },
         {
-          value: "objectivec",
-          label: "objectivec",
+          value: 'objectivec',
+          label: 'objectivec',
         },
         {
-          value: "php",
-          label: "php",
+          value: 'php',
+          label: 'php',
         },
         {
-          value: "python",
-          label: "python",
+          value: 'python',
+          label: 'python',
         },
         {
-          value: "ruby",
-          label: "ruby",
+          value: 'ruby',
+          label: 'ruby',
         },
         {
-          value: "rust",
-          label: "rust",
+          value: 'rust',
+          label: 'rust',
         },
         {
-          value: "sql",
-          label: "sql",
+          value: 'sql',
+          label: 'sql',
         },
         {
-          value: "swift",
-          label: "swift",
+          value: 'swift',
+          label: 'swift',
         },
         {
-          value: "vim",
-          label: "vim",
+          value: 'vim',
+          label: 'vim',
         },
         {
-          value: "visual-basic",
-          label: "visual-basic",
+          value: 'visual-basic',
+          label: 'visual-basic',
         },
         {
-          value: "shell",
-          label: "shell",
+          value: 'shell',
+          label: 'shell',
         },
       ],
       isFullScreen: false,
-    };
+    }
   },
   watch: {
     loadCode(value) {
-      this.code = value;
+      this.code = value
     },
     loadLang(value) {
-      this.language = value;
+      this.language = value
     },
   },
   created() {
-    this.code = this.loadCode;
-    this.language = this.loadLang;
+    this.code = this.loadCode
+    this.language = this.loadLang
   },
   methods: {
     submit() {
       if (!this.code) {
-        alert("代码块不能为空...");
-        return false;
+        alert('代码块不能为空...')
+        return false
       }
 
-      if (this.language == "") {
-        alert("请选择语言类型...");
-        return false;
+      if (this.language == '') {
+        alert('请选择语言类型...')
+        return false
       }
 
       if (this.code.length > 10000) {
-        alert("代码字数不能超过10000字！！！");
-        return false;
+        alert('代码字数不能超过10000字！！！')
+        return false
       }
-      this.$emit("confirm", {
+      this.$emit('confirm', {
         language: this.language,
         code: this.code,
-      });
+      })
     },
     close() {
-      this.$emit("close");
+      this.$emit('close')
     },
     codeChanged(code) {
-      this.code = code;
+      this.code = code
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/src/components/chat/TalkForwardRecord.vue b/src/components/chat/TalkForwardRecord.vue
index ae729ce8..7c89e9d3 100644
--- a/src/components/chat/TalkForwardRecord.vue
+++ b/src/components/chat/TalkForwardRecord.vue
@@ -9,11 +9,7 @@
       </el-header>
       <el-main class="no-padding main" v-loading="loading">
         <el-scrollbar :native="false" tag="section" class="full-height">
-          <div
-            class="message-group"
-            v-for="record in records"
-            :key="record.id"
-          >
+          <div class="message-group" v-for="record in records" :key="record.id">
             <div class="left-box">
               <el-avatar
                 shape="square"
@@ -82,10 +78,10 @@
   </div>
 </template>
 <script>
-import { ServeGetForwardRecords } from "@/api/chat";
+import { ServeGetForwardRecords } from '@/api/chat'
 
 export default {
-  name: "TalkForwardRecord",
+  name: 'TalkForwardRecord',
   data() {
     return {
       // 记录列表
@@ -96,47 +92,48 @@ export default {
 
       // 窗口是否显示
       isShow: false,
-    };
+    }
   },
   methods: {
     // 加载数据列表
     loadRecords() {
-      this.loading = true;
+      this.loading = true
       ServeGetForwardRecords({
         records_id: this.records_id,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.records = res.data.rows;
+            this.records = res.data.rows
           }
         })
         .finally(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
 
     // 显示窗口
     open(records_id) {
       if (records_id != this.records_id) {
-        this.records = [];
+        this.records = []
       }
 
-      this.records_id = records_id;
-      this.isShow = true;
-      this.loadRecords();
+      this.records_id = records_id
+      this.isShow = true
+      this.loadRecords()
     },
 
     // 关闭窗口
     close() {
-      this.isShow = false;
+      this.isShow = false
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-mask {
   z-index: 99999;
 }
+
 .lum-dialog-box {
   width: 500px;
   max-width: 500px;
@@ -147,5 +144,5 @@ export default {
   overflow-x: hidden;
 }
 
-@import "~@/assets/css/talk/talk-records.less";
-</style>
\ No newline at end of file
+@import '~@/assets/css/talk/talk-records.less';
+</style>
diff --git a/src/components/chat/TalkSearchRecord.vue b/src/components/chat/TalkSearchRecord.vue
index 0fda632d..94be33ce 100644
--- a/src/components/chat/TalkSearchRecord.vue
+++ b/src/components/chat/TalkSearchRecord.vue
@@ -4,7 +4,7 @@
       <el-header height="60px" class="header">
         <p>消息管理器</p>
         <p class="title">
-          <span>{{ findSource == 1 ? "好友" : "群" }}【{{ title }}】</span>
+          <span>{{ findSource == 1 ? '好友' : '群' }}【{{ title }}】</span>
         </p>
         <p class="tools">
           <i
@@ -141,9 +141,7 @@
                         }}
                       </span>
                       <el-divider direction="vertical" />
-                      <span class="time">{{
-                        record.created_at
-                      }}</span>
+                      <span class="time">{{ record.created_at }}</span>
                     </div>
 
                     <!-- 文本消息 -->
@@ -220,20 +218,13 @@
   </div>
 </template>
 <script>
-import { ServeGetContacts } from "@/api/contacts";
-import { ServeGetGroups } from "@/api/group";
-
-import {
-  ServeFindTalkRecords,
-} from "@/api/chat";
-import {
-  formateSize,
-  download,
-  imgZoom
-} from "@/utils/functions";
+import { ServeGetContacts } from '@/api/contacts'
+import { ServeGetGroups } from '@/api/group'
+import { ServeFindTalkRecords } from '@/api/chat'
+import { formateSize as renderSize, download, imgZoom } from '@/utils/functions'
 
 export default {
-  name: "TalkSearchRecord",
+  name: 'TalkSearchRecord',
   props: {
     receiveId: {
       type: [Number, String],
@@ -245,27 +236,28 @@ export default {
     },
     titleName: {
       type: String,
-      default: "",
+      default: '',
     },
   },
   data() {
     return {
       fullscreen: false,
+
       // 侧边栏相关信息
       broadside: false,
       contacts: {
-        show: "friends",
+        show: 'friends',
         friends: [],
         groups: [],
       },
 
       uid: this.$store.state.user.uid,
-      title: "",
-      findType: 0, //查询的方式 0:所有 1:图片 2:文件
-      findSource: 0, //查询的聊天类型 1:私聊 2:群聊
-      findReceiveId: 0, //接收者ID(用户ID或群ID)
+      title: '',
+      findType: 0, // 查询的方式 0:所有 1:图片 2:文件
+      findSource: 0, // 查询的聊天类型 1:私聊 2:群聊
+      findReceiveId: 0, // 接收者ID(用户ID或群ID)
 
-      //用户聊天记录
+      // 用户聊天记录
       records: {
         recordId: 0,
         msgType: 0,
@@ -277,153 +269,146 @@ export default {
       showBox: 0,
 
       search: {
-        keyword: "", //关键字查询
-        date: "", //时间查询
-        page: 1, //当前分页
-        totalPage: 50, //总分页
-        items: [], //数据列表
+        keyword: '', // 关键字查询
+        date: '', // 时间查询
+        page: 1, // 当前分页
+        totalPage: 50, // 总分页
+        items: [], // 数据列表
         isShowDate: false,
       },
-    };
+    }
   },
   mounted() {
-    this.title = this.titleName;
-    this.findSource = this.source;
-    this.findReceiveId = this.receiveId;
+    this.title = this.titleName
+    this.findSource = this.source
+    this.findReceiveId = this.receiveId
 
-    this.loadChatRecord(0);
+    this.loadChatRecord(0)
   },
   created() {
-    this.loadFriends();
-    this.loadGroups();
+    this.loadFriends()
+    this.loadGroups()
   },
   methods: {
-    //格式化文件大小
-    renderSize: formateSize,
-
-    //下载文件
-    download: download,
+    download,
+    renderSize,
 
-    //获取图片信息
+    // 获取图片信息
     getImgStyle(url) {
-      return imgZoom(url, 200);
+      return imgZoom(url, 200)
     },
 
-    //获取会话记录消息名称
+    // 获取会话记录消息名称
     getForwardTitle(item) {
-      let arr = [...new Set(item.map((v) => v.nickname))];
-      return arr.join("、") + "的会话记录";
+      let arr = [...new Set(item.map(v => v.nickname))]
+      return arr.join('、') + '的会话记录'
     },
 
-    //获取好友列表
+    // 获取好友列表
     loadFriends() {
-      ServeGetContacts().then((res) => {
+      ServeGetContacts().then(res => {
         if (res.code == 200) {
-          this.contacts.friends = [];
-          for (let friend of res.data) {
-            this.contacts.friends.push({
-              id: friend.id,
+          this.contacts.friends = res.data.map(item => {
+            return {
+              id: item.id,
               type: 1,
-              name: friend.friend_remark
-                ? friend.friend_remark
-                : friend.nickname,
-              avatar: friend.avatar,
-            });
-          }
+              avatar: item.avatar,
+              name: item.friend_remark ? item.friend_remark : item.nickname,
+            }
+          })
         }
-      });
+      })
     },
 
-    //获取群聊列表
+    // 获取群聊列表
     loadGroups() {
-      ServeGetGroups().then((res) => {
+      ServeGetGroups().then(res => {
         if (res.code == 200) {
-          this.contacts.groups = [];
-          for (let group of res.data) {
-            this.contacts.groups.push({
-              id: group.id,
+          this.contacts.groups = res.data.map(item => {
+            return {
+              id: item.id,
               type: 2,
-              name: group.group_name,
-              avatar: group.avatar,
-            });
-          }
+              name: item.group_name,
+              avatar: item.avatar,
+            }
+          })
         }
-      });
+      })
     },
 
-    //左侧联系人菜单点击事件
-    triggerMenuItem(itemInfo) {
-      this.title = itemInfo.name;
-      this.findSource = itemInfo.type;
-      this.findReceiveId = itemInfo.id;
-      this.showBox = 0;
+    // 左侧联系人菜单点击事件
+    triggerMenuItem(item) {
+      this.title = item.name
+      this.findSource = item.type
+      this.findReceiveId = item.id
+      this.showBox = 0
 
-      this.triggerLoadType(0);
+      this.triggerLoadType(0)
     },
 
-    //加载历史记录
+    // 加载历史记录
     loadChatRecord() {
       let data = {
         record_id: this.records.recordId,
         receive_id: this.findReceiveId,
         msg_type: this.records.msgType,
         source: this.findSource,
-      };
+      }
 
-      if (this.records.loadStatus == 1) return;
+      if (this.records.loadStatus == 1) return
 
-      this.records.loadStatus = 1;
+      this.records.loadStatus = 1
       ServeFindTalkRecords(data)
-        .then((res) => {
-          if (res.code != 200) return;
+        .then(res => {
+          if (res.code != 200) return
 
-          let records = data.record_id == 0 ? [] : this.records.items;
+          let records = data.record_id == 0 ? [] : this.records.items
 
-          records.push(...res.data.rows);
+          records.push(...res.data.rows)
 
-          this.records.items = records;
+          this.records.items = records
           this.records.loadStatus =
-            res.data.rows.length < res.data.limit ? 2 : 0;
+            res.data.rows.length < res.data.limit ? 2 : 0
 
           if (this.records.items.length == 0) {
-            this.records.isEmpty = true;
+            this.records.isEmpty = true
           } else {
             this.records.recordId = this.records.items[
               this.records.items.length - 1
-            ].id;
+            ].id
           }
         })
-        .catch((err) => {
-          this.records.loadStatus = 0;
-        });
+        .catch(() => {
+          this.records.loadStatus = 0
+        })
     },
 
     triggerLoadType(type) {
-      this.records.recordId = 0;
-      this.records.msgType = type;
-      this.records.isEmpty = false;
-      this.records.items = [];
+      this.records.recordId = 0
+      this.records.msgType = type
+      this.records.isEmpty = false
+      this.records.items = []
 
-      this.loadChatRecord();
+      this.loadChatRecord()
     },
 
-    searchText(e) {
-      if (this.search.keyword == "") {
-        this.showBox = 0;
-        return false;
+    searchText() {
+      if (this.search.keyword == '') {
+        this.showBox = 0
+        return false
       }
 
       this.$notify.info({
-        title: "消息",
-        message: "查询功能正在开发中...",
-      });
+        title: '消息',
+        message: '查询功能正在开发中...',
+      })
     },
 
     triggerBroadside() {
-      this.broadside = !this.broadside;
+      this.broadside = !this.broadside
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 /deep/.el-scrollbar__wrap {
@@ -433,6 +418,7 @@ export default {
 .lum-dialog-mask {
   z-index: 1;
 }
+
 .lum-dialog-box {
   width: 100%;
   height: 600px;
@@ -490,7 +476,7 @@ export default {
   }
 
   .broadside {
-    @border:1px solid #f9f9f9;
+    @border: 1px solid #f9f9f9;
     border-right: @border;
     user-select: none;
     transition: 3s ease;
@@ -626,5 +612,5 @@ export default {
   }
 }
 
-@import "~@/assets/css/talk/talk-records.less";
-</style>
\ No newline at end of file
+@import '~@/assets/css/talk/talk-records.less';
+</style>
diff --git a/src/components/chat/UserContacts.vue b/src/components/chat/UserContacts.vue
index cdf986ea..f3ae7d5a 100644
--- a/src/components/chat/UserContacts.vue
+++ b/src/components/chat/UserContacts.vue
@@ -44,7 +44,7 @@
                         <img src="~@/assets/image/detault-avatar.jpg" />
                       </el-avatar>
                       <span class="nickname"
-                        >[{{ item.type == 1 ? "友" : "群" }}]
+                        >[{{ item.type == 1 ? '友' : '群' }}]
                         {{ item.nickname }}</span
                       >
                       <span class="select-btn">
@@ -106,90 +106,88 @@
   </div>
 </template>
 <script>
-import { ServeGetContacts } from "@/api/contacts";
-import { ServeGetGroups } from "@/api/group";
+import { ServeGetContacts } from '@/api/contacts'
+import { ServeGetGroups } from '@/api/group'
 
 export default {
-  name: "UserContacts",
+  name: 'UserContacts',
   data() {
     return {
       contacts: [],
       search: [],
-      keywords: "",
+      keywords: '',
       headerShadow: false,
-    };
+    }
   },
   computed: {
     selected() {
-      return this.contacts.filter((item) => {
-        return item.checked;
-      });
+      return this.contacts.filter(item => item.checked)
     },
   },
   watch: {
     keywords(val) {
-      if (val == "") {
-        this.search = this.contacts;
+      if (val == '') {
+        this.search = this.contacts
       } else {
-        this.search = this.contacts.filter((item) => {
-          return item.nickname.match(this.keywords) != null;
-        });
+        this.search = this.contacts.filter(item => {
+          return item.nickname.match(this.keywords) != null
+        })
       }
     },
     contacts(arr) {
-      if (this.keywords == "") {
-        this.search = arr;
+      if (this.keywords == '') {
+        this.search = arr
       }
     },
   },
   mounted() {
-    this.scrollEvent();
+    this.scrollEvent()
   },
   created() {
-    this.loadFriends();
-    this.loadUserGroups();
+    this.loadFriends()
+    this.loadUserGroups()
   },
   methods: {
     //触发选择联系人事件
     triggerContacts(item) {
-      let index = this.contacts.findIndex((val) => {
-        return val.index_name == item.index_name;
-      });
+      let index = this.contacts.findIndex(val => {
+        return val.index_name == item.index_name
+      })
 
-      this.contacts[index].checked = !this.contacts[index].checked;
+      this.contacts[index].checked = !this.contacts[index].checked
     },
     //取消选中的联系人
     delContacts(item) {
-      let index = this.contacts.findIndex((val) => {
-        return val.index_name == item.index_name;
-      });
+      let index = this.contacts.findIndex(val => {
+        return val.index_name == item.index_name
+      })
 
-      this.contacts[index].checked = false;
+      this.contacts[index].checked = false
     },
     //移除所有选中选项
     delAll() {
       this.contacts.forEach((item, i) => {
-        this.contacts[i].checked = false;
-      });
+        this.contacts[i].checked = false
+      })
     },
     //关闭窗口
     close() {
-      this.delAll();
-      this.$emit("close");
+      this.delAll()
+      this.$emit('close')
     },
     //确认按钮点击事件
     confirm() {
-      const arr = this.selected.map((item) => ({
+      const arr = this.selected.map(item => ({
         id: item.id,
         type: item.type,
-      }));
+      }))
 
-      this.$emit("confirm", arr);
+      this.$emit('confirm', arr)
     },
 
     //加载好友列表
     loadFriends() {
-      ServeGetContacts().then((res) => {
+      ServeGetContacts().then(res => {
         if (res.code == 200) {
           for (let o of res.data) {
             this.contacts.push({
@@ -199,15 +197,15 @@ export default {
               nickname: o.friend_remark ? o.friend_remark : o.nickname,
               avatar: o.avatar,
               checked: false,
-            });
+            })
           }
         }
-      });
+      })
     },
 
     //加载群聊列表接口
     loadUserGroups() {
-      ServeGetGroups().then((res) => {
+      ServeGetGroups().then(res => {
         if (res.code == 200) {
           for (let o of res.data) {
             this.contacts.push({
@@ -217,21 +215,21 @@ export default {
               nickname: o.group_name,
               avatar: o.avatar,
               checked: false,
-            });
+            })
           }
         }
-      });
+      })
     },
 
     // 监听自定义滚动条事件
     scrollEvent() {
-      let scrollbarEl = this.$refs.scrollbar2.wrap;
+      let scrollbarEl = this.$refs.scrollbar2.wrap
       scrollbarEl.onscroll = () => {
-        this.headerShadow = scrollbarEl.scrollTop > 0;
-      };
+        this.headerShadow = scrollbarEl.scrollTop > 0
+      }
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 /deep/.el-scrollbar__wrap {
diff --git a/src/components/chat/messaege/AudioMessage.vue b/src/components/chat/messaege/AudioMessage.vue
index 047577d6..9f3a1862 100644
--- a/src/components/chat/messaege/AudioMessage.vue
+++ b/src/components/chat/messaege/AudioMessage.vue
@@ -30,42 +30,42 @@
 
 <script>
 function formatSeconds(value) {
-  var theTime = parseInt(value); // 秒
-  var theTime1 = 0; // 分
-  var theTime2 = 0; // 小时
+  var theTime = parseInt(value) // 秒
+  var theTime1 = 0 // 分
+  var theTime2 = 0 // 小时
   if (theTime > 60) {
-    theTime1 = parseInt(theTime / 60);
-    theTime = parseInt(theTime % 60);
+    theTime1 = parseInt(theTime / 60)
+    theTime = parseInt(theTime % 60)
     if (theTime1 > 60) {
-      theTime2 = parseInt(theTime1 / 60);
-      theTime1 = parseInt(theTime1 % 60);
+      theTime2 = parseInt(theTime1 / 60)
+      theTime1 = parseInt(theTime1 % 60)
     }
   }
 
-  var result = "" + parseInt(theTime); //秒
+  var result = '' + parseInt(theTime) //秒
   if (10 > theTime > 0) {
-    result = "0" + parseInt(theTime); //秒
+    result = '0' + parseInt(theTime) //秒
   } else {
-    result = "" + parseInt(theTime); //秒
+    result = '' + parseInt(theTime) //秒
   }
 
   if (10 > theTime1 > 0) {
-    result = "0" + parseInt(theTime1) + ":" + result; //分，不足两位数，首位补充0，
+    result = '0' + parseInt(theTime1) + ':' + result //分，不足两位数，首位补充0，
   } else {
-    result = "" + parseInt(theTime1) + ":" + result; //分
+    result = '' + parseInt(theTime1) + ':' + result //分
   }
   if (theTime2 > 0) {
-    result = "" + parseInt(theTime2) + ":" + result; //时
+    result = '' + parseInt(theTime2) + ':' + result //时
   }
-  return result;
+  return result
 }
 
 export default {
-  name: "AudioMessage",
+  name: 'AudioMessage',
   props: {
     src: {
       type: String,
-      default: "",
+      default: '',
     },
   },
   data() {
@@ -75,53 +75,53 @@ export default {
       duration: 0,
       currentTime: 0,
       progress: 0,
-    };
+    }
   },
   computed: {
     getTotalDuration() {
-      return formatSeconds(this.duration);
+      return formatSeconds(this.duration)
     },
     getCurrDuration() {
-      return formatSeconds(this.currentTime);
+      return formatSeconds(this.currentTime)
     },
   },
   created() {
-    console.log(this.src);
+    console.log(this.src)
   },
   methods: {
     toPlay() {
       if (this.loading) {
-        return;
+        return
       }
 
-      let audio = this.$refs.audio;
+      let audio = this.$refs.audio
       if (this.isPlay) {
-        audio.pause();
+        audio.pause()
       } else {
-        audio.play();
+        audio.play()
       }
-      this.isPlay = !this.isPlay;
+      this.isPlay = !this.isPlay
     },
 
     // 当目前的播放位置已更改时
     timeupdate() {
-      let audio = this.$refs.audio;
-      this.currentTime = audio.currentTime;
-      this.progress = (audio.currentTime / audio.duration) * 100;
+      let audio = this.$refs.audio
+      this.currentTime = audio.currentTime
+      this.progress = (audio.currentTime / audio.duration) * 100
     },
 
     //当浏览器可以播放音频/视频时
     canplay() {
-      this.duration = this.$refs.audio.duration;
-      this.loading = false;
+      this.duration = this.$refs.audio.duration
+      this.loading = false
     },
 
     //当目前的播放列表已结束时
     ended() {
-      this.isPlay = false;
+      this.isPlay = false
     },
   },
-};
+}
 </script>
 <style scoped lang="less">
 .audio-message {
@@ -194,4 +194,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/CodeMessage.vue b/src/components/chat/messaege/CodeMessage.vue
index 8ce68c2f..81cb3e4f 100644
--- a/src/components/chat/messaege/CodeMessage.vue
+++ b/src/components/chat/messaege/CodeMessage.vue
@@ -17,19 +17,19 @@
   </div>
 </template>
 <script>
-import Prism from "prismjs";
-import "prismjs/themes/prism-okaidia.css";
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
 
 export default {
-  name: "CodeMessage",
+  name: 'CodeMessage',
   props: {
     code: {
       type: String | Number,
-      default: "",
+      default: '',
     },
     lang: {
       type: String,
-      default: "",
+      default: '',
     },
     maxwidth: {
       type: Boolean,
@@ -40,21 +40,21 @@ export default {
     return {
       fullscreen: false,
       lineNumber: 0,
-    };
+    }
   },
   created() {
-    this.lineNumber = this.code.split(/\n/).length;
+    this.lineNumber = this.code.split(/\n/).length
   },
   methods: {
     formatCode(code, lang) {
       try {
-        return Prism.highlight(code, Prism.languages[lang], lang) + "<br/>";
+        return Prism.highlight(code, Prism.languages[lang], lang) + '<br/>'
       } catch (error) {
-        return code;
+        return code
       }
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .code-message {
@@ -104,8 +104,8 @@ export default {
     line-height: 24px;
     background: #272822;
     color: #d5d4d4;
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
     font-size: 85%;
 
     &.lum-scrollbar {
@@ -145,4 +145,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/FileMessage.vue b/src/components/chat/messaege/FileMessage.vue
index 9f9c8776..b7bb353e 100644
--- a/src/components/chat/messaege/FileMessage.vue
+++ b/src/components/chat/messaege/FileMessage.vue
@@ -17,9 +17,9 @@
   </div>
 </template>
 <script>
-import { formateSize, download } from "@/utils/functions";
+import { formateSize, download } from '@/utils/functions'
 export default {
-  name: "FileMessage",
+  name: 'FileMessage',
   props: {
     file: {
       type: Object,
@@ -35,21 +35,21 @@ export default {
   data() {
     return {
       file_id: 0,
-      ext: "",
-      fileName: "",
-      fileSize: "",
-    };
+      ext: '',
+      fileName: '',
+      fileSize: '',
+    }
   },
   created() {
-    this.file_id = this.file.id;
-    this.ext = this.file.file_suffix.toUpperCase();
-    this.fileName = this.file.original_name;
-    this.fileSize = formateSize(this.file.file_size);
+    this.file_id = this.file.id
+    this.ext = this.file.file_suffix.toUpperCase()
+    this.fileName = this.file.original_name
+    this.fileSize = formateSize(this.file.file_size)
   },
   methods: {
     download,
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .file-message {
@@ -143,4 +143,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/ForwardMessage.vue b/src/components/chat/messaege/ForwardMessage.vue
index d45a209d..e827ca01 100644
--- a/src/components/chat/messaege/ForwardMessage.vue
+++ b/src/components/chat/messaege/ForwardMessage.vue
@@ -18,9 +18,9 @@
   </div>
 </template>
 <script>
-import TalkForwardRecord from "@/components/chat/TalkForwardRecord";
+import TalkForwardRecord from '@/components/chat/TalkForwardRecord'
 export default {
-  name: "ForwardMessage",
+  name: 'ForwardMessage',
   components: {
     TalkForwardRecord,
   },
@@ -38,28 +38,28 @@ export default {
   },
   data() {
     return {
-      title: "",
+      title: '',
       records: [],
       num: 0,
-    };
+    }
   },
   methods: {
     catForwardRecords() {
-      this.$refs.forwardRecordsRef.open(this.record_id);
+      this.$refs.forwardRecordsRef.open(this.record_id)
     },
     getForwardTitle(list) {
-      let arr = [...new Set(list.map((v) => v.nickname))];
-      return arr.join("、") + "的会话记录";
+      let arr = [...new Set(list.map(v => v.nickname))]
+      return arr.join('、') + '的会话记录'
     },
   },
   created() {
-    let forward = this.forward;
+    let forward = this.forward
 
-    this.num = forward.num;
-    this.records = forward.list;
-    this.title = this.getForwardTitle(this.records);
+    this.num = forward.num
+    this.records = forward.list
+    this.title = this.getForwardTitle(this.records)
   },
-};
+}
 </script>
 <style lang="less" scoped>
 /* 会话记录消息 */
@@ -114,4 +114,4 @@ export default {
     box-shadow: 0 0 5px 0px #cac6c6;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/ImageMessage.vue b/src/components/chat/messaege/ImageMessage.vue
index ce810da1..5ad2a49a 100644
--- a/src/components/chat/messaege/ImageMessage.vue
+++ b/src/components/chat/messaege/ImageMessage.vue
@@ -13,22 +13,22 @@
   </div>
 </template>
 <script>
-import { imgZoom } from "@/utils/functions";
+import { imgZoom } from '@/utils/functions'
 export default {
-  name: "ImageMessage",
+  name: 'ImageMessage',
   props: {
     src: {
       type: String,
-      default: "",
+      default: '',
     },
   },
   methods: {
     //获取图片信息
     getImgStyle(url) {
-      return imgZoom(url, 200);
+      return imgZoom(url, 200)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .image-message {
@@ -49,4 +49,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/InviteMessage.vue b/src/components/chat/messaege/InviteMessage.vue
index 412a7c8b..47516675 100644
--- a/src/components/chat/messaege/InviteMessage.vue
+++ b/src/components/chat/messaege/InviteMessage.vue
@@ -5,14 +5,14 @@
         invite.operate_user.nickname
       }}</a>
 
-      <span>{{ invite.type == 1 ? "邀请了" : "将" }}</span>
+      <span>{{ invite.type == 1 ? '邀请了' : '将' }}</span>
 
       <template v-for="(user, uidx) in invite.users">
         <a @click="cat(user.id)">{{ user.nickname }}</a>
         <em v-show="uidx < invite.users.length - 1">、</em>
       </template>
 
-      <span>{{ invite.type == 1 ? "加入了群聊" : "踢出了群聊" }}</span>
+      <span>{{ invite.type == 1 ? '加入了群聊' : '踢出了群聊' }}</span>
     </div>
     <div v-else-if="invite.type == 2" class="system-msg">
       <a @click="cat(invite.operate_user.id)">{{
@@ -25,9 +25,9 @@
 </template>
 <script>
 export default {
-  name: "InviteMessage",
+  name: 'InviteMessage',
   props: {
-    //邀请方式
+    // 邀请方式
     invite: {
       type: Object,
       default: {},
@@ -35,10 +35,10 @@ export default {
   },
   methods: {
     cat(id) {
-      this.$emit("cat", id);
+      this.$emit('cat', id)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .invite-message {
@@ -75,4 +75,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/ReplyMessage.vue b/src/components/chat/messaege/ReplyMessage.vue
index 5c672303..d8fb65fc 100644
--- a/src/components/chat/messaege/ReplyMessage.vue
+++ b/src/components/chat/messaege/ReplyMessage.vue
@@ -4,13 +4,13 @@
 
 <script>
 export default {
-  name: "ReplyMessage",
+  name: 'ReplyMessage',
   data() {
-    return {};
+    return {}
   },
   created() {},
   methods: {},
-};
+}
 </script>
 <style lang="less" scoped>
 .reply-message {
@@ -23,4 +23,4 @@ export default {
   border-radius: 3px;
   color: #a7a2a2;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/RevokeMessage.vue b/src/components/chat/messaege/RevokeMessage.vue
index 926236aa..650a2619 100644
--- a/src/components/chat/messaege/RevokeMessage.vue
+++ b/src/components/chat/messaege/RevokeMessage.vue
@@ -15,12 +15,12 @@
   </div>
 </template>
 <script>
-import { formateTime as sendTime } from "@/utils/functions";
+import { formateTime as sendTime } from '@/utils/functions'
 
 export default {
-  name: "RevokeMessage",
+  name: 'RevokeMessage',
   props: {
-    //邀请方式
+    // 邀请方式
     item: {
       type: Object,
       default: {},
@@ -29,7 +29,7 @@ export default {
   methods: {
     sendTime,
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .revoke-message {
@@ -66,4 +66,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/SystemMessage.vue b/src/components/chat/messaege/SystemMessage.vue
index 792b9aaf..96d8b9ba 100644
--- a/src/components/chat/messaege/SystemMessage.vue
+++ b/src/components/chat/messaege/SystemMessage.vue
@@ -4,14 +4,13 @@
 
 <script>
 export default {
-  name: "SystemMessage",
+  name: 'SystemMessage',
   components: {},
   data() {
-    return {};
+    return {}
   },
   methods: {},
   created() {},
-};
+}
 </script>
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/components/chat/messaege/TextMessage.vue b/src/components/chat/messaege/TextMessage.vue
index a67ee8c0..4d3f2922 100644
--- a/src/components/chat/messaege/TextMessage.vue
+++ b/src/components/chat/messaege/TextMessage.vue
@@ -12,19 +12,19 @@
   </div>
 </template>
 <script>
-import { textReplaceLink } from "@/utils/functions";
-import { textReplaceEmoji } from "@/utils/emojis";
+import { textReplaceLink } from '@/utils/functions'
+import { textReplaceEmoji } from '@/utils/emojis'
 
 export default {
-  name: "TextMessage",
+  name: 'TextMessage',
   props: {
     content: {
       type: String | Number,
-      default: "",
+      default: '',
     },
     float: {
       type: String,
-      default: "left",
+      default: 'left',
     },
     fullWidth: {
       type: Boolean,
@@ -37,18 +37,18 @@ export default {
   },
   data() {
     return {
-      html: "",
-    };
+      html: '',
+    }
   },
   created() {
     const text = textReplaceLink(
       this.content,
-      this.float == "right" ? "#ffffff" : "rgb(9 149 208)"
-    );
+      this.float == 'right' ? '#ffffff' : 'rgb(9 149 208)'
+    )
 
-    this.html = textReplaceEmoji(text);
+    this.html = textReplaceEmoji(text)
   },
-};
+}
 </script>
 <style lang="less" scoped>
 @bg-left-color: #f5f5f5;
@@ -102,8 +102,8 @@ export default {
     word-wrap: break-word;
     font-size: 15px;
     padding: 3px 10px;
-    font-family: "Microsoft YaHei";
+    font-family: 'Microsoft YaHei';
     line-height: 25px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/VideoMessage.vue b/src/components/chat/messaege/VideoMessage.vue
index d6d0cf7c..c8d78dd0 100644
--- a/src/components/chat/messaege/VideoMessage.vue
+++ b/src/components/chat/messaege/VideoMessage.vue
@@ -6,14 +6,13 @@
 
 <script>
 export default {
-  name: "VideoMessage",
+  name: 'VideoMessage',
   components: {},
   data() {
-    return {};
+    return {}
   },
   methods: {},
   created() {},
-};
+}
 </script>
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/components/chat/messaege/VisitCardMessage.vue b/src/components/chat/messaege/VisitCardMessage.vue
index c85efd1b..6cb137a0 100644
--- a/src/components/chat/messaege/VisitCardMessage.vue
+++ b/src/components/chat/messaege/VisitCardMessage.vue
@@ -22,26 +22,26 @@
 </template>
 <script>
 export default {
-  name: "VisitCardMessage",
+  name: 'VisitCardMessage',
   data() {
     return {
       userId: 0,
       friendId: 0,
       avatar:
-        "http://im-serve0.gzydong.club/static/image/sys-head/2019012107542668696.jpg",
+        'http://im-serve0.gzydong.club/static/image/sys-head/2019012107542668696.jpg',
       sign:
-        "这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。",
+        '这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。',
       nickname:
-        "氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳",
-    };
+        '氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳',
+    }
   },
   created() {},
   methods: {
     openVisitCard(user_id) {
-      this.$emit("openVisitCard", user_id);
+      this.$emit('openVisitCard', user_id)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .ellipsis {
@@ -131,4 +131,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/messaege/VoiceMessage.vue b/src/components/chat/messaege/VoiceMessage.vue
index c4b5468d..fb3feb6f 100644
--- a/src/components/chat/messaege/VoiceMessage.vue
+++ b/src/components/chat/messaege/VoiceMessage.vue
@@ -4,14 +4,13 @@
 
 <script>
 export default {
-  name: "VoiceMessage",
+  name: 'VoiceMessage',
   components: {},
   data() {
-    return {};
+    return {}
   },
   methods: {},
   created() {},
-};
+}
 </script>
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/components/chat/panel/PanelHeader.vue b/src/components/chat/panel/PanelHeader.vue
index 59757d63..c5d5319c 100644
--- a/src/components/chat/panel/PanelHeader.vue
+++ b/src/components/chat/panel/PanelHeader.vue
@@ -2,7 +2,7 @@
   <el-header id="panel-header">
     <div class="module left-module">
       <span class="icon-badge" :class="{ 'red-color': params.source == 1 }">
-        {{ params.source == 1 ? "好友" : "群组" }}
+        {{ params.source == 1 ? '好友' : '群组' }}
       </span>
       <span class="nickname">{{ params.nickname }}</span>
       <span class="num" v-show="params.source == 2">({{ groupNum }})</span>
@@ -11,7 +11,7 @@
     <div class="module center-module" v-show="params.source == 1">
       <p class="online">
         <span class="online-status" v-show="isOnline"></span>
-        <span>{{ isOnline ? "在线" : "离线" }}</span>
+        <span>{{ isOnline ? '在线' : '离线' }}</span>
       </p>
       <p class="keyboard-status" v-show="isKeyboard">对方正在输入 ...</p>
     </div>
@@ -43,7 +43,7 @@ export default {
       default: {
         source: 0,
         receive_id: 0,
-        nickname: "",
+        nickname: '',
       },
     },
     online: {
@@ -60,46 +60,46 @@ export default {
       params: {
         source: 1,
         receive_id: 0,
-        nickname: "",
+        nickname: '',
       },
       isOnline: false,
       isKeyboard: false,
       groupNum: 0,
-    };
+    }
   },
   created() {
-    this.setParamsData(this.data);
-    this.setOnlineStatus(this.online);
+    this.setParamsData(this.data)
+    this.setOnlineStatus(this.online)
   },
   watch: {
     data(value) {
-      this.setParamsData(value);
+      this.setParamsData(value)
     },
     online(value) {
-      this.setOnlineStatus(value);
+      this.setOnlineStatus(value)
     },
     keyboard(value) {
-      this.isKeyboard = value;
+      this.isKeyboard = value
       setTimeout(() => {
-        this.isKeyboard = false;
-      }, 2000);
+        this.isKeyboard = false
+      }, 2000)
     },
   },
   methods: {
     setOnlineStatus(value) {
-      this.isOnline = value;
+      this.isOnline = value
     },
     setParamsData(object) {
-      Object.assign(this.params, object);
+      Object.assign(this.params, object)
     },
     setGroupNum(value) {
-      this.groupNum = value;
+      this.groupNum = value
     },
     triggerEvent(event_name) {
-      this.$emit("event", event_name);
+      this.$emit('event', event_name)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 #panel-header {
@@ -177,7 +177,7 @@ export default {
           border-radius: 50%;
           -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
           animation: antStatusProcessing 1.2s ease-in-out infinite;
-          content: "";
+          content: '';
         }
       }
     }
@@ -267,4 +267,4 @@ export default {
     opacity: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/panel/PanelToolbar.vue b/src/components/chat/panel/PanelToolbar.vue
index 2135c521..43032b3e 100644
--- a/src/components/chat/panel/PanelToolbar.vue
+++ b/src/components/chat/panel/PanelToolbar.vue
@@ -42,7 +42,7 @@ export default {
       default: 0,
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .multi-select {
@@ -98,4 +98,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/chat/panel/TalkPanel.vue b/src/components/chat/panel/TalkPanel.vue
index 61ff1bc7..8fc28a08 100644
--- a/src/components/chat/panel/TalkPanel.vue
+++ b/src/components/chat/panel/TalkPanel.vue
@@ -73,11 +73,11 @@
                     class="time"
                     v-show="
                       item.source == 1 ||
-                      (item.source == 2 && item.float == 'right')
+                        (item.source == 2 && item.float == 'right')
                     "
                   >
                     <i class="el-icon-time"></i>
-                    {{ parseTime(item.created_at, "{m}月{d}日 {h}:{i}") }}
+                    {{ parseTime(item.created_at, '{m}月{d}日 {h}:{i}') }}
                   </span>
                 </div>
 
@@ -86,7 +86,7 @@
                     class="nickname"
                     v-show="item.source == 2 && item.float == 'left'"
                     >{{ item.nickname || item.friend_remarks }} |
-                    {{ parseTime(item.created_at, "{m}月{d}日 {h}:{i}") }}</span
+                    {{ parseTime(item.created_at, '{m}月{d}日 {h}:{i}') }}</span
                   >
 
                   <!-- 文本消息 -->
@@ -260,28 +260,28 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
-import UserBusinessCard from "@/components/user/UserBusinessCard";
-import TalkSearchRecord from "@/components/chat/TalkSearchRecord";
-import UserContacts from "@/components/chat/UserContacts";
-import GroupPanel from "@/components/group/GroupPanel";
-import GroupNotice from "@/components/group/GroupNotice";
-import MeEditor from "@/components/editor/MeEditor";
-import PanelHeader from "./PanelHeader";
-import PanelToolbar from "./PanelToolbar";
-import SocketInstance from "@/socket-instance";
-import { SvgMentionDown } from "@/core/icons";
-import { formateTime, parseTime, copyTextToClipboard } from "@/utils/functions";
-import { findTalkIndex } from "@/utils/talk";
+import { mapState } from 'vuex'
+import UserBusinessCard from '@/components/user/UserBusinessCard'
+import TalkSearchRecord from '@/components/chat/TalkSearchRecord'
+import UserContacts from '@/components/chat/UserContacts'
+import GroupPanel from '@/components/group/GroupPanel'
+import GroupNotice from '@/components/group/GroupNotice'
+import MeEditor from '@/components/editor/MeEditor'
+import PanelHeader from './PanelHeader'
+import PanelToolbar from './PanelToolbar'
+import SocketInstance from '@/socket-instance'
+import { SvgMentionDown } from '@/core/icons'
+import { formateTime, parseTime, copyTextToClipboard } from '@/utils/functions'
+import { findTalkIndex } from '@/utils/talk'
 import {
   ServeTalkRecords,
   ServeForwardRecords,
   ServeRemoveRecords,
   ServeRevokeRecords,
-} from "@/api/chat";
+} from '@/api/chat'
 
 export default {
-  name: "TalkEditorPanel",
+  name: 'TalkEditorPanel',
   components: {
     MeEditor,
     UserContacts,
@@ -302,7 +302,7 @@ export default {
         source: 0,
         // 消息接收者ID（好友ID或者群聊ID）
         receive_id: 0,
-        nickname: "",
+        nickname: '',
       },
     },
 
@@ -349,33 +349,33 @@ export default {
 
       // 置底按钮是否显示
       tipsBoard: false,
-    };
+    }
   },
   computed: {
     ...mapState({
-      unreadMessage: (state) => state.talks.unreadMessage,
-      inputEvent: (state) => state.notify.inputEvent,
-      uid: (state) => state.user.uid,
-      records: (state) => state.dialogue.records,
-      index_name: (state) => state.dialogue.index_name,
+      unreadMessage: state => state.talks.unreadMessage,
+      inputEvent: state => state.notify.inputEvent,
+      uid: state => state.user.uid,
+      records: state => state.dialogue.records,
+      index_name: state => state.dialogue.index_name,
     }),
   },
   watch: {
     // 监听面板传递参数
     params() {
-      this.loadRecord.minRecord = 0;
-      this.tipsBoard = false;
+      this.loadRecord.minRecord = 0
+      this.tipsBoard = false
       this.multiSelect = {
         isOpen: false,
         items: [],
         mode: 0,
-      };
+      }
 
-      this.loadChatRecords();
+      this.loadChatRecords()
     },
   },
   mounted() {
-    this.loadChatRecords();
+    this.loadChatRecords()
   },
   methods: {
     parseTime,
@@ -384,22 +384,22 @@ export default {
     // 处理 Header 组件事件
     handleHeaderEvent(event_name) {
       switch (event_name) {
-        case "history":
-          this.findChatRecord = true;
-          break;
-        case "notice":
-          this.group.notice = true;
-          break;
-        case "setting":
-          this.group.panel = true;
-          break;
+        case 'history':
+          this.findChatRecord = true
+          break
+        case 'notice':
+          this.group.notice = true
+          break
+        case 'setting':
+          this.group.panel = true
+          break
       }
     },
 
     // 回车键发送消息回调事件
     submitSendMesage(content) {
       // 调用组件发送消息
-      SocketInstance.emit("event_talk", {
+      SocketInstance.emit('event_talk', {
         // 发送消息的用户ID
         send_user: this.uid,
         // 接受者消息ID(用户ID或群ID)
@@ -408,169 +408,169 @@ export default {
         source_type: this.params.source,
         // 消息文本
         text_message: content,
-      });
+      })
 
-      this.$store.commit("UPDATE_TALK_ITEM", {
+      this.$store.commit('UPDATE_TALK_ITEM', {
         index: findTalkIndex(this.index_name),
         item: {
-          draft_text: "",
+          draft_text: '',
         },
-      });
+      })
     },
 
     // 推送编辑事件消息
     onKeyboardEvent(text) {
-      this.$store.commit("UPDATE_TALK_ITEM", {
+      this.$store.commit('UPDATE_TALK_ITEM', {
         index: findTalkIndex(this.index_name),
         item: {
           draft_text: text,
         },
-      });
+      })
 
       // 判断是否推送键盘输入事件消息
       if (!this.$store.state.settings.keyboardEventNotify) {
-        return false;
+        return false
       }
 
-      let time = new Date().getTime();
+      let time = new Date().getTime()
 
       // 判断当前对话是否属于私聊信息
-      if (this.params.source == 2 || !this.isOnline) return;
+      if (this.params.source == 2 || !this.isOnline) return
 
       // 判断在两秒内是否已推送事件
       if (this.keyboardEvent.time != 0 && time - this.keyboardEvent.time < 2000)
-        return;
+        return
 
-      this.keyboardEvent.time = time;
+      this.keyboardEvent.time = time
 
       // 调用父类Websocket组件发送消息
-      SocketInstance.emit("event_keyboard", {
+      SocketInstance.emit('event_keyboard', {
         send_user: this.uid,
         receive_user: this.params.receive_id,
-      });
+      })
     },
 
     // 加载用户聊天详情信息
     loadChatRecords() {
-      const user_id = this.uid;
+      const user_id = this.uid
       const data = {
         record_id: this.loadRecord.minRecord,
         receive_id: this.params.receive_id,
         source: this.params.source,
-      };
+      }
 
-      this.loadRecord.status = 0;
+      this.loadRecord.status = 0
 
-      let el = document.getElementById("lumenChatPanel");
-      let scrollHeight = el.scrollHeight;
+      let el = document.getElementById('lumenChatPanel')
+      let scrollHeight = el.scrollHeight
 
       ServeTalkRecords(data)
-        .then((res) => {
+        .then(res => {
           // 防止点击切换过快消息返回延迟，导致信息错误
           if (
             res.code != 200 ||
             (data.receive_id != this.params.receive_id &&
               data.source != this.params.source)
           ) {
-            return;
+            return
           }
 
-          const records = res.data.rows.map((item) => {
-            item.float = "center";
+          const records = res.data.rows.map(item => {
+            item.float = 'center'
             if (item.user_id > 0) {
-              item.float = item.user_id == user_id ? "right" : "left";
+              item.float = item.user_id == user_id ? 'right' : 'left'
             }
 
-            return item;
-          });
+            return item
+          })
 
           // 判断是否是初次加载
           if (data.record_id == 0) {
-            this.$store.commit("SET_DIALOGUE", []);
+            this.$store.commit('SET_DIALOGUE', [])
           }
 
-          this.$store.commit("UNSHIFT_DIALOGUE", records.reverse());
+          this.$store.commit('UNSHIFT_DIALOGUE', records.reverse())
 
-          this.loadRecord.status = records.length >= res.data.limit ? 1 : 2;
+          this.loadRecord.status = records.length >= res.data.limit ? 1 : 2
           this.loadRecord.minRecord =
-            records.length == res.data.limit ? res.data.record_id : 0;
+            records.length == res.data.limit ? res.data.record_id : 0
 
           this.$nextTick(() => {
             if (data.record_id == 0) {
-              el.scrollTop = el.scrollHeight;
+              el.scrollTop = el.scrollHeight
             } else {
-              el.scrollTop = el.scrollHeight - scrollHeight;
+              el.scrollTop = el.scrollHeight - scrollHeight
             }
-          });
+          })
+        })
+        .catch(e => {
+          this.loadRecord.status = 1
         })
-        .catch((e) => {
-          this.loadRecord.status = 1;
-        });
     },
 
     // 多选处理方式
     handleMultiMode(value) {
-      if (value == "close") {
-        this.closeMultiSelect();
-        return false;
+      if (value == 'close') {
+        this.closeMultiSelect()
+        return false
       }
 
       if (this.multiSelect.items.length <= 1) {
-        return false;
+        return false
       }
 
-      if (value == "forward") {
-        this.multiSelect.mode = 1;
-        this.selectContacts.isShow = true;
+      if (value == 'forward') {
+        this.multiSelect.mode = 1
+        this.selectContacts.isShow = true
         // 逐条转发
         if (this.verifyMultiSelectType(4)) {
           this.$notify({
-            title: "消息转发",
-            message: "会话记录不支持合并转发",
-          });
-          return false;
+            title: '消息转发',
+            message: '会话记录不支持合并转发',
+          })
+          return false
         }
-      } else if (value == "merge_forward") {
-        this.multiSelect.mode = 2;
-        this.selectContacts.isShow = true;
+      } else if (value == 'merge_forward') {
+        this.multiSelect.mode = 2
+        this.selectContacts.isShow = true
         // 合并转发
         if (this.verifyMultiSelectType(4)) {
           this.$notify({
-            title: "消息转发",
-            message: "会话记录不支持合并转发",
-          });
-          return false;
+            title: '消息转发',
+            message: '会话记录不支持合并转发',
+          })
+          return false
         }
-      } else if (value == "delete") {
-        this.multiSelect.mode = 3;
+      } else if (value == 'delete') {
+        this.multiSelect.mode = 3
 
         // 批量删除
-        let ids = this.multiSelect.items;
+        let ids = this.multiSelect.items
         ServeRemoveRecords({
           source: this.params.source,
           receive_id: this.params.receive_id,
-          record_id: ids.join(","),
-        }).then((res) => {
+          record_id: ids.join(','),
+        }).then(res => {
           if (res.code == 200) {
-            this.delRecords(ids).closeMultiSelect();
+            this.delRecords(ids).closeMultiSelect()
           }
-        });
+        })
       }
     },
 
     // 确认消息转发联系人事件
     confirmSelectContacts(arr) {
-      let user_ids = [];
-      let group_ids = [];
-      arr.forEach((item) => {
+      let user_ids = []
+      let group_ids = []
+      arr.forEach(item => {
         if (item.type == 1) {
-          user_ids.push(item.id);
+          user_ids.push(item.id)
         } else {
-          group_ids.push(item.id);
+          group_ids.push(item.id)
         }
-      });
+      })
 
-      this.selectContacts.isShow = false;
+      this.selectContacts.isShow = false
       ServeForwardRecords({
         forward_mode: this.multiSelect.mode,
         source: this.params.source,
@@ -578,278 +578,278 @@ export default {
         records_ids: this.multiSelect.items,
         receive_user_ids: user_ids,
         receive_group_ids: group_ids,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.closeMultiSelect();
+          this.closeMultiSelect()
           this.$notify({
-            title: "消息转发",
-            message: "消息转发成功...",
-            type: "success",
-          });
+            title: '消息转发',
+            message: '消息转发成功...',
+            type: 'success',
+          })
         }
-      });
+      })
     },
 
     // 处理消息时间是否显示
     compareTime(index, datetime) {
       if (datetime == undefined) {
-        return false;
+        return false
       }
 
       if (this.records[index].is_revoke == 1) {
-        return false;
+        return false
       }
 
-      datetime = datetime.replace(/-/g, "/");
-      let time = Math.floor(Date.parse(datetime) / 1000);
-      let currTime = Math.floor(new Date().getTime() / 1000);
+      datetime = datetime.replace(/-/g, '/')
+      let time = Math.floor(Date.parse(datetime) / 1000)
+      let currTime = Math.floor(new Date().getTime() / 1000)
 
       // 当前时间5分钟内时间不显示
-      if (currTime - time < 300) return false;
+      if (currTime - time < 300) return false
 
       // 判断是否是最后一条消息,最后一条消息默认显示时间
       if (index == this.records.length - 1) {
-        return true;
+        return true
       }
 
-      let nextDate = this.records[index + 1].created_at.replace(/-/g, "/");
+      let nextDate = this.records[index + 1].created_at.replace(/-/g, '/')
 
       return !(
-        parseTime(new Date(datetime), "{y}-{m}-{d} {h}:{i}") ==
-        parseTime(new Date(nextDate), "{y}-{m}-{d} {h}:{i}")
-      );
+        parseTime(new Date(datetime), '{y}-{m}-{d} {h}:{i}') ==
+        parseTime(new Date(nextDate), '{y}-{m}-{d} {h}:{i}')
+      )
     },
 
     // 查看好友用户信息
     catFriendDetail(value) {
-      this.$refs.userBusinessCard.open(value);
+      this.$refs.userBusinessCard.open(value)
     },
 
     // 撤回消息
     revokeRecords(index, item) {
       ServeRevokeRecords({
         record_id: item.id,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.$store.commit("UPDATE_DIALOGUE", {
+          this.$store.commit('UPDATE_DIALOGUE', {
             index,
             item: { is_revoke: 1 },
-          });
+          })
         }
-      });
+      })
     },
 
     // 删除消息
     removeRecords(index, item) {
-      let receive_id = item.receive_id;
+      let receive_id = item.receive_id
       if (item.source == 1 && item.user_id != this.uid) {
-        receive_id = item.user_id;
+        receive_id = item.user_id
       }
 
       ServeRemoveRecords({
         source: item.source,
         receive_id: receive_id,
         record_id: item.id.toString(),
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.$store.commit("DELETE_DIALOGUE", index);
+          this.$store.commit('DELETE_DIALOGUE', index)
         }
-      });
+      })
     },
 
     // 转发消息
     forwardRecords(idx, item) {
       this.$notify({
-        title: "温馨提示",
-        message: "单条记录转发开发中...",
-      });
+        title: '温馨提示',
+        message: '单条记录转发开发中...',
+      })
     },
 
     // 从列表中删除记录
     delRecords(arr) {
-      this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
-      return this;
+      this.$store.commit('BATCH_DELETE_DIALOGUE', arr)
+      return this
     },
 
     // 开启多选模式
     openMultiSelect() {
-      this.multiSelect.isOpen = true;
+      this.multiSelect.isOpen = true
     },
 
     // 关闭多选模式
     closeMultiSelect() {
-      this.multiSelect.isOpen = false;
-      this.multiSelect.items = [];
+      this.multiSelect.isOpen = false
+      this.multiSelect.items = []
     },
 
     // 判断记录是否选中
     verifyMultiSelect(records_id) {
-      return this.multiSelect.items.indexOf(records_id) >= 0;
+      return this.multiSelect.items.indexOf(records_id) >= 0
     },
 
     // 触发多选事件
     triggerMultiSelect(records_id) {
-      let i = this.multiSelect.items.indexOf(records_id);
+      let i = this.multiSelect.items.indexOf(records_id)
       if (i >= 0) {
-        this.multiSelect.items.splice(i, 1);
+        this.multiSelect.items.splice(i, 1)
       } else {
         if (this.multiSelect.items.length >= 30) {
           this.$notify({
-            title: "温馨提示",
-            message: "批量操作最大支持30条数据...",
-          });
-          return false;
+            title: '温馨提示',
+            message: '批量操作最大支持30条数据...',
+          })
+          return false
         }
-        this.multiSelect.items.push(records_id);
+        this.multiSelect.items.push(records_id)
       }
     },
 
     // 验证是否存在选择的指定类型的消息
     verifyMultiSelectType(type) {
-      return this.records.some((item) => {
-        return this.verifyMultiSelect(item.id) && item.msg_type == type;
-      });
+      return this.records.some(item => {
+        return this.verifyMultiSelect(item.id) && item.msg_type == type
+      })
     },
 
     // 消息点击右键触发自定义菜单
     onCopy(idx, item, event) {
-      let menus = [];
-      let content = "";
-      if (document.getElementById("copy_class_" + item.id)) {
-        content = document.getElementById("copy_class_" + item.id).innerText;
+      let menus = []
+      let content = ''
+      if (document.getElementById('copy_class_' + item.id)) {
+        content = document.getElementById('copy_class_' + item.id).innerText
       }
 
       if (content) {
         menus.push({
-          label: "复制",
-          icon: "el-icon-document-copy",
-          customClass: "cus-contextmenu-item",
+          label: '复制',
+          icon: 'el-icon-document-copy',
+          customClass: 'cus-contextmenu-item',
           onClick: () => {
-            copyTextToClipboard(content);
+            copyTextToClipboard(content)
           },
-        });
+        })
       }
 
       if (item.user_id == this.uid) {
         let time =
-          new Date().getTime() - Date.parse(item.created_at.replace(/-/g, "/"));
+          new Date().getTime() - Date.parse(item.created_at.replace(/-/g, '/'))
         if (Math.floor(time / 1000 / 60) < 2) {
           menus.push({
-            label: "撤回",
-            icon: "el-icon-s-flag",
-            customClass: "cus-contextmenu-item",
+            label: '撤回',
+            icon: 'el-icon-s-flag',
+            customClass: 'cus-contextmenu-item',
             onClick: () => {
-              this.revokeRecords(idx, item);
+              this.revokeRecords(idx, item)
             },
-          });
+          })
         }
       }
 
       menus.push({
-        label: "删除",
-        icon: "el-icon-delete",
-        customClass: "cus-contextmenu-item",
+        label: '删除',
+        icon: 'el-icon-delete',
+        customClass: 'cus-contextmenu-item',
         onClick: () => {
-          this.removeRecords(idx, item);
+          this.removeRecords(idx, item)
         },
-      });
+      })
 
       menus.push({
-        label: "转发",
-        icon: "el-icon-s-promotion",
-        customClass: "cus-contextmenu-item",
+        label: '转发',
+        icon: 'el-icon-s-promotion',
+        customClass: 'cus-contextmenu-item',
         onClick: () => {
-          this.forwardRecords(idx, item);
+          this.forwardRecords(idx, item)
         },
-      });
+      })
 
       menus.push({
-        label: "引用",
-        icon: "el-icon-connection",
-        customClass: "cus-contextmenu-item",
+        label: '引用',
+        icon: 'el-icon-connection',
+        customClass: 'cus-contextmenu-item',
         onClick: () => {},
-      });
+      })
 
       menus.push({
-        label: "多选",
-        icon: "el-icon-finished",
-        customClass: "cus-contextmenu-item",
+        label: '多选',
+        icon: 'el-icon-finished',
+        customClass: 'cus-contextmenu-item',
         onClick: () => {
-          this.openMultiSelect();
+          this.openMultiSelect()
         },
-      });
+      })
 
       // 判断是否是图片消息
       if (item.msg_type == 2 && item.file.file_type == 1) {
         menus.push({
-          label: "收藏",
-          icon: "el-icon-picture",
-          customClass: "cus-contextmenu-item",
+          label: '收藏',
+          icon: 'el-icon-picture',
+          customClass: 'cus-contextmenu-item',
           onClick: () => {
-            this.$store.commit("SAVE_USER_EMOTICON", {
+            this.$store.commit('SAVE_USER_EMOTICON', {
               record_id: item.id,
-            });
+            })
           },
-        });
+        })
       }
 
       this.$contextmenu({
         items: menus,
         event,
-        customClass: "cus-contextmenu",
+        customClass: 'cus-contextmenu',
         zIndex: 3,
         minWidth: 120,
-      });
+      })
 
-      this.closeMultiSelect();
-      event.preventDefault();
+      this.closeMultiSelect()
+      event.preventDefault()
     },
 
     hideChatGroup() {
-      this.group.panel = false;
+      this.group.panel = false
     },
 
     // 修改群聊免打扰状态
     disturbChange(detail) {
-      this.$store.commit("UPDATE_TALK_ITEM", {
+      this.$store.commit('UPDATE_TALK_ITEM', {
         index: findTalkIndex(`2_${this.params.receive_id}`),
         item: {
           not_disturb: parseInt(detail.status),
         },
-      });
+      })
     },
 
     // 退出群聊回调事件
     quitGroupSuccess() {
-      this.$emit("close-talk");
+      this.$emit('close-talk')
     },
 
     // 同步群信息
     syncGroupInfo(groupInfo) {
-      this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
+      this.$refs.panelHeader.setGroupNum(groupInfo.members_num)
     },
 
     // 对话面板滚动事件
     talkPanelScroll(e) {
       if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
-        this.loadChatRecords();
-        return;
+        this.loadChatRecords()
+        return
       }
 
-      const height = e.target.scrollTop + e.target.clientHeight + 5;
-      this.tipsBoard = height < e.target.scrollHeight;
+      const height = e.target.scrollTop + e.target.clientHeight + 5
+      this.tipsBoard = height < e.target.scrollHeight
       if (this.tipsBoard == false && this.unreadMessage.num > 0) {
-        this.$store.commit("CLEAR_TLAK_UNREAD_MESSAGE");
+        this.$store.commit('CLEAR_TLAK_UNREAD_MESSAGE')
       }
     },
 
     // 聊天版本滚动到底部
     talkPanelScrollBottom() {
-      let el = document.getElementById("lumenChatPanel");
-      el.scrollTop = el.scrollHeight;
+      let el = document.getElementById('lumenChatPanel')
+      el.scrollTop = el.scrollHeight
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .main-box {
diff --git a/src/components/editor/MeEditor.vue b/src/components/editor/MeEditor.vue
index 86f77fef..947a32a3 100644
--- a/src/components/editor/MeEditor.vue
+++ b/src/components/editor/MeEditor.vue
@@ -61,10 +61,7 @@
           trigger="click"
           popper-class="no-padding"
         >
-          <me-editor-emoticon
-            ref="editorEmoticon"
-            @selected="selecteEmoticon"
-          />
+          <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
         </el-popover>
 
         <form
@@ -96,17 +93,17 @@
     </el-container>
 
     <!-- 图片查看器 -->
-    <me-editor-image-view
+    <MeEditorImageView
       v-model="imageViewer.isShow"
       :file="imageViewer.file"
       @confirm="confirmUploadImage"
       ref="imageViewer"
     />
 
-    <me-editor-recorder v-if="recorder" @close="recorder = false" />
+    <MeEditorRecorder v-if="recorder" @close="recorder = false" />
 
     <!-- 代码块编辑器 -->
-    <talk-code-block
+    <TalkCodeBlock
       v-if="codeBlock.isShow"
       :edit-mode="codeBlock.editMode"
       @close="codeBlock.isShow = false"
@@ -114,27 +111,27 @@
     />
 
     <!-- 文件上传管理器 -->
-    <me-editor-file-manage ref="filesManager" v-model="filesManager.isShow" />
+    <MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
   </div>
 </template>
 
 <script>
-import MeEditorEmoticon from "./MeEditorEmoticon";
-import MeEditorFileManage from "./MeEditorFileManage";
-import MeEditorImageView from "./MeEditorImageView";
-import MeEditorRecorder from "./MeEditorRecorder";
-import TalkCodeBlock from "@/components/chat/TalkCodeBlock";
-import { getPasteImgs, getDragPasteImg } from "@/utils/editor";
-import { findTalk } from "@/utils/talk";
+import MeEditorEmoticon from './MeEditorEmoticon'
+import MeEditorFileManage from './MeEditorFileManage'
+import MeEditorImageView from './MeEditorImageView'
+import MeEditorRecorder from './MeEditorRecorder'
+import TalkCodeBlock from '@/components/chat/TalkCodeBlock'
+import { getPasteImgs, getDragPasteImg } from '@/utils/editor'
+import { findTalk } from '@/utils/talk'
 
 import {
   ServeSendTalkCodeBlock,
   ServeSendTalkImage,
   ServeSendEmoticon,
-} from "@/api/chat";
+} from '@/api/chat'
 
 export default {
-  name: "MeEditor",
+  name: 'MeEditor',
   components: {
     MeEditorEmoticon,
     MeEditorFileManage,
@@ -144,19 +141,19 @@ export default {
   },
   computed: {
     talkUser() {
-      return this.$store.state.dialogue.index_name;
+      return this.$store.state.dialogue.index_name
     },
   },
   watch: {
     talkUser(n_index_name) {
-      this.$refs.filesManager.clear();
-      this.editorText = this.getDraftText(n_index_name);
+      this.$refs.filesManager.clear()
+      this.editorText = this.getDraftText(n_index_name)
     },
   },
   data() {
     return {
       // 当前编辑的内容
-      editorText: "",
+      editorText: '',
 
       // 图片查看器相关信息
       imageViewer: {
@@ -181,166 +178,171 @@ export default {
 
       // 发送间隔时间（默认1秒）
       interval: 1000,
-    };
+    }
   },
   methods: {
     // 读取对话编辑草稿信息
     getDraftText(index_name) {
-      return findTalk(index_name).draft_text || "";
+      return findTalk(index_name).draft_text || ''
     },
 
     //复制粘贴图片回调方法
     pasteImage(e) {
-      let files = getPasteImgs(e);
-      if (files.length == 0) return;
+      let files = getPasteImgs(e)
+      if (files.length == 0) return
 
-      this.openImageViewer(files[0]);
+      this.openImageViewer(files[0])
     },
 
     //拖拽上传图片回调方法
     dragPasteImage(e) {
-      let files = getDragPasteImg(e);
-      if (files.length == 0) return;
-      this.openImageViewer(files[0]);
+      let files = getDragPasteImg(e)
+      if (files.length == 0) return
+
+      this.openImageViewer(files[0])
     },
 
     inputEvent(e) {
-      this.$emit("keyboard-event", e.target.value);
+      this.$emit('keyboard-event', e.target.value)
     },
 
     // 键盘按下监听事件
     keydownEvent(e) {
-      if (e.keyCode == 13 && this.editorText == "") {
-        e.preventDefault();
+      if (e.keyCode == 13 && this.editorText == '') {
+        e.preventDefault()
       }
 
       // 回车发送消息
-      if (e.keyCode == 13 && e.shiftKey == false && this.editorText != "") {
-        let currentTime = new Date().getTime();
+      if (e.keyCode == 13 && e.shiftKey == false && this.editorText != '') {
+        let currentTime = new Date().getTime()
 
         if (this.sendtime > 0) {
           // 判断 1秒内只能发送一条消息
           if (currentTime - this.sendtime < this.interval) {
-            e.preventDefault();
-            return false;
+            e.preventDefault()
+            return false
           }
         }
 
-        this.$emit("send", this.editorText);
-        this.editorText = "";
-        this.sendtime = currentTime;
-        e.preventDefault();
+        this.$emit('send', this.editorText)
+        this.editorText = ''
+        this.sendtime = currentTime
+        e.preventDefault()
       }
     },
 
     // 选择图片文件后回调方法
     uploadImageChange(e) {
-      this.openImageViewer(e.target.files[0]);
-      this.$refs.restFile.value = null;
+      this.openImageViewer(e.target.files[0])
+      this.$refs.restFile.value = null
     },
 
     // 选择文件回调事件
     uploadFileChange(e) {
-      let maxsize = 100 * 1024 * 1024;
+      let maxsize = 100 * 1024 * 1024
       if (e.target.files.length == 0) {
-        return false;
+        return false
       }
 
-      let file = e.target.files[0];
+      let file = e.target.files[0]
       if (/\.(gif|jpg|jpeg|png|webp|GIF|JPG|PNG|WEBP)$/.test(file.name)) {
-        this.openImageViewer(file);
-        return;
+        this.openImageViewer(file)
+        return
       }
 
       if (file.size > maxsize) {
         this.$notify.info({
-          title: "消息",
-          message: "上传文件不能大于100M",
-        });
-        return;
+          title: '消息',
+          message: '上传文件不能大于100M',
+        })
+        return
       }
 
-      this.filesManager.isShow = true;
-      this.$refs.restFile2.value = null;
-      this.$refs.filesManager.upload(file);
+      this.filesManager.isShow = true
+      this.$refs.restFile2.value = null
+      this.$refs.filesManager.upload(file)
     },
 
     // 打开图片查看器
     openImageViewer(file) {
-      this.imageViewer.isShow = true;
-      this.imageViewer.file = file;
+      this.imageViewer.isShow = true
+      this.imageViewer.file = file
     },
 
     // 代码块编辑器确认完成回调事件
     confirmCodeBlock(data) {
+      const { source, receive_id } = this.$store.state.dialogue
       ServeSendTalkCodeBlock({
+        source,
+        receive_id,
         code: data.code,
         lang: data.language,
-        receive_id: this.$store.state.dialogue.receive_id,
-        source: this.$store.state.dialogue.source,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.codeBlock.isShow = false;
+          this.codeBlock.isShow = false
         } else {
           this.$notify.error({
-            title: "错误",
-            message: "代码消息发送失败",
-          });
+            title: '错误',
+            message: '代码消息发送失败',
+          })
         }
-      });
+      })
     },
 
     // 确认上传图片消息回调事件
     confirmUploadImage() {
-      let fileData = new FormData();
-      fileData.append("img", this.imageViewer.file);
-      fileData.append("receive_id", this.$store.state.dialogue.receive_id);
-      fileData.append("source", this.$store.state.dialogue.source);
+      const { source, receive_id } = this.$store.state.dialogue
+
+      let fileData = new FormData()
+      fileData.append('source', source)
+      fileData.append('receive_id', receive_id)
+      fileData.append('img', this.imageViewer.file)
+
+      let ref = this.$refs.imageViewer
 
-      let ref = this.$refs.imageViewer;
       ServeSendTalkImage(fileData)
-        .then((res) => {
-          ref.loading = false;
-          if (res.code == 200) {
-            ref.closeBox();
-          }
+        .then(res => {
+          if (res.code == 200) ref.closeBox()
+        })
+        .finally(() => {
+          ref.loading = false
         })
-        .catch((err) => {
-          ref.loading = false;
-        });
     },
 
     // 选中表情包回调事件
     selecteEmoticon(data) {
       if (data.type == 1) {
-        let value = this.editorText;
-        let el = this.$refs.textarea;
-        let startPos = el.selectionStart;
-        let endPos = el.selectionEnd;
+        let value = this.editorText
+        let el = this.$refs.textarea
+        let startPos = el.selectionStart
+        let endPos = el.selectionEnd
         let newValue =
           value.substring(0, startPos) +
           data.value +
-          value.substring(endPos, value.length);
-        this.editorText = newValue;
+          value.substring(endPos, value.length)
+
+        this.editorText = newValue
+
         if (el.setSelectionRange) {
           setTimeout(() => {
-            let index = startPos + data.value.length;
-            el.setSelectionRange(index, index);
-            el.focus();
-          }, 0);
+            let index = startPos + data.value.length
+            el.setSelectionRange(index, index)
+            el.focus()
+          }, 0)
         }
       } else {
+        const { source, receive_id } = this.$store.state.dialogue
         ServeSendEmoticon({
+          source,
+          receive_id,
           emoticon_id: data.value,
-          receive_id: this.$store.state.dialogue.receive_id,
-          source: this.$store.state.dialogue.source,
-        });
+        })
       }
 
-      this.$refs.popoverEmoticon.doClose();
+      this.$refs.popoverEmoticon.doClose()
     },
   },
-};
+}
 </script>
 <style scoped>
 .editor-container {
diff --git a/src/components/editor/MeEditorEmoticon.vue b/src/components/editor/MeEditorEmoticon.vue
index 26002ebe..bbcb2460 100644
--- a/src/components/editor/MeEditorEmoticon.vue
+++ b/src/components/editor/MeEditorEmoticon.vue
@@ -87,7 +87,7 @@
       </el-footer>
     </el-container>
 
-    <me-editor-system-emoticon
+    <MeEditorSystemEmoticon
       v-if="systemEmojiBox"
       @close="systemEmojiBox = false"
     />
@@ -95,26 +95,26 @@
 </template>
 
 <script>
-import MeEditorSystemEmoticon from "@/components/editor/MeEditorSystemEmoticon";
-import { emojiList as emoji } from "@/utils/emojis";
-import { mapState } from "vuex";
+import MeEditorSystemEmoticon from '@/components/editor/MeEditorSystemEmoticon'
+import { emojiList as emoji } from '@/utils/emojis'
+import { mapState } from 'vuex'
 
 export default {
-  name: "MeEditorEmoticon",
+  name: 'MeEditorEmoticon',
   components: {
     MeEditorSystemEmoticon,
   },
   computed: {
     ...mapState({
-      emojiItem: (state) => state.emoticon.items,
+      emojiItem: state => state.emoticon.items,
     }),
     showItems() {
-      let start = (this.page - 1) * this.pageSize;
-      let end = start + this.pageSize;
-      return this.emojiItem.slice(start, end);
+      let start = (this.page - 1) * this.pageSize
+      let end = start + this.pageSize
+      return this.emojiItem.slice(start, end)
     },
     pageTotal() {
-      return this.emojiItem.length / this.pageSize;
+      return this.emojiItem.length / this.pageSize
     },
   },
   data() {
@@ -125,31 +125,31 @@ export default {
       systemEmojiBox: false,
 
       showEmoticonId: -1,
-      showTitle: "QQ表情/符号表情",
+      showTitle: 'QQ表情/符号表情',
 
       page: 1,
       pageSize: 13,
-    };
+    }
   },
   created() {
-    this.$store.commit("LOAD_USER_EMOTICON");
+    this.$store.commit('LOAD_USER_EMOTICON')
   },
   methods: {
     // 表情包导航翻页
     turnPage(type) {
       if (type == 1) {
-        if (this.page == 1) return false;
-        this.page--;
+        if (this.page == 1) return false
+        this.page--
       } else {
-        if (this.page >= this.pageTotal) return false;
-        this.page++;
+        if (this.page >= this.pageTotal) return false
+        this.page++
       }
     },
 
     // 点击表情包导航
     triggerItem(item) {
-      this.showEmoticonId = item.emoticon_id;
-      this.showTitle = item.name;
+      this.showEmoticonId = item.emoticon_id
+      this.showTitle = item.name
     },
 
     // 选中表情
@@ -157,7 +157,7 @@ export default {
       this.callback({
         type: 1,
         value: emoji,
-      });
+      })
     },
 
     // 发送图片表情包
@@ -165,25 +165,25 @@ export default {
       this.callback({
         type: 2,
         value: item.media_id,
-      });
+      })
     },
 
     callback(data) {
-      this.$emit("selected", data);
+      this.$emit('selected', data)
     },
 
     // 自定义上传表情
     customUploadEmoji(e) {
       if (e.target.files.length == 0) {
-        return false;
+        return false
       }
 
-      this.$store.commit("UPLOAD_USER_EMOTICON", {
+      this.$store.commit('UPLOAD_USER_EMOTICON', {
         file: e.target.files[0],
-      });
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/src/components/editor/MeEditorFileManage.vue b/src/components/editor/MeEditorFileManage.vue
index 89d3df27..cc97cced 100644
--- a/src/components/editor/MeEditorFileManage.vue
+++ b/src/components/editor/MeEditorFileManage.vue
@@ -13,7 +13,7 @@
 
     <el-main class="no-padding mian lum-scrollbar">
       <div class="empty-data" v-show="total == 0">
-        <svg-not-data />
+        <SvgNotData />
         <p>暂无上传文件</p>
       </div>
 
@@ -73,20 +73,20 @@
 </template>
 
 <script>
-import Vue from "vue";
-import { SvgNotData } from "@/core/icons";
-import { Progress } from "element-ui";
-Vue.use(Progress);
+import Vue from 'vue'
+import { SvgNotData } from '@/core/icons'
+import { Progress } from 'element-ui'
+Vue.use(Progress)
 
-import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from "@/api/upload";
-import { formateSize, getFileExt, parseTime } from "@/utils/functions";
-import { ServeSendTalkFile } from "@/api/chat";
+import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
+import { formateSize, getFileExt, parseTime } from '@/utils/functions'
+import { ServeSendTalkFile } from '@/api/chat'
 
 export default {
-  name: "MeEditorFileManage",
+  name: 'MeEditorFileManage',
   model: {
-    prop: "show",
-    event: "close",
+    prop: 'show',
+    event: 'close',
   },
   props: {
     show: Boolean,
@@ -98,164 +98,159 @@ export default {
     return {
       colors: [
         {
-          color: "#f56c6c",
+          color: '#f56c6c',
           percentage: 20,
         },
         {
-          color: "#e6a23c",
+          color: '#e6a23c',
           percentage: 40,
         },
         {
-          color: "#5cb87a",
+          color: '#5cb87a',
           percentage: 60,
         },
         {
-          color: "#1989fa",
+          color: '#1989fa',
           percentage: 80,
         },
         {
-          color: "#11ce65",
+          color: '#11ce65',
           percentage: 100,
         },
       ],
 
       items: [],
-    };
+    }
   },
   computed: {
     total() {
-      return this.items.filter((item, index) => {
-        return item.isDelete == false;
-      }).length;
+      return this.items.filter(item => {
+        return item.isDelete === false
+      }).length
     },
     successNum() {
-      return this.items.filter((item, index) => {
-        return item.isDelete == false && item.status == 2;
-      }).length;
+      return this.items.filter(item => {
+        return item.isDelete === false && item.status == 2
+      }).length
     },
   },
   methods: {
     closeBox() {
-      this.$emit("close", false);
+      this.$emit('close', false)
     },
 
     upload(file) {
       ServeFindFileSplitInfo({
         file_name: file.name,
         file_size: file.size,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          let hashName = res.data.hash_name;
-          let splitSize = res.data.split_size;
+          const { hash_name, split_size } = res.data
 
           this.items.unshift({
-            hashName: hashName,
+            hashName: hash_name,
             originalFile: file,
             filename: file.name,
             status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常
             progress: 0,
             filesize: formateSize(file.size),
-            filetype: file.type || "未知",
-            datetime: parseTime(new Date(), "{m}-{d} {h}:{i}"),
+            filetype: file.type || '未知',
+            datetime: parseTime(new Date(), '{m}-{d} {h}:{i}'),
             ext: getFileExt(file.name),
-            forms: this.fileSlice(file, hashName, splitSize),
+            forms: this.fileSlice(file, hash_name, split_size),
             successNum: 0,
             isDelete: false,
-          });
+          })
 
-          this.triggerUpload(hashName);
+          this.triggerUpload(hash_name)
         }
-      });
+      })
     },
 
     // 处理拆分上传文件
     fileSlice(file, hash, eachSize) {
-      const ext = getFileExt(file.name);
-      const splitNum = Math.ceil(file.size / eachSize); // 分片总数
-      const forms = [];
+      const ext = getFileExt(file.name)
+      const splitNum = Math.ceil(file.size / eachSize) // 分片总数
+      const forms = []
 
       // 处理每个分片的上传操作
       for (let i = 0; i < splitNum; i++) {
-        let start = i * eachSize;
-        let end = Math.min(file.size, start + eachSize);
+        let start = i * eachSize
+        let end = Math.min(file.size, start + eachSize)
 
         // 构建表单
-        const form = new FormData();
-        form.append("file", file.slice(start, end));
-        form.append("name", file.name);
-        form.append("hash", hash);
-        form.append("ext", ext);
-        form.append("size", file.size);
-        form.append("split_index", i);
-        form.append("split_num", splitNum);
-        forms.push(form);
+        const form = new FormData()
+        form.append('file', file.slice(start, end))
+        form.append('name', file.name)
+        form.append('hash', hash)
+        form.append('ext', ext)
+        form.append('size', file.size)
+        form.append('split_index', i)
+        form.append('split_num', splitNum)
+        forms.push(form)
       }
 
-      return forms;
+      return forms
     },
 
     // 触发上传文件
     triggerUpload(hashName) {
-      let $index = this.getFileIndex(hashName);
-      if ($index < 0) {
-        return;
-      }
-
-      if (this.items[$index].isDelte) {
-        return;
+      let $index = this.getFileIndex(hashName)
+      if ($index < 0 || this.items[$index].isDelte) {
+        return
       }
 
-      let i = this.items[$index].successNum;
-      let form = this.items[$index].forms[i];
-      let length = this.items[$index].forms.length;
-      this.items[$index].status = 1;
+      let i = this.items[$index].successNum
+      let form = this.items[$index].forms[i]
+      let length = this.items[$index].forms.length
+      this.items[$index].status = 1
       ServeFileSubareaUpload(form)
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            $index = this.getFileIndex(hashName);
-            this.items[$index].successNum++;
+            $index = this.getFileIndex(hashName)
+            this.items[$index].successNum++
             this.items[$index].progress = Math.floor(
               (this.items[$index].successNum / length) * 100
-            );
+            )
             if (this.items[$index].successNum == length) {
-              this.items[$index].status = 2;
+              this.items[$index].status = 2
               if (res.data.is_file_merge) {
                 ServeSendTalkFile({
                   hash_name: res.data.hash,
                   receive_id: this.$store.state.dialogue.receive_id,
                   source: this.$store.state.dialogue.source,
-                });
+                })
               }
             } else {
-              this.triggerUpload(hashName);
+              this.triggerUpload(hashName)
             }
           } else {
-            this.items[$index].status = 3;
+            this.items[$index].status = 3
           }
         })
-        .catch((err) => {
-          $index = this.getFileIndex(hashName);
-          this.items[$index].status = 3;
-        });
+        .catch(() => {
+          $index = this.getFileIndex(hashName)
+          this.items[$index].status = 3
+        })
     },
 
-    //获取分片文件数组索引
+    // 获取分片文件数组索引
     getFileIndex(hashName) {
-      return this.items.findIndex((item) => {
-        return item.hashName == hashName;
-      });
+      return this.items.findIndex(item => {
+        return item.hashName === hashName
+      })
     },
 
     removeFile(hashName) {
-      let index = this.getFileIndex(hashName);
-      this.items[index].isDelete = true;
+      let index = this.getFileIndex(hashName)
+      this.items[index].isDelete = true
     },
 
     clear() {
-      this.items = [];
+      this.items = []
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/src/components/editor/MeEditorImageView.vue b/src/components/editor/MeEditorImageView.vue
index c79e2193..6b295458 100644
--- a/src/components/editor/MeEditorImageView.vue
+++ b/src/components/editor/MeEditorImageView.vue
@@ -32,54 +32,54 @@
 </template>
 <script>
 export default {
-  name: "MeEditorImageView",
+  name: 'MeEditorImageView',
   model: {
-    prop: "show",
-    event: "close",
+    prop: 'show',
+    event: 'close',
   },
   props: {
     show: Boolean,
     file: File,
   },
   watch: {
-    file(nfile, ofile) {
-      this.loadFile(nfile);
+    file(file) {
+      this.loadFile(file)
     },
   },
   data() {
     return {
-      src: "",
-      fileSize: "",
-      fileName: "",
+      src: '',
+      fileSize: '',
+      fileName: '',
       loading: false,
-    };
+    }
   },
   methods: {
     closeBox() {
       if (this.loading) {
-        return false;
+        return false
       }
 
-      this.$emit("close", false);
+      this.$emit('close', false)
     },
     loadFile(file) {
-      let reader = new FileReader();
-      this.fileSize = Math.ceil(file.size / 1024);
-      this.fileName = file.name;
+      let reader = new FileReader()
+      this.fileSize = Math.ceil(file.size / 1024)
+      this.fileName = file.name
       reader.onload = () => {
-        this.src = reader.result;
-      };
+        this.src = reader.result
+      }
 
-      reader.readAsDataURL(file);
+      reader.readAsDataURL(file)
     },
 
     // 确认按钮事件
     uploadImage() {
-      this.loading = true;
-      this.$emit("confirm");
+      this.loading = true
+      this.$emit('confirm')
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/components/editor/MeEditorRecorder.vue b/src/components/editor/MeEditorRecorder.vue
index 8b6d503b..90443dfe 100644
--- a/src/components/editor/MeEditorRecorder.vue
+++ b/src/components/editor/MeEditorRecorder.vue
@@ -142,11 +142,10 @@
   </div>
 </template>
 <script>
-import { ServeSendTalkImage } from "@/api/chat";
-import Recorder from "js-audio-recorder";
+import Recorder from 'js-audio-recorder'
 
 export default {
-  name: "MeEditorRecorder",
+  name: 'MeEditorRecorder',
   data() {
     return {
       // 录音实例
@@ -164,148 +163,148 @@ export default {
       recorderStatus: 0, //0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 6:播放结束
 
       playTimeout: null,
-    };
+    }
   },
   computed: {
     datetime() {
-      let hour = parseInt((this.duration / 60 / 60) % 24); //小时
-      let minute = parseInt((this.duration / 60) % 60); //分钟
-      let seconds = parseInt(this.duration % 60); //秒
+      let hour = parseInt((this.duration / 60 / 60) % 24) //小时
+      let minute = parseInt((this.duration / 60) % 60) //分钟
+      let seconds = parseInt(this.duration % 60) //秒
 
-      if (hour < 10) hour = `0${hour}`;
-      if (minute < 10) minute = `0${minute}`;
-      if (seconds < 10) seconds = `0${seconds}`;
+      if (hour < 10) hour = `0${hour}`
+      if (minute < 10) minute = `0${minute}`
+      if (seconds < 10) seconds = `0${seconds}`
 
-      return `${hour}:${minute}:${seconds}`;
+      return `${hour}:${minute}:${seconds}`
     },
     formatPlayTime() {
-      let hour = parseInt((this.playTime / 60 / 60) % 24); //小时
-      let minute = parseInt((this.playTime / 60) % 60); //分钟
-      let seconds = parseInt(this.playTime % 60); //秒
+      let hour = parseInt((this.playTime / 60 / 60) % 24) //小时
+      let minute = parseInt((this.playTime / 60) % 60) //分钟
+      let seconds = parseInt(this.playTime % 60) //秒
 
-      if (hour < 10) hour = `0${hour}`;
-      if (minute < 10) minute = `0${minute}`;
-      if (seconds < 10) seconds = `0${seconds}`;
+      if (hour < 10) hour = `0${hour}`
+      if (minute < 10) minute = `0${minute}`
+      if (seconds < 10) seconds = `0${seconds}`
 
-      return `${hour}:${minute}:${seconds}`;
+      return `${hour}:${minute}:${seconds}`
     },
   },
   destroyed() {
     if (this.recorder) {
-      this.destroyRecorder();
+      this.destroyRecorder()
     }
   },
   methods: {
     closeBox() {
       if (this.recorder == null) {
-        this.$emit("close", false);
-        return;
+        this.$emit('close', false)
+        return
       }
 
       if (this.recorderStatus == 1) {
-        this.stopRecorder();
+        this.stopRecorder()
       } else if (this.recorderStatus == 4) {
-        this.pausePlayRecorder();
+        this.pausePlayRecorder()
       }
 
       // 销毁录音后关闭窗口
       this.destroyRecorder(() => {
-        this.$emit("close", false);
-      });
+        this.$emit('close', false)
+      })
     },
 
     // 开始录音
     startRecorder() {
-      let _this = this;
+      let _this = this
       // http://recorder.api.zhuyuntao.cn/Recorder/event.html
       // https://blog.csdn.net/qq_41619796/article/details/107865602
-      this.recorder = new Recorder();
-      this.recorder.onprocess = (duration) => {
-        duration = parseInt(duration);
-        _this.duration = duration;
-      };
+      this.recorder = new Recorder()
+      this.recorder.onprocess = duration => {
+        duration = parseInt(duration)
+        _this.duration = duration
+      }
 
       this.recorder.start().then(
         () => {
-          this.recorderStatus = 1;
-          this.animation = true;
+          this.recorderStatus = 1
+          this.animation = true
         },
-        (error) => {
-          console.log(`${error.name} : ${error.message}`);
+        error => {
+          console.log(`${error.name} : ${error.message}`)
         }
-      );
+      )
     },
     // 暂停录音
     pauseRecorder() {
-      this.recorder.pause();
-      this.recorderStatus = 2;
-      this.animation = false;
+      this.recorder.pause()
+      this.recorderStatus = 2
+      this.animation = false
     },
     // 继续录音
     resumeRecorder() {
-      this.recorderStatus = 1;
-      this.recorder.resume();
-      this.animation = true;
+      this.recorderStatus = 1
+      this.recorder.resume()
+      this.animation = true
     },
     // 结束录音
     stopRecorder() {
-      this.recorderStatus = 3;
-      this.recorder.stop();
-      this.animation = false;
+      this.recorderStatus = 3
+      this.recorder.stop()
+      this.animation = false
     },
     // 录音播放
     playRecorder() {
-      this.recorderStatus = 4;
-      this.recorder.play();
-      this.playTimeouts();
-      this.animation = true;
+      this.recorderStatus = 4
+      this.recorder.play()
+      this.playTimeouts()
+      this.animation = true
     },
     // 暂停录音播放
     pausePlayRecorder() {
-      this.recorderStatus = 5;
-      this.recorder.pausePlay();
-      clearInterval(this.playTimeout);
-      this.animation = false;
+      this.recorderStatus = 5
+      this.recorder.pausePlay()
+      clearInterval(this.playTimeout)
+      this.animation = false
     },
     // 恢复录音播放
     resumePlayRecorder() {
-      this.recorderStatus = 4;
-      this.recorder.resumePlay();
-      this.playTimeouts();
-      this.animation = true;
+      this.recorderStatus = 4
+      this.recorder.resumePlay()
+      this.playTimeouts()
+      this.animation = true
     },
     // 销毁录音
     destroyRecorder(callBack) {
       this.recorder.destroy().then(() => {
-        this.recorder = null;
-        console.log("销毁了...");
+        this.recorder = null
+        console.log('销毁了...')
         if (callBack) {
-          callBack();
+          callBack()
         }
-      });
+      })
     },
     // 获取录音文件大小（单位：字节）
     recorderSize() {
-      return this.recorder.fileSize;
+      return this.recorder.fileSize
     },
 
     playTimeouts() {
       this.playTimeout = setInterval(() => {
-        let time = parseInt(this.recorder.getPlayTime());
-        this.playTime = time;
+        let time = parseInt(this.recorder.getPlayTime())
+        this.playTime = time
         if (time == this.duration) {
-          clearInterval(this.playTimeout);
-          this.animation = false;
-          this.recorderStatus = 6;
+          clearInterval(this.playTimeout)
+          this.animation = false
+          this.recorderStatus = 6
         }
-      }, 100);
+      }, 100)
     },
 
     submit() {
-      alert("功能研发中,敬请期待...");
+      alert('功能研发中,敬请期待...')
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
@@ -340,7 +339,7 @@ export default {
 
 .music:before,
 .music:after {
-  content: "";
+  content: '';
   position: absolute;
   bottom: -20px;
   width: 40px;
diff --git a/src/components/editor/MeEditorSystemEmoticon.vue b/src/components/editor/MeEditorSystemEmoticon.vue
index 5e23420b..5b5a19f5 100644
--- a/src/components/editor/MeEditorSystemEmoticon.vue
+++ b/src/components/editor/MeEditorSystemEmoticon.vue
@@ -23,7 +23,7 @@
                   'remove-emoji': item.status != 0,
                 }"
               >
-                {{ item.status == 0 ? "添加" : "移除" }}
+                {{ item.status == 0 ? '添加' : '移除' }}
               </button>
             </div>
           </li>
@@ -40,52 +40,52 @@
 </template>
 
 <script>
-import { ServeFindSysEmoticon, ServeSetUserEmoticon } from "@/api/emoticon";
+import { ServeFindSysEmoticon, ServeSetUserEmoticon } from '@/api/emoticon'
 
 export default {
-  name: "MeEditorSystemEmoticon",
+  name: 'MeEditorSystemEmoticon',
   data() {
     return {
       items: [],
-    };
+    }
   },
   created() {
-    this.loadSysEmoticon();
+    this.loadSysEmoticon()
   },
   methods: {
     closeBox() {
-      this.$emit("close");
+      this.$emit('close')
     },
 
     // 获取系统表情包列表
     loadSysEmoticon() {
-      ServeFindSysEmoticon().then((res) => {
+      ServeFindSysEmoticon().then(res => {
         if (res.code == 200) {
-          this.items = res.data;
+          this.items = res.data
         }
-      });
+      })
     },
 
     setEmoticon(index, item, type) {
       ServeSetUserEmoticon({
         emoticon_id: item.id,
         type: type,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
           if (type == 1) {
-            this.items[index].status = 1;
-            this.$store.commit("APPEND_SYS_EMOTICON", res.data);
+            this.items[index].status = 1
+            this.$store.commit('APPEND_SYS_EMOTICON', res.data)
           } else {
-            this.items[index].status = 0;
-            this.$store.commit("REMOVE_SYS_EMOTICON", {
+            this.items[index].status = 0
+            this.$store.commit('REMOVE_SYS_EMOTICON', {
               emoticon_id: item.id,
-            });
+            })
           }
         }
-      });
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/components/group/GroupLaunch.vue b/src/components/group/GroupLaunch.vue
index 14a40340..ef88b87a 100644
--- a/src/components/group/GroupLaunch.vue
+++ b/src/components/group/GroupLaunch.vue
@@ -153,7 +153,7 @@ export default {
   },
   computed: {
     selected() {
-      return this.contacts.filter((item) => {
+      return this.contacts.filter(item => {
         return item.checked
       })
     },
@@ -163,7 +163,7 @@ export default {
       this.search =
         val == ''
           ? this.contacts
-          : this.contacts.filter((item) => {
+          : this.contacts.filter(item => {
               return item.nickname.match(this.keywords) != null
             })
     },
@@ -184,25 +184,25 @@ export default {
     this.handleScroll()
   },
   methods: {
-    //触发选择联系人事件
+    // 触发选择联系人事件
     triggerContacts(item) {
-      let index = this.contacts.findIndex((val) => {
-        return val.id == item.id
+      let index = this.contacts.findIndex(val => {
+        return val.id === item.id
       })
 
       this.contacts[index].checked = !this.contacts[index].checked
     },
 
-    //取消选中的联系人
+    // 取消选中的联系人
     delContacts(item) {
-      let index = this.contacts.findIndex((val) => {
-        return val.id == item.id
+      let index = this.contacts.findIndex(val => {
+        return val.id === item.id
       })
 
       this.contacts[index].checked = false
     },
 
-    //移除所有选中选项
+    // 移除所有选中选项
     delAll() {
       this.contacts.forEach((item, i) => {
         this.contacts[i].checked = false
@@ -216,33 +216,27 @@ export default {
 
     // 获取选中的ID列表
     getIds() {
-      return this.selected.map((item) => {
-        return item.id
-      })
+      return this.selected.map(item => item.id)
     },
 
     // 加载好友列表
     friendsApi() {
       ServeGetInviteFriends({
         group_id: this.from.groupId,
-      })
-        .then((res) => {
-          if (res.code == 200 && res.data) {
-            this.contacts = []
-            let data = res.data.map((item) => {
-              return Object.assign(item, {
-                nickname: item.friend_remark
-                  ? item.friend_remark
-                  : item.nickname,
-                checked: false,
-              })
+      }).then(res => {
+        if (res.code == 200 && res.data) {
+          this.contacts = []
+
+          let data = res.data.map(item => {
+            return Object.assign(item, {
+              nickname: item.friend_remark ? item.friend_remark : item.nickname,
+              checked: false,
             })
-            this.contacts.push(...data)
-          }
-        })
-        .catch((err) => {
-          console.log(err)
-        })
+          })
+
+          this.contacts.push(...data)
+        }
+      })
     },
 
     //创建聊天群
@@ -264,7 +258,7 @@ export default {
         return
       }
 
-      ServeCreateGroup(data).then((res) => {
+      ServeCreateGroup(data).then(res => {
         if (res.code == 200) {
           this.$emit('create-success', res.data)
         } else {
@@ -278,7 +272,7 @@ export default {
       ServeInviteGroup({
         group_id: this.from.groupId,
         uids: this.getIds().join(','),
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
           this.$emit('invite-success')
         } else {
@@ -372,10 +366,10 @@ export default {
 
       i {
         color: #ccc;
-      }
 
-      .icon-active {
-        color: #26bcfe !important;
+        &.icon-active {
+          color: #26bcfe !important;
+        }
       }
     }
   }
diff --git a/src/components/group/GroupManage.vue b/src/components/group/GroupManage.vue
index 3ab31322..9e257cfd 100644
--- a/src/components/group/GroupManage.vue
+++ b/src/components/group/GroupManage.vue
@@ -155,7 +155,7 @@
                           </div>
                         </div>
                         <div class="profile">
-                          签名 | {{ member.motto ? member.motto : "未设置" }}
+                          签名 | {{ member.motto ? member.motto : '未设置' }}
                         </div>
                       </div>
                     </div>
@@ -190,7 +190,7 @@
                     class="full-height"
                   >
                     <div v-if="notice.items.length == 0" class="empty-notice">
-                      <svg-not-data style="width: 80px; margin-bottom: 10px" />
+                      <SvgNotData style="width: 80px; margin-bottom: 10px" />
                       <span>暂无群公告</span>
                     </div>
 
@@ -211,7 +211,7 @@
                           <span
                             class="right-tools no-select"
                             @click="catNoticeDetail(index)"
-                            >{{ item.isShow ? "收起" : "展开" }}</span
+                            >{{ item.isShow ? '收起' : '展开' }}</span
                           >
                         </div>
                         <p class="datetime">
@@ -288,14 +288,14 @@
     </div>
 
     <transition name="el-fade-in-linear">
-      <avatar-cropper v-if="isAvatarCropper" @close="closeAvatarCropper" />
+      <AvatarCropper v-if="isAvatarCropper" @close="closeAvatarCropper" />
     </transition>
 
     <!-- 查看好友用户信息 -->
-    <user-business-card ref="userBusinessCard" />
+    <UserBusinessCard ref="userBusinessCard" />
 
     <transition name="el-fade-in-linear">
-      <group-launch
+      <GroupLaunch
         v-if="inviteFriendBox"
         :group-id="groupId"
         @close="inviteFriendBox = false"
@@ -305,10 +305,10 @@
   </div>
 </template>
 <script>
-import AvatarCropper from "@/components/layout/AvatarCropper";
-import UserBusinessCard from "@/components/user/UserBusinessCard";
-import GroupLaunch from "@/components/group/GroupLaunch";
-import { SvgNotData } from "@/core/icons";
+import AvatarCropper from '@/components/layout/AvatarCropper'
+import UserBusinessCard from '@/components/user/UserBusinessCard'
+import GroupLaunch from '@/components/group/GroupLaunch'
+import { SvgNotData } from '@/core/icons'
 import {
   ServeGetGroupMembers,
   ServeGetGroupNotices,
@@ -316,10 +316,10 @@ import {
   ServeRemoveMembersGroup,
   ServeGroupDetail,
   ServeEditGroup,
-} from "@/api/group";
+} from '@/api/group'
 
 export default {
-  name: "GroupManage",
+  name: 'GroupManage',
   props: {
     groupId: {
       type: [String, Number],
@@ -337,36 +337,36 @@ export default {
       // 当前选中菜单
       tabIndex: 0,
       menus: [
-        { name: "群信息" },
-        { name: "群成员" },
-        { name: "群公告" },
-        { name: "群设置" },
+        { name: '群信息' },
+        { name: '群成员' },
+        { name: '群公告' },
+        { name: '群设置' },
       ],
 
       loading: false,
       form: {
-        group_name: "",
-        profile: "",
-        avatar: "",
+        group_name: '',
+        profile: '',
+        avatar: '',
       },
       rules: {
         group_name: [
           {
             required: true,
-            message: "用户昵称不能为空!",
-            trigger: "blur",
+            message: '用户昵称不能为空!',
+            trigger: 'blur',
           },
         ],
       },
 
       detail: {
-        group_name: "",
-        profile: "",
-        avatar: "",
+        group_name: '',
+        profile: '',
+        avatar: '',
       },
 
       // 群成员列表
-      searchMembers: "",
+      searchMembers: '',
       batchDelMember: false,
       members: [],
 
@@ -376,22 +376,22 @@ export default {
         loading: false,
         form: {
           id: 0,
-          title: "",
-          content: "",
+          title: '',
+          content: '',
         },
         rules: {
           title: [
             {
               required: true,
-              message: "标题不能为空!",
-              trigger: "blur",
+              message: '标题不能为空!',
+              trigger: 'blur',
             },
           ],
           content: [
             {
               required: true,
-              message: "详情不能为空",
-              trigger: "blur",
+              message: '详情不能为空',
+              trigger: 'blur',
             },
           ],
         },
@@ -400,132 +400,132 @@ export default {
 
       inviteFriendBox: false,
       isAvatarCropper: false,
-    };
+    }
   },
   computed: {
     filterMembers() {
-      return this.searchMembers == ""
+      return this.searchMembers == ''
         ? this.members
-        : this.members.filter((item) => {
+        : this.members.filter(item => {
             return (
               item.nickname.match(this.searchMembers) != null ||
               item.visit_card.match(this.searchMembers) != null
-            );
-          });
+            )
+          })
     },
   },
   created() {
-    this.loadGroupDetail();
-    this.loadMembers();
-    this.loadNotices();
+    this.loadGroupDetail()
+    this.loadMembers()
+    this.loadNotices()
   },
   methods: {
     // 加载群信息
     loadGroupDetail() {
       ServeGroupDetail({
         group_id: this.groupId,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          let result = res.data;
-          this.form.group_name = result.group_name;
-          this.form.profile = result.group_profile;
-          this.form.avatar = result.avatar;
+          let result = res.data
+          this.form.group_name = result.group_name
+          this.form.profile = result.group_profile
+          this.form.avatar = result.avatar
 
           this.detail = {
             group_name: result.group_name,
             profile: result.profile,
             avatar: result.avatar,
-          };
+          }
         }
-      });
+      })
     },
 
     // 加载群组成员列表
     loadMembers() {
       ServeGetGroupMembers({
         group_id: this.groupId,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.members = res.data.map((item) => {
-            item.is_delete = false;
-            return item;
-          });
+          this.members = res.data.map(item => {
+            item.is_delete = false
+            return item
+          })
         }
-      });
+      })
     },
 
     // 加载群组公告列表
     loadNotices() {
       ServeGetGroupNotices({
         group_id: this.groupId,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.notice.items = res.data.map((item) => {
-            item.isShow = false;
-            return item;
-          });
+          this.notice.items = res.data.map(item => {
+            item.isShow = false
+            return item
+          })
         }
-      });
+      })
     },
 
     // 修改群信息
     editGroup() {
-      this.$refs.groupForm.validate((valid) => {
-        if (!valid) return false;
-        this.loading = true;
+      this.$refs.groupForm.validate(valid => {
+        if (!valid) return false
+        this.loading = true
         ServeEditGroup({
           group_id: this.groupId,
           group_name: this.form.group_name,
           profile: this.form.profile,
           avatar: this.form.avatar,
         })
-          .then((res) => {
+          .then(res => {
             if (res.code == 200) {
-              this.detail.group_name = this.form.group_name;
-              this.detail.profile = this.form.profile;
-              this.detail.avatar = this.form.avatar;
+              this.detail.group_name = this.form.group_name
+              this.detail.profile = this.form.profile
+              this.detail.avatar = this.form.avatar
 
               this.$message({
-                message: "信息修改成功...",
-                type: "success",
-              });
+                message: '信息修改成功...',
+                type: 'success',
+              })
             } else {
-              this.$message("信息修改失败...");
+              this.$message('信息修改失败...')
             }
           })
           .finally(() => {
-            this.loading = false;
-          });
-      });
+            this.loading = false
+          })
+      })
     },
 
     // 左侧菜单栏切换事件
     triggerTab(i) {
-      this.tabIndex = i;
+      this.tabIndex = i
     },
 
     // 关闭头像裁剪弹出层
-    closeAvatarCropper(type, avatar = "") {
-      this.isAvatarCropper = false;
-      if (type == 1 && avatar != "") {
-        this.form.avatar = avatar;
+    closeAvatarCropper(type, avatar = '') {
+      this.isAvatarCropper = false
+      if (type == 1 && avatar != '') {
+        this.form.avatar = avatar
       }
     },
 
     // 显示编辑公告窗口
-    showNoticeBox(id = 0, title = "", content = "") {
-      this.notice.isShowform = true;
-      this.notice.form.id = id;
-      this.notice.form.title = title;
-      this.notice.form.content = content;
+    showNoticeBox(id = 0, title = '', content = '') {
+      this.notice.isShowform = true
+      this.notice.form.id = id
+      this.notice.form.title = title
+      this.notice.form.content = content
     },
 
     // 编辑公告提交事件
     onSubmitNotice() {
-      this.$refs.noticeForm.validate((valid) => {
-        if (!valid) return false;
+      this.$refs.noticeForm.validate(valid => {
+        if (!valid) return false
 
-        this.notice.loading = true;
+        this.notice.loading = true
         ServeEditGroupNotice({
           notice_id: this.notice.form.id,
           group_id: this.groupId,
@@ -534,113 +534,113 @@ export default {
           is_top: 0,
           is_confirm: 0,
         })
-          .then((res) => {
+          .then(res => {
             if (res.code == 200) {
-              this.notice.isShowform = false;
-              this.loadNotices();
+              this.notice.isShowform = false
+              this.loadNotices()
               this.$notify({
-                title: "消息提示",
+                title: '消息提示',
                 message: this.notice.form.id
-                  ? "群公告修改成功..."
-                  : "群公告添加成功...",
-                type: "success",
-              });
+                  ? '群公告修改成功...'
+                  : '群公告添加成功...',
+                type: 'success',
+              })
             } else {
               this.$notify({
-                title: "消息提示",
+                title: '消息提示',
                 message: this.notice.form.id
-                  ? "群公告修改失败..."
-                  : "群公告添加失败...",
-                type: "success",
-              });
+                  ? '群公告修改失败...'
+                  : '群公告添加失败...',
+                type: 'success',
+              })
             }
           })
-          .catch((err) => {
+          .catch(err => {
             this.$notify({
-              title: "消息提示",
-              message: "网络异常，请稍后再试...",
-              position: "bottom-right",
-              type: "warning",
-            });
+              title: '消息提示',
+              message: '网络异常，请稍后再试...',
+              position: 'bottom-right',
+              type: 'warning',
+            })
           })
           .finally(() => {
-            this.notice.loading = false;
-          });
-      });
+            this.notice.loading = false
+          })
+      })
     },
 
     // 展开/收起群公告详情
     catNoticeDetail(index) {
-      this.notice.items[index].isShow = !this.notice.items[index].isShow;
+      this.notice.items[index].isShow = !this.notice.items[index].isShow
     },
 
     // 查看群成员信息事件
     catUserDetail(item) {
-      this.$refs.userBusinessCard.open(item.user_id);
+      this.$refs.userBusinessCard.open(item.user_id)
     },
 
     // 选中删除成员事件
     triggerDelBtn(member) {
-      let i = this.members.findIndex((item) => {
-        return item.id == member.id;
-      });
+      let i = this.members.findIndex(item => {
+        return item.id === member.id
+      })
 
-      this.members[i].is_delete = !this.members[i].is_delete;
+      this.members[i].is_delete = !this.members[i].is_delete
     },
 
     // 批量删除群成员
     deleteMembers() {
       let ids = [],
-        names = [];
+        names = []
 
-      this.members.forEach((item) => {
+      this.members.forEach(item => {
         if (item.is_delete) {
-          ids.push(item.user_id);
-          names.push(item.nickname);
+          ids.push(item.user_id)
+          names.push(item.nickname)
         }
-      });
+      })
 
       if (ids.length == 0) {
-        this.batchDelMember = false;
-        return;
+        this.batchDelMember = false
+        return
       }
 
-      this.$confirm(`您确定要将【 ${names.join("、")}】移出群聊?`, "温馨提示", {
-        confirmButtonText: "确定删除",
-        cancelButtonText: "取消",
+      this.$confirm(`您确定要将【 ${names.join('、')}】移出群聊?`, '温馨提示', {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
         dangerouslyUseHTMLString: true,
-        customClass: "border-radius0",
+        customClass: 'border-radius0',
       })
         .then(() => {
           ServeRemoveMembersGroup({
             group_id: this.groupId,
             members_ids: ids.join(','),
-          }).then((res) => {
+          }).then(res => {
             if (res.code == 200) {
-              this.loadMembers();
+              this.loadMembers()
               this.$notify({
-                title: "删除成功",
+                title: '删除成功',
                 message: `已成功将群成员移除群组...`,
-                type: "success",
-              });
+                type: 'success',
+              })
             }
-          });
+          })
         })
         .catch(() => {
-          this.members.map((item) => {
-            return (item.is_delete = false);
-          });
-          this.batchDelMember = false;
-        });
+          this.members.map(item => {
+            return (item.is_delete = false)
+          })
+          this.batchDelMember = false
+        })
     },
 
     // 好友邀请成功回调方法
     inviteSuccess() {
-      this.inviteFriendBox = false;
-      this.loadMembers();
+      this.inviteFriendBox = false
+      this.loadMembers()
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/components/group/GroupNotice.vue b/src/components/group/GroupNotice.vue
index f5db4968..4c940e03 100644
--- a/src/components/group/GroupNotice.vue
+++ b/src/components/group/GroupNotice.vue
@@ -23,7 +23,7 @@
         </template>
         <template v-if="loadStatus == 1 && items.length == 0">
           <div class="loading">
-            <svg-not-data class="svg-icon" />
+            <SvgNotData class="svg-icon" />
             <p>暂无群公告</p>
           </div>
         </template>
@@ -51,7 +51,7 @@
                 <span
                   class="right-tools no-select"
                   @click="catNoticeDetail(index)"
-                  >{{ item.isShow ? "收起" : "展开" }}</span
+                  >{{ item.isShow ? '收起' : '展开' }}</span
                 >
               </div>
               <p class="datetime">
@@ -78,11 +78,11 @@
   </div>
 </template>
 <script>
-import { ServeGetGroupNotices } from "@/api/group";
-import { SvgNotData } from "@/core/icons";
+import { ServeGetGroupNotices } from '@/api/group'
+import { SvgNotData } from '@/core/icons'
 
 export default {
-  name: "GroupNotice",
+  name: 'GroupNotice',
   props: {
     groupId: {
       type: [String, Number],
@@ -97,40 +97,40 @@ export default {
       // 公告列表
       items: [],
       loadStatus: 0,
-    };
+    }
   },
   created() {
-    this.loadNotices();
+    this.loadNotices()
   },
   methods: {
     // 加载群组公告列表
     loadNotices() {
-      this.loadStatus = 0;
+      this.loadStatus = 0
       ServeGetGroupNotices({
         group_id: this.groupId,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.items = res.data.map((item) => {
-              item.isShow = false;
-              return item;
-            });
+            this.items = res.data.map(item => {
+              item.isShow = false
+              return item
+            })
 
-            this.loadStatus = 1;
+            this.loadStatus = 1
           } else {
-            this.loadStatus = 2;
+            this.loadStatus = 2
           }
         })
-        .catch((err) => {
-          this.loadStatus = 2;
-        });
+        .catch(() => {
+          this.loadStatus = 2
+        })
     },
     // 展开/收起群公告详情
     catNoticeDetail(index) {
-      this.items[index].isShow = !this.items[index].isShow;
+      this.items[index].isShow = !this.items[index].isShow
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index ec52563f..9e64773b 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -193,11 +193,11 @@
     </div>
 
     <!-- 查看好友用户信息 -->
-    <user-business-card ref="userBusinessCard" />
+    <UserBusinessCard ref="userBusinessCard" />
 
     <!-- 邀请好友组件 -->
     <transition name="el-fade-in-linear">
-      <group-launch
+      <GroupLaunch
         v-if="inviteFriendBox"
         :group-id="groupId"
         @close="inviteFriendBox = false"
@@ -207,7 +207,7 @@
 
     <!-- 群管理组件 -->
     <transition name="el-fade-in-linear">
-      <group-manage
+      <GroupManage
         v-if="isShowManager"
         :group-id="groupId"
         @close="isShowManager = false"
@@ -216,7 +216,7 @@
 
     <!-- 群公告组件 -->
     <transition name="el-fade-in-linear">
-      <group-notice
+      <GroupNotice
         v-if="isShowGroupNotice"
         :group-id="groupId"
         @close="isShowGroupNotice = false"
@@ -300,7 +300,7 @@ export default {
     searchs() {
       return this.keywords == ''
         ? this.members
-        : this.members.filter((item) => {
+        : this.members.filter(item => {
             return (
               item.nickname.match(this.keywords) != null ||
               item.user_card.match(this.keywords) != null
@@ -319,7 +319,7 @@ export default {
     loadMembers() {
       ServeGetGroupMembers({
         group_id: this.groupId,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
           this.members = res.data
           this.$emit('group-info', {
@@ -335,7 +335,7 @@ export default {
       this.isEditRemark = false
       ServeGroupDetail({
         group_id: this.groupId,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
           let result = res.data
           this.detail.groupAvatar = result.avatar
@@ -363,7 +363,7 @@ export default {
         receive_id: this.groupId,
         not_disturb: value ? 1 : 0,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
             this.$emit('disturb-change', {
               group_id: this.groupId,
@@ -373,7 +373,7 @@ export default {
             this.detail.disturb = value ? 0 : 1
           }
         })
-        .catch((err) => {
+        .catch(() => {
           this.detail.disturb = value ? 0 : 1
         })
         .finally(() => {
@@ -396,7 +396,7 @@ export default {
       ServeUpdateGroupCard({
         group_id: this.groupId,
         visit_card: this.editRemarkText,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
           this.isEditRemark = false
           this.detail.visitCard = this.editRemarkText
@@ -438,7 +438,7 @@ export default {
       ServeSecedeGroup({
         group_id: this.detail.groupId,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
             this.signoutStatus = 3
             setTimeout(() => {
@@ -453,7 +453,7 @@ export default {
             }, 3000)
           }
         })
-        .catch((err) => {
+        .catch(err => {
           this.signoutStatus = 2
           setTimeout(() => {
             this.signoutStatus = 0
diff --git a/src/components/layout/AvatarCropper.vue b/src/components/layout/AvatarCropper.vue
index 423b3934..f5529d18 100644
--- a/src/components/layout/AvatarCropper.vue
+++ b/src/components/layout/AvatarCropper.vue
@@ -90,23 +90,23 @@
   </div>
 </template>
 <script>
-import { VueCropper } from "vue-cropper";
-import { ServeUploadFileStream } from "@/api/upload";
+import { VueCropper } from 'vue-cropper'
+import { ServeUploadFileStream } from '@/api/upload'
 
 export default {
-  name: "AvatarCropper",
+  name: 'AvatarCropper',
   components: {
     VueCropper,
   },
   data() {
     return {
-      cusPreviewsImg: "",
+      cusPreviewsImg: '',
       previews: {},
       option: {
-        img: "",
+        img: '',
         size: 1,
         full: false,
-        outputType: "png",
+        outputType: 'png',
         canMove: true,
         fixedBox: true,
         original: false,
@@ -120,84 +120,84 @@ export default {
       },
       fixed: true,
       fixedNumber: [1, 1],
-    };
+    }
   },
   methods: {
     clickUpload() {
-      this.$refs.fileInput.click();
+      this.$refs.fileInput.click()
     },
     clearCrop() {
-      if (!this.cusPreviewsImg) return false;
-      this.$refs.cropper.clearCrop();
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.clearCrop()
     },
     refreshCrop() {
-      if (!this.cusPreviewsImg) return false;
-      this.$refs.cropper.refresh();
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.refresh()
     },
     rotateLeft() {
-      if (!this.cusPreviewsImg) return false;
-      this.$refs.cropper.rotateLeft();
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.rotateLeft()
     },
     rotateRight() {
-      if (!this.cusPreviewsImg) return false;
-      this.$refs.cropper.rotateRight();
+      if (!this.cusPreviewsImg) return false
+      this.$refs.cropper.rotateRight()
     },
     // 实时预览函数
     realTime(data) {
-      let that = this;
-      this.$refs.cropper.getCropData((img) => {
-        that.cusPreviewsImg = img;
-      });
+      let that = this
+      this.$refs.cropper.getCropData(img => {
+        that.cusPreviewsImg = img
+      })
     },
 
     // 上传回调事件
     uploadImg(e, num) {
-      let file = e.target.files[0];
+      let file = e.target.files[0]
       if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-        this.$message("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
-        return false;
+        this.$message('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
+        return false
       }
 
-      let reader = new FileReader();
-      reader.onload = (e) => {
-        let data;
-        if (typeof e.target.result === "object") {
+      let reader = new FileReader()
+      reader.onload = e => {
+        let data
+        if (typeof e.target.result === 'object') {
           // 把Array Buffer转化为blob 如果是base64不需要
-          data = window.URL.createObjectURL(new Blob([e.target.result]));
+          data = window.URL.createObjectURL(new Blob([e.target.result]))
         } else {
-          data = e.target.result;
+          data = e.target.result
         }
         if (num === 1) {
-          this.option.img = data;
+          this.option.img = data
         } else if (num === 2) {
-          this.example2.img = data;
+          this.example2.img = data
         }
-      };
+      }
       // 转化为base64
       // reader.readAsDataURL(file)
       // 转化为blob
-      reader.readAsArrayBuffer(file);
+      reader.readAsArrayBuffer(file)
     },
 
     // 上传图片到服务器
     uploadService() {
-      if (this.cusPreviewsImg == "") return;
+      if (this.cusPreviewsImg == '') return
       ServeUploadFileStream({
         fileStream: this.cusPreviewsImg,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.$emit("close", 1, res.data.avatar);
+            this.$emit('close', 1, res.data.avatar)
           } else {
-            this.$message("文件上传失败,请稍后再试...");
+            this.$message('文件上传失败,请稍后再试...')
           }
         })
-        .catch((err) => {
-          this.$message("文件上传失败,请稍后再试...");
-        });
+        .catch(err => {
+          this.$message('文件上传失败,请稍后再试...')
+        })
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/note/NoteAnnexRecycle.vue b/src/components/note/NoteAnnexRecycle.vue
index feb1635a..07480f62 100644
--- a/src/components/note/NoteAnnexRecycle.vue
+++ b/src/components/note/NoteAnnexRecycle.vue
@@ -98,57 +98,57 @@
   </div>
 </template>
 <script>
-import Vue from "vue";
-import { Table, TableColumn } from "element-ui";
-Vue.use(Table);
-Vue.use(TableColumn);
+import Vue from 'vue'
+import { Table, TableColumn } from 'element-ui'
+Vue.use(Table)
+Vue.use(TableColumn)
 
 import {
   ServeGetRecoverAnnexList,
   ServeRecoverArticleAnnex,
   ServeDownloadAnnex,
   ServeForeverDeleteAnnex,
-} from "@/api/article";
+} from '@/api/article'
 
 export default {
-  name: "NoteAnnexRecycle",
+  name: 'NoteAnnexRecycle',
   data() {
     return {
       tableData: [],
       closeLock: false,
-    };
+    }
   },
   created() {
-    this.loadList();
+    this.loadList()
   },
   methods: {
     loadList() {
-      ServeGetRecoverAnnexList().then((res) => {
+      ServeGetRecoverAnnexList().then(res => {
         if (res.code == 200) {
-          this.tableData = res.data.rows;
+          this.tableData = res.data.rows
         }
-      });
+      })
     },
 
-    //关闭当前窗口
+    // 关闭当前窗口
     close() {
-      if (!this.closeLock) this.$emit("close");
+      if (!this.closeLock) this.$emit('close')
     },
 
-    //给遮罩层加锁
+    // 给遮罩层加锁
     lock(value) {
-      this.closeLock = value;
+      this.closeLock = value
     },
 
     // 恢复附件
     recoverAnnex(data, index) {
       ServeRecoverArticleAnnex({
         annex_id: data.id,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.tableData.splice(index, 1);
+          this.tableData.splice(index, 1)
         }
-      });
+      })
     },
 
     //永久删除附件
@@ -156,27 +156,27 @@ export default {
       ServeForeverDeleteAnnex({
         annex_id: data.id,
       })
-        .then((res) => {
-          this.$refs[`popover-${index}`].doClose();
-          this.lock(false);
+        .then(res => {
+          this.$refs[`popover-${index}`].doClose()
+          this.lock(false)
           if (res.code == 200) {
-            this.tableData.splice(index, 1);
+            this.tableData.splice(index, 1)
           } else {
             this.$notify({
-              message: "附件删除失败...",
-            });
+              message: '附件删除失败...',
+            })
           }
         })
-        .catch((err) => {
-          this.$refs[`popover-${index}`].doClose();
-          this.lock(false);
-        });
+        .catch(() => {
+          this.$refs[`popover-${index}`].doClose()
+          this.lock(false)
+        })
     },
 
     //下载笔记附件
     downloadAnnex: ServeDownloadAnnex,
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
@@ -203,4 +203,4 @@ export default {
   font-weight: 400;
   color: rgb(172, 167, 167);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/svg-icon/index.vue b/src/components/svg-icon/index.vue
index 00e475d9..7ba6cfdc 100644
--- a/src/components/svg-icon/index.vue
+++ b/src/components/svg-icon/index.vue
@@ -1,38 +1,38 @@
 <template>
   <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName"/>
+    <use :xlink:href="iconName" />
   </svg>
 </template>
 <script>
-  export default {
-    name: 'svg-icon',
-    props: {
-      iconClass: {
-        type: String,
-        required: true
-      },
-      className: {
-        type: String,
-        default: ''
-      }
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
     },
-    computed: {
-      iconName() {
-        return `#icon-${this.iconClass}`
-      },
-      svgClass() {
-        if (this.className) {
-          return 'svg-icon ' + this.className
-        } else {
-          return 'svg-icon'
-        }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
       }
-    }
-  }
+    },
+  },
+}
 </script>
 <style scoped>
-  .svg-icon {
-    fill: currentColor;
-    overflow: hidden;
-  }
-</style>
\ No newline at end of file
+.svg-icon {
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/user/UserBusinessCard.vue b/src/components/user/UserBusinessCard.vue
index c095a5ab..008def6c 100644
--- a/src/components/user/UserBusinessCard.vue
+++ b/src/components/user/UserBusinessCard.vue
@@ -17,7 +17,7 @@
           </div>
           <div class="nickname">
             <i class="iconfont icon-qianming"></i>
-            <span>{{ userInfo.nickname || "未设置昵称" }}</span>
+            <span>{{ userInfo.nickname || '未设置昵称' }}</span>
             <div class="share no-select" @click="contacts = true">
               <i class="iconfont icon-fenxiang3" /> <span>分享</span>
             </div>
@@ -38,7 +38,7 @@
           </div>
           <div class="card-row">
             <label>昵称</label>
-            <span>{{ userInfo.nickname || "未设置昵称" }}</span>
+            <span>{{ userInfo.nickname || '未设置昵称' }}</span>
           </div>
           <div class="card-row">
             <label>性别</label>
@@ -49,7 +49,7 @@
           <div class="card-row" v-show="userInfo.friendStatus == 2">
             <label>备注</label>
             <span v-if="!editRemark.isShow">{{
-              userInfo.nicknameRemark ? userInfo.nicknameRemark : "暂无备注"
+              userInfo.nicknameRemark ? userInfo.nicknameRemark : '暂无备注'
             }}</span>
             <span v-else
               ><input
@@ -124,7 +124,7 @@
       </div>
     </el-container>
 
-    <user-contacts
+    <UserContacts
       v-if="contacts"
       @confirm="confirmContact"
       @close="contacts = false"
@@ -132,13 +132,13 @@
   </div>
 </template>
 <script>
-import UserContacts from "@/components/chat/UserContacts";
-import { ServeCreateTalkList } from "@/api/chat";
-import { ServeSearchUser } from "@/api/user";
-import { ServeCreateContact, ServeEditContactRemark } from "@/api/contacts";
+import UserContacts from '@/components/chat/UserContacts'
+import { ServeCreateTalkList } from '@/api/chat'
+import { ServeSearchUser } from '@/api/user'
+import { ServeCreateContact, ServeEditContactRemark } from '@/api/contacts'
 
 export default {
-  name: "UserBusinessCard",
+  name: 'UserBusinessCard',
   components: {
     UserContacts,
   },
@@ -149,103 +149,103 @@ export default {
       // 用户ID
       user_id: 0,
 
-      //用户相关信息
+      // 用户相关信息
       userInfo: {
-        mobile: "",
-        nickname: "",
-        avatar: "",
-        motto: "",
+        mobile: '',
+        nickname: '',
+        avatar: '',
+        motto: '',
         friendStatus: 0,
         friendApply: 0,
-        nicknameRemark: "",
+        nicknameRemark: '',
 
-        imgbag: require("@/assets/image/default-user-banner.png"),
-        gender: 0, //(0:未知 1:男 2:女 默认0)
+        imgbag: require('@/assets/image/default-user-banner.png'),
+        gender: 0, //[0:未知;1:男;2:女;默认0]
       },
 
-      //好友备注表单
+      // 好友备注表单
       editRemark: {
         isShow: false,
-        text: "",
+        text: '',
       },
 
-      //好友申请表单
+      // 好友申请表单
       applyFrom: {
         isShow: false,
-        text: "",
+        text: '',
       },
 
       contacts: false,
-    };
+    }
   },
   methods: {
     // 显示窗口
     open(user_id) {
-      this.isShow = true;
-      this.user_id = user_id;
-      this.findUserDetail();
+      this.isShow = true
+      this.user_id = user_id
+      this.findUserDetail()
     },
 
     // 关闭窗口
     close() {
       if (this.contacts) {
-        return false;
+        return false
       }
-      this.isShow = false;
+      this.isShow = false
     },
 
     // 手机号格式化
     mobile(mobile) {
       return (
         mobile.substr(0, 3) +
-        " " +
+        ' ' +
         mobile.substr(3, 4) +
-        " " +
+        ' ' +
         mobile.substr(7, 4)
-      );
+      )
     },
 
     // 点击编辑备注信息
     clickEditRemark() {
-      this.editRemark.isShow = true;
-      this.editRemark.text = this.userInfo.nicknameRemark;
+      this.editRemark.isShow = true
+      this.editRemark.text = this.userInfo.nicknameRemark
     },
 
     // 获取用户信息
     findUserDetail() {
       ServeSearchUser({
         user_id: this.user_id,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          let data = res.data;
-          this.userInfo.user_id = data.id;
-          this.userInfo.mobile = data.mobile;
-          this.userInfo.nickname = data.nickname;
-          this.userInfo.nicknameRemark = data.nickname_remark;
-          this.userInfo.motto = data.motto;
-          this.userInfo.avatar = data.avatar;
-          this.userInfo.friendStatus = data.friend_status;
-          this.userInfo.friendApply = data.friend_apply;
-          this.userInfo.gender = data.gender;
+          let data = res.data
+          this.userInfo.user_id = data.id
+          this.userInfo.mobile = data.mobile
+          this.userInfo.nickname = data.nickname
+          this.userInfo.nicknameRemark = data.nickname_remark
+          this.userInfo.motto = data.motto
+          this.userInfo.avatar = data.avatar
+          this.userInfo.friendStatus = data.friend_status
+          this.userInfo.friendApply = data.friend_apply
+          this.userInfo.gender = data.gender
         }
-      });
+      })
     },
 
     // 发送添加好友申请
     sendApply() {
-      if (this.applyFrom.text == "") return;
+      if (this.applyFrom.text == '') return
       ServeCreateContact({
         friend_id: this.userInfo.user_id,
         remarks: this.applyFrom.text,
-      }).then((res) => {
+      }).then(res => {
         if (res.code == 200) {
-          this.applyFrom.isShow = false;
-          this.applyFrom.text = "";
-          this.userInfo.friendApply = 1;
+          this.applyFrom.isShow = false
+          this.applyFrom.text = ''
+          this.userInfo.friendApply = 1
         } else {
-          alert("发送好友申请失败,请稍后再试...");
+          alert('发送好友申请失败,请稍后再试...')
         }
-      });
+      })
     },
 
     // 编辑好友备注信息
@@ -253,49 +253,49 @@ export default {
       let data = {
         friend_id: this.userInfo.user_id,
         remarks: this.editRemark.text,
-      };
+      }
 
       if (data.remarks == this.userInfo.nicknameRemark) {
-        this.editRemark.isShow = false;
-        return;
+        this.editRemark.isShow = false
+        return
       }
 
-      ServeEditContactRemark(data).then((res) => {
+      ServeEditContactRemark(data).then(res => {
         if (res.code == 200) {
-          this.editRemark.isShow = false;
-          this.userInfo.nicknameRemark = data.remarks;
-          this.$emit("changeRemark", data);
+          this.editRemark.isShow = false
+          this.userInfo.nicknameRemark = data.remarks
+          this.$emit('changeRemark', data)
         }
-      });
+      })
     },
 
     // 隐藏申请表单
     closeApplyFrom() {
-      this.applyFrom.isShow = false;
+      this.applyFrom.isShow = false
     },
 
     // 发送好友消息
     sendMessage() {
-      let userInfo = this.userInfo;
+      let userInfo = this.userInfo
       ServeCreateTalkList({
         type: 1,
         receive_id: this.user_id,
-      }).then((res) => {
-        if (res.code !== 200) return;
+      }).then(res => {
+        if (res.code !== 200) return
 
-        this.$root.dumpTalkPage(`1_${userInfo.user_id}`);
-      });
+        this.$root.dumpTalkPage(`1_${userInfo.user_id}`)
+      })
     },
 
     confirmContact(array) {
-      this.contacts = false;
+      this.contacts = false
       this.$notify.info({
-        title: "消息",
-        message: "分享功能正在开发中...",
-      });
+        title: '消息',
+        message: '分享功能正在开发中...',
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/src/components/user/UserCard.vue b/src/components/user/UserCard.vue
index 0e8d622f..4c593d37 100644
--- a/src/components/user/UserCard.vue
+++ b/src/components/user/UserCard.vue
@@ -33,8 +33,8 @@
 
 <script>
 export default {
-  name: "UserCard",
-};
+  name: 'UserCard',
+}
 </script>
 <style lang="less" scoped>
 .user-card {
diff --git a/src/components/user/UserEditEmail.vue b/src/components/user/UserEditEmail.vue
index c35bbe3f..075cde1d 100644
--- a/src/components/user/UserEditEmail.vue
+++ b/src/components/user/UserEditEmail.vue
@@ -68,44 +68,44 @@
   </div>
 </template>
 <script>
-import SmsLock from "@/plugins/sms-lock";
-import { ServeSendEmailCode, ServeUpdateEmail } from "@/api/user";
+import SmsLock from '@/plugins/sms-lock'
+import { ServeSendEmailCode, ServeUpdateEmail } from '@/api/user'
 
 export default {
-  name: "UserEditEmail",
+  name: 'UserEditEmail',
   data() {
     return {
       loading: false,
       form: {
-        email: "",
-        password: "",
-        sms_code: "",
+        email: '',
+        password: '',
+        sms_code: '',
       },
       rules: {
         email: [
           {
             required: true,
-            message: "请输入邮箱地址",
-            trigger: "blur",
+            message: '请输入邮箱地址',
+            trigger: 'blur',
           },
           {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: "blur",
+            type: 'email',
+            message: '请输入正确的邮箱地址',
+            trigger: 'blur',
           },
         ],
         password: [
           {
             required: true,
-            message: "登录密码不能为空!",
-            trigger: "blur",
+            message: '登录密码不能为空!',
+            trigger: 'blur',
           },
         ],
         sms_code: [
           {
             required: true,
-            message: "验证码不能为空!",
-            trigger: "blur",
+            message: '验证码不能为空!',
+            trigger: 'blur',
           },
         ],
       },
@@ -113,10 +113,10 @@ export default {
       smsLock: false,
       smsLockObj: null,
       isShow: false,
-    };
+    }
   },
   created() {
-    this.smsLockObj = new SmsLock("CHANGE_EMAIL_SMS", 120);
+    this.smsLockObj = new SmsLock('CHANGE_EMAIL_SMS', 120)
   },
   destroyed() {
     this.smsLockObj.clearInterval()
@@ -124,76 +124,76 @@ export default {
   methods: {
     // 显示窗口
     open() {
-      this.$refs["form"].resetFields();
-      this.isShow = true;
+      this.$refs['form'].resetFields()
+      this.isShow = true
     },
 
     // 关闭窗口
     close() {
-      this.isShow = false;
+      this.isShow = false
     },
 
     //点击发送邮件验证码
     sendSms() {
-      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
+      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
       if (!mailReg.test(this.form.email)) {
-        this.$refs.form.validateField("email");
-        return false;
+        this.$refs.form.validateField('email')
+        return false
       }
 
-      this.smsLock = true;
+      this.smsLock = true
       ServeSendEmailCode({
         email: this.form.email,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.smsLockObj.start();
+            this.smsLockObj.start()
           }
         })
         .finally(() => {
-          this.smsLock = false;
-        });
+          this.smsLock = false
+        })
     },
 
     // 表单验证
     onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (!valid) return false;
-        this.changeEmail();
-      });
+      this.$refs[formName].validate(valid => {
+        if (!valid) return false
+        this.changeEmail()
+      })
     },
 
     // 提交修改手机号
     changeEmail() {
-      this.loading = true;
+      this.loading = true
       ServeUpdateEmail({
         email: this.form.email,
         email_code: this.form.sms_code,
         password: this.form.password,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.$refs["form"].resetFields();
+            this.$refs['form'].resetFields()
             this.$notify({
-              title: "成功",
-              message: "修改邮箱成功...",
-              type: "success",
-            });
+              title: '成功',
+              message: '修改邮箱成功...',
+              type: 'success',
+            })
 
-            this.$emit("success");
-            this.close();
+            this.$emit('success')
+            this.close()
           } else {
-            this.$message(res.message);
+            this.$message(res.message)
           }
 
-          this.loading = false;
+          this.loading = false
+        })
+        .catch(err => {
+          this.loading = false
         })
-        .catch((err) => {
-          this.loading = false;
-        });
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
@@ -225,4 +225,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/user/UserEditMobile.vue b/src/components/user/UserEditMobile.vue
index d542620a..cf0acd42 100644
--- a/src/components/user/UserEditMobile.vue
+++ b/src/components/user/UserEditMobile.vue
@@ -159,7 +159,7 @@ export default {
       ServeSendMobileCode({
         mobile: this.form.username,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code !== 200) {
             this.$notify({
               title: '提示',
@@ -188,7 +188,7 @@ export default {
 
     // 表单验证
     onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (!valid) return false
         this.changeMobile()
       })
@@ -202,7 +202,7 @@ export default {
         sms_code: this.form.sms_code,
         password: this.form.password,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
             this.$refs['form'].resetFields()
             this.$notify({
@@ -218,7 +218,7 @@ export default {
 
           this.loading = false
         })
-        .catch((err) => {
+        .catch(err => {
           this.loading = false
         })
     },
diff --git a/src/components/user/UserEditPassword.vue b/src/components/user/UserEditPassword.vue
index 372afc3d..87a2e203 100644
--- a/src/components/user/UserEditPassword.vue
+++ b/src/components/user/UserEditPassword.vue
@@ -57,102 +57,102 @@
   </div>
 </template>
 <script>
-import { ServeUpdatePassword } from "@/api/user";
+import { ServeUpdatePassword } from '@/api/user'
 
 export default {
-  name: "UserEditPassword",
+  name: 'UserEditPassword',
   data() {
     var validatePass2 = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("请再次输入密码"));
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
       } else if (value !== this.form.new_password) {
-        callback(new Error("两次输入密码不一致!"));
+        callback(new Error('两次输入密码不一致!'))
       } else {
-        callback();
+        callback()
       }
-    };
+    }
 
     return {
       loading: false,
       form: {
-        old_password: "",
-        new_password: "",
-        new_password2: "",
+        old_password: '',
+        new_password: '',
+        new_password2: '',
       },
       rules: {
         old_password: [
           {
             required: true,
-            message: "旧密码不能为空!",
-            trigger: "blur",
+            message: '旧密码不能为空!',
+            trigger: 'blur',
           },
         ],
         new_password: [
           {
             required: true,
-            message: "新密码不能为空!",
-            trigger: "blur",
+            message: '新密码不能为空!',
+            trigger: 'blur',
           },
         ],
         new_password2: [
           {
             required: true,
             validator: validatePass2,
-            trigger: "blur",
+            trigger: 'blur',
           },
         ],
       },
 
       isShow: false,
-    };
+    }
   },
   methods: {
     // 显示窗口
     open() {
-      this.$refs["form"].resetFields();
-      this.isShow = true;
+      this.$refs['form'].resetFields()
+      this.isShow = true
     },
 
     // 关闭窗口
     close() {
-      this.isShow = false;
+      this.isShow = false
     },
 
     // 表单验证
     onSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (!valid) return false;
-        this.changePassword();
-      });
+      this.$refs[formName].validate(valid => {
+        if (!valid) return false
+        this.changePassword()
+      })
     },
 
     // 提交修改手机号
     changePassword() {
-      this.loading = true;
+      this.loading = true
       ServeUpdatePassword({
         old_password: this.form.old_password,
         new_password: this.form.new_password,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.$refs["form"].resetFields();
+            this.$refs['form'].resetFields()
             this.$notify({
-              title: "成功",
-              message: "密码修改成功...",
-              type: "success",
-            });
+              title: '成功',
+              message: '密码修改成功...',
+              type: 'success',
+            })
           } else {
-            this.$message(res.message);
+            this.$message(res.message)
           }
 
-          this.loading = false;
+          this.loading = false
+        })
+        .catch(err => {
+          this.loading = false
         })
-        .catch((err) => {
-          this.loading = false;
-        });
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/components/user/UserSearch.vue b/src/components/user/UserSearch.vue
index b36c3062..ea6d4465 100644
--- a/src/components/user/UserSearch.vue
+++ b/src/components/user/UserSearch.vue
@@ -34,15 +34,15 @@
     </div>
 
     <!-- 查看好友用户信息 -->
-    <user-business-card ref="userBusinessCard" />
+    <UserBusinessCard ref="userBusinessCard" />
   </div>
 </template>
 <script>
-import { ServeSearchContact } from "@/api/contacts";
-import UserBusinessCard from "@/components/user/UserBusinessCard";
+import { ServeSearchContact } from '@/api/contacts'
+import UserBusinessCard from '@/components/user/UserBusinessCard'
 
 export default {
-  name: "UserSearch",
+  name: 'UserSearch',
   components: {
     UserBusinessCard,
   },
@@ -50,47 +50,48 @@ export default {
     return {
       loading: false,
       isShow: false,
-      mobile: "",
+      mobile: '',
       error: false,
-    };
+    }
   },
   methods: {
     // 显示窗口
     open() {
       this.mobile = ''
-      this.isShow = true;
-      this.$nextTick(()=>{
+      this.isShow = true
+      this.$nextTick(() => {
         document.getElementById('serach-mobile').focus()
       })
     },
 
     // 关闭窗口
     close() {
-      this.isShow = false;
+      this.isShow = false
     },
 
     onSubmit() {
-      let { mobile } = this;
-      if (mobile == "") return false;
+      let { mobile } = this
+
+      if (mobile == '') return false
 
-      this.loading = true;
+      this.loading = true
       ServeSearchContact({
         mobile,
       })
-        .then((res) => {
+        .then(res => {
           if (res.code == 200) {
-            this.$refs.userBusinessCard.open(res.data.id);
-            this.close();
+            this.$refs.userBusinessCard.open(res.data.id)
+            this.close()
           } else {
-            this.error = true;
+            this.error = true
           }
         })
         .finally(() => {
-          this.loading = false;
-        });
+          this.loading = false
+        })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/src/router/index.js b/src/router/index.js
index 034eb103..6e1db4b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -52,14 +52,14 @@ const routes = [{
       needLogin: true
     },
     redirect: "/settings/base",
-    component: () => import('@/views/SettingsPage'),
+    component: () => import('@/views/settings/Layout'),
     children: [{
         path: '/settings/base',
         meta: {
           title: '个人信息',
           needLogin: true
         },
-        component: () => import('@/views/settings/base'),
+        component: () => import('@/views/settings/BasePage'),
       },
       {
         path: '/settings/security',
@@ -67,7 +67,7 @@ const routes = [{
           title: '安全设置',
           needLogin: true
         },
-        component: () => import('@/views/settings/security'),
+        component: () => import('@/views/settings/SecurityPage'),
       },
       {
         path: '/settings/binding',
@@ -75,7 +75,7 @@ const routes = [{
           title: '账户绑定',
           needLogin: true
         },
-        component: () => import('@/views/settings/binding'),
+        component: () => import('@/views/settings/BindPage'),
       },
       {
         path: '/settings/personalize',
@@ -83,7 +83,7 @@ const routes = [{
           title: '个性化设置',
           needLogin: true
         },
-        component: () => import('@/views/settings/personalize'),
+        component: () => import('@/views/settings/PersonalizePage'),
       },
       {
         path: '/settings/notification',
@@ -91,7 +91,7 @@ const routes = [{
           title: '消息设置',
           needLogin: true
         },
-        component: () => import('@/views/settings/notification'),
+        component: () => import('@/views/settings/NotificationPage'),
       }
     ]
   },
@@ -124,14 +124,6 @@ const routes = [{
       needLogin: false
     }
   },
-  {
-    path: '/test',
-    name: 'test',
-    component: () => import('@/views/TestPage'),
-    meta: {
-      title: '测试页面',
-    }
-  },
   {
     path: '*',
     name: '404 NotFound',
diff --git a/src/views/ContactsPage.vue b/src/views/ContactsPage.vue
index 8139087b..b7011239 100644
--- a/src/views/ContactsPage.vue
+++ b/src/views/ContactsPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <main-layout :idx="1">
+    <MainLayout :idx="1">
       <el-container slot="container" class="full-height">
         <!-- 左侧侧边栏 -->
         <el-aside width="250px" class="aside-box">
@@ -343,20 +343,20 @@
           </div>
         </el-container>
       </el-container>
-    </main-layout>
+    </MainLayout>
 
     <!-- 创建群聊组件 -->
-    <group-launch
+    <GroupLaunch
       v-if="launchGroupShow"
       @close="launchGroupShow = false"
       @create-success="groupChatSuccess"
     />
 
     <!-- 查看好友用户信息 -->
-    <user-business-card ref="userBusinessCard" @changeRemark="changeRemark" />
+    <UserBusinessCard ref="userBusinessCard" @changeRemark="changeRemark" />
 
     <!-- 用户查询 -->
-    <user-search ref="searchUsers" />
+    <UserSearch ref="searchUsers" />
   </div>
 </template>
 <script>
diff --git a/src/views/NotePage.vue b/src/views/NotePage.vue
index 4066b695..c1fca117 100644
--- a/src/views/NotePage.vue
+++ b/src/views/NotePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <main-layout :idx="2">
+    <MainLayout :idx="2">
       <el-container slot="container" class="note-container">
         <el-aside width="230px" class="el-aside-one lum-scrollbar">
           <el-header class="btn-header">
@@ -552,16 +552,16 @@
           </el-container>
         </el-main>
       </el-container>
-    </main-layout>
+    </MainLayout>
 
     <!-- 笔记附件回收站 -->
-    <note-annex-recycle
+    <NoteAnnexRecycle
       v-if="recycleAnnexBox"
       @close="recycleAnnexBox = false"
     />
 
     <!-- 选择联系人窗口 -->
-    <user-contacts
+    <UserContacts
       v-show="selectContactsBox"
       @close="selectContactsBox = false"
       @confirm="confirmSelectContacts"
diff --git a/src/views/TestPage.vue b/src/views/TestPage.vue
deleted file mode 100644
index b3a53206..00000000
--- a/src/views/TestPage.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="test-page">
-    <!-- <visit-card-message /> -->
-
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "TestPage",
-
-  data() {
-    return {
-      list:[
-        {name:'111'},
-        {name:'222'},
-        {name:'333'},
-      ]
-    };
-  },
-  created() {},
-  methods: {
-    onEvent(value) {
-      console.log(value);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.test-page {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
diff --git a/src/views/auth/ForgetPasswordPage.vue b/src/views/auth/ForgetPasswordPage.vue
index 2854a068..fe24a141 100644
--- a/src/views/auth/ForgetPasswordPage.vue
+++ b/src/views/auth/ForgetPasswordPage.vue
@@ -103,102 +103,101 @@
   </div>
 </template>
 <script>
-import { ServeForgetPassword, ServeSendVerifyCode } from "@/api/user";
-import { isMobile } from "@/utils/validate";
-import SmsLock from "@/plugins/sms-lock";
+import { ServeForgetPassword, ServeSendVerifyCode } from '@/api/user'
+import { isMobile } from '@/utils/validate'
+import SmsLock from '@/plugins/sms-lock'
 
 export default {
-  name: "ForgetPasswordPage",
+  name: 'ForgetPasswordPage',
   data() {
     let validateMobile = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("手机号不能为空！"));
+      if (value === '') {
+        callback(new Error('手机号不能为空！'))
       } else {
-        isMobile(value)
-          ? callback()
-          : callback(new Error("手机号格式不正确！"));
+        isMobile(value) ? callback() : callback(new Error('手机号格式不正确！'))
       }
-    };
+    }
 
     let validatePass2 = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("请再次输入密码"));
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
       } else if (value !== this.form.password) {
-        callback(new Error("两次输入密码不一致!"));
+        callback(new Error('两次输入密码不一致!'))
       } else {
-        callback();
+        callback()
       }
-    };
+    }
 
     return {
       forgetLoading: false,
+
       form: {
-        username: "",
-        password: "",
-        password2: "",
-        sms_code: "",
+        username: '',
+        password: '',
+        password2: '',
+        sms_code: '',
       },
+
       rules: {
         username: [
           {
             validator: validateMobile,
-            trigger: "blur",
+            trigger: 'blur',
           },
         ],
         password: [
           {
             required: true,
-            message: "登录密码不能为空!",
-            trigger: "blur",
+            message: '登录密码不能为空!',
+            trigger: 'blur',
           },
         ],
         password2: [
           {
             validator: validatePass2,
-            trigger: "blur",
+            trigger: 'blur',
           },
         ],
         sms_code: [
           {
             required: true,
-            message: "验证码不能为空!",
-            trigger: "blur",
+            message: '验证码不能为空!',
+            trigger: 'blur',
           },
           {
             min: 6,
             max: 6,
-            message: "验证码格式不正确",
-            trigger: "blur",
+            message: '验证码格式不正确',
+            trigger: 'blur',
           },
         ],
       },
 
       smsLock: false,
       smsLockObj: null,
-    };
+    }
   },
   created() {
-    this.smsLockObj = new SmsLock("FORGET_PSW_SMS", 60);
+    this.smsLockObj = new SmsLock('FORGET_PSW_SMS', 60)
   },
   destroyed() {
-    this.smsLockObj.clearInterval();
+    this.smsLockObj.clearInterval()
   },
   methods: {
     toLink(url) {
       this.$router.push({
         path: url,
-      });
+      })
     },
+
     onSubmit(formName) {
-      if (this.forgetLoading) {
-        return false;
-      }
+      if (this.forgetLoading) return false
 
       this.$refs[formName].validate((valid) => {
-        if (!valid) return false;
-        this.forgetLoading = true;
-        this.forgetAccount();
-      });
+        if (!valid) return false
+        this.forgetLoading = true
+        this.forgetAccount()
+      })
     },
 
     forgetAccount() {
@@ -208,83 +207,81 @@ export default {
         sms_code: this.form.sms_code,
       })
         .then((res) => {
-          this.forgetLoading = false;
+          this.forgetLoading = false
           if (res.code == 200) {
             this.$notify({
-              title: "成功",
-              message: "密码修改成功,快去登录吧...",
-              type: "success",
-            });
+              title: '成功',
+              message: '密码修改成功,快去登录吧...',
+              type: 'success',
+            })
 
-            this.$refs.form.resetFields();
+            this.$refs.form.resetFields()
             setTimeout(() => {
               this.$router.push({
-                path: "/login",
-              });
-            }, 1500);
+                path: '/login',
+              })
+            }, 1500)
           } else {
             this.$notify({
               message: res.message,
-            });
+            })
           }
         })
-        .catch((err) => {
-          this.forgetLoading = false;
+        .catch(() => {
+          this.forgetLoading = false
           this.$notify({
-            message: "网络错误,请稍后再试...",
-          });
-        });
+            message: '网络错误,请稍后再试...',
+          })
+        })
     },
 
     //点击发送验证码
     sendSms() {
-      if (this.smsLock) {
-        return false;
-      }
+      if (this.smsLock) return false
 
       if (!isMobile(this.form.username)) {
-        this.$refs.form.validateField("username");
-        return false;
+        this.$refs.form.validateField('username')
+        return false
       }
 
-      this.smsLock = true;
+      this.smsLock = true
       ServeSendVerifyCode({
         mobile: this.form.username,
-        type: "forget_password",
+        type: 'forget_password',
       })
         .then((res) => {
           if (res.code == 200) {
-            this.smsLockObj.start();
+            this.smsLockObj.start()
             this.$notify({
-              title: "成功",
-              message: "验证码发送成功...",
-              type: "success",
-            });
+              title: '成功',
+              message: '验证码发送成功...',
+              type: 'success',
+            })
 
             if (res.data.is_debug) {
-              this.form.sms_code = res.data.sms_code;
               setTimeout(() => {
                 this.$notify({
-                  title: "提示",
-                  message: "已自动填充验证码",
-                });
-                this.form.sms_code = res.data.sms_code;
-              }, 500);
+                  title: '提示',
+                  message: '已自动填充验证码',
+                })
+
+                this.form.sms_code = res.data.sms_code
+              }, 500)
             }
           } else {
             this.$notify({
-              title: "提示",
-              message: "验证码发送失败...",
-            });
+              title: '提示',
+              message: '验证码发送失败...',
+            })
           }
         })
         .finally(() => {
-          this.smsLock = false;
-        });
+          this.smsLock = false
+        })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
-@import "~@/assets/css/page/login-auth.less";
+@import '~@/assets/css/page/login-auth.less';
 </style>
diff --git a/src/views/auth/LoginPage.vue b/src/views/auth/LoginPage.vue
index c4e7dbc1..fca039ad 100644
--- a/src/views/auth/LoginPage.vue
+++ b/src/views/auth/LoginPage.vue
@@ -80,119 +80,111 @@
   </div>
 </template>
 <script>
-import { setToken } from "@/utils/auth";
-import { isMobile } from "@/utils/validate";
-import { ServeLogin } from "@/api/user";
+import { setToken } from '@/utils/auth'
+import { isMobile } from '@/utils/validate'
+import { ServeLogin } from '@/api/user'
 
 export default {
-  name: "LoginPage",
+  name: 'LoginPage',
   data() {
     let validateMobile = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("登录手机号不能为空！"));
+      if (value === '') {
+        callback(new Error('登录手机号不能为空！'))
       } else {
-        if (!isMobile(value)) {
-          callback(new Error("登录手机号格式不正确！"));
-        } else {
-          callback();
-        }
+        isMobile(value)
+          ? callback()
+          : callback(new Error('登录手机号格式不正确！'))
       }
-    };
+    }
 
     return {
       loginLoading: false,
       form: {
-        username: "",
-        password: "",
+        username: '',
+        password: '',
       },
       rules: {
         username: [
           {
             validator: validateMobile,
-            trigger: "blur",
+            trigger: 'blur',
           },
           {
             min: 11,
             max: 11,
-            message: "手机号格式不正确!",
-            trigger: "blur",
+            message: '手机号格式不正确!',
+            trigger: 'blur',
           },
         ],
         password: [
           {
             required: true,
-            message: "登录密码不能为空!",
-            trigger: "blur",
+            message: '登录密码不能为空!',
+            trigger: 'blur',
           },
         ],
       },
-    };
+    }
   },
   methods: {
     onSubmit(formName) {
-      if (this.loginLoading) {
-        return false;
-      }
+      if (this.loginLoading) return false
 
       this.$refs[formName].validate((valid) => {
-        if (!valid) return false;
-        this.loginLoading = true;
-        this.login();
-      });
+        if (!valid) return false
+        this.loginLoading = true
+        this.login()
+      })
     },
 
     login() {
       ServeLogin({
         mobile: this.form.username,
         password: this.form.password,
-        platform: "web",
+        platform: 'web',
       })
         .then((res) => {
           if (res.code == 200) {
-            let result = res.data;
+            let result = res.data
 
             // 保存授权信息到本地缓存
-            setToken(
-              result.authorize.access_token,
-              result.authorize.expires_in
-            );
+            setToken(result.authorize.access_token, result.authorize.expires_in)
 
-            this.$store.commit("UPDATE_USER_INFO", result.userInfo);
-            this.$store.commit("UPDATE_LOGIN_STATUS");
+            this.$store.commit('UPDATE_USER_INFO', result.userInfo)
+            this.$store.commit('UPDATE_LOGIN_STATUS')
 
-            this.$root.initialize();
-            this.$router.push({
-              path: "/",
-            });
+            // 登录成功后连接 WebSocket 服务器
+            this.$root.initialize()
+            this.toLink('/')
 
             setTimeout(() => {
               this.$notify({
-                title: "友情提示",
+                title: '友情提示',
                 message:
-                  "此站点仅供演示、学习所用，请勿进行非法操作、上传或发布违法资讯。",
+                  '此站点仅供演示、学习所用，请勿进行非法操作、上传或发布违法资讯。',
                 duration: 0,
-              });
-            }, 3000);
+              })
+            }, 3000)
           } else {
             this.$notify.info({
-              title: "提示",
-              message: "登录密码不正确或账号不存在...",
-            });
+              title: '提示',
+              message: '登录密码不正确或账号不存在...',
+            })
           }
         })
-        .finally((err) => {
-          this.loginLoading = false;
-        });
+        .finally(() => {
+          this.loginLoading = false
+        })
     },
 
     toLink(url) {
       this.$router.push({
         path: url,
-      });
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
-@import "~@/assets/css/page/login-auth.less";
-</style>
\ No newline at end of file
+@import '~@/assets/css/page/login-auth.less';
+</style>
diff --git a/src/views/auth/NotFoundPage.vue b/src/views/auth/NotFoundPage.vue
index a547c4b0..01daddfd 100644
--- a/src/views/auth/NotFoundPage.vue
+++ b/src/views/auth/NotFoundPage.vue
@@ -2,53 +2,54 @@
   <div>
     <div class="not-found">
       <div class="not-found-left">
-        <svg-not-fount class="svg-notfount" />
+        <SvgNotFount class="svg-notfount" />
       </div>
       <div class="not-found-right">
         <h1>404</h1>
         <p>抱歉，你访问的页面不存在或仍在开发中...</p>
         <div>
-          <el-button type="primary" size="small" @click="toHome"
-            >返回首页 ({{ second }}S)</el-button
-          >
+          <el-button type="primary" size="small" @click="toHome">
+            返回首页 ({{ second }}S)
+          </el-button>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { SvgNotFount } from "@/core/icons";
+import { SvgNotFount } from '@/core/icons'
+
 export default {
-  name: "NotFoundPage",
+  name: 'NotFoundPage',
   components: {
     SvgNotFount,
   },
   data() {
     return {
-      second: 9,
+      second: 10,
       setInterval: null,
-    };
+    }
   },
   created() {
     this.setInterval = setInterval(() => {
-      this.second--;
+      this.second--
       if (this.second == 0) {
-        clearInterval(this.setInterval);
-        this.toHome();
+        clearInterval(this.setInterval)
+        this.toHome()
       }
-    }, 1000);
+    }, 1000)
   },
   destroyed() {
-    clearInterval(this.setInterval);
+    clearInterval(this.setInterval)
   },
   methods: {
     toHome() {
       this.$router.push({
-        path: "/",
-      });
+        path: '/',
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .not-found {
diff --git a/src/views/auth/RegisterPage.vue b/src/views/auth/RegisterPage.vue
index 424293a5..c504eec9 100644
--- a/src/views/auth/RegisterPage.vue
+++ b/src/views/auth/RegisterPage.vue
@@ -110,106 +110,106 @@
   </div>
 </template>
 <script>
-import { ServeRegister, ServeSendVerifyCode } from "@/api/user";
-import { isMobile } from "@/utils/validate";
-import SmsLock from "@/plugins/sms-lock";
+import { ServeRegister, ServeSendVerifyCode } from '@/api/user'
+import { isMobile } from '@/utils/validate'
+import SmsLock from '@/plugins/sms-lock'
 
 export default {
-  name: "RegisterPage",
+  name: 'RegisterPage',
   data() {
     let validateMobile = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("手机号不能为空！"));
+      if (value === '') {
+        callback(new Error('手机号不能为空！'))
+        return
+      }
+
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式不正确！'))
       } else {
-        if (!isMobile(value)) {
-          callback(new Error("手机号格式不正确！"));
-        } else {
-          callback();
-        }
+        callback()
       }
-    };
+    }
 
     let validatePass2 = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("请再次输入密码"));
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
       } else if (value !== this.form.password) {
-        callback(new Error("两次输入密码不一致!"));
+        callback(new Error('两次输入密码不一致!'))
       } else {
-        callback();
+        callback()
       }
-    };
+    }
 
     return {
       registerLoading: false,
       form: {
-        nickname: "",
-        username: "",
-        password: "",
-        password2: "",
-        sms_code: "",
+        nickname: '',
+        username: '',
+        password: '',
+        password2: '',
+        sms_code: '',
       },
       rules: {
         nickname: [
           {
             required: true,
-            message: "用户昵称不能为空!",
-            trigger: "blur",
+            message: '用户昵称不能为空!',
+            trigger: 'blur',
           },
         ],
         username: [
           {
             validator: validateMobile,
-            trigger: "blur",
+            trigger: 'blur',
           },
         ],
         password: [
           {
             required: true,
-            message: "登录密码不能为空!",
-            trigger: "blur",
+            message: '登录密码不能为空!',
+            trigger: 'blur',
           },
         ],
         password2: [
           {
             validator: validatePass2,
-            trigger: "blur",
+            trigger: 'blur',
           },
         ],
         sms_code: [
           {
             required: true,
-            message: "验证码不能为空!",
-            trigger: "blur",
+            message: '验证码不能为空!',
+            trigger: 'blur',
           },
         ],
       },
 
       smsLock: false,
       smsLockObj: null,
-    };
+    }
   },
   created() {
-    this.smsLockObj = new SmsLock("REGISTER_SMS", 120);
+    this.smsLockObj = new SmsLock('REGISTER_SMS', 120)
   },
   destroyed() {
-    this.smsLockObj.clearInterval();
+    this.smsLockObj.clearInterval()
   },
   methods: {
     toLink(url) {
       this.$router.push({
         path: url,
-      });
+      })
     },
+
     onSubmit(formName) {
-      if (this.registerLoading) {
-        return false;
-      }
+      if (this.registerLoading) return false
 
       this.$refs[formName].validate((valid) => {
-        if (!valid) return false;
-        this.registerLoading = true;
-        this.register();
-      });
+        if (!valid) return false
+        this.registerLoading = true
+        this.register()
+      })
     },
 
     register() {
@@ -218,89 +218,86 @@ export default {
         mobile: this.form.username,
         password: this.form.password,
         sms_code: this.form.sms_code,
-        platform: "web",
+        platform: 'web',
       })
         .then((res) => {
           if (res.code == 200) {
             this.$notify({
-              title: "成功",
-              message: "注册成功,快去登录吧...",
-              type: "success",
-            });
+              title: '成功',
+              message: '注册成功,快去登录吧...',
+              type: 'success',
+            })
 
-            this.$refs.form.resetFields();
+            this.$refs.form.resetFields()
             setTimeout(() => {
-              this.$router.push({
-                path: "/login",
-              });
-            }, 1500);
+              this.toLink('/login')
+            }, 1500)
           } else {
             this.$notify.info({
-              title: "提示",
+              title: '提示',
               message: res.message,
-            });
+            })
           }
         })
-        .catch((err) => {
+        .catch(() => {
           this.$notify({
-            message: "网络错误,请稍后再试...",
-          });
+            message: '网络错误,请稍后再试...',
+          })
         })
         .finally(() => {
-          this.registerLoading = false;
-        });
+          this.registerLoading = false
+        })
     },
 
-    //点击发送验证码
-    //点击发送验证码
+    // 点击发送验证码
     sendSms() {
-      if (this.smsLock) {
-        return false;
-      }
+      if (this.smsLock) return false
 
       if (!isMobile(this.form.username)) {
-        this.$refs.form.validateField("username");
-        return false;
+        this.$refs.form.validateField('username')
+        return false
       }
 
-      this.smsLock = true;
+      this.smsLock = true
       ServeSendVerifyCode({
         mobile: this.form.username,
-        type: "user_register",
+        type: 'user_register',
       })
         .then((res) => {
           if (res.code == 200) {
             this.$notify({
-              title: "成功",
-              message: "验证码发送成功...",
-              type: "success",
-            });
+              title: '成功',
+              message: '验证码发送成功...',
+              type: 'success',
+            })
+
+            this.smsLockObj.start()
 
-            this.smsLockObj.start();
             if (res.data.is_debug) {
               setTimeout(() => {
                 this.$notify({
-                  title: "提示",
-                  message: "已自动填充验证码",
-                });
-                this.form.sms_code = res.data.sms_code;
-              }, 500);
+                  title: '提示',
+                  message: '已自动填充验证码',
+                })
+
+                this.form.sms_code = res.data.sms_code
+              }, 500)
             }
           } else {
             this.$notify({
-              title: "提示",
+              title: '提示',
               message: res.message,
-              customClass: "cus-notifyclass",
-            });
+              customClass: 'cus-notifyclass',
+            })
           }
         })
-        .finally((err) => {
-          this.smsLock = false;
-        });
+        .finally(() => {
+          this.smsLock = false
+        })
     },
   },
-};
+}
 </script>
-<style lang="less" >
-@import "~@/assets/css/page/login-auth.less";
-</style>
\ No newline at end of file
+<style lang="less">
+@import '~@/assets/css/page/login-auth.less';
+</style>
diff --git a/src/views/layout/MainLayout.vue b/src/views/layout/MainLayout.vue
index 46aca936..426b5920 100644
--- a/src/views/layout/MainLayout.vue
+++ b/src/views/layout/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="body-background" :class="themeBagImg">
-    <el-container class="mian-layout" :class="{ 'full-mode': themeMode }">
+  <div class="body-bag" :class="themeBagImg">
+    <el-container class="main-layout" :class="{ 'full-mode': themeMode }">
       <el-aside width="70px" class="side-edge">
         <el-container class="full-height">
           <el-header height="100px" class="logo-header">
@@ -9,7 +9,7 @@
             </div>
             <p class="user-status">
               <span class="online" v-if="socketStatus">在线</span>
-              <span v-else>连线中...</span>
+              <span v-else>连接中...</span>
             </p>
           </el-header>
           <el-main class="sidebar-menu">
@@ -126,9 +126,6 @@ export default {
       default: 0,
     },
   },
-  data() {
-    return {}
-  },
   computed: {
     ...mapState({
       userAvatar: (state) => state.user.avatar,
@@ -156,7 +153,7 @@ export default {
       document
         .querySelector('#audio')
         .play()
-        .catch((err) => {
+        .catch(() => {
           console.error('消息提示音播放异常')
         })
     },
@@ -174,7 +171,7 @@ export default {
 }
 </script>
 <style lang="less">
-.mian-layout {
+.main-layout {
   position: fixed;
   width: 75%;
   height: 80%;
@@ -310,7 +307,7 @@ export default {
 }
 
 /* 主题背景图片 */
-.body-background {
+.body-bag {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -319,30 +316,30 @@ export default {
   left: 0;
   background-color: #121212;
   transition: ease-in 0.5s;
-}
 
-.bag001 {
-  background: url(~@/assets/image/background/001.jpg);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  &.bag001 {
+    background: url(~@/assets/image/background/001.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-.bag002 {
-  background: url(~@/assets/image/background/002.jpg);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  &.bag002 {
+    background: url(~@/assets/image/background/002.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-.bag003 {
-  background: url(~@/assets/image/background/003.jpg);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
+  &.bag003 {
+    background: url(~@/assets/image/background/003.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 
-.bag004 {
-  background: url(~@/assets/image/background/005.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  &.bag004 {
+    background: url(~@/assets/image/background/005.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 }
 
 @keyframes notifymove {
@@ -390,7 +387,7 @@ export default {
 }
 
 @media screen and (max-width: 1000px) {
-  .mian-layout {
+  .main-layout {
     width: 100%;
     height: 100%;
     border-radius: 0;
diff --git a/src/views/settings/base.vue b/src/views/settings/BasePage.vue
similarity index 77%
rename from src/views/settings/base.vue
rename to src/views/settings/BasePage.vue
index 6629e0fc..c0a7bab4 100644
--- a/src/views/settings/base.vue
+++ b/src/views/settings/BasePage.vue
@@ -10,13 +10,13 @@
             </el-form-item>
             <el-form-item label="电子邮箱:">
               <p>
-                <span>{{ form.email ? form.email : "未设置邮箱" }}</span>
+                <span>{{ form.email ? form.email : '未设置邮箱' }}</span>
                 <el-button
                   type="text"
                   icon="el-icon-edit-outline"
                   style="margin-left: 20px; font-weight: 300"
                   @click="toEmail"
-                  >{{ form.email ? "修改邮箱" : "设置邮箱" }}</el-button
+                  >{{ form.email ? '修改邮箱' : '设置邮箱' }}</el-button
                 >
               </p>
             </el-form-item>
@@ -65,63 +65,65 @@
       </el-row>
     </div>
 
-    <avatar-cropper v-if="isAvatarCropper" v-on:close="closeAvatarCropper" />
+    <AvatarCropper v-if="isAvatarCropper" v-on:close="closeAvatarCropper" />
   </div>
 </template>
 <script>
-import AvatarCropper from "@/components/layout/AvatarCropper";
-import { ServeUpdateUserDetail, ServeGetUserDetail } from "@/api/user";
+import AvatarCropper from '@/components/layout/AvatarCropper'
+import { ServeUpdateUserDetail, ServeGetUserDetail } from '@/api/user'
 
 export default {
-  name: "UsrBasePage",
+  name: 'UsrBasePage',
   components: {
     AvatarCropper,
   },
   data() {
     return {
       isAvatarCropper: false,
+
       form: {
-        nickname: "",
-        gender: "",
-        avatar: "",
-        motto: "",
-        email: "",
-        mobile: "",
+        nickname: '',
+        gender: '',
+        avatar: '',
+        motto: '',
+        email: '',
+        mobile: '',
       },
+
       rules: {
         nickname: [
           {
             required: true,
-            message: "用户昵称不能为空!",
-            trigger: "blur",
+            message: '用户昵称不能为空!',
+            trigger: 'blur',
           },
         ],
       },
 
       loading: false,
-    };
+    }
   },
   created() {
-    this.getUserDetail();
+    this.getUserDetail()
   },
   methods: {
     toEmail() {
       this.$router.push({
-        path: "/settings/security",
-      });
+        path: '/settings/security',
+      })
     },
     onSubmit() {
-      this.$refs["form"].validate((valid) => {
-        if (!valid) return false;
-        this.editUserDetail();
-      });
+      this.$refs['form'].validate((valid) => {
+        if (!valid) return false
+        this.editUserDetail()
+      })
     },
 
     // 关闭头像裁剪弹出层
-    closeAvatarCropper(type, avatar = "") {
-      this.isAvatarCropper = false;
-      if (type == 1 && avatar != "") {
-        this.form.avatar = avatar;
+    closeAvatarCropper(type, avatar = '') {
+      this.isAvatarCropper = false
+      if (type == 1 && avatar != '') {
+        this.form.avatar = avatar
       }
     },
 
@@ -131,21 +133,21 @@ export default {
         if (res.code == 200) {
           this.form.mobile = res.data.mobile.replace(
             /(\d{3})\d{4}(\d{4})/,
-            "$1****$2"
-          );
-          this.form.nickname = res.data.nickname;
-          this.form.avatar = res.data.avatar;
-          this.form.motto = res.data.motto;
-          this.form.email = res.data.email;
-          this.form.gender = res.data.gender;
+            '$1****$2'
+          )
+
+          this.form.nickname = res.data.nickname
+          this.form.avatar = res.data.avatar
+          this.form.motto = res.data.motto
+          this.form.email = res.data.email
+          this.form.gender = res.data.gender
         }
-      });
+      })
     },
 
     // 修改用户信息
     editUserDetail() {
-      this.loading = true;
-      let _this = this;
+      this.loading = true
       ServeUpdateUserDetail({
         nickname: this.form.nickname,
         avatar: this.form.avatar,
@@ -154,25 +156,25 @@ export default {
       })
         .then((res) => {
           if (res.code == 200) {
-            this.$store.commit("UPDATE_USER_INFO", {
+            this.$store.commit('UPDATE_USER_INFO', {
               nickname: this.form.nickname,
               sex: this.form.gender,
               signature: this.form.motto,
               avatar: this.form.avatar,
-            });
+            })
 
             this.$message({
-              message: "信息修改成功...",
-              type: "success",
-            });
+              message: '信息修改成功...',
+              type: 'success',
+            })
           }
         })
-        .finally(function () {
-          _this.loading = false;
-        });
+        .finally(() => {
+          this.loading = false
+        })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .box {
@@ -192,6 +194,7 @@ export default {
 .container /deep/ .el-textarea__inner {
   border-radius: 0;
 }
+
 .container /deep/ .el-button {
   border-radius: 2px;
   font-weight: 400;
diff --git a/src/views/settings/binding.vue b/src/views/settings/BindPage.vue
similarity index 98%
rename from src/views/settings/binding.vue
rename to src/views/settings/BindPage.vue
index 29ab01cf..f82093cf 100644
--- a/src/views/settings/binding.vue
+++ b/src/views/settings/BindPage.vue
@@ -44,8 +44,8 @@
 </template>
 <script>
 export default {
-  name: "BindingPage",
-};
+  name: 'BindingPage',
+}
 </script>
 <style lang="less" scoped>
 .container h4 {
diff --git a/src/views/SettingsPage.vue b/src/views/settings/Layout.vue
similarity index 78%
rename from src/views/SettingsPage.vue
rename to src/views/settings/Layout.vue
index 5faf34d8..88fb1c6a 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/settings/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <main-layout :idx="3">
+    <MainLayout :idx="3">
       <el-container slot="container" class="container">
         <el-header height="60px" class="header no-select">个人设置</el-header>
         <el-container class="full-height">
@@ -24,13 +24,13 @@
           </el-main>
         </el-container>
       </el-container>
-    </main-layout>
+    </MainLayout>
   </div>
 </template>
 <script>
-import MainLayout from "@/views/layout/MainLayout";
+import MainLayout from '@/views/layout/MainLayout'
 export default {
-  name: "SettingsPage",
+  name: 'SettingsPage',
   components: {
     MainLayout,
   },
@@ -38,29 +38,29 @@ export default {
     return {
       menus: [
         {
-          name: "个人信息",
-          path: "/settings/base",
+          name: '个人信息',
+          path: '/settings/base',
         },
         {
-          name: "安全设置",
-          path: "/settings/security",
+          name: '安全设置',
+          path: '/settings/security',
         },
         {
-          name: "个性化",
-          path: "/settings/personalize",
+          name: '个性化',
+          path: '/settings/personalize',
         },
         {
-          name: "账户绑定",
-          path: "/settings/binding",
+          name: '账户绑定',
+          path: '/settings/binding',
         },
         {
-          name: "消息通知",
-          path: "/settings/notification",
+          name: '消息通知',
+          path: '/settings/notification',
         },
       ],
-    };
+    }
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container {
@@ -107,4 +107,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/settings/notification.vue b/src/views/settings/NotificationPage.vue
similarity index 82%
rename from src/views/settings/notification.vue
rename to src/views/settings/NotificationPage.vue
index 3509509a..75f155b8 100644
--- a/src/views/settings/notification.vue
+++ b/src/views/settings/NotificationPage.vue
@@ -5,7 +5,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>新消息提示音</h4>
-          <p>{{ notifyCueTone ? "已开启" : "已关闭" }}</p>
+          <p>{{ notifyCueTone ? '已开启' : '已关闭' }}</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <span class="action">
@@ -17,7 +17,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>推送键盘输入消息</h4>
-          <p>{{ keyboardEvent ? "已开启" : "已关闭" }}</p>
+          <p>{{ keyboardEvent ? '已开启' : '已关闭' }}</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <span class="action">
@@ -30,29 +30,31 @@
 </template>
 <script>
 export default {
-  name: "NotificationPage",
+  name: 'NotificationPage',
   data() {
     return {
       notifyCueTone: true,
       keyboardEvent: true,
-    };
+    }
   },
   created() {
-    this.notifyCueTone = this.$store.state.settings.notifyCueTone;
-    this.keyboardEvent = this.$store.state.settings.keyboardEventNotify;
+    const { notifyCueTone, keyboardEventNotify } = this.$store.state.settings
+
+    this.notifyCueTone = notifyCueTone
+    this.keyboardEvent = keyboardEventNotify
   },
   methods: {
     // 触发修改消息提示音状态
     changeNotifyCueTone(value) {
-      this.$store.commit("SET_NOTIFY_CUE_TONE", value);
+      this.$store.commit('SET_NOTIFY_CUE_TONE', value)
     },
 
     // 修改键盘消息推送状态
     changeKeyboardEvent(value) {
-      this.$store.commit("SET_KEYBOARD_EVENT_NOTIFY", value);
+      this.$store.commit('SET_KEYBOARD_EVENT_NOTIFY', value)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container h4 {
diff --git a/src/views/settings/personalize.vue b/src/views/settings/PersonalizePage.vue
similarity index 83%
rename from src/views/settings/personalize.vue
rename to src/views/settings/PersonalizePage.vue
index 1f849203..08b06a32 100644
--- a/src/views/settings/personalize.vue
+++ b/src/views/settings/PersonalizePage.vue
@@ -5,7 +5,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>主题模式</h4>
-          <p>当前主题模式 ：{{ themeMode ? "全屏模式" : "窗口居中模式" }}</p>
+          <p>当前主题模式 ：{{ themeMode ? '全屏模式' : '窗口居中模式' }}</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <div class="action">
@@ -70,52 +70,52 @@
 </template>
 <script>
 export default {
-  name: "PersonalizePage",
+  name: 'PersonalizePage',
   data() {
     return {
       themeMode: false,
       bagItems: [
         {
-          name: "bag001",
-          src: require("@/assets/image/background/001.jpg"),
+          name: 'bag001',
+          src: require('@/assets/image/background/001.jpg'),
         },
         {
-          name: "bag002",
-          src: require("@/assets/image/background/002.jpg"),
+          name: 'bag002',
+          src: require('@/assets/image/background/002.jpg'),
         },
         {
-          name: "bag003",
-          src: require("@/assets/image/background/003.jpg"),
+          name: 'bag003',
+          src: require('@/assets/image/background/003.jpg'),
         },
         {
-          name: "bag004",
-          src: require("@/assets/image/background/005.png"),
+          name: 'bag004',
+          src: require('@/assets/image/background/005.png'),
         },
       ],
-    };
+    }
   },
   created() {
-    this.themeMode = this.$store.state.settings.themeMode;
+    this.themeMode = this.$store.state.settings.themeMode
   },
   methods: {
     // 触发修改主题模式
     changeThemeMode(value) {
-      this.$store.commit("SET_THEME_MODE", value);
+      this.$store.commit('SET_THEME_MODE', value)
     },
 
     // 修改主题背景
     changeThemeBag(item) {
-      let bagName = item.name;
+      let bagName = item.name
       if (this.$store.state.settings.themeBagImg == item.name) {
-        bagName = "";
+        bagName = ''
       } else {
-        bagName = item.name;
+        bagName = item.name
       }
 
-      this.$store.commit("SET_THEME_BAGIMG", bagName);
+      this.$store.commit('SET_THEME_BAGIMG', bagName)
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container h4 {
@@ -190,4 +190,4 @@ export default {
     filter: contrast(130%);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/settings/security.vue b/src/views/settings/SecurityPage.vue
similarity index 72%
rename from src/views/settings/security.vue
rename to src/views/settings/SecurityPage.vue
index 175d17a4..9e55bd57 100644
--- a/src/views/settings/security.vue
+++ b/src/views/settings/SecurityPage.vue
@@ -5,7 +5,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>账户密码</h4>
-          <p>当前密码强度 ：{{ cipherStrength }}</p>
+          <p>当前密码强度 ：中</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <span class="action" @click="$refs.changePasswrodRef.open()"
@@ -17,7 +17,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>绑定手机</h4>
-          <p>已绑定手机 ：{{ bindMobile }}</p>
+          <p>已绑定手机 ：{{ mobile }}</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <span class="action" @click="$refs.changeMobileRef.open()">更换</span>
@@ -27,7 +27,7 @@
       <el-row type="flex" class="list-item">
         <el-col :span="20" class="left-col">
           <h4>绑定邮箱</h4>
-          <p>已绑定邮箱 ：{{ bindEmail }}</p>
+          <p>已绑定邮箱 ：{{ email }}</p>
         </el-col>
         <el-col :span="4" class="right-col">
           <span class="action" @click="$refs.changeEmailRef.open()">修改</span>
@@ -36,24 +36,24 @@
     </div>
 
     <!-- 修改密码组件 -->
-    <user-edit-password ref="changePasswrodRef" />
+    <UserEditPassword ref="changePasswrodRef" />
 
     <!-- 修改手机号组件 -->
-    <user-edit-mobile ref="changeMobileRef" @success="getUserDetail" />
+    <UserEditMobile ref="changeMobileRef" @success="getUserDetail" />
 
     <!-- 修改邮箱组件 -->
-    <user-edit-email ref="changeEmailRef" @success="getUserDetail" />
+    <UserEditEmail ref="changeEmailRef" @success="getUserDetail" />
   </div>
 </template>
 
 <script>
-import UserEditPassword from "@/components/user/UserEditPassword";
-import UserEditMobile from "@/components/user/UserEditMobile";
-import UserEditEmail from "@/components/user/UserEditEmail";
-import { ServeGetUserDetail } from "@/api/user";
+import UserEditPassword from '@/components/user/UserEditPassword'
+import UserEditMobile from '@/components/user/UserEditMobile'
+import UserEditEmail from '@/components/user/UserEditEmail'
+import { ServeGetUserDetail } from '@/api/user'
 
 export default {
-  name: "SecurityPage",
+  name: 'SecurityPage',
   components: {
     UserEditPassword,
     UserEditMobile,
@@ -61,32 +61,29 @@ export default {
   },
   data() {
     return {
-      // 密码强度
-      cipherStrength: "中",
-
-      bindMobile: "",
-
-      bindEmail: "",
-    };
+      mobile: '',
+      email: '',
+    }
   },
   created() {
-    this.getUserDetail();
+    this.getUserDetail()
   },
   methods: {
     // 获取登录用户信息
     getUserDetail() {
       ServeGetUserDetail().then((res) => {
         if (res.code == 200) {
-          this.bindMobile = res.data.mobile.replace(
+          this.mobile = res.data.mobile.replace(
             /(\d{3})\d{4}(\d{4})/,
-            "$1****$2"
-          );
-          this.bindEmail = res.data.email;
+            '$1****$2'
+          )
+
+          this.email = res.data.email
         }
-      });
+      })
     },
   },
-};
+}
 </script>
 <style lang="less" scoped>
 .container h4 {