修复pull-message会重复响应的问题
This commit is contained in:
fan
+4
-2
@@ -1262,6 +1262,8 @@ export default {
|
||||
avatar:contact.avatar
|
||||
};
|
||||
console.log("Event:pull-messages");
|
||||
setTimeout(()=>{
|
||||
|
||||
const messages = [
|
||||
generateMessage(IMUI.currentContactId, this.user),
|
||||
generateMessage(IMUI.currentContactId, otheruser),
|
||||
@@ -1276,9 +1278,9 @@ export default {
|
||||
}
|
||||
];
|
||||
let isEnd = false;
|
||||
if (IMUI.getMessages(IMUI.currentContactId).length > 20) isEnd = true;
|
||||
|
||||
if (IMUI.getMessages(IMUI.currentContactId).length + messages.length > 11) isEnd = true;
|
||||
next(messages, isEnd);
|
||||
},500)
|
||||
},
|
||||
handleChangeMenu() {
|
||||
console.log("Event:change-menu");
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.4f9dd622.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.83b7edfe.js rel=preload as=script><link href=css/index.4f9dd622.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.83b7edfe.js></script></body></html>
|
||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.4f9dd622.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.c63fa926.js rel=preload as=script><link href=css/index.4f9dd622.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.c63fa926.js></script></body></html>
|
||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lemon-imui",
|
||||
"version": "1.0.9",
|
||||
"version": "1.1.0",
|
||||
"main": "dist/index.umd.min.js",
|
||||
"description": "基于 VUE2.0 的 IM 聊天组件",
|
||||
"homepage": "https://github.com/fanjyy/lemon-imui",
|
||||
|
||||
@@ -101,7 +101,6 @@ export default {
|
||||
*/
|
||||
initTools(data){
|
||||
if(!data) return;
|
||||
console.log('initTools',data);
|
||||
const defaultTools = [
|
||||
{
|
||||
name: 'emoji',
|
||||
|
||||
@@ -0,0 +1,926 @@
|
||||
<script>
|
||||
import { useScopedSlot, fastDone, generateUUID } from "utils";
|
||||
import { isFunction, isString, isEmpty } from "utils/validate";
|
||||
import {
|
||||
DEFAULT_MENUS,
|
||||
DEFAULT_MENU_LASTMESSAGES,
|
||||
DEFAULT_MENU_CONTACTS
|
||||
} from "utils/constant";
|
||||
import lastContentRender from "../lastContentRender";
|
||||
|
||||
import MemoryCache from "utils/cache/memory";
|
||||
|
||||
const CacheContactContainer = new MemoryCache();
|
||||
const CacheMenuContainer = new MemoryCache();
|
||||
const CacheMessageLoaded = new MemoryCache();
|
||||
|
||||
const messages = {};
|
||||
const emojiMap = {};
|
||||
let renderDrawerContent = () => {};
|
||||
|
||||
export default {
|
||||
name: "LemonImui",
|
||||
provide() {
|
||||
return {
|
||||
IMUI: this
|
||||
};
|
||||
},
|
||||
props: {
|
||||
width:{
|
||||
type:String,
|
||||
default:"850px",
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:"580px",
|
||||
},
|
||||
theme:{
|
||||
type:String,
|
||||
default:'default',
|
||||
},
|
||||
simple:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
/**
|
||||
* 消息时间格式化规则
|
||||
*/
|
||||
messageTimeFormat: Function,
|
||||
/**
|
||||
* 联系人最新消息时间格式化规则
|
||||
*/
|
||||
contactTimeFormat: Function,
|
||||
/**
|
||||
* 初始化时是否隐藏抽屉
|
||||
*/
|
||||
hideDrawer: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 初始化时是否隐藏导航按钮上的头像
|
||||
*/
|
||||
hideMenuAvatar: Boolean,
|
||||
hideMenu: Boolean,
|
||||
/**
|
||||
* 隐藏消息列表内的联系人名字
|
||||
*/
|
||||
hideMessageName:Boolean,
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drawerVisible: !this.hideDrawer,
|
||||
currentContactId:null,
|
||||
currentMessagesId:null,
|
||||
activeSidebar: DEFAULT_MENU_LASTMESSAGES,
|
||||
contacts: [],
|
||||
menus: [],
|
||||
editorTools:[],
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
const nodes = []
|
||||
if(this.simple == false){
|
||||
nodes.push(...[
|
||||
this._renderMenu(),
|
||||
this._renderSidebarMessage(),
|
||||
this._renderSidebarContact(),
|
||||
])
|
||||
}
|
||||
nodes.push(this._renderContainer())
|
||||
nodes.push(this._renderDrawer())
|
||||
return this._renderWrapper(nodes);
|
||||
},
|
||||
created() {
|
||||
this.initMenus();
|
||||
},
|
||||
async mounted() {
|
||||
await this.$nextTick();
|
||||
},
|
||||
computed: {
|
||||
currentMessages() {
|
||||
return messages[this.currentMessagesId] || [];
|
||||
},
|
||||
currentContact() {
|
||||
return this.contacts.find(item => item.id == this.currentContactId) || {};
|
||||
},
|
||||
currentMenu() {
|
||||
return this.menus.find(item => item.name == this.activeSidebar) || {};
|
||||
},
|
||||
currentIsDefSidebar() {
|
||||
return DEFAULT_MENUS.includes(this.activeSidebar);
|
||||
},
|
||||
lastMessages() {
|
||||
const data = this.contacts.filter(item => !isEmpty(item.lastContent));
|
||||
data.sort((a1, a2) => {
|
||||
return a2.lastSendTime - a1.lastSendTime;
|
||||
});
|
||||
return data;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeSidebar() {}
|
||||
},
|
||||
methods: {
|
||||
_menuIsContacts() {
|
||||
return this.activeSidebar == DEFAULT_MENU_CONTACTS;
|
||||
},
|
||||
_menuIsMessages() {
|
||||
return this.activeSidebar == DEFAULT_MENU_LASTMESSAGES;
|
||||
},
|
||||
_createMessage(message) {
|
||||
return {
|
||||
...{
|
||||
id: generateUUID(),
|
||||
type: "text",
|
||||
status: "going",
|
||||
sendTime: new Date().getTime(),
|
||||
toContactId: this.currentContactId,
|
||||
fromUser: {
|
||||
...this.user
|
||||
}
|
||||
},
|
||||
...message
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 在当前聊天窗口新增一条消息
|
||||
*/
|
||||
appendMessage(message,scrollToBottom = false) {
|
||||
if(!this.currentContactId) return false;
|
||||
this._addMessage(message, this.currentContactId, 1);
|
||||
if(scrollToBottom == true){
|
||||
this.messageViewToBottom();
|
||||
}
|
||||
this.updateContact(this.currentContactId, {
|
||||
lastContent: this.lastContentRender(message),
|
||||
lastSendTime: message.sendTime
|
||||
});
|
||||
},
|
||||
_emitSend(message, next, file) {
|
||||
this.$emit(
|
||||
"send",
|
||||
message,
|
||||
(replaceMessage = { status: "succeed" }) => {
|
||||
next();
|
||||
message = Object.assign(message, replaceMessage);
|
||||
this.forceUpdateMessage(message.id);
|
||||
},
|
||||
file
|
||||
);
|
||||
},
|
||||
_handleSend(text) {
|
||||
const message = this._createMessage({ content: text });
|
||||
this.appendMessage(message,true);
|
||||
this._emitSend(message, () => {
|
||||
this.updateContact(message.toContactId, {
|
||||
lastContent: this.lastContentRender(message),
|
||||
lastSendTime: message.sendTime
|
||||
});
|
||||
});
|
||||
},
|
||||
_handleUpload(file) {
|
||||
const imageTypes = ["image/gif", "image/jpeg", "image/png"];
|
||||
let joinMessage;
|
||||
if (imageTypes.includes(file.type)) {
|
||||
joinMessage = {
|
||||
type: "image",
|
||||
content: URL.createObjectURL(file)
|
||||
};
|
||||
} else {
|
||||
joinMessage = {
|
||||
type: "file",
|
||||
fileSize: file.size,
|
||||
fileName: file.name,
|
||||
content: ""
|
||||
};
|
||||
}
|
||||
const message = this._createMessage(joinMessage);
|
||||
this.appendMessage(message,true);
|
||||
this._emitSend(
|
||||
message,
|
||||
() => {
|
||||
this.updateContact(message.toContactId, {
|
||||
lastContent: this.lastContentRender(message),
|
||||
lastSendTime: message.sendTime
|
||||
});
|
||||
},
|
||||
file
|
||||
);
|
||||
},
|
||||
_emitPullMessages(next) {
|
||||
this.$emit(
|
||||
"pull-messages",
|
||||
this.currentContact,
|
||||
(messages, isEnd = false) => {
|
||||
this._addMessage(messages, this.currentContactId, 0);
|
||||
CacheMessageLoaded.set(this.currentContactId, isEnd);
|
||||
if (isEnd == true) this.$refs.messages.loaded();
|
||||
this.currentMessagesId = this.currentContactId;
|
||||
next(isEnd);
|
||||
}
|
||||
);
|
||||
},
|
||||
clearCacheContainer(name) {
|
||||
CacheContactContainer.remove(name);
|
||||
CacheMenuContainer.remove(name);
|
||||
},
|
||||
_renderWrapper(children) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width:this.width,
|
||||
height:this.height
|
||||
}}
|
||||
class={[
|
||||
"lemon-wrapper",
|
||||
`lemon-wrapper--theme-${this.theme}`,
|
||||
this.drawerVisible && "lemon-wrapper--drawer-show"
|
||||
]}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
_renderMenu() {
|
||||
const menuItem = this._renderMenuItem();
|
||||
return (
|
||||
<div class="lemon-menu" v-show={!this.hideMenu}>
|
||||
{
|
||||
<lemon-avatar
|
||||
v-show={!this.hideMenuAvatar}
|
||||
on-click={e => {
|
||||
this.$emit("menu-avatar-click", e);
|
||||
}}
|
||||
class="lemon-menu__avatar"
|
||||
src={this.user.avatar}
|
||||
/>
|
||||
}
|
||||
{menuItem.top}
|
||||
{this.$slots.menu}
|
||||
<div class="lemon-menu__bottom">
|
||||
{this.$slots["menu-bottom"]}
|
||||
{menuItem.bottom}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
_renderMenuAvatar() {
|
||||
return;
|
||||
},
|
||||
_renderMenuItem() {
|
||||
const top = [];
|
||||
const bottom = [];
|
||||
this.menus.forEach(item => {
|
||||
const { name, title, unread, render, click } = item;
|
||||
const node = (
|
||||
<div
|
||||
class={[
|
||||
"lemon-menu__item",
|
||||
{ "lemon-menu__item--active": this.activeSidebar == name }
|
||||
]}
|
||||
on-click={() => {
|
||||
fastDone(click, () => {
|
||||
if (name) this.changeMenu(name);
|
||||
});
|
||||
}}
|
||||
title={title}
|
||||
>
|
||||
<lemon-badge count={unread}>{render(item)}</lemon-badge>
|
||||
</div>
|
||||
);
|
||||
item.isBottom === true ? bottom.push(node) : top.push(node);
|
||||
});
|
||||
return {
|
||||
top,
|
||||
bottom
|
||||
};
|
||||
},
|
||||
_renderSidebarMessage() {
|
||||
return this._renderSidebar(
|
||||
[
|
||||
useScopedSlot(this.$scopedSlots["message-sidebar"]),
|
||||
this.lastMessages.map(contact => {
|
||||
return this._renderContact(
|
||||
{
|
||||
contact,
|
||||
timeFormat: this.contactTimeFormat
|
||||
},
|
||||
() => this.changeContact(contact.id)
|
||||
);
|
||||
})
|
||||
],
|
||||
DEFAULT_MENU_LASTMESSAGES
|
||||
);
|
||||
},
|
||||
_renderContact(props, onClick) {
|
||||
const {
|
||||
click: customClick,
|
||||
renderContainer,
|
||||
id: contactId
|
||||
} = props.contact;
|
||||
const click = () => {
|
||||
fastDone(customClick, () => {
|
||||
onClick();
|
||||
this._customContainerReady(
|
||||
renderContainer,
|
||||
CacheContactContainer,
|
||||
contactId
|
||||
);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<lemon-contact
|
||||
class={{
|
||||
"lemon-contact--active": this.currentContactId == props.contact.id
|
||||
}}
|
||||
props={props}
|
||||
on-click={click}
|
||||
/>
|
||||
);
|
||||
},
|
||||
_renderSidebarContact() {
|
||||
let prevIndex;
|
||||
return this._renderSidebar(
|
||||
[
|
||||
useScopedSlot(this.$scopedSlots["contact-sidebar"]),
|
||||
this.contacts.map(contact => {
|
||||
if (!contact.index) return;
|
||||
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
|
||||
const node = [
|
||||
contact.index !== prevIndex && (
|
||||
<p class="lemon-sidebar__label">{contact.index}</p>
|
||||
),
|
||||
this._renderContact(
|
||||
{
|
||||
contact: contact,
|
||||
simple: true
|
||||
},
|
||||
() => {
|
||||
this.changeContact(contact.id)
|
||||
}
|
||||
)
|
||||
];
|
||||
prevIndex = contact.index;
|
||||
return node;
|
||||
})
|
||||
],
|
||||
DEFAULT_MENU_CONTACTS
|
||||
);
|
||||
},
|
||||
_renderSidebar(children, name) {
|
||||
return (
|
||||
<div class="lemon-sidebar" v-show={this.activeSidebar == name}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
_renderDrawer() {
|
||||
return this._menuIsMessages() && this.currentContactId ? (
|
||||
<div class="lemon-drawer">
|
||||
{renderDrawerContent()}
|
||||
{useScopedSlot(this.$scopedSlots.drawer, "", this.currentContact)}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
},
|
||||
_isContactContainerCache(name) {
|
||||
return name.startsWith("contact#");
|
||||
},
|
||||
_renderContainer() {
|
||||
const nodes = [];
|
||||
const cls = "lemon-container";
|
||||
const curact = this.currentContact;
|
||||
let defIsShow = true;
|
||||
for (const name in CacheContactContainer.get()) {
|
||||
const show = curact.id == name && this.currentIsDefSidebar;
|
||||
defIsShow = !show;
|
||||
nodes.push(
|
||||
<div class={cls} v-show={show}>
|
||||
{CacheContactContainer.get(name)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
for (const name in CacheMenuContainer.get()) {
|
||||
nodes.push(
|
||||
<div
|
||||
class={cls}
|
||||
v-show={this.activeSidebar == name && !this.currentIsDefSidebar}
|
||||
>
|
||||
{CacheMenuContainer.get(name)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
nodes.push(
|
||||
<div
|
||||
class={cls}
|
||||
v-show={this._menuIsMessages() && defIsShow && curact.id}
|
||||
>
|
||||
<div class="lemon-container__title">
|
||||
<div class="lemon-container__displayname">
|
||||
{useScopedSlot(
|
||||
this.$scopedSlots["contact-title"],
|
||||
curact.displayName,
|
||||
curact
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<lemon-messages
|
||||
ref="messages"
|
||||
hide-name={this.hideMessageName}
|
||||
time-format={this.messageTimeFormat}
|
||||
reverse-user-id={this.user.id}
|
||||
on-reach-top={this._emitPullMessages}
|
||||
messages={this.currentMessages}
|
||||
/>
|
||||
<lemon-editor
|
||||
ref="editor"
|
||||
tools={this.editorTools}
|
||||
onSend={this._handleSend}
|
||||
onUpload={this._handleUpload}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
nodes.push(
|
||||
<div class={cls} v-show={!curact.id && this.currentIsDefSidebar}>
|
||||
{this.$slots.cover}
|
||||
</div>
|
||||
);
|
||||
nodes.push(
|
||||
<div
|
||||
class={cls}
|
||||
v-show={this._menuIsContacts() && defIsShow && curact.id}
|
||||
>
|
||||
{useScopedSlot(
|
||||
this.$scopedSlots["contact-info"],
|
||||
<div class="lemon-contact-info">
|
||||
<lemon-avatar src={curact.avatar} size={90} />
|
||||
<h4>{curact.displayName}</h4>
|
||||
<lemon-button
|
||||
on-click={() => {
|
||||
this.changeContact(curact.id, DEFAULT_MENU_LASTMESSAGES);
|
||||
}}
|
||||
>
|
||||
发送消息
|
||||
</lemon-button>
|
||||
</div>,
|
||||
curact
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return nodes;
|
||||
},
|
||||
_addContact(data, t) {
|
||||
const type = {
|
||||
0: "unshift",
|
||||
1: "push"
|
||||
}[t];
|
||||
//this.contacts[type](cloneDeep(data));
|
||||
this.contacts[type](data);
|
||||
},
|
||||
_addMessage(data, contactId, t) {
|
||||
const type = {
|
||||
0: "unshift",
|
||||
1: "push"
|
||||
}[t];
|
||||
if (!Array.isArray(data)) data = [data];
|
||||
messages[contactId] = messages[contactId] || [];
|
||||
messages[contactId][type](...data);
|
||||
this.forceUpdateMessage();
|
||||
},
|
||||
/**
|
||||
* 设置最新消息DOM
|
||||
* @param {String} messageType 消息类型
|
||||
* @param {Function} render 返回消息 vnode
|
||||
*/
|
||||
setLastContentRender(messageType, render) {
|
||||
lastContentRender[messageType] = render;
|
||||
},
|
||||
lastContentRender(message) {
|
||||
return lastContentRender[message.type].call(this, message);
|
||||
},
|
||||
/**
|
||||
* 将字符串内的 EmojiItem.name 替换为 img
|
||||
* @param {String} str 被替换的字符串
|
||||
* @return {String} 替换后的字符串
|
||||
*/
|
||||
replaceEmojiName(str) {
|
||||
return str.replace(/\[!(\w+)\]/gi, (str, match) => {
|
||||
const file = match;
|
||||
return emojiMap[file]
|
||||
? `<img src="${emojiMap[file]}" />`
|
||||
: `[!${match}]`;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 将当前聊天窗口滚动到底部
|
||||
*/
|
||||
messageViewToBottom() {
|
||||
this.$refs.messages.scrollToBottom();
|
||||
},
|
||||
/**
|
||||
* 改变聊天对象
|
||||
* @param contactId 联系人 id
|
||||
*/
|
||||
changeContact(contactId, menuName) {
|
||||
if (this.currentContactId == contactId) {
|
||||
this.currentContactId = undefined;
|
||||
}
|
||||
|
||||
if (menuName) {
|
||||
this.changeMenu(menuName);
|
||||
}
|
||||
this.currentContactId = contactId;
|
||||
|
||||
this.$emit("change-contact", this.currentContact);
|
||||
if (isFunction(this.currentContact.renderContainer)) {
|
||||
return;
|
||||
}
|
||||
if (!CacheMessageLoaded.has(contactId)) {
|
||||
this.$refs.messages.resetLoadState();
|
||||
}
|
||||
if (!messages[contactId]) {
|
||||
this._emitPullMessages(isEnd => this.messageViewToBottom());
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.currentMessagesId = this.currentContactId;
|
||||
this.messageViewToBottom();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 删除一条聊天消息
|
||||
* @param messageId 消息 id
|
||||
* @param contactId 联系人 id
|
||||
*/
|
||||
removeMessage(messageId, contactId) {
|
||||
const index = this.findMessageIndexById(messageId, contactId);
|
||||
if (index !== -1) {
|
||||
messages[contactId].splice(index, 1);
|
||||
this.forceUpdateMessage();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 修改聊天一条聊天消息
|
||||
* @param {Message} data 根据 data.id 查找聊天消息并覆盖传入的值
|
||||
* @param contactId 联系人 id
|
||||
*/
|
||||
updateMessage(messageId, contactId, data) {
|
||||
const index = this.findMessageIndexById(messageId, contactId);
|
||||
if (index !== -1) {
|
||||
messages[contactId][index] = Object.assign(
|
||||
messages[contactId][index],
|
||||
data
|
||||
);
|
||||
this.forceUpdateMessage(messageId);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 手动更新对话消息
|
||||
* @param {String} messageId 消息ID，如果为空则更新当前聊天窗口的所有消息
|
||||
*/
|
||||
forceUpdateMessage(messageId) {
|
||||
if (!messageId) {
|
||||
this.$refs.messages.$forceUpdate();
|
||||
} else {
|
||||
const components = this.$refs.messages.$refs.message;
|
||||
if (components) {
|
||||
const messageComponent = components.find(
|
||||
com => com.$attrs.message.id == messageId
|
||||
);
|
||||
if (messageComponent) messageComponent.$forceUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
_customContainerReady(render, cacheDrive, key) {
|
||||
if (isFunction(render) && !cacheDrive.has(key)) {
|
||||
cacheDrive.set(key, render.call(this));
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换左侧按钮
|
||||
* @param {String} name 按钮 name
|
||||
*/
|
||||
changeMenu(name) {
|
||||
this.$emit("change-menu", name);
|
||||
this.activeSidebar = name;
|
||||
},
|
||||
/**
|
||||
* 初始化编辑框的 Emoji 表情列表，是 Lemon-editor.initEmoji 的代理方法
|
||||
* @param {Array<Emoji,EmojiItem>} data emoji 数据
|
||||
* Emoji = {label: 表情,children: [{name: wx,title: 微笑,src: url}]} 分组
|
||||
* EmojiItem = {name: wx,title: 微笑,src: url} 无分组
|
||||
*/
|
||||
initEmoji(data) {
|
||||
this.$refs.editor.initEmoji(data);
|
||||
if (data[0].label) {
|
||||
data = data.flatMap(item => item.children);
|
||||
}
|
||||
data.forEach(({ name, src }) => (emojiMap[name] = src));
|
||||
},
|
||||
initEditorTools(data){
|
||||
this.editorTools = data;
|
||||
this.$refs.editor.initTools(data);
|
||||
// if(this.editorTools){
|
||||
// this.$refs.editor.initTools(data);
|
||||
// }
|
||||
//this.$refs.editor.$forceUpdate();
|
||||
},
|
||||
/**
|
||||
* 初始化左侧按钮
|
||||
* @param {Array<Menu>} data 按钮数据
|
||||
*/
|
||||
initMenus(data) {
|
||||
const defaultMenus = [
|
||||
{
|
||||
name: DEFAULT_MENU_LASTMESSAGES,
|
||||
title: "聊天",
|
||||
unread: 0,
|
||||
click: null,
|
||||
render: menu => {
|
||||
return <i class="lemon-icon-message" />;
|
||||
},
|
||||
isBottom: false
|
||||
},
|
||||
{
|
||||
name: DEFAULT_MENU_CONTACTS,
|
||||
title: "通讯录",
|
||||
unread: 0,
|
||||
click: null,
|
||||
render: menu => {
|
||||
return <i class="lemon-icon-addressbook" />;
|
||||
},
|
||||
isBottom: false
|
||||
}
|
||||
];
|
||||
let menus = [];
|
||||
if (Array.isArray(data)) {
|
||||
const indexMap = {
|
||||
lastMessages: 0,
|
||||
contacts: 1
|
||||
};
|
||||
const indexKeys = Object.keys(indexMap);
|
||||
menus = data.map(item => {
|
||||
if (indexKeys.includes(item.name)) {
|
||||
return {
|
||||
...defaultMenus[indexMap[item.name]],
|
||||
...item,
|
||||
...{ renderContainer: null }
|
||||
};
|
||||
}
|
||||
|
||||
if (item.renderContainer) {
|
||||
this._customContainerReady(
|
||||
item.renderContainer,
|
||||
CacheMenuContainer,
|
||||
item.name
|
||||
);
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
menus = defaultMenus;
|
||||
}
|
||||
|
||||
this.menus = menus;
|
||||
},
|
||||
/**
|
||||
* 初始化联系人数据
|
||||
* @param {Array<Contact>} data 联系人列表
|
||||
*/
|
||||
initContacts(data) {
|
||||
this.contacts.push(...data);
|
||||
this.sortContacts();
|
||||
},
|
||||
/**
|
||||
* 使用 联系人的 index 值进行排序
|
||||
*/
|
||||
sortContacts() {
|
||||
this.contacts.sort((a, b) => {
|
||||
if (!a.index) return;
|
||||
return a.index.localeCompare(b.index);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 修改联系人数据
|
||||
* @param {Contact} data 修改的数据，根据 data.id 查找联系人并覆盖传入的值
|
||||
*/
|
||||
updateContact(contactId, data) {
|
||||
delete data.id;
|
||||
delete data.toContactId;
|
||||
|
||||
const index = this.findContactIndexById(contactId);
|
||||
if (index !== -1) {
|
||||
const { unread } = data;
|
||||
if (isString(unread)) {
|
||||
if (unread.indexOf("+") === 0 || unread.indexOf("-") === 0) {
|
||||
data.unread =
|
||||
parseInt(unread) + parseInt(this.contacts[index].unread);
|
||||
}
|
||||
}
|
||||
this.$set(this.contacts, index, {
|
||||
...this.contacts[index],
|
||||
...data
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 根据 id 查找联系人的索引
|
||||
* @param contactId 联系人 id
|
||||
* @return {Number} 联系人索引，未找到返回 -1
|
||||
*/
|
||||
findContactIndexById(contactId) {
|
||||
return this.contacts.findIndex(item => item.id == contactId);
|
||||
},
|
||||
findMessageIndexById(messageId, contactId) {
|
||||
const msg = messages[contactId];
|
||||
if (isEmpty(msg)) {
|
||||
return -1;
|
||||
}
|
||||
return msg.findIndex(item => item.id == messageId);
|
||||
},
|
||||
findMessageById(messageId, contactId) {
|
||||
const index = this.findMessageIndexById(messageId, contactId);
|
||||
if (index !== -1) return messages[contactId][index];
|
||||
},
|
||||
/**
|
||||
* 返回所有联系人
|
||||
* @return {Array<Contact>}
|
||||
*/
|
||||
getContacts() {
|
||||
return this.contacts;
|
||||
},
|
||||
/**
|
||||
* 返回所有消息
|
||||
* @return {Object<Contact.id,Message>}
|
||||
*/
|
||||
getMessages(contactId) {
|
||||
return (contactId ? messages[contactId] : messages) || [];
|
||||
},
|
||||
/**
|
||||
* 将自定义的HTML显示在主窗口内
|
||||
*/
|
||||
openrenderContainer(vnode) {
|
||||
//renderContainerQueue[this.activeSidebar] = vnode;
|
||||
//this.$slots._renderContainer = vnode;
|
||||
},
|
||||
changeDrawer(render) {
|
||||
this.drawerVisible = !this.drawerVisible;
|
||||
if (this.drawerVisible == true) this.openDrawer(render);
|
||||
},
|
||||
openDrawer(render) {
|
||||
renderDrawerContent = render || new Function();
|
||||
this.drawerVisible = true;
|
||||
},
|
||||
closeDrawer() {
|
||||
this.drawerVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
drawer-width = 200px
|
||||
bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||
@import '~styles/utils/index'
|
||||
|
||||
+b(lemon-wrapper)
|
||||
display flex
|
||||
font-size 14px
|
||||
//mask-image radial-gradient(circle, white 100%, black 100%)
|
||||
background #efefef
|
||||
transition all .4s bezier
|
||||
position relative
|
||||
p
|
||||
margin 0
|
||||
img
|
||||
vertical-align middle
|
||||
border-style none
|
||||
+b(lemon-menu)
|
||||
flex-column()
|
||||
align-items center
|
||||
width 60px
|
||||
background #1d232a
|
||||
padding 15px 0
|
||||
position relative
|
||||
user-select none
|
||||
+e(bottom)
|
||||
flex-column()
|
||||
position absolute
|
||||
bottom 0
|
||||
+e(avatar)
|
||||
margin-bottom 20px
|
||||
cursor pointer
|
||||
+e(item)
|
||||
color #999
|
||||
cursor pointer
|
||||
padding 14px 10px
|
||||
max-width 100%
|
||||
+m(active)
|
||||
color #0fd547
|
||||
&:hover:not(.lemon-menu__item--active)
|
||||
color #eee
|
||||
word-break()
|
||||
> *
|
||||
font-size 24px
|
||||
.ant-badge-count
|
||||
display inline-block
|
||||
padding 0 4px
|
||||
height 18px
|
||||
line-height 16px
|
||||
min-width 18px
|
||||
.ant-badge-count
|
||||
.ant-badge-dot
|
||||
box-shadow 0 0 0 1px #1d232a
|
||||
+b(lemon-sidebar)
|
||||
width 250px
|
||||
background #efefef
|
||||
overflow-y auto
|
||||
scrollbar-light()
|
||||
+e(label)
|
||||
padding 6px 14px 6px 14px
|
||||
color #666
|
||||
font-size 12px
|
||||
margin 0
|
||||
text-align left
|
||||
+b(lemon-contact--active)
|
||||
background #d9d9d9
|
||||
+b(lemon-container)
|
||||
flex 1
|
||||
flex-column()
|
||||
background #f4f4f4
|
||||
word-break()
|
||||
position relative
|
||||
z-index 2
|
||||
+e(title)
|
||||
padding 15px 15px
|
||||
+e(displayname)
|
||||
font-size 16px
|
||||
+b(lemon-messages)
|
||||
flex 1
|
||||
height auto
|
||||
+b(lemon-drawer)
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
overflow hidden
|
||||
background #f4f4f4
|
||||
transition width .4s bezier
|
||||
z-index 1
|
||||
width drawer-width
|
||||
height 100%
|
||||
box-sizing border-box
|
||||
//border-left 1px solid #e9e9e9
|
||||
+b(lemon-wrapper)
|
||||
+m(drawer-show)
|
||||
+b(lemon-drawer)
|
||||
right -200px
|
||||
+b(lemon-contact-info)
|
||||
flex-column()
|
||||
justify-content center
|
||||
align-items center
|
||||
height 100%
|
||||
h4
|
||||
font-size 16px
|
||||
font-weight normal
|
||||
margin 10px 0 20px 0
|
||||
user-select none
|
||||
.lemon-wrapper--theme-blue
|
||||
.lemon-message__content
|
||||
background #f3f3f3
|
||||
&::before
|
||||
border-right-color #f3f3f3
|
||||
.lemon-message--reverse .lemon-message__content
|
||||
background #e6eeff
|
||||
&::before
|
||||
border-left-color #e6eeff
|
||||
.lemon-container
|
||||
background #fff
|
||||
.lemon-sidebar
|
||||
background #f9f9f9
|
||||
.lemon-contact
|
||||
background #f9f9f9
|
||||
&:hover:not(.lemon-contact--active)
|
||||
background #f1f1f1
|
||||
&--active
|
||||
background #e9e9e9
|
||||
.lemon-menu
|
||||
background #096bff
|
||||
.lemon-menu__item
|
||||
color rgba(255,255,255,0.4)
|
||||
&:hover:not(.lemon-menu__item--active)
|
||||
color rgba(255,255,255,0.6)
|
||||
&--active
|
||||
color #fff
|
||||
text-shadow 0 0 10px rgba(2,48,118,0.4)
|
||||
|
||||
</style>
|
||||
@@ -77,7 +77,7 @@ export default {
|
||||
return {
|
||||
drawerVisible: !this.hideDrawer,
|
||||
currentContactId:null,
|
||||
currentMessagesId:null,
|
||||
currentMessages:[],
|
||||
activeSidebar: DEFAULT_MENU_LASTMESSAGES,
|
||||
contacts: [],
|
||||
menus: [],
|
||||
@@ -105,9 +105,6 @@ export default {
|
||||
await this.$nextTick();
|
||||
},
|
||||
computed: {
|
||||
currentMessages() {
|
||||
return messages[this.currentMessagesId] || [];
|
||||
},
|
||||
currentContact() {
|
||||
return this.contacts.find(item => item.id == this.currentContactId) || {};
|
||||
},
|
||||
@@ -216,6 +213,7 @@ export default {
|
||||
);
|
||||
},
|
||||
_emitPullMessages(next) {
|
||||
this._changeContactLock = true;
|
||||
this.$emit(
|
||||
"pull-messages",
|
||||
this.currentContact,
|
||||
@@ -223,7 +221,8 @@ export default {
|
||||
this._addMessage(messages, this.currentContactId, 0);
|
||||
CacheMessageLoaded.set(this.currentContactId, isEnd);
|
||||
if (isEnd == true) this.$refs.messages.loaded();
|
||||
this.currentMessagesId = this.currentContactId;
|
||||
this.updateCurrentMessages();
|
||||
this._changeContactLock = false;
|
||||
next(isEnd);
|
||||
}
|
||||
);
|
||||
@@ -521,6 +520,10 @@ export default {
|
||||
: `[!${match}]`;
|
||||
});
|
||||
},
|
||||
updateCurrentMessages(){
|
||||
if(!messages[this.currentContactId]) messages[this.currentContactId] = []
|
||||
this.currentMessages = messages[this.currentContactId];
|
||||
},
|
||||
/**
|
||||
* 将当前聊天窗口滚动到底部
|
||||
*/
|
||||
@@ -531,28 +534,30 @@ export default {
|
||||
* 改变聊天对象
|
||||
* @param contactId 联系人 id
|
||||
*/
|
||||
changeContact(contactId, menuName) {
|
||||
if (this.currentContactId == contactId) {
|
||||
this.currentContactId = undefined;
|
||||
}
|
||||
async changeContact(contactId, menuName) {
|
||||
if(this._changeContactLock || this.currentContactId == contactId) return false;
|
||||
|
||||
if (menuName) {
|
||||
this.changeMenu(menuName);
|
||||
}
|
||||
this.currentContactId = contactId;
|
||||
|
||||
this.currentContactId = contactId;
|
||||
this.$emit("change-contact", this.currentContact);
|
||||
if (isFunction(this.currentContact.renderContainer)) {
|
||||
return;
|
||||
}
|
||||
if (!CacheMessageLoaded.has(contactId)) {
|
||||
if (CacheMessageLoaded.has(contactId)) {
|
||||
this.$refs.messages.loaded();
|
||||
}else{
|
||||
this.$refs.messages.resetLoadState();
|
||||
}
|
||||
|
||||
if (!messages[contactId]) {
|
||||
this.updateCurrentMessages();
|
||||
this._emitPullMessages(isEnd => this.messageViewToBottom());
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.currentMessagesId = this.currentContactId;
|
||||
this.updateCurrentMessages();
|
||||
this.messageViewToBottom();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
@@ -89,8 +89,12 @@ export default {
|
||||
_renderLoadEnd() {
|
||||
return <span>暂无更多消息</span>;
|
||||
},
|
||||
isLoading(){
|
||||
return this._loadend == false;
|
||||
},
|
||||
loaded() {
|
||||
this._loadend = true;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
resetLoadState() {
|
||||
this._loading = false;
|
||||
|
||||
Reference in New Issue
Block a user