Skip to content

foreign / customer-service

Go to a project
Commit 452addc8 by Sixong.Zhu
Options

eslint

parent a5b8ff29
Expand all
Inline Side-by-side
Showing with 238 additions and 143 deletions
components/chat-container.vue
<template> <template>
<div class="chat-container" :class="{'is-in-page': isInPage}"> <div class="chat-container" :class="{ 'is-in-page': isInPage }">
<div class="search-wrap" v-if="!modelName"> <div class="search-wrap" v-if="!modelName">
<el-input <el-input
class="keyword-input" class="keyword-input"
...@@ -11,12 +10,29 @@ ...@@ -11,12 +10,29 @@
clearable clearable
@clear="search" @clear="search"
></el-input> ></el-input>
<i v-if="!isInPage" class="close-btn el-icon-close" @click="$emit('close')"></i> <i
v-if="!isInPage"
class="close-btn el-icon-close"
@click="$emit('close')"
></i>
</div> </div>
<chat-list v-if="!modelName" ref="chatListComp" @list-count-update="$emit('list-count-update', $event)" /> <chat-list
<chat-list-model v-if="modelName" @list-count-update="$emit('list-count-update', $event)" ref="chatListModel" :modelName="modelName" :listName="listName" /> v-if="!modelName"
<div class="chat-content-wrap" v-if="chatVisible && onShow" > ref="chatListComp"
<chat :modelName="modelName" @updateActive="$emit('updateActive', $event)" /> @list-count-update="$emit('list-count-update', $event)"
/>
<chat-list-model
v-if="modelName"
@list-count-update="$emit('list-count-update', $event)"
ref="chatListModel"
:modelName="modelName"
:listName="listName"
/>
<div class="chat-content-wrap" v-if="chatVisible && onShow">
<chat
:modelName="modelName"
@updateActive="$emit('updateActive', $event)"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -33,8 +49,8 @@ import { ChatStore, chatStore } from "@/customer-service/store/model"; ...@@ -33,8 +49,8 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
components: { components: {
chat, chat,
ChatList, ChatList,
ChatListModel ChatListModel,
} },
}) })
export default class ChatContainer extends Vue { export default class ChatContainer extends Vue {
@Prop(Boolean) isInPage: boolean; @Prop(Boolean) isInPage: boolean;
...@@ -49,7 +65,7 @@ export default class ChatContainer extends Vue { ...@@ -49,7 +65,7 @@ export default class ChatContainer extends Vue {
private readonly chatVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE; private readonly chatVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
@chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT) @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
@Ref("chatListComp") chatListComp: ChatList; @Ref("chatListComp") chatListComp: ChatList;
private searchKeyword = ""; private searchKeyword = "";
...@@ -57,30 +73,33 @@ export default class ChatContainer extends Vue { ...@@ -57,30 +73,33 @@ export default class ChatContainer extends Vue {
@Ref("chatListModel") chatListModel: ChatListModel; @Ref("chatListModel") chatListModel: ChatListModel;
private search() { private search() {
this.chatListComp.search(this.searchKeyword) this.chatListComp.search(this.searchKeyword);
} }
@Watch("isActive", {immediate: true}) isActiveUpdate() { @Watch("isActive", { immediate: true }) isActiveUpdate() {
this.onShow = this.isActive; this.onShow = this.isActive;
if (!this.onShow && this.activeName !== "my_receiving" || this.onShow && this.listName) { if (
(!this.onShow && this.activeName !== "my_receiving") ||
(this.onShow && this.listName)
) {
this.chatListModel && this.chatListModel.clearActiveId(); this.chatListModel && this.chatListModel.clearActiveId();
} }
} }
private onChatDrawerClose(){ private onChatDrawerClose() {
this.hideChat() this.hideChat();
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
.chat-container { .chat-container {
height: 70vh; height: 70vh;
&.is-in-page { &.is-in-page {
height: 100%; height: 100%;
} }
} }
.keyword-input { .keyword-input {
width: 300px; width: 300px;
margin: 15px 0 14px 20px; margin: 15px 0 14px 20px;
/deep/ .el-input__inner { /deep/ .el-input__inner {
...@@ -96,24 +115,24 @@ export default class ChatContainer extends Vue { ...@@ -96,24 +115,24 @@ export default class ChatContainer extends Vue {
/deep/ .el-input__icon { /deep/ .el-input__icon {
line-height: 32px; line-height: 32px;
} }
} }
.search-wrap { .search-wrap {
height: 59px; height: 59px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.close-btn { .close-btn {
float: right; float: right;
font-size: 20px; font-size: 20px;
color: #aaa; color: #aaa;
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
margin: 15px 10px 0; margin: 15px 10px 0;
} }
.chat-content-wrap { .chat-content-wrap {
display: inline-block; display: inline-block;
width: 75%; width: 75%;
height: calc(100% - 60px); height: calc(100% - 60px);
box-sizing: border-box; box-sizing: border-box;
vertical-align: top; vertical-align: top;
} }
</style> </style>
components/chat-list.vue
...@@ -26,14 +26,16 @@ ...@@ -26,14 +26,16 @@
:title="item.customer_name" :title="item.customer_name"
class="chat-name flex-fill text-dot-dot-dot" class="chat-name flex-fill text-dot-dot-dot"
> >
<span>{{ item.title || item.chat_id }}</span> <span>{{
item.title || item.chat_id
}}</span>
</div> </div>
<div v-if="item.last_msg_ts" class="chat-time"> <div v-if="item.last_msg_ts" class="chat-time">
{{ formatTimestamp(item.last_msg_ts) }} {{ formatTimestamp(item.last_msg_ts) }}
</div> </div>
</div> </div>
<div class="chat-msg text-dot-dot-dot"> <div class="chat-msg text-dot-dot-dot">
{{userNames[item.last_msg_sender] ? userNames[item.last_msg_sender] + ": " : ""}}{{ parseMesage(item) }} {{ buildLastMessage(item) }}
</div> </div>
</div> </div>
</div> </div>
...@@ -52,63 +54,15 @@ ...@@ -52,63 +54,15 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator"; import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import avatar from "@/customer-service/components/avatar.vue"; import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { ChatStore } from "@/customer-service/store/model";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
import { Chat as ChatType } from "@/customer-service/xim/models/chat"; import { Chat as ChatType } from "@/customer-service/xim/models/chat";
import { EVENTS } from "@/EventConsts" import { EVENTS } from "@/EventConsts";
import Controller from "./controller/chat-list";
export function parserMessage(type: string, rawMsg: string) {
if (!type) return "";
if (!rawMsg) return "";
const msg = JSON.parse(rawMsg);
if (type === "text") {
return msg.text;
} else if (type === "image") {
return `[图片]`;
} else if (type === "file") {
return `[文件]`;
} else {
return `[系统自动回复]`;
}
}
@Component({ components: { avatar } }) @Component({ components: { avatar } })
export default class ChatList extends Vue { export default class ChatList extends Controller {
private searchKeyword = ""; private searchKeyword = "";
@chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
private readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST)
private readonly chatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST;
@chatStore.State(ChatStore.STATE_CHAT_USERNAME)
private readonly userNames!: ChatStore.STATE_CHAT_USERNAME;
@chatStore.Action(ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION)
private readonly saveChatId!: ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_MYSELF_ID)
private readonly saveMyId!: ChatStore.MUTATION_SAVE_MYSELF_ID;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_USERNAME)
private readonly updateUserName!: ChatStore.MUTATION_SAVE_USERNAME;
@chatStore.Mutation(ChatStore.MUTATION_SET_CHAT_SOURCE)
private readonly setSource!: ChatStore.MUTATION_SET_CHAT_SOURCE;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_CHAT_TITLE)
private readonly saveChatTitle!: ChatStore.MUTATION_SAVE_CHAT_TITLE;
@chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
@chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
@Prop({ type: Number, default: -1 }) @Prop({ type: Number, default: -1 })
private selected!: number; private selected!: number;
...@@ -118,11 +72,14 @@ export default class ChatList extends Vue { ...@@ -118,11 +72,14 @@ export default class ChatList extends Vue {
private unReadMsgCount = 0; private unReadMsgCount = 0;
private get chatRooms() { private get chatRooms() {
const list = this.chatList?.list.filter(chat => chat.title.indexOf(this.searchKeyword) > -1) || []; const list =
this.chatList?.list.filter(
(chat) => chat.title.indexOf(this.searchKeyword) > -1
) || [];
let unReadMsgCount = 0; let unReadMsgCount = 0;
list.filter(chat => chat.unread_msg_count > 0).forEach(chat => { list.filter((chat) => chat.unread_msg_count > 0).forEach((chat) => {
unReadMsgCount += chat.unread_msg_count unReadMsgCount += chat.unread_msg_count;
}) });
this.unReadMsgCount = unReadMsgCount; this.unReadMsgCount = unReadMsgCount;
this.$emit("list-count-update", this.unReadMsgCount); this.$emit("list-count-update", this.unReadMsgCount);
this.$eventHub.$emit(EVENTS.NewMsg, this.unReadMsgCount); this.$eventHub.$emit(EVENTS.NewMsg, this.unReadMsgCount);
...@@ -169,23 +126,6 @@ export default class ChatList extends Vue { ...@@ -169,23 +126,6 @@ export default class ChatList extends Vue {
this.$emit("change"); this.$emit("change");
} }
private parseMesage(data: ChatType) {
if (data.last_msg_sender && data.last_msg_sender != "0") {
if (this.userNames[data.last_msg_sender] === undefined) {
this.updateUserName({id: data.last_msg_sender, name: ""});
this.sdk.model("user").detail(data.last_msg_sender).query().then(userInfo => {
this.updateUserName({id: data.last_msg_sender, name: userInfo.row.first_name.display as string});
})
}
}
if (data.last_msg_content === "") return "[暂无消息]";
return parserMessage(data.last_msg_type, data.last_msg_content);
}
private formatTimestamp(v: number) {
return formatTime(v, { short: true, rule: TimeFormatRule.Hour12 });
}
private close() { private close() {
this.$emit("close"); this.$emit("close");
} }
......
components/chat-room.vue
<template> <template>
<div class="chat-room-con h-100 pos-rel"> <div class="chat-room-con h-100 pos-rel">
<div class="chat-panel"> <div class="chat-panel">
<div class="chat-area h-100" ref="chatBox"> <div class="chat-area h-100 d-flex flex-column" ref="chatBox">
<div ref="top" class="chat-messages pos-rel" :class="{'is-not-chat-member': !isChatMember}"> <div
ref="top"
class="chat-messages pos-rel flex-fill"
:class="{ 'is-not-chat-member': !isChatMember }"
>
<div <div
v-if="getCurrentInputingPeople.length" v-if="getCurrentInputingPeople.length"
class="someone-inputing" class="someone-inputing"
...@@ -11,7 +15,13 @@ ...@@ -11,7 +15,13 @@
</div> </div>
<messages /> <messages />
</div> </div>
<div class="resize" title="收缩侧边栏" ref="resize" @mousedown="dragControllerDiv" v-if="isChatMember"></div> <div
class="resize"
title="收缩侧边栏"
ref="resize"
@mousedown="dragControllerDiv"
v-if="isChatMember"
></div>
<div ref="bottom" class="chat-input" v-if="isChatMember"> <div ref="bottom" class="chat-input" v-if="isChatMember">
<message-input @error="onError" /> <message-input @error="onError" />
</div> </div>
...@@ -20,7 +30,14 @@ ...@@ -20,7 +30,14 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Provide, Vue, Watch, Ref } from "vue-property-decorator"; import {
Component,
Prop,
Provide,
Vue,
Watch,
Ref,
} from "vue-property-decorator";
import MessageInput from "@/customer-service/components/message-input.vue"; import MessageInput from "@/customer-service/components/message-input.vue";
import messages from "@/customer-service/components/message-list.vue"; import messages from "@/customer-service/components/message-list.vue";
...@@ -106,7 +123,7 @@ export default class ChatRoom extends Vue { ...@@ -106,7 +123,7 @@ export default class ChatRoom extends Vue {
this.$message.error(msg); this.$message.error(msg);
} }
private dragControllerDiv(e:MouseEvent) { private dragControllerDiv(e: MouseEvent) {
let resize = this.refResize as any; let resize = this.refResize as any;
let top = this.refTop as HTMLElement; let top = this.refTop as HTMLElement;
let bottom = this.refBottom as HTMLElement; let bottom = this.refBottom as HTMLElement;
...@@ -126,9 +143,9 @@ export default class ChatRoom extends Vue { ...@@ -126,9 +143,9 @@ export default class ChatRoom extends Vue {
} }
let bottomHeight = box.clientHeight - moveLen; let bottomHeight = box.clientHeight - moveLen;
resize.style.top = moveLen + 'px'; // 设置左侧区域的宽度 resize.style.top = moveLen + "px"; // 设置左侧区域的宽度
top.style.height = moveLen + 'px'; top.style.height = moveLen + "px";
bottom.style.height = bottomHeight + 'px'; bottom.style.height = bottomHeight + "px";
}; };
// 鼠标松开事件 // 鼠标松开事件
document.onmouseup = function (evt) { document.onmouseup = function (evt) {
......
components/chat-title.vue
...@@ -14,21 +14,36 @@ ...@@ -14,21 +14,36 @@
<div v-else class="chat-status">接待中</div> <div v-else class="chat-status">接待中</div>
</template> </template>
</div> </div>
<div class="title-buttons"> <div class="title-buttons d-flex align-items-center">
<el-button
<el-button class="button" @click="startReception" round v-if="!isChatMember" class="button"
@click="startReception"
round
v-if="!isChatMember"
>我要接待</el-button >我要接待</el-button
> >
<el-button class="button" @click="exitChat" round v-if="isChatMember" <el-button
class="button"
@click="exitChat"
round
v-if="isChatMember"
>退出会话</el-button >退出会话</el-button
> >
<el-button class="button" @click="finishReception" round v-if="isChatMember && operatorType > 25" <el-button
class="button"
@click="finishReception"
round
v-if="isChatMember && operatorType > 25"
>结束接待</el-button >结束接待</el-button
> >
<el-button class="button" @click="showAddMember" round <el-button class="button" @click="showAddMember" round
>添加客服</el-button >添加客服</el-button
> >
<i v-if="close && isSingleChat" @click="close" class="title-close el-icon-close" /> <i
v-if="close && isSingleChat"
@click="close"
class="title-close el-icon-close"
/>
</div> </div>
<ChatCreator <ChatCreator
v-if="visible" v-if="visible"
...@@ -115,9 +130,9 @@ export default class ChatTitle extends Vue { ...@@ -115,9 +130,9 @@ export default class ChatTitle extends Vue {
private async exitChat() { private async exitChat() {
try { try {
if (this.operatorType == '25') { if (this.operatorType == "25") {
await this._userExitChat(); await this._userExitChat();
} else if (+this.operatorType > 25){ } else if (+this.operatorType > 25) {
await this._csExitChat(); await this._csExitChat();
} }
this.hideChat(); this.hideChat();
...@@ -129,18 +144,22 @@ export default class ChatTitle extends Vue { ...@@ -129,18 +144,22 @@ export default class ChatTitle extends Vue {
private async startReception() { private async startReception() {
try { try {
await this._startReception(); await this._startReception();
this.$emit("updateActive", "my_receiving") this.$emit("updateActive", "my_receiving");
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
private async finishReception() { private async finishReception() {
await this.$confirm("确定要结束接待吗？结束接待将会终止客服会话", "提示", { await this.$confirm(
"确定要结束接待吗？结束接待将会终止客服会话",
"提示",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) }
);
await this._finishReception(); await this._finishReception();
this.hideChat(); this.hideChat();
} }
...@@ -167,7 +186,7 @@ export default class ChatTitle extends Vue { ...@@ -167,7 +186,7 @@ export default class ChatTitle extends Vue {
.title-close { .title-close {
color: #8d959d; color: #8d959d;
cursor: pointer; cursor: pointer;
margin-left:30px; margin-left: 30px;
} }
} }
</style> </style>
components/controller/chat-list.ts 0 → 100644
import { Component, Vue } from "vue-property-decorator";
import { chatStore, ChatStore } from "@/customer-service/store/model";
import { parserMessage } from ".";
import { Chat as ChatItem } from "@/customer-service/xim/models/chat";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
@Component({ components: {} })
export default class ChatList extends Vue {
@chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
protected readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
protected readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST)
protected readonly chatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST;
@chatStore.State(ChatStore.STATE_CHAT_USERNAME)
protected readonly userNames!: ChatStore.STATE_CHAT_USERNAME;
@chatStore.Action(ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION)
protected readonly saveChatId!: ChatStore.ACTION_SAVE_CURRENT_CHAT_ID_VERSION;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_MYSELF_ID)
protected readonly saveMyId!: ChatStore.MUTATION_SAVE_MYSELF_ID;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_USERNAME)
protected readonly updateUserName!: ChatStore.MUTATION_SAVE_USERNAME;
@chatStore.Mutation(ChatStore.MUTATION_SET_CHAT_SOURCE)
protected readonly setSource!: ChatStore.MUTATION_SET_CHAT_SOURCE;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_CHAT_TITLE)
protected readonly saveChatTitle!: ChatStore.MUTATION_SAVE_CHAT_TITLE;
@chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
protected readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
@chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
protected readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
protected parseMesage(data: ChatItem) {
if (data.last_msg_sender && data.last_msg_sender != "0") {
if (this.userNames[data.last_msg_sender] === undefined) {
this.updateUserName({ id: data.last_msg_sender, name: "" });
this.sdk
.model("user")
.detail(data.last_msg_sender)
.query()
.then((userInfo) => {
this.updateUserName({
id: data.last_msg_sender,
name: userInfo.row.first_name.display as string,
});
});
}
}
if (data.last_msg_content === "") {
return "[暂无消息]";
}
return parserMessage(data.last_msg_type, data.last_msg_content);
}
protected formatTimestamp(v: number) {
return formatTime(v, { short: true, rule: TimeFormatRule.Hour12 });
}
protected buildLastMessage(item: ChatItem) {
const sender = this.userNames[item.last_msg_sender];
if (sender) {
return `${sender}: ${this.parseMesage(item)}`;
}
return this.parseMesage(item);
}
}
components/controller/index.ts 0 → 100644
export function parserMessage(type: string, rawMsg: string) {
if (!type) return "";
if (!rawMsg) return "";
const msg = JSON.parse(rawMsg);
if (type === "text") {
return msg.text;
} else if (type === "image") {
return `[图片]`;
} else if (type === "file") {
return `[文件]`;
} else {
return `[系统自动回复]`;
}
}
components/message-input.vue
...@@ -101,7 +101,9 @@ export default class MessageInput extends Vue { ...@@ -101,7 +101,9 @@ export default class MessageInput extends Vue {
} }
private async sendFile(file: any, type: "image" | "file") { private async sendFile(file: any, type: "image" | "file") {
const src = JSON.parse(file.attributes[`data-${type}`]?.value || "") as { const src = JSON.parse(
file.attributes[`data-${type}`]?.value || ""
) as {
url: string; url: string;
name: string; name: string;
size: number; size: number;
...@@ -115,7 +117,7 @@ export default class MessageInput extends Vue { ...@@ -115,7 +117,7 @@ export default class MessageInput extends Vue {
if (type === "image") { if (type === "image") {
const img = new Image(); const img = new Image();
img.src = src.url; img.src = src.url;
img.onload = function() { img.onload = function () {
w = img.naturalWidth; w = img.naturalWidth;
h = img.naturalHeight; h = img.naturalHeight;
}; };
......
hybrid-input/index.vue
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
@click="allowLoadImg" @click="allowLoadImg"
class="offset" class="offset"
> >
<img class="tool-bar-icon" src="@/customer-service/imgs/pic.png" /> <img
class="tool-bar-icon"
src="@/customer-service/imgs/pic.png"
/>
</label> </label>
<!-- <label for="chat-upload-file" :title="tip4File" @click="allowLoadFile"> <!-- <label for="chat-upload-file" :title="tip4File" @click="allowLoadFile">
<img class="tool-bar-icon" src="@/customer-service/imgs/file.png" /> <img class="tool-bar-icon" src="@/customer-service/imgs/file.png" />
...@@ -141,7 +144,9 @@ export default class Input extends Vue { ...@@ -141,7 +144,9 @@ export default class Input extends Vue {
if (v) { if (v) {
const cache = chatCache[v]; const cache = chatCache[v];
if (cache) { if (cache) {
const e = document.querySelector("#chat-input-box") as HTMLElement; const e = document.querySelector(
"#chat-input-box"
) as HTMLElement;
if (e) { if (e) {
for (const node of cache as ChildNode[]) { for (const node of cache as ChildNode[]) {
e.appendChild(node); e.appendChild(node);
...@@ -236,7 +241,8 @@ export default class Input extends Vue { ...@@ -236,7 +241,8 @@ export default class Input extends Vue {
html += k; html += k;
} }
} else if (i === 1) { } else if (i === 1) {
const srcRegex = /<img[^>]+src="([^">]+)"\s+title="([^">]+)"/g; const srcRegex =
/<img[^>]+src="([^">]+)"\s+title="([^">]+)"/g;
let result; let result;
do { do {
result = srcRegex.exec(k); result = srcRegex.exec(k);
...@@ -267,28 +273,31 @@ export default class Input extends Vue { ...@@ -267,28 +273,31 @@ export default class Input extends Vue {
private handleReturn(e: KeyboardEvent) { private handleReturn(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey) { if (e.altKey || e.ctrlKey) {
let el = this.messageInputBox let el = this.messageInputBox;
let range = document.createRange() let range = document.createRange();
let sel = window.getSelection() let sel = window.getSelection();
let offset = sel.focusOffset let offset = sel.focusOffset;
let content = el.innerHTML let content = el.innerHTML;
el.innerHTML = content.slice(0, offset) + '\n' + (content.slice(offset) || '\n') el.innerHTML =
range.setStart(el.childNodes[0], offset + 1) content.slice(0, offset) +
range.collapse(true) "\n" +
sel.removeAllRanges() (content.slice(offset) || "\n");
sel.addRange(range) range.setStart(el.childNodes[0], offset + 1);
return range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
return;
} }
if (e.shiftKey) { if (e.shiftKey) {
e.preventDefault(); e.preventDefault();
return return;
} }
} }
private async handleSendMsg(e: KeyboardEvent) { private async handleSendMsg(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
if (e.shiftKey || e.ctrlKey || e.altKey) { if (e.shiftKey || e.ctrlKey || e.altKey) {
return return;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
...@@ -386,9 +395,9 @@ export default class Input extends Vue { ...@@ -386,9 +395,9 @@ export default class Input extends Vue {
/** /**
* 在光标处插入元素 * 在光标处插入元素
*/ */
public insertHtmlAtCaret = (function() { public insertHtmlAtCaret = (function () {
let range: Range | null = null; let range: Range | null = null;
return function(this: Input, html: string) { return function (this: Input, html: string) {
if (this.saveRange == null) { if (this.saveRange == null) {
this.saveRange = (alternate) => (range = alternate); this.saveRange = (alternate) => (range = alternate);
} }
......
xim/index.ts
...@@ -35,8 +35,8 @@ class Chat { ...@@ -35,8 +35,8 @@ class Chat {
EmojiService.raiseOnReady(this.token); EmojiService.raiseOnReady(this.token);
option.sdk().events.addTokenChanged(token => { option.sdk().events.addTokenChanged((token) => {
this.setToken(() => new Promise(resolve => resolve(token))); this.setToken(() => new Promise((resolve) => resolve(token)));
}); });
return this.initChatSdk(option.webSocketUri); return this.initChatSdk(option.webSocketUri);
...@@ -49,7 +49,7 @@ class Chat { ...@@ -49,7 +49,7 @@ class Chat {
public getSdk = () => { public getSdk = () => {
if (this._sdk == null) { if (this._sdk == null) {
throw new Error("sdk shouldn't undefined"); throw new Error("sdk shouldn't undefined");
}; }
return this._sdk(); return this._sdk();
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment