@aochuang/client-sdk 1.0.278

package/components/layout/layout.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="sdk-layout">
+        <div class="sdk-layout__sidebar" v-if="$slots.sidebar">
+            <slot name="sidebar"></slot>
+        </div>
+        <div class="sdk-layout__wrap">
+            <bi-resizable
+                direction="horizontal"
+                :initialSize="270"
+                :minSize="270"
+                :maxSize="480"
+            >
+                <template slot="content">
+                    <slot></slot>
+                </template>
+                <template slot="panel">
+                    <template v-if="$slots.addon">
+                        <slot name="addon"></slot>
+                    </template>
+                </template>
+            </bi-resizable>
+        </div>
+        <div class="sdk-layout__extend" v-if="$slots.extend">
+            <slot name="extend"></slot>
+        </div>
+    </div>
+</template>
+<script>
+import BiResizable from '@aochuang/common/common/resizable'
+
+export default {
+    name: 'SdkLayout',
+    components: {
+        BiResizable
+    }
+}
+</script>
+<style>
+.sdk-layout{
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+}
+.sdk-layout__sidebar{
+    width: 160px;
+    overflow: auto;
+    background-color: #e5e4d9;
+    min-width: 160px;
+}
+.sdk-layout__addon{
+    width: 270px;
+    min-width: 270px;
+    background-color: #fff;
+    overflow: auto;
+    border-right: 1px solid #efeff0;
+}
+.sdk-layout__wrap{
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+}
+.sdk-layout__extend{
+    width: 300px;
+    min-width: 300px;
+    background-color: #fff;
+    overflow: auto;
+    border-left: 1px solid #efeff0;
+}
+</style>

package/components/session-select/index.js

@@ -0,0 +1,11 @@
+import SessionSelect from './session-select.vue'
+import SessionSelectItem from './session-select-item.vue'
+import SessionSelectItemSkeleton from './session-select-item-skeleton.vue'
+
+export {
+    SessionSelect,
+    SessionSelectItem,
+    SessionSelectItemSkeleton
+}
+
+export default SessionSelect

package/components/session-select/session-select-item-skeleton.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="sdk-session-select-item-skeleton">
+        <div class="sdk-session-select-item-skeleton__avatar">
+            <ui-skeleton width="32px" height="32px" radius="3px"></ui-skeleton>
+        </div>
+        <div class="sdk-session-select-item-skeleton__main">
+            <div class="sdk-session-select-item-skeleton__row">
+                <div class="sdk-session-select-item-skeleton__col is-full">
+                    <ui-skeleton width="90%" height="18px"></ui-skeleton>
+                </div>
+                <div class="sdk-session-select-item-skeleton__col">
+                    <ui-skeleton width="60px" height="18px"></ui-skeleton>
+                </div>
+            </div>
+            <div class="sdk-session-select-item-skeleton__row">
+                <div class="sdk-session-select-item-skeleton__col is-full">
+                    <ui-skeleton width="90%" height="18px"></ui-skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiSkeleton from '@aochuang/common/components/skeleton'
+
+export default {
+    name: 'SdkSessionSelectItemSkeleton',
+    components: {
+        UiSkeleton
+    }
+}
+</script>
+<style>
+.sdk-session-select-item-skeleton{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px 12px;
+}
+.sdk-session-select-item-skeleton__avatar{
+    margin-right: 12px;
+}
+.sdk-session-select-item-skeleton__main{
+    flex: 1;
+    min-width: 0;
+}
+.sdk-session-select-item-skeleton__row{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-session-select-item-skeleton__row:not(:last-child) {
+    margin-bottom: 6px;
+}
+.sdk-session-select-item-skeleton__col.is-full{
+    flex: 1;
+    min-width: 0;
+}
+</style>

package/components/session-select/session-select-item.vue

@@ -0,0 +1,190 @@
+<template>
+	<div :class="['sdk-session-item', {'is-toper': data[stickyOnTopField], 'is-selected': selected}]" @contextmenu="handleContextMenu">
+		<div class="sdk-session-item__wrap" @click="handleClick">
+			<div class="sdk-session-item__avatar">
+				<div class="sdk-session-item__avatar-image">
+					<slot name="avatar"></slot>
+				</div>
+				<sdk-badge 
+					class="sdk-session-item__avatar-badge" 
+					:class="{'is-mute': data[muteField]}"
+					v-if="data[unreadMsgCountField]"  
+					:is-dot="data[muteField]"
+					:value="data[unreadMsgCountField]"
+					:max="99"
+				></sdk-badge>
+			</div>
+			<div class="sdk-session-item__main">
+				<div class="sdk-session-item__row">
+					<div class="sdk-session-item__name">
+						<slot name="name"></slot>
+					</div>
+					<div class="sdk-session-item__date">
+						{{ lastMessageTime }}
+					</div>
+				</div>
+				<div class="sdk-session-item__row">
+					<div class="sdk-session-item__message">
+						<slot name="message"></slot>
+					</div>
+					<div class="sdk-session-item__mask" v-if="data[muteField]" title="开启免打扰">
+						<ui-icon name="notification-off-line" color="#999"></ui-icon>
+					</div>
+					<slot name="addon"></slot>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import SdkBadge from '../../common/badge'
+import { formatFriendlyTime } from '../../utils/date.js'
+
+export default {
+	name: 'SdkSessionItem',
+	components: {
+		SdkBadge
+	},
+	props: {
+		data: {
+			type: Object
+		},
+		selected: {
+			type: Boolean
+		},
+		avatarField: {
+			type: String,
+			default: 'avatar'
+		},
+		nameField: {
+			type: String,
+			defautl: 'nickname'
+		},
+		timeField: {
+			type: String,
+			default: 'lastMsgTime'
+		},
+		// 未读消息字段
+		unreadMsgCountField: {
+			type: String,
+			default: 'unreadMsgCount'
+		},
+		// 置顶字段
+		stickyOnTopField: {
+			type: String,
+			default: 'stickyOnTop'
+		},
+		// 免打扰字段
+		muteField: {
+			type: String,
+			default: 'mute'
+		}
+	},
+	computed: {
+		muteNotificationIcon () {
+			return `<svg t="1748397568623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7966" width="200" height="200"><path d="M469.418667 149.482667A42.197333 42.197333 0 0 1 469.333333 146.666667v-21.333334a42.666667 42.666667 0 1 1 85.333334 0v21.333334c0 0.938667-0.021333 1.877333-0.085334 2.816C711.168 170.304 832 304.362667 832 466.666667v272.661333h64a42.666667 42.666667 0 0 1 0 85.333333h-96.64l-85.333333-85.333333H746.666667V466.666667c0-129.6-105.066667-234.666667-234.666667-234.666667-82.88 0-155.733333 42.965333-197.482667 107.84l-61.354666-61.376a319.829333 319.829333 0 0 1 216.256-128.981333zM405.333333 914.453333a42.666667 42.666667 0 0 1 42.666667-42.666666h128a42.666667 42.666667 0 0 1 0 85.333333h-128a42.666667 42.666667 0 0 1-42.666667-42.666667zM192.085333 458.773333c-0.042667 2.624-0.085333 5.248-0.085333 7.893334v272.661333H128a42.666667 42.666667 0 0 0 0 85.333333h429.994667l-85.333334-85.333333H277.333333V544l-85.248-85.226667zM204.928 290.069333a42.666667 42.666667 0 1 0-60.352 60.330667l543.061333 543.061333a42.666667 42.666667 0 0 0 60.352-60.352L204.928 290.069333z" p-id="7967"></path></svg>`
+		},
+		lastMessageTime () {
+			return formatFriendlyTime(this.data[this.timeField])
+		}
+	},
+	methods: {
+		handleContextMenu (evt) {
+			this.$emit('contextmenu', evt)
+		},
+		handleClick () {
+			this.$emit('click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.sdk-session-item{
+	transition: all .25s;
+	cursor: pointer;
+	&:hover {
+		background-color: #f3f3f3;
+	}
+	&.is-toper {
+		background-color: #eaeaea;
+	}
+	&.is-selected {
+		position: relative;
+		background-color: #d5e1f5;
+		&:after {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			border: 2px solid #4387ff;
+			pointer-events: none;
+			border-radius: 3px;
+		}
+	}
+}
+.sdk-session-item__wrap{
+	padding: 5px 12px;
+	line-height: 1.25em;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.sdk-session-item__avatar{
+	margin-right: 12px;
+	position: relative;
+	min-width: 32px;
+	width: 32px;
+	height: 32px;
+	background-color: #eee;
+	border-radius: 3px;
+}
+.sdk-session-item__avatar-badge{
+	position: absolute;
+	&.is-mute {
+		left: calc(~'100% - 7px');
+		top: -6px;
+	}
+	&:not(.is-mute) {
+		left: calc(~'100% - 12px');
+		top: -10px;
+	}
+}
+.sdk-session-item__main{
+	flex: 1;
+	min-width: 0;
+}
+.sdk-session-item__row{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+.sdk-session-item__name{
+	min-width: 0;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.sdk-session-item__message{
+	color: #999;
+	min-height: 22px;
+	line-height: 22px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 1;
+	min-width: 0;
+}
+.sdk-session-item__date{
+	color: #999;
+	font-size: 12px;
+	white-space: nowrap;
+	margin-left: 6px;
+}
+.sdk-session-item__mask {
+	margin-left: 6px;
+}
+</style>

package/components/session-select/session-select.vue

@@ -0,0 +1,386 @@
+<template>
+    <bi-scroll-load-more
+		class="sdk-session-select"
+        ref="loadMore"
+		:auto-load="false"
+		:page-size="pageSize"
+        :data="sessionListData"
+        :query-method="handleQuerySessionData"
+		@scroll="handleScroll"
+    >
+		<template slot-scope="scope">
+			<template v-if="!isEmpty">
+				<template 
+					v-for="tGroup in sessionData"
+				>
+					<template 
+						v-for="dGroup in tGroup"
+					>
+						<template 
+							v-for="sGroup in dGroup"
+						>
+							<template 
+								v-for="item in sGroup"
+							>
+								<div 
+									class="session__item"
+									:ref="`item-` + item[idField]"
+									:key="item[idField]"
+									v-show="!allowTuck || !tuckable || !item.stickyOnTop || !tucked || (stickyOnTopSessionMap[item[idField]] ? stickyOnTopSessionMap[item[idField]].index < 2 : true)"
+									@click="handleItemClick(item)"
+									@contextmenu="handleItemContextMenu(item, $event)"
+								>
+									<slot 
+										name="item"
+										:selected="item[idField] === value" 
+										:item="item"
+									></slot>
+								</div>
+								<template v-if="allowTuck && tuckable && stickyOnTopSessionData.length > 2 && lastStickyOnTopSession && item.stickyOnTop && item[idField] === lastStickyOnTopSession[idField]">
+									<div class="sdk-session-select__tuck" :class="{'is-tucked': tucked, 'is-loading': loading}" @click="handleTuckedTopClick">
+										<span class="sdk-session-select__tuck-icon">
+											<template v-if="loading">
+												<ui-loading size="mini"></ui-loading>
+											</template>
+											<template v-else>
+												<svg t="1756119682899" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11974" width="200" height="200"><path d="M896 810.667a42.667 42.667 0 0 1-42.667 42.666H170.667a42.667 42.667 0 0 1 0-85.333h682.666A42.667 42.667 0 0 1 896 810.667zM296.533 202.965v319.403a21.333 21.333 0 0 1-36.437 15.061L115.499 392.832a42.667 42.667 0 0 1 0-60.33l144.64-144.64a21.333 21.333 0 0 1 36.394 15.103zM896 512a42.667 42.667 0 0 1-42.667 42.667H554.667a42.667 42.667 0 0 1 0-85.334h298.666A42.667 42.667 0 0 1 896 512z m0-298.667A42.667 42.667 0 0 1 853.333 256H554.667a42.667 42.667 0 0 1 0-85.333h298.666A42.667 42.667 0 0 1 896 213.333z" fill="currentColor" p-id="11975"></path></svg>
+											</template>
+										</span>
+										<span class="sdk-session-select__tuck-text">{{ tucked ? (stickyOnTopSessionData.length - 2) + '个' : '折叠' }}置顶聊天</span>
+										<span class="sdk-session-select__tuck-arrow"></span>
+									</div>
+								</template>
+							</template>
+						</template>
+					</template>
+				</template>
+				<template v-if="tuckable && tucked && notStickyOnTopSessionOnePageData.length < pageSize && !scope.loading && !scope.notMore">
+					<div class="sdk-session-select__loadmore" @click="handleLoadMoreClick">点击加载更多~</div>
+				</template>
+			</template>
+		</template>
+    </bi-scroll-load-more>
+</template>
+
+<script>
+import UiLoading from '@aochuang/common/components/loading'
+import BiScrollLoadMore from '../../common/scroll-load-more'
+
+export default {
+	name: 'SdkSessionSelect',
+	components: {
+		UiLoading,
+		BiScrollLoadMore
+	},
+	props: {
+		value: {
+			type: String
+		},
+		data: {
+			type: Object
+		},
+		// 能否折叠置顶会话
+		tuckable: {
+			type: Boolean,
+			default: false
+		},
+		// 会话是否折叠
+		tucked: {
+			type: Boolean,
+			default: false
+		},
+		idField: {
+			type: String,
+			default: 'conversationId' 
+		},
+		autoLoad: {
+			type: Boolean,
+			default: true
+		},
+		queryMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			pageSize: 40,
+			tuckReady: false,
+			allowTuck: false,
+			loading: false
+		}
+	},
+	computed: {
+		sessionData () {
+			return this.data || {}
+		},
+		sessionListData () {
+			// 只取30条有效的会话数据，主要是给scrollLoadMore组件检查空用
+			const results = []
+			if (this.sessionData) {
+				Object.keys(this.sessionData).some(i => {
+					return Object.keys(this.sessionData[i]).some(j => {
+						return Object.keys(this.sessionData[i][j]).some(k => {
+							return this.sessionData[i][j][k].some(item => {
+								if (results.length >= 30) {
+									return true
+								}
+								results.push(item)
+							})
+						})
+					})
+				})
+			}
+			return results
+		},
+		stickyOnTopSessionData () {
+			let result = []
+			if (this.sessionData) {
+				Object.keys(this.sessionData).some(i => {
+					return Object.keys(this.sessionData[i]).some(j => {
+						return Object.keys(this.sessionData[i][j]).some(k => {
+							return this.sessionData[i][j][k].some(item => {
+								if (item.stickyOnTop) {
+									result.push(item)
+								}
+								if (!item.stickyOnTop) {
+									return true
+								}
+							})
+						})
+					})
+				})
+			}
+			return result
+		},
+		stickyOnTopSessionMap () {
+			return this.stickyOnTopSessionData.reduce((rs, v, index) => {
+				rs[v[this.idField]] = {
+					index: index,
+					data: v
+				}
+				return rs
+			}, {})
+		},
+		notStickyOnTopSessionOnePageData () {
+			let result = []
+			if (this.sessionData) {
+				Object.keys(this.sessionData).some(i => {
+					return Object.keys(this.sessionData[i]).some(j => {
+						return Object.keys(this.sessionData[i][j]).some(k => {
+							return this.sessionData[i][j][k].some(item => {
+								if (!item.stickyOnTop) {
+									result.push(item)
+								}
+								if (!result.length > this.pageSize) {
+									return true
+								}
+							})
+						})
+					})
+				})
+			}
+			return result
+		},
+		lastStickyOnTopSession () {
+			return this.stickyOnTopSessionData[this.stickyOnTopSessionData.length - 1]
+		},
+		isEmpty () {
+			return !this.sessionListData || !this.sessionListData.length
+		}
+	},
+	watch: {
+		lastStickyOnTopSession () {
+			this.delayCheckAllowTuck()
+		}
+	},
+	mounted () {
+		this.resizeObserver = new ResizeObserver(entries => {
+			this.delayCheckAllowTuck()
+		})
+		this.resizeObserver.observe(this.$el)
+		if (this.autoLoad) {
+			this.$refs.loadMore.reload()
+		}
+	},
+	methods: {
+        reload () {
+			if (!this.$refs.loadMore) {
+				return
+			}
+			return this.$refs.loadMore.reload().then(() => {
+				this.tuckReady = true
+				this.delayCheckAllowTuck()
+			})
+        },
+		loadMoreData () {
+			if (!this.$refs.loadMore) {
+				return
+			}
+			return this.$refs.loadMore.loadMoreData()
+		},
+		scrollTop (top) {
+			this.$refs.loadMore.scrollTop(top)
+		},
+		delayCheckAllowTuck () {
+			if (!this.tuckReady) {
+				return
+			}
+			clearTimeout(this._checkTimer)
+			this._checkTimer = setTimeout(() => {
+				if (!this.tuckable) {
+					return 
+				}
+				if (this.tucked) {
+					if (this.stickyOnTopSessionData.length > 2) {
+						this.allowTuck = true
+					} else {
+						this.allowTuck = false
+					}
+				} else {
+					if (this.lastStickyOnTopSession) {
+						const $lastStickyOnTopEls = this.$refs['item-' + this.lastStickyOnTopSession[this.idField]]
+						if ($lastStickyOnTopEls && $lastStickyOnTopEls.length) {
+							if ($lastStickyOnTopEls[0].offsetTop > this.$el.clientHeight) {
+								this.allowTuck = true
+							} else {
+								this.allowTuck = false
+							}
+						} else {
+							this.allowTuck = false
+						}
+					} else {
+						this.allowTuck = false
+					}
+				}
+			}, 20)
+		},
+		handleLoadMoreClick () {
+			this.loading = true
+			Promise.all([this.$refs.loadMore.loadMoreData()]).finally(() => {
+				this.loading = false
+			})
+		},
+		handleTuckedTopClick () {
+			if (this.loading) {
+				return
+			}
+			this.$emit('tucked-change', {
+				value: !this.tucked
+			})
+			this.$nextTick(() => {
+				if (this.tucked && this.notStickyOnTopSessionOnePageData.length < this.pageSize) {
+					this.loading = true
+					Promise.all([this.$refs.loadMore.loadMoreData()]).finally(() => {
+						this.loading = false
+					})
+				}
+			})
+		},
+		handleItemContextMenu (item, evt) {
+			this.$emit('item-contextmenu', item, evt)
+		},
+		handleQuerySessionData ({ isReload, pageSize }) {
+			if (!this.queryMethod) {
+				return
+			}
+			return this.queryMethod({
+				isReload, 
+				pageSize
+			})
+		},
+		handleScroll (evt) {
+			this.$emit('scroll', evt)
+		},
+		handleItemClick (item) {
+			this.$emit('select', {
+				session: item
+			})
+		}
+	},
+	beforeDestroy () {
+		this.resizeObserver && this.resizeObserver.unobserve(this.$el)
+	}
+}
+</script>
+
+<style lang="less">
+.sdk-session-select{
+	position: relative;
+}
+.sdk-session-select__tuck{
+	height: 32px;
+	line-height: 32px;
+	background-color: #eaeaea;
+	padding: 6px 12px;
+	border-top: 1px solid rgba(0,0,0,.05);
+	box-sizing: content-box;
+	position: sticky;
+	bottom: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	transition: background-color .25s;
+	cursor: pointer;
+	&:hover {
+		&:not(.is-loading) {
+			background-color: #ddd;
+		}
+	}
+	&.is-tucked {
+		.sdk-session-select__tuck-arrow{
+			transform: rotate(180deg);
+		}
+	}
+	&.is-loading{
+		color: #999;
+		cursor: not-allowed;
+	}
+}
+.sdk-session-select__tuck-arrow{
+	position: absolute;
+	right: 10px;
+	top: 14px;
+	width: 16px;
+	height: 16px;
+	transition: transform .25s;
+	transform: rotate(0deg);
+	&:after {
+		content: '';
+		position: absolute;
+		left: 4px;
+		top: 6px;
+		width: 6px;
+		height: 6px;
+		border: 1px solid rgba(0,0,0,.4);
+		border-left: 0;
+		border-top: 0;
+		transform: rotate(-135deg);
+	}
+}
+.sdk-session-select__tuck-icon{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	margin-right: 6px;
+	svg {
+		width: 100%;
+		height: 100%;
+		vertical-align: top;
+	}
+}
+.sdk-session-select__loadmore{
+	height: 24px;
+	line-height: 24px;
+	color: #999;
+	text-align: center;
+	cursor: pointer;
+	padding: 8px 4px;
+	transition: color .25s;
+	&:hover {
+		color: #4387ff;
+	}
+}
+</style>