优化代码

README.md

@@ -68,4 +68,6 @@ server {
         access_log on;
     }
 }
-```
+```
+
+非专业前端开发，项目中若有不足的地方，请多多指教。

src/components/chat/TalkEditorPanel.vue

@@ -976,11 +976,11 @@
 
       //修改群聊免打扰状态
       disturbChange(detail) {
-        let key = this.$store.state.talkItems.items.findIndex(item => item.index_name == `2_${this.params.receiveId}`);
+        let key = this.$store.state.talks.items.findIndex(item => item.index_name == `2_${this.params.receiveId}`);
         if (key == -0) return false;
 
         this.$store.commit({
-          type: "updateItem",
+          type: "UPDATE_TALK_ITEM",
           key: key,
           item: {
             not_disturb: parseInt(detail.status)

src/components/user/UserCard.vue

@@ -110,7 +110,7 @@
     },
     methods: {
       logout() {
-        this.$store.dispatch("logout", this.$router);
+        this.$store.dispatch("ACT_USER_LOGOUT", this.$router);
       },
       user() {
         findUserDetailServ().then(res => {

src/components/user/UserSetup.vue

@@ -90,7 +90,7 @@
         }).then((res) => {
           if (res.code == 200) {
             that.buttonText = '修改完成';
-            that.$store.dispatch('setAvatar', that.userInfo.avatar);
+            that.$store.dispatch('dispatch("ACT_USER_UPDATE_AVATAR"', that.userInfo.avatar);
           } else {
             that.buttonText = '修改失败,请稍后再试 ...';
           }

src/plugins/socket/event/talk-event.js

@@ -57,7 +57,7 @@ class TalkEvent extends AppMessageEvent {
 
     this.vm.$store.commit('setScrollHeight');
     this.vm.$store.commit({
-      type: 'updateItem',
+      type: 'UPDATE_TALK_ITEM',
       key: idx,
       item: {
         msg_text: this.getTalkText(),
@@ -80,12 +80,12 @@ class TalkEvent extends AppMessageEvent {
   updateTalkItem(idx) {
     this.vm.$store.commit('incrUnreadNum');
     if (idx == -1) {
-      this.vm.$store.commit('setHeavyLoad', true);
+      this.vm.$store.commit('TRIGGER_TALK_ITEMS_LOAD', true);
       return;
     }
 
     this.vm.$store.commit({
-      type: 'updateUnreadInfo',
+      type: 'UPDATE_TALK_MESSAGE',
       key: idx,
       item: {
         msg_text: this.getTalkText(),
@@ -125,7 +125,7 @@ class TalkEvent extends AppMessageEvent {
    * @param {string} index_name 
    */
   getIndex(index_name) {
-    return this.vm.$store.state.talkItems.items.findIndex(item => item.index_name == index_name);
+    return this.vm.$store.state.talks.items.findIndex(item => item.index_name == index_name);
   }
 
   /**

src/store/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import user from './modules/user';
-import talkItems from './modules/talkItems';
+import talks from './modules/talk';
 import notify from './modules/notify';
 import states from './states';
 import getters from './getters';
@@ -12,12 +12,12 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   modules: {
     user,
-    talkItems,
-    notify
+    notify,
+    talks
   },
 
   // 根级别的 state
-  state:states,
+  state: states,
 
   getters,
 

src/store/modules/talkItems.js → src/store/modules/talk.js

@@ -1,26 +1,28 @@
 const talkItems = {
   state: {
+
     //用户对话列表
     items: [],
 
     //对话列表重载状态
     heavyLoad: false,
   },
   mutations: {
-    //设置对话列表
-    setItems(state, payload) {
+
+    // 设置对话列表
+    SET_TALK_ITEM(state, payload) {
       state.items = payload.items;
     },
 
-    //更新对话信息
-    updateItem(state, payload) {
+    // 更新对话节点
+    UPDATE_TALK_ITEM(state, payload) {
       if (state.items[payload.key]) {
         state.items[payload.key] = Object.assign(state.items[payload.key], payload.item)
       }
     },
 
-    //移除聊天对话
-    removeItem(state, index_name) {
+    // 移除对话节点
+    REMOVE_TALK_ITEM(state, index_name) {
       for (let i in state.items) {
         if (state.items[i].index_name === index_name) {
           state.items.splice(i, 1);
@@ -29,34 +31,31 @@ const talkItems = {
       }
     },
 
-    //清空消息未读数据
-    clearUnreadNum(state, index) {
-      state.items[index].unread_num = 0;
+    // 更新对话节点在线状态
+    UPDATE_TALK_ONLINE_STATUS(state, data) {
+      if (!state.items[data.key]) return false;
+
+      state.items[data.key].online = parseInt(data.status);
     },
 
-    //更新未读信息
-    updateUnreadInfo(state, payload) {
+    // 更新对话消息
+    UPDATE_TALK_MESSAGE(state, payload) {
       if (!state.items[payload.key]) return false;
 
-      state.items[payload.key].msg_text = payload.item.msg_text.replace(/<\/?.+?>/g,"") || '[表情]';
+      state.items[payload.key].msg_text = payload.item.msg_text.replace(/<\/?.+?>/g, "") || '[表情]';
       state.items[payload.key].unread_num++;
       state.items[payload.key].updated_at = payload.item.updated_at;
     },
 
-    //更新用户在线状态
-    updateOnlineStatus(state, data) {
-      if (!state.items[data.key]) return false;
-
-      state.items[data.key].online = parseInt(data.status);
+    // 清空对话的未读数
+    CLEAR_TLAK_UNREAD_NUM(state, index) {
+      state.items[index].unread_num = 0;
     },
 
-    //设置对话列表重载状态
-    setHeavyLoad(state, status = false) {
+    // 触发对话列表重新加载
+    TRIGGER_TALK_ITEMS_LOAD(state, status = false) {
       state.heavyLoad = status;
     }
-  },
-  actions: {
-
   }
 }
 

src/store/modules/user.js

@@ -51,7 +51,7 @@ const user = {
   },
   actions: {
     //设置头像信息
-    setAvatar({
+    ACT_USER_UPDATE_AVATAR({
       commit,
       state
     }, avatar) {
@@ -62,18 +62,17 @@ const user = {
     },
 
     //用户登录处理
-    login({
+    ACT_USER_LOGIN({
       commit,
       state
     }, user) {
       setToken(user.authInfo.access_token, user.authInfo.expires_in);
-
       setUserInfo(user.userInfo);
       commit('login', user.userInfo);
     },
 
     //退出登录处理操作
-    logout({
+    ACT_USER_LOGOUT({
       commit,
       state
     }, $router) {

src/utils/auth.js

@@ -1,8 +1,8 @@
 import Cookies from 'js-cookie';
 import JsBase64 from 'js-base64';
 
-const TokenKey = 'On-LineIM-TOKEN';
-const UserKey = 'On-LineIM-USERINFO';
+const TokenKey = 'LUMNEIM-TOKEN';
+const UserKey = 'LUMNEIM-USERINFO';
 
 // 设置授权token
 export function setToken(token, expires) {

src/views/MessagePage.vue

@@ -16,12 +16,12 @@
 
               <p class="sidebar-load-status" v-show="dataStatus == 2" @click="loadChatList">加载失败，点击我再次尝试...</p>
 
-              <div v-if="dataStatus == 1 && $store.state.talkItems.items.length == 0" class="empty-chat-list">暂时没有新的消息
+              <div v-if="dataStatus == 1 && $store.state.talks.items.length == 0" class="empty-chat-list">暂时没有新的消息
               </div>
 
-              <div v-show="dataStatus == 1 && $store.state.talkItems.items.length > 0">
+              <div v-show="dataStatus == 1 && $store.state.talks.items.length > 0">
                 <lumen-chat-list class="avatar-odd-bag" @lumen-click="clickTab(2, item.index_name)"
-                  v-for="(item,idx) in $store.state.talkItems.items" :key="idx" :idx="idx" :img="item.avatar"
+                  v-for="(item,idx) in $store.state.talks.items" :key="idx" :idx="idx" :img="item.avatar"
                   :name="item.name" :content="handleTip(item)" :time="beautifyTime(item.updated_at)"
                   :nickname="item.remark_name" :unread-num="item.unread_num" :active="index_name == item.index_name"
                   :params="item" :disturb="item.not_disturb" :is-top="item.is_top == 1"
@@ -116,10 +116,10 @@
     },
     computed: {
       reloadDialogues() {
-        return this.$store.state.talkItems.heavyLoad;
+        return this.$store.state.talks.heavyLoad;
       },
       unreadNum() {
-        return this.$store.state.talkItems.items.reduce(function (total, item) {
+        return this.$store.state.talks.items.reduce(function (total, item) {
           return total + parseInt(item.unread_num);
         }, 0);
       },
@@ -132,7 +132,7 @@
       isFriendOnline() {
         let i = this.getIndex(this.index_name);
         if (i == -1) return 0;
-        return this.$store.state.talkItems.items[i].online == 1;
+        return this.$store.state.talks.items[i].online == 1;
       }
     },
     watch: {
@@ -147,7 +147,7 @@
         if (key == -1) return;
 
         this.$store.commit({
-          type: "updateOnlineStatus",
+          type: "UPDATE_TALK_ONLINE_STATUS",
           key,
           status
         });
@@ -162,7 +162,7 @@
       reloadDialogues(n, o) {
         if (n) {
           this.loadChatList();
-          this.$store.commit("setHeavyLoad", false);
+          this.$store.commit("TRIGGER_TALK_ITEMS_LOAD", false);
         }
       }
     },
@@ -213,14 +213,14 @@
 
       //获取用户对话列表
       loadChatList() {
-        if (this.$store.state.talkItems.items.length == 0) {
+        if (this.$store.state.talks.items.length == 0) {
           this.dataStatus = 0;
         }
 
         chatListsServ().then(res => {
           if (res.code == 200) {
             this.$store.commit({
-              type: "setItems",
+              type: "SET_TALK_ITEM",
               items: res.data.map(item => packTalkItem(item))
             });
 
@@ -251,7 +251,7 @@
 
       //根据用户对话索引获取对话数组对应的key
       getIndex(index_name) {
-        return this.$store.state.talkItems.items.findIndex(
+        return this.$store.state.talks.items.findIndex(
           item => item.index_name == index_name
         );
       },
@@ -262,7 +262,7 @@
 
         if (idx == -1) return;
 
-        let item = this.$store.state.talkItems.items[idx];
+        let item = this.$store.state.talks.items[idx];
         let [source, receive_id] = index_name.split("_");
         this.index_name = item.index_name;
         this.params = {
@@ -275,7 +275,7 @@
         this.$nextTick(function () {
           if (index_name == this.$root.message.index_name) {
             //清空对话的未读数
-            this.$store.commit("clearUnreadNum", idx);
+            this.$store.commit("CLEAR_TLAK_UNREAD_NUM", idx);
 
             //清空消息未读数(后期改成websocket发送消息)
             clearChatUnreadNumServ({
@@ -383,7 +383,7 @@
         }).then(res => {
           if (res.code == 200) {
             this.$store.commit({
-              type: "updateItem",
+              type: "UPDATE_TALK_ITEM",
               key: this.getIndex(item.index_name),
               item: {
                 not_disturb: item.not_disturb == 0 ? 1 : 0
@@ -398,7 +398,7 @@
           list_id: item.id
         }).then(res => {
           if (res.code == 200) {
-            this.$store.commit("removeItem", item.index_name);
+            this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
           }
         });
       },