IM

im/src/store/getters.js

@@ -0,0 +1,9 @@
+const getters = {
+  // 用户登录状态
+  loginStatus: state => state.user.loginStatus,
+
+  // socket 连接状态
+  socketStatus: state => state.socketStatus,
+}
+
+export default getters

im/src/store/index.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import user from './modules/user'
+import talks from './modules/talk'
+import notify from './modules/notify'
+import settings from './modules/settings'
+import emoticon from './modules/emoticon'
+import dialogue from './modules/dialogue'
+import note from './modules/note'
+
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    user,
+    notify,
+    talks,
+    settings,
+    emoticon,
+    dialogue,
+    note,
+  },
+  state,
+  getters,
+  mutations,
+})
+
+export default store

im/src/store/modules/dialogue.js

@@ -0,0 +1,89 @@
+export default {
+  state: {
+    // 对话来源[1:私聊;2:群聊]
+    talk_type: 0,
+
+    // 接收者ID
+    receiver_id: 0,
+
+    is_robot: 0,
+
+    // 聊天记录
+    records: [
+      {
+        id: "",
+        createTime: "",
+        toUser: "",
+        isRead: false,
+        messageType: "",
+        talkId: "",
+        text: "",
+        float: "",
+      },
+    ],
+
+    // 对话索引（聊天对话的唯一索引）
+    index_name: null,
+  },
+  mutations: {
+    // 更新对话
+    UPDATE_DIALOGUE_MESSAGE(state, resource) {
+      state.records = [];
+      state.talk_type = parseInt(resource.talk_type);
+      state.receiver_id = parseInt(resource.receiver_id);
+      state.is_robot = parseInt(resource.is_robot);
+
+      /**
+       * receiver_id 就是 好友id
+       * 比如 a 和 b 聊天  receiver_id = b的id
+       */
+      state.index_name = (resource.talk_type || 1) + "_" + resource.receiver_id;
+    },
+
+    // 数组头部压入对话记录1494593861786271744 1494593778193793024
+    UNSHIFT_DIALOGUE(state, records) {
+      // console.log("%c 数组头部压入对话记录", "color:green");
+      // console.log("state", state);
+      // console.log("records", records);
+      if(state.records.length>0){
+        state.records.unshift(...records);
+      }else{
+        state.records.push(...records);
+      }
+      
+      console.log("最后的数据",state.records)
+    },
+
+    // 推送对话记录
+    PUSH_DIALOGUE(state, record) {
+      state.records.push(record);
+    },
+
+    // 更新对话记录
+    UPDATE_DIALOGUE(state, resource) {
+      for (let i in state.records) {
+        if (state.records[i].id === resource.id) {
+          Object.assign(state.records[i], resource);
+          break;
+        }
+      }
+    },
+
+    // 删除对话记录
+    DELETE_DIALOGUE(state, index) {
+      state.records.splice(index, 1);
+    },
+
+    BATCH_DELETE_DIALOGUE(state, ids) {
+      ids.forEach((record_id) => {
+        let index = state.records.findIndex((item) => item.id == record_id);
+        if (index >= 0) state.records.splice(index, 1);
+      });
+    },
+
+    // 数组头部压入对话记录
+    SET_DIALOGUE(state, records) {
+      state.records = records;
+    },
+  },
+};

im/src/store/modules/emoticon.js

@@ -0,0 +1,91 @@
+import { ServeFindUserEmoticon, ServeUploadEmoticon } from "@/api/emoticon";
+
+import { ServeCollectEmoticon } from "@/api/chat";
+
+import { Notification } from "element-ui";
+
+export default {
+  state: {
+    items: [
+    ],
+  },
+  mutations: {
+    // 加载用户表情包
+    LOAD_USER_EMOTICON(state) {
+      // TODO 隐藏
+      return;
+      ServeFindUserEmoticon().then((res) => {
+        if (res.code == 200) {
+          const { collect_emoticon, sys_emoticon } = res.data;
+
+          state.items = state.items.slice(0, 2);
+
+          // 用户收藏的系统表情包
+          state.items[1].list = collect_emoticon;
+
+          // 用户添加的系统表情包
+          state.items.push(...sys_emoticon);
+        }
+      });
+    },
+
+    // 收藏用户表情包
+    SAVE_USER_EMOTICON(state, resoure) {
+      ServeCollectEmoticon({
+        record_id: resoure.record_id,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            Notification({
+              title: "收藏提示",
+              message: "表情包收藏成功...",
+              type: "success",
+            });
+
+            this.commit("LOAD_USER_EMOTICON");
+          }
+        })
+        .catch(() => {
+          Notification({
+            title: "收藏提示",
+            message: "表情包收藏失败...",
+            type: "warning",
+          });
+        });
+    },
+
+    // 自定义上传用户表情包
+    UPLOAD_USER_EMOTICON(state, resoure) {
+      let fileData = new FormData();
+      fileData.append("emoticon", resoure.file);
+      ServeUploadEmoticon(fileData)
+        .then((res) => {
+          if (res.code == 200) {
+            state.items[1].list.push(res.data);
+          }
+        })
+        .catch(() => {
+          Notification({
+            message: "网络异常请稍后再试...",
+            type: "error",
+            duration: 3000,
+          });
+        });
+    },
+
+    // 添加系统表情包
+    APPEND_SYS_EMOTICON(state, resoure) {
+      state.items.push(resoure);
+    },
+
+    // 移除系统表情包
+    REMOVE_SYS_EMOTICON(state, resoure) {
+      for (let i in state.items) {
+        if (state.items[i].emoticon_id === resoure.emoticon_id) {
+          state.items.splice(i, 1);
+          break;
+        }
+      }
+    },
+  },
+};

im/src/store/modules/note.js

@@ -0,0 +1,18 @@
+const Note = {
+  state: {
+    tags: [],
+    class: [],
+  },
+  getters: {},
+  mutations: {
+    SET_NOTE_TAGS(state, tags) {
+      state.tags = tags
+    },
+
+    PUSH_NOTE_TAG(state, tag) {
+      state.tags.unshift(tag)
+    },
+  },
+}
+
+export default Note

im/src/store/modules/notify.js

@@ -0,0 +1,62 @@
+export default {
+  state: {
+    // 聊天消息未读数
+    unreadNum: 0,
+
+    // 好友申请未读数
+    applyNum: 0,
+
+    // 好友键盘事件监听
+    inputEvent: 0,
+
+    // 好友登录状态监听
+    friendStatus: {
+      // 登录状态[0:下线;1:在线;]
+      status: 0,
+      // 好友ID
+      friend_id: 0,
+    },
+  },
+  mutations: {
+    // 消息未读数自增
+    INCR_UNREAD_NUM(state) {
+      console.log("触发消息未读")
+      state.unreadNum++
+    },
+
+    // 好友申请事件监听
+    INCR_APPLY_NUM(state) {
+      state.applyNum++
+    },
+
+    // 设置消息未读数
+    SET_UNREAD_NUM(state, value) {
+      state.unreadNum = value
+    },
+
+    // 好友申请事件监听
+    SET_APPLY_NUM(state, value) {
+      state.applyNum = value
+    },
+
+    // 自增好友键盘输入事件
+    UPDATE_KEYBOARD_EVENT(state) {
+      state.inputEvent++
+    },
+
+    // 更新好友登录状态
+    UPDATE_FRIEND_STATUS(state, value) {
+      state.friendStatus = value
+    },
+  },
+  actions: {
+    ACT_UPDATE_FRIEND_STATUS({ commit }, value) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          commit('UPDATE_FRIEND_STATUS', value)
+          resolve()
+        }, 0)
+      })
+    },
+  },
+}

im/src/store/modules/settings.js

@@ -0,0 +1,66 @@
+import {
+  getToken,
+  getUserSettingCache,
+  setUserSettingCache,
+} from '@/utils/auth'
+
+let state = {
+  // 主题模式 true:全屏模式 false:居中模式
+  themeMode: true,
+
+  // 主题模式为居中模式下，body 的背景图片
+  themeBagImg: 'bag003',
+
+  // 主题颜色
+  themeColor: '',
+
+  // 消息提示音
+  notifyCueTone: true,
+
+  // 键盘输入事件消息推送开关
+  keyboardEventNotify: true,
+}
+
+if (getToken()) {
+  Object.assign(state, getUserSettingCache())
+}
+
+/**
+ * 用户相关设置
+ */
+const Settings = {
+  state,
+  mutations: {
+    // 设置主题模式
+    SET_THEME_MODE(state, mode) {
+      state.themeMode = mode
+      setUserSettingCache(state)
+    },
+
+    // 设置主题的背景图片
+    SET_THEME_BAGIMG(state, bagName) {
+      state.themeBagImg = bagName
+      setUserSettingCache(state)
+    },
+
+    // 主题颜色
+    SET_THEME_COLOR(state, color) {
+      state.themeColor = color
+      setUserSettingCache(state)
+    },
+
+    // 设置消息提示音状态
+    SET_NOTIFY_CUE_TONE(state, isTrue) {
+      state.notifyCueTone = isTrue
+      setUserSettingCache(state)
+    },
+
+    // 设置键盘输入事件消息推送状态
+    SET_KEYBOARD_EVENT_NOTIFY(state, isTrue) {
+      state.keyboardEventNotify = isTrue
+      setUserSettingCache(state)
+    },
+  },
+}
+
+export default Settings

im/src/store/modules/talk.js

@@ -0,0 +1,132 @@
+import { getSort, getMutipSort } from "@/utils/functions";
+import { formatTalkItem } from "@/utils/talk";
+import { ServeGetTalkList } from "@/api/chat";
+import store from '@/store/index.js'
+import Vue from 'vue'
+const Talk = {
+  state: {
+    // 用户对话列表
+    items: [],
+
+    // 最后一条消息
+    unreadMessage: {
+      num: 0,
+      nickname: "未知",
+      content: "...",
+    },
+
+    // 对话列表重载状态
+    heavyLoad: false,
+  },
+  getters: {
+    // 过滤所有置顶对话列表
+    topItems: (state) => {
+      return state.items.filter((item) => item.is_top == 1);
+    },
+    talkItems: (state) => {
+      return state.items.sort(
+        getMutipSort([getSort((a, b) => a.lastTalkTime > b.lastTalkTime)])
+      );
+    },
+    // 消息未读数总计
+    unreadNum: (state) => {
+      return state.items.reduce((total, item) => {
+        return total + parseInt(item.unread);
+      }, 0);
+    },
+    talkNum: (state) => state.items.length,
+  },
+  mutations: {
+    // 设置对话列表
+    SET_TALK_ITEMS(state, resource) {
+      console.log("设置对话列表", resource.items);
+      Vue.set(state,'items',resource.items)
+    },
+
+    // 更新对话节点
+    UPDATE_TALK_ITEM(state, resource) {
+      console.log("%c 更新对话节点", "color:#32c");
+      console.log("state", state);
+      console.log("resource", resource);
+
+      console.log("%c 更新对话节点结束", "color:#32c",state.items);
+      let index = state.items.findIndex(
+        (item) => item.userId === resource.index_name.split("_")[1]
+      );
+      if (index >= 0) {
+        Object.assign(state.items[index], resource);
+      }
+    },
+
+    // 新增对话节点
+    PUSH_TALK_ITEM(state, resource) {
+      console.log(state)
+      state.items.push(resource);
+    },
+
+    // 移除对话节点
+    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);
+          break;
+        }
+      }
+    },
+
+    // async getTalkList() {
+    //   let { code, result } = ServeGetTalkList();
+    //   if (code !== 200) return false;
+
+    //   store.commit("SET_TALK_ITEMS", {
+    //     items: result.map((item) => formatTalkItem(item)),
+    //   });
+    // },
+
+    // 更新对话消息
+    UPDATE_TALK_MESSAGE(state, resource) {
+      console.log("%c 更新对话消息", "color:green");
+      
+     
+      console.log("state", state);
+      console.log("resource", resource);
+      console.log("%c 更新对话结束", "color:green",state.items);
+
+      let enableGetTalkList = true
+      state.items.forEach(item=>{
+        if(item.userId == resource.index_name.split("_")[1]){
+          item.unread++;
+          item.msg_text = resource.msg_text;
+          item.lastTalkTime = resource.updated_at;
+          item.lastTalkMessage = resource.msg_text;
+          item.updated_at = resource.updated_at;
+          enableGetTalkList = false
+        }
+      })
+      // 循环如果当前用户不在对话记录列表中 就重新请求对话列表接口
+      enableGetTalkList ? this.commit('getTalkList'):''
+    },
+
+    // 触发对话列表重新加载
+    TRIGGER_TALK_ITEMS_LOAD(state, status = false) {
+      state.heavyLoad = status;
+    },
+
+    SET_TLAK_UNREAD_MESSAGE(state, resource) {
+      state.unreadMessage.num++;
+      state.unreadMessage.nickname = resource.nickname;
+      state.unreadMessage.content = resource.content;
+    },
+
+    // 清除最后一条未读消息
+    CLEAR_TLAK_UNREAD_MESSAGE(state) {
+      state.unreadMessage = {
+        num: 0,
+        nickname: "未知",
+        content: "...",
+      };
+    },
+  },
+};
+
+export default Talk;

im/src/store/modules/user.js

@@ -0,0 +1,73 @@
+import { setUserInfo, getUserInfo, getToken } from "@/utils/auth";
+
+// import { ServeLogout } from "@/api/user";
+
+let state = {
+  // 用户ID
+  id: 0,
+  // 用户昵称
+  name: "",
+  // 个性头像
+  face: require("@/assets/image/detault-avatar.jpg"),
+  // 名片背景
+  visitCardBag: require("@/assets/image/default-user-banner.png"),
+  // 当前登录状态
+  loginStatus: false,
+  toUser:""
+};
+
+// 判断用户是否登录
+if (getToken()) {
+  let userInfo = getUserInfo();
+  console.error(userInfo)
+  state.name = userInfo.name;
+  state.id = userInfo.id;
+  state.face = userInfo.face ? userInfo.face : state.avatar;
+  state.loginStatus = true;
+}
+
+const User = {
+  state,
+  mutations: {
+    // 用户退出登录
+    USER_LOGOUT(state) {
+      state.id = 0;
+      state.face = "";
+      state.name = "";
+      state.loginStatus = false;
+    },
+
+    // 设置用户登录状态
+    UPDATE_LOGIN_STATUS(state) {
+      state.loginStatus = true;
+    },
+
+    // 更新用户信息
+    UPDATE_USER_INFO(state, data) {
+      for (const key in data) {
+        if (state.hasOwnProperty(key)) {
+          state[key] = data[key];
+        }
+      }
+
+      // 保存用户信息到缓存
+      setUserInfo({
+        id: state.id,
+        face: state.face,
+        name: state.name,
+      });
+    },
+  },
+  actions: {
+    // 退出登录处理操作
+    ACT_USER_LOGOUT({ commit }) {
+      commit("USER_LOGOUT");
+      // ServeLogout().finally(() => {
+      //   removeAll();
+      //   location.reload();
+      // });
+    },
+  },
+};
+
+export default User;

im/src/store/mutations.js

@@ -0,0 +1,9 @@
+// 根级别的 mutation
+const mutations = {
+  // 更新socket 连接状态
+  UPDATE_SOCKET_STATUS(state, status) {
+    state.socketStatus = status
+  },
+}
+
+export default mutations

im/src/store/state.js

@@ -0,0 +1,13 @@
+const defaultAvatar = require('@/assets/image/detault-avatar.jpg')
+
+// 根级别的 state
+const state = {
+  socketStatus: false,
+  website_name: process.env.VUE_APP_WEBSITE_NAME,
+  copyright: `©2020 - 2021 ${process.env.VUE_APP_WEBSITE_NAME} 在线聊天 <a href="https://github.com/gzydong/LumenIM" style="color: #777272;font-weight: 400;" target="_blank">Github源码</a>`,
+
+  // 头像加载失败后的默认头像
+  defaultAvatar: "this.src='" + defaultAvatar + "'",
+}
+
+export default state