This commit is contained in:
fan
2021-01-31 19:58:27 +08:00
parent 3603d0c03b
commit 44c6063a03
24 changed files with 853 additions and 448 deletions
+10 -1
View File
@@ -1,12 +1,19 @@
<script>
export default {
name: "LemonAvatar",
inject:['IMUI'],
props: {
src: String,
icon: {
type: String,
default: "lemon-icon-people"
},
circle:{
type:Boolean,
default(){
return this.IMUI ? this.IMUI.avatarCricle : false;
},
},
size: {
type: Number,
default: 32
@@ -21,7 +28,7 @@ export default {
return (
<span
style={this.style}
class="lemon-avatar"
class={['lemon-avatar',{'lemon-avatar--circle':this.circle}]}
on-click={e => this.$emit("click", e)}
>
{this.imageFinishLoad && <i class={this.icon} />}
@@ -65,6 +72,8 @@ export default {
overflow hidden
vertical-align middle
border-radius 4px
+m(circle)
border-radius 50%
img
width 100%
height 100%
+21 -10
View File
@@ -2,12 +2,16 @@
export default {
name: "LemonButton",
props: {
color:{
type:String,
default:'default'
},
disabled: Boolean
},
render() {
return (
<button
class="lemon-button"
class={['lemon-button',`lemon-button--color-${this.color}`]}
disabled={this.disabled}
type="button"
on-click={this._handleClick}
@@ -47,13 +51,20 @@ export default {
background-color #fff
box-shadow 0 2px 0 rgba(0, 0, 0, 0.015)
text-shadow 0 -1px 0 rgba(0, 0, 0, 0.12)
&:hover:not([disabled])
border-color #666
color #333
&:active
background-color #ddd
&[disabled]
cursor not-allowed
color #aaa
background #eee
+m(color-default)
&:hover:not([disabled])
border-color #666
color #333
&:active
background-color #ddd
&[disabled]
cursor not-allowed
color #aaa
background #eee
+m(color-grey)
background #e1e1e1
border-color #e1e1e1
color #666
&:hover:not([disabled])
border-color #bbb
</style>
+6 -4
View File
@@ -126,15 +126,17 @@ export default {
+e(content)
font-size 12px
color #999
padding-top 3px
height 14px
line-height 14px
height 18px
line-height 18px
margin-top 1px !important
ellipsis()
img
height 14px
display inline-block
vertical-align top
vertical-align middle
margin 0 1px
position relative
top -1px
+m(name-center)
+e(label)
padding-bottom 0
+71 -5
View File
@@ -35,7 +35,10 @@ export default {
},
},
data() {
this.clipboardBlob = null;
return {
//剪切板图片URL
clipboardUrl:'',
submitDisabled: true,
proxyTools:[],
accept: ""
@@ -47,6 +50,9 @@ export default {
}else{
this.initTools([{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]);
}
this.IMUI.$on('change-contact',()=>{
this.closeClipboardImage();
})
},
render() {
const toolLeft = [];
@@ -74,6 +80,15 @@ export default {
return (
<div class="lemon-editor">
{this.clipboardUrl && <div class="lemon-editor__clipboard-image">
<img src={this.clipboardUrl} />
<div>
<lemon-button style={{marginRight:'10px'}} on-click={this.closeClipboardImage} color="grey">
取消
</lemon-button>
<lemon-button on-click={this.sendClipboardImage}>发送图片</lemon-button>
</div>
</div>}
<input
style="display:none"
type="file"
@@ -115,6 +130,15 @@ export default {
);
},
methods: {
closeClipboardImage(){
this.clipboardUrl = '';
this.clipboardBlob = null;
},
sendClipboardImage(){
if(!this.clipboardBlob) return;
this.$emit("upload", this.clipboardBlob);
this.closeClipboardImage();
},
/**
* 初始化工具栏
*/
@@ -224,12 +248,28 @@ export default {
e.preventDefault();
const clipboardData = e.clipboardData || window.clipboardData;
const text = clipboardData.getData("Text");
if(window.clipboardData){
this.$refs.textarea.innerHTML = text;
if(text){
if(window.clipboardData){
this.$refs.textarea.innerHTML = text;
}else{
exec(text, "insertText");
}
}else{
exec(text, "insertText");
const {blob,blobUrl} = this._getClipboardBlob(clipboardData);
this.clipboardBlob = blob;
this.clipboardUrl = blobUrl;
}
},
_getClipboardBlob(clipboard){
let blob,blobUrl;
for (var i = 0; i < clipboard.items.length; ++i) {
if ( clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1 ) {
blob = clipboard.items[i].getAsFile();
blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
}
}
return {blob,blobUrl};
},
_handleKeyup(e) {
this._saveLastRange();
this._checkSubmitDisabled();
@@ -246,7 +286,7 @@ export default {
// .replace(/<div>|<p>/g, "\r\n")
// .replace(/<\/div>|<\/p>/g, "")
// );
return toEmojiName(this.$refs.textarea.innerHTML);
return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled() {
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -272,7 +312,7 @@ export default {
this.$forceUpdate();
},
setValue(val){
this.$refs.textarea.innerHTML = val;
this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
this._checkSubmitDisabled();
},
}
@@ -283,6 +323,7 @@ export default {
gap = 10px;
+b(lemon-editor)
height 200px
position relative
flex-column()
+e(tool)
display flex
@@ -317,6 +358,31 @@ gap = 10px;
overflow-x hidden
overflow-y auto
scrollbar-light()
+e(clipboard-image)
position absolute
top 0
left 0
width 100%
height 100%
flex-column()
justify-content center
align-items center
background #f4f4f4
z-index 1
img
max-height 66%
max-width 80%
background #e9e9e9
//box-shadow 0 0 20px rgba(0,0,0,0.15)
user-select none
cursor pointer
border-radius 4px
margin-bottom 10px
border 3px dashed #ddd !important
box-sizing border-box
.clipboard-popover-title
font-size 14px
color #333
+e(input)
height 100%
box-sizing border-box
+68 -21
View File
@@ -1,7 +1,7 @@
<script>
import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
import { isFunction, isString, isEmpty } from "utils/validate";
import dropdown from "../directives/dropdown";
import contextmenu from "../directives/contextmenu";
import {
DEFAULT_MENUS,
DEFAULT_MENU_LASTMESSAGES,
@@ -71,6 +71,7 @@ export default {
sendText:String,
contextmenu:Array,
contactContextmenu:Array,
avatarCricle:Boolean,
user: {
type: Object,
default: () => {
@@ -82,6 +83,7 @@ export default {
this.CacheContactContainer = new MemoryCache();
this.CacheMenuContainer = new MemoryCache();
this.CacheMessageLoaded = new MemoryCache();
this.CacheDraft = new MemoryCache();
return {
drawerVisible: !this.hideDrawer,
currentContactId:null,
@@ -173,6 +175,7 @@ export default {
if(scrollToBottom == true){
this.messageViewToBottom();
}
this.CacheDraft.remove(message.toContactId);
}else{
updateContact.unread = '+1';
}
@@ -199,6 +202,7 @@ export default {
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
this.CacheDraft.remove(message.toContactId);
});
},
_handleUpload(file) {
@@ -326,7 +330,7 @@ export default {
_renderSidebarMessage() {
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["sidebar-message-top"]),
useScopedSlot(this.$scopedSlots["sidebar-message-top"],null,this),
this.lastMessages.map(contact => {
return this._renderContact(
{
@@ -338,7 +342,8 @@ export default {
);
})
],
DEFAULT_MENU_LASTMESSAGES
DEFAULT_MENU_LASTMESSAGES,
useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"],null,this)
);
},
_renderContact(props, onClick,slot) {
@@ -363,7 +368,7 @@ export default {
class={{
"lemon-contact--active": this.currentContactId == props.contact.id
}}
v-dropdown_contact={this.contactContextmenu}
v-lemon-contextmenu_contact={this.contactContextmenu}
props={props}
on-click={click}
scopedSlots={{default:slot}}
@@ -374,7 +379,7 @@ export default {
let prevIndex;
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["sidebar-contact-top"]),
useScopedSlot(this.$scopedSlots["sidebar-contact-top"],null,this),
this.contacts.map(contact => {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
@@ -397,13 +402,19 @@ export default {
return node;
})
],
DEFAULT_MENU_CONTACTS
DEFAULT_MENU_CONTACTS,
useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"],null,this)
);
},
_renderSidebar(children, name) {
_renderSidebar(children, name,fixedtop) {
return (
<div class="lemon-sidebar" v-show={this.activeSidebar == name} on-scroll={this._handleSidebarScroll}>
{children}
<div class="lemon-sidebar__fixed-top">
{fixedtop}
</div>
<div class="lemon-sidebar__scroll">
{children}
</div>
</div>
);
},
@@ -514,14 +525,13 @@ export default {
return nodes;
},
_handleSidebarScroll(){
dropdown.hide();
contextmenu.hide();
},
_addContact(data, t) {
const type = {
0: "unshift",
1: "push"
}[t];
//this.contacts[type](cloneDeep(data));
this.contacts[type](data);
},
_addMessage(data, contactId, t) {
@@ -553,14 +563,17 @@ export default {
* @param {String} str 被替换的字符串
* @return {String} 替换后的字符串
*/
replaceEmojiName(str) {
emojiNameToImage(str) {
return str.replace(/\[!(\w+)\]/gi, (str, match) => {
const file = match;
return emojiMap[file]
? `<img src="${emojiMap[file]}" />`
? `<img emoji-name="${match}" src="${emojiMap[file]}" />`
: `[!${match}]`;
});
},
emojiImageToName(str){
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]")
},
updateCurrentMessages(){
if(!allMessages[this.currentContactId]) allMessages[this.currentContactId] = []
this.currentMessages = allMessages[this.currentContactId];
@@ -581,13 +594,36 @@ export default {
}else{
if(this._changeContactLock || this.currentContactId == contactId) return false;
}
const prevCurrentContactId = this.currentContactId;
//保存上个聊天目标的草稿
if(prevCurrentContactId){
const editorValue = this.getEditorValue();
if(editorValue){
this.CacheDraft.set(prevCurrentContactId,editorValue);
this.updateContact({
id:prevCurrentContactId,
lastContent:[
<span style="color:red;">[草稿]</span>,
<span domProps={{
innerHTML:this.lastContentRender({type:'text',content:editorValue})
}}></span>
],
});
this.setEditorValue('');
}
}
this.currentContactId = contactId;
if(!this.currentContactId) return false;
this.$emit("change-contact", this.currentContact,this);
if (isFunction(this.currentContact.renderContainer)) {
return;
}
//填充草稿内容
const draft = this.CacheDraft.get(contactId) || "";
if(draft) this.setEditorValue(draft);
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
@@ -785,6 +821,8 @@ export default {
const index = this.findContactIndexById(id);
if(index === -1) return false;
this.contacts.splice(index,1);
this.CacheDraft.remove(id);
this.CacheMessageLoaded.remove(id);
return true;
},
/**
@@ -850,7 +888,7 @@ export default {
return this.currentMessages;
},
setEditorValue(val){
this.$refs.editor.setValue(this.replaceEmojiName(val));
this.$refs.editor.setValue(this.emojiNameToImage(val));
},
getEditorValue(){
return this.$refs.editor.getFormatValue();
@@ -933,8 +971,12 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
+b(lemon-sidebar)
width 250px
background #efefef
overflow-y auto
scrollbar-light()
display flex
flex-direction column
+e(scroll){
overflow-y auto
scrollbar-light()
}
+e(label)
padding 6px 14px 6px 14px
color #666
@@ -1014,7 +1056,11 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
.lemon-menu
.lemon-sidebar
display none
+b(lemon-dropdown)
.lemon-wrapper--simple
.lemon-menu
.lemon-sidebar
display none
+b(lemon-contextmenu)
border-radius 4px
font-size 14px
font-variant tabular-nums
@@ -1022,21 +1068,22 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
color rgba(0, 0, 0, 0.65)
z-index 10
background-color #fff
border-radius 4px
border-radius 6px
box-shadow 0 2px 8px rgba(0, 0, 0, 0.06)
position absolute
transform-origin 50% 150%
box-sizing border-box
user-select none
overflow hidden
min-width 120px
+e(item)
font-size 12px
line-height 14px
padding 8px 10px
font-size 14px
line-height 16px
padding 10px 15px
cursor pointer
display flex
align-items center
color #444
color #333
> span
display inline-block
flex none
+1 -1
View File
@@ -67,7 +67,7 @@ export default {
</div>
<div class="lemon-message__content-flex">
<div
v-dropdown_message={this.IMUI.contextmenu}
v-lemon-contextmenu_message={this.IMUI.contextmenu}
class="lemon-message__content"
on-click={e => {
this._emitClick(e, "content");
+1 -1
View File
@@ -10,7 +10,7 @@ export default {
props={{ ...this.$attrs }}
scopedSlots={{
content: props => {
const content = this.IMUI.replaceEmojiName(props.content);
const content = this.IMUI.emojiNameToImage(props.content);
return <span domProps={{ innerHTML: content }} />;
}
}}
+2 -2
View File
@@ -1,6 +1,6 @@
<script>
import { hoursTimeFormat } from "utils";
import dropdown from "../directives/dropdown";
import contextmenu from "../directives/contextmenu";
export default {
name: "LemonMessages",
components: {},
@@ -111,7 +111,7 @@ export default {
},
async _handleScroll(e) {
const { target } = e;
dropdown.hide();
contextmenu.hide();
if (
target.scrollTop == 0 &&
this._loading == false &&
+6 -3
View File
@@ -1,6 +1,6 @@
<script>
const popoverCloseQueue = [];
const popoverCloseAll = () => popoverCloseQueue.forEach(callback => callback());
import contextmenu from "../directives/contextmenu";
const triggerEvents = {
hover(el) {},
focus(el) {
@@ -14,6 +14,7 @@ const triggerEvents = {
click(el) {
el.addEventListener("click", e => {
e.stopPropagation();
contextmenu.hide();
this.changeVisible();
});
},
@@ -59,7 +60,6 @@ export default {
style={this.popoverStyle}
on-click={e => e.stopPropagation()}
>
<div class="lemon-popover__title" />
<div class="lemon-popover__content">{this.$slots.content}</div>
<div class="lemon-popover__arrow" />
</div>
@@ -96,9 +96,12 @@ export default {
this.visible ? this.close() : this.open();
},
open() {
popoverCloseAll();
this.closeAll();
this.visible = true;
},
closeAll(){
popoverCloseQueue.forEach(callback => callback())
},
close() {
this.visible = false;
}
@@ -1,5 +1,6 @@
import Vue from 'vue';
import {isFunction,isEmpty} from 'utils/validate';
import LemonPopover from '../components/popover.vue';
let popover;
const hidePopover = ()=>{
@@ -17,13 +18,14 @@ export default{
el.addEventListener('contextmenu',(e)=>{
if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
LemonPopover.methods.closeAll()
let component;
let visibleItems = []
if(binding.modifiers.message) component = vnode.context;
else if(binding.modifiers.contact) component = vnode.child;
if(!popover){
popover = document.createElement('div');
popover.className = 'lemon-dropdown';
popover.className = 'lemon-contextmenu';
document.body.appendChild(popover);
}
popover.innerHTML = binding.value.map((item)=>{
@@ -36,8 +38,8 @@ export default{
if(visible){
visibleItems.push(item);
const icon = item.icon ? `<i class="lemon-dropdown__icon ${item.icon}"></i>` : '';
return `<div style="color:${item.color}" title="${item.text}" class="lemon-dropdown__item">${icon}<span>${item.text}</span></div>`;
const icon = item.icon ? `<i class="lemon-contextmenu__icon ${item.icon}"></i>` : '';
return `<div style="color:${item.color}" title="${item.text}" class="lemon-contextmenu__item">${icon}<span>${item.text}</span></div>`;
}
return '';
}).join("");
+2 -2
View File
@@ -1,3 +1,3 @@
import Vue from 'vue';
import Dropdown from './dropdown';
Vue.directive('dropdown',Dropdown);
import Contextmenu from './contextmenu';
Vue.directive('LemonContextmenu',Contextmenu);
+1 -1
View File
@@ -7,7 +7,7 @@ export default {
return "[图片]";
},
text(message) {
return this.replaceEmojiName(clearHtml(message.content));
return this.emojiNameToImage(clearHtml(message.content));
},
event(message){
return '[通知]';
-3
View File
@@ -103,9 +103,6 @@ export function mergeDeep(o1, o2) {
return o1;
}
export function toEmojiName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
}
export function formatByte(value) {
if (null == value || value == "") {
return "0 Bytes";