Skip to content

foreign / customer-service

Go to a project
Commit 474ad190 by Sixong.Zhu
Options

cs

parent 9e5832f9
Inline Side-by-side
Showing with 663 additions and 663 deletions
components/message-input.vue
...@@ -7,184 +7,193 @@ ...@@ -7,184 +7,193 @@
/> />
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import ChatInput, { import ChatInput, {
FILE_INFO_CLASS, FILE_INFO_CLASS,
isImageOrFile, isImageOrFile,
} from "../hybrid-input/index.vue"; } from "../hybrid-input/index.vue";
import { Message, MessageType } from "../model"; import { Message, MessageType } from "../model";
import { uploadFile } from "../service/upload"; import { uploadFile } from "../service/upload";
import { ChatLoggerService } from "../xim/logger"; import xim from "../xim/xim";
import xim from "../xim/xim"; import { ChatStore, chatStore } from "@/customer-service/store/model";
import { ChatStore, chatStore } from "@/customer-service/store/model";
let sendingMessageIndex = 1; let sendingMessageIndex = 1;
@Component({ components: { ChatInput } }) @Component({ components: { ChatInput } })
export default class MessageInput extends Vue { export default class MessageInput extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE) @chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
private readonly chatRoomVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE; private readonly chatRoomVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
@chatStore.Action(ChatStore.ACTION_SEND_MESSAGE) @chatStore.Action(ChatStore.ACTION_SEND_MESSAGE)
private readonly sendMsg!: ChatStore.ACTION_SEND_MESSAGE; private readonly sendMsg!: ChatStore.ACTION_SEND_MESSAGE;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.State(ChatStore.STATE_CHAT_MY_ID) @chatStore.State(ChatStore.STATE_CHAT_MY_ID)
private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID; private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING; private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING;
@chatStore.Getter(ChatStore.STATE_CHAT_SOURCE) @chatStore.Getter(ChatStore.STATE_CHAT_SOURCE)
private readonly source!: ChatStore.STATE_CHAT_SOURCE; private readonly source!: ChatStore.STATE_CHAT_SOURCE;
@chatStore.Mutation(ChatStore.MUTATION_APPEND_SENDING_MESSAGE) @chatStore.Mutation(ChatStore.MUTATION_APPEND_SENDING_MESSAGE)
private readonly appendSendingMessages!: ChatStore.MUTATION_APPEND_SENDING_MESSAGE; private readonly appendSendingMessages!: ChatStore.MUTATION_APPEND_SENDING_MESSAGE;
@chatStore.Mutation(ChatStore.MUTATION_FAILED_SENDING_MESSAGE) @chatStore.Mutation(ChatStore.MUTATION_FAILED_SENDING_MESSAGE)
private readonly failedSendingMessage!: ChatStore.MUTATION_FAILED_SENDING_MESSAGE; private readonly failedSendingMessage!: ChatStore.MUTATION_FAILED_SENDING_MESSAGE;
@chatStore.Mutation(ChatStore.MUTATION_REMOVE_SENDING_MESSAGE) @chatStore.Mutation(ChatStore.MUTATION_REMOVE_SENDING_MESSAGE)
private readonly removeSendingMessages!: ChatStore.MUTATION_REMOVE_SENDING_MESSAGE; private readonly removeSendingMessages!: ChatStore.MUTATION_REMOVE_SENDING_MESSAGE;
@Ref("chat-input") @Ref("chat-input")
private readonly chatInput!: ChatInput; private readonly chatInput!: ChatInput;
@Watch("chatRoomVisible") @Watch("chatRoomVisible")
private whenChatRoomShow() { private whenChatRoomShow() {
if (!this.chatRoomVisible) return; if (!this.chatRoomVisible) return;
this.chatInput.focus(); this.chatInput.focus();
}
private async sendMessage(msg: ChildNode[], done: () => void) {
if (this.chatIniting) {
return;
} }
for (const item of msg) {
if (isImageOrFile(item)) { private async sendMessage(msg: ChildNode[]) {
if ((item as Element).classList.contains(FILE_INFO_CLASS)) { if (this.chatIniting) {
await this.sendFile(item, MessageType.File); return;
} else {
await this.sendFile(item, MessageType.Image);
}
continue;
} }
for (const item of msg) {
if (isImageOrFile(item)) {
if ((item as Element).classList.contains(FILE_INFO_CLASS)) {
await this.sendFile(item, MessageType.File).catch((e) =>
this.onError(e)
);
} else {
await this.sendFile(item, MessageType.Image).catch((e) =>
this.onError(e)
);
}
continue;
}
if (item.textContent) { if (item.textContent) {
await this.sendText(item.textContent); await this.sendText(item.textContent).catch((e) =>
this.onError(e)
);
}
} }
this.$emit("sent");
} }
ChatLoggerService.logger?.debug("all messages sent");
done();
this.$emit("sent");
}
private async onInput() { private async onInput() {
if (this.chatId == null) return; if (this.chatId == null) return;
await xim.inputing(this.chatId); await xim.inputing(this.chatId);
}
private async sendText(text: string) {
if (text && text.trim()) {
const msg = { text: text.trim() };
if (this.source) {
Object.assign(msg, { source: this.source });
}
return this.sendMsg({ msgType: MessageType.Text, msg: JSON.stringify(msg) });
} }
}
private async sendFile(file: any, type: MessageType.Image | MessageType.File) { private async sendText(text: string) {
const src = JSON.parse( if (text && text.trim()) {
file.attributes[`data-${type}`]?.value || "" const msg = { text: text.trim() };
) as { if (this.source) {
url: string; Object.assign(msg, { source: this.source });
name: string;
size: number;
};
if (src) {
const index = this.sendSendingMessage(type, src);
const file = await this.readBlobUrl2Base64(src.url, src.name);
if (file) {
let w = 0;
let h = 0;
if (type === MessageType.Image) {
const img = new Image();
img.src = src.url;
img.onload = function () {
w = img.naturalWidth;
h = img.naturalHeight;
};
img.remove();
} }
uploadFile(file) return this.sendMsg({
.then((r) => { msgType: MessageType.Text,
if (r) { msg: JSON.stringify(msg),
const msg = { });
url: r, }
name: file.name, }
size: file.size,
};
if (this.source) {
Object.assign(msg, { source: this.source });
}
if (w && h) { private async sendFile(
Object.assign(msg, { w, h }); file: any,
type: MessageType.Image | MessageType.File
) {
const src = JSON.parse(
file.attributes[`data-${type}`]?.value || ""
) as {
url: string;
name: string;
size: number;
};
if (src) {
const index = this.sendSendingMessage(type, src);
const file = await this.readBlobUrl2Base64(src.url, src.name);
if (file) {
let w = 0;
let h = 0;
if (type === MessageType.Image) {
const img = new Image();
img.src = src.url;
img.onload = function () {
w = img.naturalWidth;
h = img.naturalHeight;
};
img.remove();
}
uploadFile(file)
.then((r) => {
if (r) {
const msg = {
url: r,
name: file.name,
size: file.size,
};
if (this.source) {
Object.assign(msg, { source: this.source });
}
if (w && h) {
Object.assign(msg, { w, h });
}
this.sendMsg({
msgType: type,
msg: JSON.stringify(msg),
});
this.removeSendingMessages(index);
URL.revokeObjectURL(src.url);
} else {
this.setMsg2Failed(index);
} }
})
.catch((e) => {
// eslint-disable-next-line no-console
console.error(e);
this.sendMsg({
msgType: type,
msg: JSON.stringify(msg),
});
this.removeSendingMessages(index);
URL.revokeObjectURL(src.url);
} else {
this.setMsg2Failed(index); this.setMsg2Failed(index);
} });
}) }
.catch((e) => {
// eslint-disable-next-line no-console
console.error(e);
this.setMsg2Failed(index);
});
} }
} }
}
private setMsg2Failed(index: number) { private setMsg2Failed(index: number) {
this.failedSendingMessage(index); this.failedSendingMessage(index);
}
private sendSendingMessage(type: string, msg: any) {
const index = sendingMessageIndex++;
if (this.source) {
Object.assign(msg, { source: this.source, eid: this.chatMyId });
} }
if (this.chatId) {
this.appendSendingMessages({ private sendSendingMessage(type: string, msg: any) {
id: -index, const index = sendingMessageIndex++;
chat_id: this.chatId, if (this.source) {
ts: Date.now(), Object.assign(msg, { source: this.source, eid: this.chatMyId });
type, }
msg: JSON.stringify(msg), if (this.chatId) {
} as Message); this.appendSendingMessages({
return -index; id: -index,
chat_id: this.chatId,
ts: Date.now(),
type,
msg: JSON.stringify(msg),
} as Message);
return -index;
}
return 0;
} }
return 0;
}
private readBlobUrl2Base64(url: string, name: string) { private readBlobUrl2Base64(url: string, name: string) {
return fetch(url) return fetch(url)
.then((r) => r.blob()) .then((r) => r.blob())
.then((blob) => new File([blob], name)); .then((blob) => new File([blob], name));
} }
private onError(e: any) { private onError(e: any) {
this.$emit("error", e.message || e); this.$emit("error", e.message || e);
}
} }
}
</script> </script>
hybrid-input/index.vue
...@@ -60,614 +60,605 @@ ...@@ -60,614 +60,605 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class"; import { namespace } from "vuex-class";
import { import {
getFileType, getFileType,
getSvg, getSvg,
MAX_FILE_SIZE, MAX_FILE_SIZE,
MAX_FILE_SIZE_STRING, MAX_FILE_SIZE_STRING,
MAX_IMAGE_SIZE, MAX_IMAGE_SIZE,
MAX_IMAGE_SIZE_STRING, MAX_IMAGE_SIZE_STRING,
MESSAGE_FILE_EMPTY, MESSAGE_FILE_EMPTY,
MESSAGE_FILE_TOO_LARGE, MESSAGE_FILE_TOO_LARGE,
MESSAGE_IMAGE_TOO_LARGE, MESSAGE_IMAGE_TOO_LARGE,
} from "../components/message-item/file-controller"; } from "../components/message-item/file-controller";
import { EmojiItem, EmojiService } from "../service/emoji"; import { EmojiItem, EmojiService } from "../service/emoji";
import { ChatStore } from "../store/model"; import { ChatStore } from "../store/model";
import { formatFileSize } from "../utils"; import { formatFileSize } from "../utils";
export const enum InputMessageType { export const enum InputMessageType {
Text = "text", Text = "text",
Image = "image", Image = "image",
File = "file", File = "file",
} }
export interface InputMessageBody { export interface InputMessageBody {
text?: string; text?: string;
url?: string; url?: string;
name?: string; name?: string;
size?: number; size?: number;
} }
export interface InputMessage { export interface InputMessage {
type: InputMessageType; type: InputMessageType;
body: InputMessageBody; body: InputMessageBody;
file?: File | null; file?: File | null;
} }
const chatStore = namespace("chatStore"); const chatStore = namespace("chatStore");
const chatCache: { [key: number]: any } = {}; const chatCache: { [key: number]: any } = {};
export const IMAGE_INFO_CLASS = "img-info"; export const IMAGE_INFO_CLASS = "img-info";
export const FILE_INFO_CLASS = "file-info"; export const FILE_INFO_CLASS = "file-info";
export function isImageOrFile(node: ChildNode) { export function isImageOrFile(node: ChildNode) {
const e = node as HTMLElement; const e = node as HTMLElement;
return ( return (
e.classList && e.classList &&
(e.classList.contains(IMAGE_INFO_CLASS) || (e.classList.contains(IMAGE_INFO_CLASS) ||
e.classList.contains(FILE_INFO_CLASS)) e.classList.contains(FILE_INFO_CLASS))
); );
} }
@Component({ components: {} }) @Component({ components: {} })
export default class Input extends Vue { export default class Input extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST) @chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
protected readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST; protected readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;
@Ref("input") @Ref("input")
private readonly messageInputBox!: HTMLDivElement; private readonly messageInputBox!: HTMLDivElement;
private file = ""; private file = "";
private acceptType = "image/*"; private acceptType = "image/*";
private emojiPanelVisibility = false; private emojiPanelVisibility = false;
private tip4Image = `发送图片(最大${MAX_IMAGE_SIZE_STRING})`; private tip4Image = `发送图片(最大${MAX_IMAGE_SIZE_STRING})`;
private tip4File = `发送文件(最大${MAX_FILE_SIZE_STRING})`; private tip4File = `发送文件(最大${MAX_FILE_SIZE_STRING})`;
private emoji: EmojiItem[] = []; private emoji: EmojiItem[] = [];
@Watch("chatId") @Watch("chatId")
private onChatIdChanged(v: number, old: number) { private onChatIdChanged(v: number, old: number) {
if (old) { if (old) {
const current = this.getNodeListFromInputBox(); const current = this.getNodeListFromInputBox();
if (current && current.length) { if (current && current.length) {
chatCache[old] = current; chatCache[old] = current;
}
} }
}
this.clearInput(); this.clearInput();
if (v) { if (v) {
const cache = chatCache[v]; const cache = chatCache[v];
if (cache) { if (cache) {
const e = document.querySelector( const e = document.querySelector(
"#chat-input-box" "#chat-input-box"
) as HTMLElement; ) 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);
}
} }
} }
} }
} }
}
public mounted() { public mounted() {
this.messageInputBox.addEventListener("paste", this.handlePasteEvent); this.messageInputBox.addEventListener("paste", this.handlePasteEvent);
document.addEventListener("click", this.hideEmoji); document.addEventListener("click", this.hideEmoji);
document.addEventListener("selectionchange", this.handleSaveRange); document.addEventListener("selectionchange", this.handleSaveRange);
this.setupEmoji(); this.setupEmoji();
this.focus(); this.focus();
} }
public beforeDestroy() { public beforeDestroy() {
document.removeEventListener("click", this.hideEmoji); document.removeEventListener("click", this.hideEmoji);
document.removeEventListener("selectionchange", this.handleSaveRange); document.removeEventListener("selectionchange", this.handleSaveRange);
} }
public focus() { public focus() {
this.messageInputBox.focus(); this.messageInputBox.focus();
} }
private clearInput() { private clearInput() {
this.messageInputBox.innerHTML = ""; this.messageInputBox.innerHTML = "";
const input = document.getElementById( const input = document.getElementById(
"chat-upload-file" "chat-upload-file"
) as HTMLInputElement; ) as HTMLInputElement;
if (input) { if (input) {
input.value = ""; input.value = "";
}
} }
}
private allowLoadImg() { private allowLoadImg() {
this.acceptType = "image/*"; this.acceptType = "image/*";
} }
private allowLoadFile() { private allowLoadFile() {
this.acceptType = "*"; this.acceptType = "*";
} }
private async handlePasteEvent(event: ClipboardEvent) { private async handlePasteEvent(event: ClipboardEvent) {
/* /*
* 组织默认行为原因 * 组织默认行为原因
* 1、浏览器自带复制粘贴图片到输入框的功能，与js加工后的图片重复了， * 1、浏览器自带复制粘贴图片到输入框的功能，与js加工后的图片重复了，
* 2、默认复制粘贴功能会粘贴dom结构 * 2、默认复制粘贴功能会粘贴dom结构
* */ * */
event.preventDefault(); event.preventDefault();
const items = event.clipboardData && event.clipboardData.items; const items = event.clipboardData && event.clipboardData.items;
let html = ""; let html = "";
const promiseArr = []; const promiseArr = [];
if (items && items.length) { if (items && items.length) {
// 检索剪切板items中类型带有image的 // 检索剪切板items中类型带有image的
for (let i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
if (items[i].kind === "file") { if (items[i].kind === "file") {
const file = items[i].getAsFile(); const file = items[i].getAsFile();
if (file) { if (file) {
if (file.size <= 0) { if (file.size <= 0) {
this.$emit("error", MESSAGE_FILE_EMPTY); this.$emit("error", MESSAGE_FILE_EMPTY);
return;
}
if (this.isImage(file)) {
if (file.size >= MAX_IMAGE_SIZE) {
this.$emit("error", MESSAGE_IMAGE_TOO_LARGE);
return; return;
} }
html += this.buildImageHtml(file); if (this.isImage(file)) {
} else { if (file.size >= MAX_IMAGE_SIZE) {
if (file.size >= MAX_FILE_SIZE) { this.$emit("error", MESSAGE_IMAGE_TOO_LARGE);
this.$emit("error", MESSAGE_FILE_TOO_LARGE); return;
return; }
html += this.buildImageHtml(file);
} else {
if (file.size >= MAX_FILE_SIZE) {
this.$emit("error", MESSAGE_FILE_TOO_LARGE);
return;
}
html += this.buildFileHtml(file);
} }
html += this.buildFileHtml(file); break;
} }
break; } else {
} promiseArr.push(
} else { new Promise<void>((resolve) => {
promiseArr.push( const contentType = items[i].type;
new Promise<void>((resolve) => { items[i].getAsString((k) => {
const contentType = items[i].type; /*
items[i].getAsString((k) => { * items第一项是文本
/* * 第二项是带有dom结构的文本（包含格式）
* items第一项是文本 * 第三项写明了数据是从哪里复制来的
* 第二项是带有dom结构的文本（包含格式） */
* 第三项写明了数据是从哪里复制来的 if (i === 0) {
*/ if (contentType === "text/plain") {
if (i === 0) { html += k;
if (contentType === "text/plain") {
html += k;
}
} else if (i === 1) {
const srcRegex =
/<img[^>]+src="([^">]+)"\s+title="([^">]+)"/g;
let result;
do {
result = srcRegex.exec(k);
if (result) {
const [, src, name] = result;
html += `<img tabindex="-1" src="${src}" data-image='${JSON.stringify(
{
url: src,
name,
}
)}'>`;
html = html.replace(name, "");
} }
} while (result); } else if (i === 1) {
} const srcRegex =
resolve(); /<img[^>]+src="([^">]+)"\s+title="([^">]+)"/g;
}); let result;
}) do {
); result = srcRegex.exec(k);
if (result) {
const [, src, name] = result;
html += `<img tabindex="-1" src="${src}" data-image='${JSON.stringify(
{
url: src,
name,
}
)}'>`;
html = html.replace(name, "");
}
} while (result);
}
resolve();
});
})
);
}
} }
} }
await Promise.all(promiseArr);
if (html) {
this.insertHtmlAtCaret(html);
}
} }
await Promise.all(promiseArr);
if (html) {
this.insertHtmlAtCaret(html);
}
}
private handleReturn(e: KeyboardEvent) { private handleReturn(e: KeyboardEvent) {
if (e.altKey || e.ctrlKey) { if (e.altKey || e.ctrlKey) {
const el = this.messageInputBox; const el = this.messageInputBox;
const range = document.createRange(); const range = document.createRange();
const sel = window.getSelection(); const sel = window.getSelection();
const offset = sel!.focusOffset; const offset = sel!.focusOffset;
const content = el.innerHTML; const content = el.innerHTML;
el.innerHTML = el.innerHTML =
content.slice(0, offset) + content.slice(0, offset) +
"\n" + "\n" +
(content.slice(offset) || "\n"); (content.slice(offset) || "\n");
range.setStart(el.childNodes[0], offset + 1); range.setStart(el.childNodes[0], offset + 1);
range.collapse(true); range.collapse(true);
sel!.removeAllRanges(); sel!.removeAllRanges();
sel!.addRange(range); sel!.addRange(range);
return; return;
}
if (e.shiftKey) {
e.preventDefault();
}
} }
if (e.shiftKey) {
private async handleSendMsg(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
if (e.shiftKey || e.ctrlKey || e.altKey) {
return;
}
const data = this.getNodeListFromInputBox();
this.$emit("send", data);
this.clearInput();
if (this.chatId) {
chatCache[this.chatId] = [];
}
setTimeout(() => this.getMyChatList(), 120);
} }
}
private async handleSendMsg(e: KeyboardEvent) { /**
e.preventDefault(); * 获取输入框中的内容
if (e.shiftKey || e.ctrlKey || e.altKey) { * @returns 返回的是节点数组
return; */
private getNodeListFromInputBox() {
this.messageInputBox.normalize();
const nodes = Array.from(this.messageInputBox.childNodes);
return this.combine(nodes);
} }
return new Promise((resolve, reject) => {
try {
const data = this.getNodeListFromInputBox();
this.$emit("send", data, resolve);
} catch (e) {
this.$emit("error", e);
reject(e);
}
})
.then(() => {
this.clearInput();
if (this.chatId) {
chatCache[this.chatId] = [];
}
})
.finally(() => setTimeout(() => this.getMyChatList(), 120));
}
/**
* 获取输入框中的内容
* @returns 返回的是节点数组
*/
private getNodeListFromInputBox() {
this.messageInputBox.normalize();
const nodes = Array.from(this.messageInputBox.childNodes);
return this.combine(nodes);
}
/** /**
* 文本，链接等需要合并成纯文本发送 * 文本，链接等需要合并成纯文本发送
*/ */
private combine(nodes: ChildNode[]) { private combine(nodes: ChildNode[]) {
const sendingNodes: ChildNode[] = []; const sendingNodes: ChildNode[] = [];
let needCreateNewNode = false; let needCreateNewNode = false;
let text = ""; let text = "";
for (const item of nodes) { for (const item of nodes) {
if (!isImageOrFile(item) && item.textContent) { if (!isImageOrFile(item) && item.textContent) {
if (needCreateNewNode) { if (needCreateNewNode) {
text = ""; text = "";
needCreateNewNode = false; needCreateNewNode = false;
} }
text += item.textContent; text += item.textContent;
} else { } else {
needCreateNewNode = true; needCreateNewNode = true;
if (text) { if (text) {
this.checkTextLength(text); this.checkTextLength(text);
const node = document.createTextNode(text); const node = document.createTextNode(text);
sendingNodes.push(node); sendingNodes.push(node);
}
sendingNodes.push(item);
} }
sendingNodes.push(item);
} }
}
if (text) { if (text) {
this.checkTextLength(text); this.checkTextLength(text);
const node = document.createTextNode(text); const node = document.createTextNode(text);
sendingNodes.push(node); sendingNodes.push(node);
} }
return sendingNodes; return sendingNodes;
} }
private checkTextLength(text: string) { private checkTextLength(text: string) {
if (text.length >= 4000) { if (text.length >= 4000) {
throw new Error("消息不能超过4000个字"); throw new Error("消息不能超过4000个字");
}
} }
}
private handleSaveRange() { private handleSaveRange() {
const sel = window.getSelection(); const sel = window.getSelection();
if (sel && sel.rangeCount) { if (sel && sel.rangeCount) {
const range = sel.getRangeAt(0); const range = sel.getRangeAt(0);
const oldRange = this.getRange && this.getRange(); const oldRange = this.getRange && this.getRange();
if (
this.messageInputBox &&
this.messageInputBox.contains(range.endContainer)
) {
if ( if (
oldRange && this.messageInputBox &&
range.collapsed && this.messageInputBox.contains(range.endContainer)
range.endContainer === oldRange.endContainer &&
range.endOffset === oldRange.endOffset
) { ) {
return; if (
} oldRange &&
range.collapsed &&
range.endContainer === oldRange.endContainer &&
range.endOffset === oldRange.endOffset
) {
return;
}
this.saveRange && this.saveRange(range); this.saveRange && this.saveRange(range);
}
} }
} }
}
private saveRange?: (param: Range) => void; private saveRange?: (param: Range) => void;
private getRange?: () => Range | null; private getRange?: () => Range | null;
/** /**
* 在光标处插入元素 * 在光标处插入元素
*/ */
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);
} }
if (this.getRange == null) { if (this.getRange == null) {
this.getRange = () => range; this.getRange = () => range;
} }
const sel = window.getSelection(); const sel = window.getSelection();
if (sel) { if (sel) {
if (range) { if (range) {
range.deleteContents(); range.deleteContents();
sel.removeAllRanges(); sel.removeAllRanges();
sel.addRange(range); sel.addRange(range);
} else { } else {
this.focus(); this.focus();
range = sel.getRangeAt(0); range = sel.getRangeAt(0);
document.execCommand("selectAll"); document.execCommand("selectAll");
window.getSelection()?.collapseToEnd(); window.getSelection()?.collapseToEnd();
}
} }
}
const el = document.createElement("div"); const el = document.createElement("div");
el.innerHTML = html; el.innerHTML = html;
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
let node = null; let node = null;
let lastNode = null; let lastNode = null;
while ((node = el.firstChild)) { while ((node = el.firstChild)) {
lastNode = frag.appendChild(node); lastNode = frag.appendChild(node);
}
range?.insertNode(frag);
// Preserve the selection
if (lastNode) {
if (range) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
} }
} range?.insertNode(frag);
}; // Preserve the selection
})(); if (lastNode) {
if (range) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel?.removeAllRanges();
sel?.addRange(range);
}
}
};
})();
private selectEmoji(emoji: any) { private selectEmoji(emoji: any) {
this.insertHtmlAtCaret(emoji.emoji_chars); this.insertHtmlAtCaret(emoji.emoji_chars);
this.hideEmoji(); this.hideEmoji();
} }
private isImage(file: File) { private isImage(file: File) {
return file.type.startsWith("image"); return file.type.startsWith("image");
} }
private buildImageHtml(file: File) { private buildImageHtml(file: File) {
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
return `<img class="${IMAGE_INFO_CLASS}" tabindex="-1" src="${url}" data-image='${JSON.stringify( return `<img class="${IMAGE_INFO_CLASS}" tabindex="-1" src="${url}" data-image='${JSON.stringify(
{ {
url, url,
name: file.name,
size: file.size,
}
)}'>`;
}
private buildFileHtml(file: File) {
const extension = file.name.split(".");
const type = getFileType(file.name);
return `<div class="${FILE_INFO_CLASS}" tabindex="-1" title="${
extension[extension.length - 1]
}" data-file='${JSON.stringify({
url: URL.createObjectURL(file),
name: file.name, name: file.name,
size: file.size, size: file.size,
} })}'><div style="display: inline-block"><div class="file-name text-truncate text-nowrap">${
)}'>`; file.name
} }</div><div class="file-size">${formatFileSize(
file.size
private buildFileHtml(file: File) { )}</div></div><span class="file-icon" title="${type}">${getSvg(
const extension = file.name.split("."); type
const type = getFileType(file.name); )}</span></div> `; // 注意</div>最后面有个空白
return `<div class="${FILE_INFO_CLASS}" tabindex="-1" title="${ }
extension[extension.length - 1]
}" data-file='${JSON.stringify({
url: URL.createObjectURL(file),
name: file.name,
size: file.size,
})}'><div style="display: inline-block"><div class="file-name text-truncate text-nowrap">${
file.name
}</div><div class="file-size">${formatFileSize(
file.size
)}</div></div><span class="file-icon" title="${type}">${getSvg(
type
)}</span></div> `; // 注意</div>最后面有个空白
}
private onChange(e: Event) { private onChange(e: Event) {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if (target) { if (target) {
const input = document.getElementById( const input = document.getElementById(
target.id as string target.id as string
) as HTMLInputElement; ) as HTMLInputElement;
if (input) { if (input) {
const files = input.files; const files = input.files;
if (files && files.length) { if (files && files.length) {
let html = ""; let html = "";
for (let index = 0; index < files.length; index++) { for (let index = 0; index < files.length; index++) {
const file = files[index]; const file = files[index];
if (file.size <= 0) { if (file.size <= 0) {
this.$emit("error", MESSAGE_FILE_EMPTY); this.$emit("error", MESSAGE_FILE_EMPTY);
return;
}
if (this.isImage(file)) {
if (file.size >= MAX_IMAGE_SIZE) {
this.$emit("error", MESSAGE_IMAGE_TOO_LARGE);
return; return;
} }
html += this.buildImageHtml(file); if (this.isImage(file)) {
} else { if (file.size >= MAX_IMAGE_SIZE) {
if (file.size >= MAX_FILE_SIZE) { this.$emit("error", MESSAGE_IMAGE_TOO_LARGE);
this.$emit("error", MESSAGE_FILE_TOO_LARGE); return;
return; }
html += this.buildImageHtml(file);
} else {
if (file.size >= MAX_FILE_SIZE) {
this.$emit("error", MESSAGE_FILE_TOO_LARGE);
return;
}
html += this.buildFileHtml(file);
} }
html += this.buildFileHtml(file);
} }
}
this.insertHtmlAtCaret(html); this.insertHtmlAtCaret(html);
}
} }
} }
} }
}
private toggleEmoji() { private toggleEmoji() {
this.emojiPanelVisibility = !this.emojiPanelVisibility; this.emojiPanelVisibility = !this.emojiPanelVisibility;
} }
private hideEmoji(e?: Event) { private hideEmoji(e?: Event) {
if (e && e.target) { if (e && e.target) {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
if (target.closest(".emoji-picker")) { if (target.closest(".emoji-picker")) {
return; return;
}
} }
this.emojiPanelVisibility = false;
} }
this.emojiPanelVisibility = false;
}
private setupEmoji() { private setupEmoji() {
EmojiService.onReady(() => { EmojiService.onReady(() => {
const service = new EmojiService(); const service = new EmojiService();
service.getEmoji().then((r) => { service.getEmoji().then((r) => {
if (r) { if (r) {
this.emoji = r.list; this.emoji = r.list;
} }
});
}); });
}); }
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.input-wrap { .input-wrap {
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
/deep/.input-el-scrollbar.el-scrollbar { /deep/.input-el-scrollbar.el-scrollbar {
height: calc(100% - 35px); height: calc(100% - 35px);
> .el-scrollbar__wrap { > .el-scrollbar__wrap {
overflow-x: hidden; overflow-x: hidden;
} }
> .el-scrollbar__wrap > .el-scrollbar__view { > .el-scrollbar__wrap > .el-scrollbar__view {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
// 输入框
> .input-container {
width: 100%;
font-size: 14px;
padding: 10px 20px 20px 0;
outline: 0;
white-space: pre-wrap;
user-select: text;
&::selection {
background-color: #cce6fc;
}
img { // 输入框
max-width: 300px; > .input-container {
font-size: 50px; width: 100%;
vertical-align: bottom; font-size: 14px;
border: 1px solid transparent; padding: 10px 20px 20px 0;
outline: 0;
&:focus { white-space: pre-wrap;
border-color: var(--main-color); user-select: text;
}
&::selection { &::selection {
background-color: #cce6fc; background-color: #cce6fc;
} }
}
.file-info { img {
padding: 10px; max-width: 300px;
border: 1px solid #c5d4e5; font-size: 50px;
border-radius: 4px; vertical-align: bottom;
display: inline-block; border: 1px solid transparent;
margin-right: 10px;
-webkit-user-modify: read-only; &:focus {
user-select: none; border-color: var(--main-color);
}
.file-name {
color: #000; &::selection {
font-size: 14px; background-color: #cce6fc;
max-width: 130px; }
} }
.file-size { .file-info {
margin-top: 10px; padding: 10px;
border: 1px solid #c5d4e5;
border-radius: 4px;
display: inline-block;
margin-right: 10px;
-webkit-user-modify: read-only;
user-select: none;
.file-name {
color: #000;
font-size: 14px;
max-width: 130px;
}
.file-size {
margin-top: 10px;
}
} }
} }
} }
} }
}
.input-emoji { .input-emoji {
position: absolute; position: absolute;
left: 0; left: 0;
top: -225px; top: -225px;
outline: 0; outline: 0;
}
} }
}
.tool-bar { .tool-bar {
padding-top: 10px; padding-top: 10px;
user-select: none; user-select: none;
.tool-bar-icon { .tool-bar-icon {
height: 16px; height: 16px;
width: 16px; width: 16px;
cursor: pointer; cursor: pointer;
} }
.offset { .offset {
margin: 0 22px; margin: 0 22px;
} }
}
.emoji-picker {
position: absolute;
z-index: 2;
top: -232px;
left: -1px;
background-color: #fff;
padding: 20px;
padding-right: 0;
padding-bottom: 10px;
border: 1px solid #f0f0f0;
right: 45px;
overflow: hidden;
.el-scrollbar {
height: 200px;
} }
.emoji-item { .emoji-picker {
display: inline-flex; position: absolute;
cursor: pointer; z-index: 2;
min-width: 35px; top: -232px;
min-height: 25px; left: -1px;
font-size: 20px; background-color: #fff;
vertical-align: top; padding: 20px;
margin-top: 5px; padding-right: 0;
justify-content: center; padding-bottom: 10px;
align-items: center; border: 1px solid #f0f0f0;
right: 45px;
overflow: hidden;
.el-scrollbar {
height: 200px;
}
.emoji-item {
display: inline-flex;
cursor: pointer;
min-width: 35px;
min-height: 25px;
font-size: 20px;
vertical-align: top;
margin-top: 5px;
justify-content: center;
align-items: center;
}
} }
}
#chat-upload-file { #chat-upload-file {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
} }
</style> </style>
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