@aochuang/client-sdk 1.0.344 → 1.0.345

package/uni-components/chat-editor/chat-editor-message-send/chat-editor-message-send.vue

@@ -0,0 +1,158 @@
+<template>
+	<view class="bi-chat-editor-message-send" @click.stop>
+		<view class="bi-chat-editor-message-send__target">
+			<view class="bi-chat-editor-message-send__target-label">发送给：</view>
+			<view class="bi-chat-editor-message-send__target-object">
+				<template v-if="sendTarget">
+					<template v-if="sendTarget.chatroomId">
+						<bi-portray :name="sendTarget.nickname" :avatar="sendTarget.chatroomAvatar"></bi-portray>
+					</template>
+					<template v-else>
+						<bi-portray :name="sendTarget.nickname" :avatar="sendTarget.avatar"></bi-portray>
+					</template>
+				</template>
+			</view>
+		</view>
+		<view class="bi-chat-editor-message-send__content">
+			<template v-if="messageType === MESSAGE_TYPE.IMAGE">
+				<chat-control-image :data="innerMessageContent"></chat-control-image>
+			</template>
+			<template v-else-if="messageType === MESSAGE_TYPE.VIDEO">
+				<chat-control-video :data="innerMessageContent"></chat-control-video>
+			</template>
+			<template v-else-if="messageType === MESSAGE_TYPE.URL">
+				<chat-control-url :data="innerMessageContent"></chat-control-url>
+			</template>
+		</view>
+		<view class="bi-chat-editor-message-send__toolbar">
+			<view class="bi-chat-editor-message-send__toolbar-item">
+				<uv-button size="small" @click="handleCancelClick">取消</uv-button>
+			</view>
+			<view class="bi-chat-editor-message-send__toolbar-item">
+				<uv-button size="small" type="primary" :disabled="uploading" :loading="sending" @click="handleSendClick">发送</uv-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script> 
+import BiPortray from '@aochuang/common/uni-common/portray/portray.vue'
+import BiUpload from '@/common/upload/upload.vue'
+import ChatControlImage from 'client-sdk/uni-components/chat-control/image/image.vue'
+import ChatControlVideo from 'client-sdk/uni-components/chat-control/video/video.vue'
+import ChatControlUrl from 'client-sdk/uni-components/chat-control/url/url.vue'
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control/index.js'
+
+export default {
+	name: 'BiChatEditorMessageSend',
+	components: {
+		BiPortray,
+		BiUpload,
+		ChatControlImage,
+		ChatControlUrl,
+		ChatControlVideo
+	},
+	props: {
+		sendTarget: {
+			type: Object,
+			required: true
+		},
+		submitMethod: {
+			type: Function,
+			required: true
+		},
+		messageType: {
+			type: [String, Number],
+			validator (value) {
+				return [MESSAGE_TYPE.IMAGE, MESSAGE_TYPE.VIDEO, MESSAGE_TYPE.URL].includes(value)
+			}
+		},
+		messageContent: {
+			type: [String, Object]
+		}
+	},
+	data () {
+		return {
+			MESSAGE_TYPE,
+			uploading: false,
+			sending: false,
+			innerMessageContent: this.messageContent
+		}
+	},
+	computed: {
+		previewFileData () {
+			if (this.MESSAGE_TYPE.URL !== this.messageType) {
+				return
+			}
+			return this.messageContent
+		}
+	},
+	methods: {
+		handleCancelClick () {
+			this.$emit('cancel')
+		},
+		handleUploading () {
+			this.uploading = true
+		},
+		handleUploadComplete () {
+			this.uploading = false
+		},
+		handleSendClick () {
+			this.sending = true
+			let content = this.innerMessageContent
+			if (this.messageType === MESSAGE_TYPE.URL) {
+				if (this.messageFile) {
+					content = JSON.stringify({
+						type: 'file',
+						totalLen: this.messageFile.size,
+						title: this.messageFile.name,
+						url: this.innerMessageContent
+					})
+				}
+			}
+			this.submitMethod({
+				data: {
+					content,
+					messageType: this.messageType
+				}
+			}).finally(() => {
+				this.sending = false
+			})
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-editor-message-send{
+	background-color: #fff;
+	width: 80vw;
+	max-width: 420px;
+	max-height: 80vh;
+	border-radius: 4px;
+}
+.bi-chat-editor-message-send__target{
+	padding: 12px 0;
+	margin: 0 12px;
+	border-bottom: 1px solid #eee;
+}
+.bi-chat-editor-message-send__target-label{
+	margin-bottom: 6px;
+}
+.bi-chat-editor-message-send__content{
+	padding: 12px;
+	border-bottom: 1px solid #eee;
+	max-height: 300px;
+	overflow: auto;
+}
+.bi-chat-editor-message-send__toolbar{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 12px;
+}
+.bi-chat-editor-message-send__toolbar-item{
+	margin-left: 12px;
+}
+</style>

package/uni-components/chat-editor/chat-editor-quote/chat-editor-quote.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="bi-chat-eidtor-quote">
+		<sdk-chat-control
+			type="quote"
+			:msg-type="quoteChat.msgType"
+			:content="quotaChatContent"
+		></sdk-chat-control>
+		<view class="bi-chat-eidtor-quote__remove" @click="handleRemoveClick"></view>
+	</view>
+</template>
+
+<script>
+import SdkChatControl from 'client-sdk/uni-components/chat-control/chat-control.vue'
+
+export default {
+	name: 'BiChatEditorQuote',
+	components: {
+		SdkChatControl
+	},
+	props: {
+		quoteChat: {
+			type: Object,
+			required: true
+		}
+	},
+	computed: {
+		quotaChatContent () {
+			return this.quoteChat.content
+		}
+	},
+	methods: {
+		handleRemoveClick () {
+			this.$emit('remove')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-eidtor-quote{
+	display: block;
+	background-color: rgba(0,0,0,.1);
+	border-radius: 4px;
+	padding: 6px 30px 6px 6px;
+	position: relative;
+}
+.bi-chat-eidtor-quote__remove{
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: #999;
+  top: 50%;
+  right: 12px;
+  border-radius: 50%;
+  transform: rotate(45deg) translateY(-50%);
+  cursor: pointer;
+  transition: all .25s;
+  &:before, &:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+  }
+  &:before {
+    width: 10px;
+    height: 1px;
+  }
+  &:after {
+    width: 1px;
+    height: 10px;
+  }
+}
+</style>

package/uni-components/chat-editor/chat-editor.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="bi-chat-editor">
+		<view class="bi-chat-editor__inner">
+			<view class="bi-chat-editor__tools" v-if="false">
+				<view class="bi-chat-editor__tools-item">
+					<view class="bi-chat-editor__button" @click.stop="handleAtMemberClick">
+						<bi-icon name="at-line" size="24px"></bi-icon>
+					</view>
+				</view>
+			</view>
+			<view class="bi-chat-editor__main">
+				<view class="bi-chat-editor__input" @click.stop="handleInputClick">
+					<uv-textarea 
+						v-model="formData.content" 
+						:focus="inputFocus"
+						:cursor="inputCursor"
+						:maxlength="2000" 
+						border="none" 
+						autoHeight 
+						placeholder="输入消息内容"
+						@blur="handleInputBlur"
+						@focus="handleInputFocus"
+					></uv-textarea>
+				</view>
+				<template v-if="$slots.addon">
+					<view class="bi-chat-eidtor__addon">
+						<slot name="addon"></slot>
+					</view>
+				</template>
+			</view>
+			<view class="bi-chat-editor__tools">
+				<view class="bi-chat-editor__tools-item" @click.stop>
+					<template v-if="extendName != 'chartlet'">
+						<view class="bi-chat-editor__button" @click="handleChartletClick">
+							<bi-icon name="face-1-line" size="24px"></bi-icon>
+						</view>
+					</template>
+					<template v-else>
+						<view class="bi-chat-editor__button" @click="handleKeyboardClick">
+							<bi-icon name="keyboard-1-line" size="24px"></bi-icon>
+						</view>
+					</template>
+				</view>
+				<view class="bi-chat-editor__tools-item" v-if="hasContent">
+					<view class="bi-chat-editor__button is-primary" shape="circle" @click="handleSendClick">
+						<bi-icon name="send-plane-fill" color="#fff"></bi-icon>
+					</view>
+				</view>
+				<view class="bi-chat-editor__tools-item" v-else @click.stop>
+					<view class="bi-chat-editor__button" @click="handleFunctionClick">
+						<bi-icon name="plus-1-line" size="24px"></bi-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bi-chat-editor__extend" v-if="!!extendName" @click.stop>
+			<template v-if="extendName === 'function'">
+				<view class="bi-chat-editor__function">
+					<chat-editor-func
+						:upload-root-directory="uploadRootDirectory"
+						:send-target="sendTarget"
+						:submit-method="submitMethod"
+					>
+						<template slot="atmember">
+							<slot name="atmember"></slot>
+						</template>
+						<template slot="notread">
+							<slot name="notread"></slot>
+						</template>
+						<template slot="reply">
+							<slot name="reply"></slot>
+						</template>
+						<template slot="material">
+							<slot name="material"></slot>
+						</template>
+					</chat-editor-func>
+				</view>
+			</template>
+			<template v-else-if="extendName === 'chartlet'">
+				<view class="bi-chat-editor__chartlet">
+					<chat-editor-chartlet
+						:submit-method="submitMethod"
+						:insert-text-method="insertInputText"
+					></chat-editor-chartlet>
+				</view>
+			</template>
+		</view>
+		<view class="bi-chat-editor__safe"></view>
+	</view>
+</template>
+
+<script>
+import ChatEditorFunc from './chat-editor-func/chat-editor-func.vue'
+import ChatEditorChartlet from './chat-editor-chartlet/chat-editor-chartlet.vue'
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control/index.js'
+
+export default {
+	name: 'BiChatEditor',
+	components: {
+		ChatEditorFunc,
+		ChatEditorChartlet
+	},
+	props: {
+		uploadRootDirectory: {
+			type: String,
+			required: true
+		},
+		allowAtMember: {
+			type: Boolean,
+			default: false
+		},
+		sendTarget: {
+			type: Object,
+			required: true
+		},
+		submitMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			inputMode: 'text', // 输入方式，text文本，voice录音
+			extendName: 'keyboard',
+			inputFocus: false,
+			inputCursor: null,
+			inputLastCursor: null,
+			formData: {
+				content: ''
+			}
+		}
+	},
+	computed: {
+		hasContent () {
+			return !!this.formData.content
+		}
+	},
+	methods: {
+		handleChartletClick () {
+			this.extendName = 'chartlet'
+		},
+		handleKeyboardClick () {
+			this.extendName = 'keyboard'
+			this.inputFocus = true
+		},
+		handleFunctionClick () {
+			this.extendName = 'function'
+		},
+		handleInputClick (evt) {
+			this.extendName = 'keyboard'
+		},
+		handleInputBlur (evt) {
+			this.inputLastCursor = evt.detail.cursor
+			this.inputFocus = false
+		},
+		handleInputFocus () {
+			this.inputFocus = true
+		},
+		handleSendClick () {
+			if (this.submitMethod) {
+				this.submitMethod({
+					data: {
+						content: this.formData.content,
+						messageType: MESSAGE_TYPE.TEXT
+					}
+				}).then(() => {
+					this.formData.content = ''
+				})
+			}
+		},
+		insertInputText (text) {
+			this.inputFocus = true
+			this.inputCursor = this.inputLastCursor
+			const prependText = this.formData.content.substr(0, this.inputCursor || 0) 
+			const appendText = this.formData.content.substr(this.inputCursor || 0)
+			this.formData.content = prependText + (text || '') + appendText
+		},
+		collapsePanel () {
+			this.extendName = 'keyboard'
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-editor{
+	background-color: #f7f7f7;
+	border-top: 1px solid rgba(0,0,0,.03);
+	box-shadow: 0 -3px 6px rgba(0,0,0,.03);
+}
+.bi-chat-editor__inner{
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	padding: 6px 12px;
+}
+.bi-chat-editor__main{
+	flex: 1;
+	min-width: 0;
+	margin: 0 12px 0 0;
+}
+.bi-chat-editor__input{
+	max-height: 240px;
+	overflow: auto;
+	background-color: #fff;
+	border-radius: 3px;
+}
+.bi-chat-eidtor__addon{
+	margin-top: 12px;
+}
+.bi-chat-editor__tools{
+	display: flex;
+	flex-direction: row;
+	+ .bi-chat-editor__main{
+		margin-left: 12px;
+	}
+}
+.bi-chat-editor__tools-item {
+	height: 39px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+.bi-chat-editor__extend{
+	border-top: 1px solid rgba(0,0,0,.03);
+}
+.bi-chat-editor__function{
+	height: 240px;
+	padding: 12px;
+	box-sizing: border-box;
+}
+.bi-chat-editor__chartlet{
+	height: 240px;
+}
+.bi-chat-editor__atmember{
+	height: 240px;
+}
+.bi-chat-editor__button{
+	width: 24px;
+	height: 24px;
+	text-align: center;
+	line-height: 24px;
+	border-radius: 50%;
+	&.is-primary {
+		background-color: #244ac0;
+		border-color: #244ac0;
+		color: #fff;
+	}
+}
+.bi-chat-editor__safe{
+	padding-bottom: calc(constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
+	padding-bottom: calc(env(safe-area-inset-bottom));
+}
+</style>

package/uni-components/chat-editor/index.js

@@ -0,0 +1,10 @@
+import SdkChatEditor from './chat-editor.vue'
+import SdkChatEditorFuncButton from './chat-editor-func-button/chat-editor-func-button.vue'
+import { parseAtMemberMessage } from './util'
+
+export {
+	parseAtMemberMessage,
+	SdkChatEditorFuncButton
+}
+
+export default SdkChatEditor

package/uni-components/chat-editor/util.js

@@ -0,0 +1,65 @@
+import { encodeRegexpString } from '../../utils/regexp'
+
+/**
+ * 解析@成员消息
+ * @param { String } content - 消息文本内容
+ * @param { Array } memberData - 群成员数据
+ * @return
+ * {
+ *    deleteAtItem // 删除@成员项
+ *    insertAtItem // 插入@成员项
+ *    getAtItem // 获取@成员项
+ *    getAllAtItem // 判断是否有@成员项
+ *    toString // 转位字符串
+ * }
+ * // 成员项结构
+ * {
+ *    startIndex: 0, // 相对content的起始位置
+ *    endIndex: 0, // 相对content的截止位置
+ *    id: null // 成员id
+ * }
+*/
+export function parseAtMemberMessage (content, memberData) {
+  if (!content || !memberData || !memberData.length) {
+    return content
+  }
+  let entity = []
+  function refreshEntiry () {
+    entity.splice(0, entity.length)
+    memberData.forEach(member => {
+      const regrex = new RegExp('@' + encodeRegexpString(member.nickname) + '(\\s+|$)')
+      const match = content.match(regrex)
+      if (match) {
+        entity.push({
+          id: member.id,
+          wechatId: member.wechatId,
+          startIndex: match[1],
+          endIndex: match[1] + match[0].length
+        })
+      }
+    })
+  }
+  function deleteAtItem (id) {
+
+  }
+  function insertAtItem () {
+
+  }
+  function getAtItem () {
+
+  }
+  function getAllAtItem () {
+    return entity || []
+  }
+  function toString () {
+    return content
+  }
+  refreshEntiry()
+  return {
+    deleteAtItem,
+    insertAtItem,
+    getAtItem,
+    getAllAtItem,
+    toString
+  }
+}