@aochuang/client-sdk 1.0.278

package/components/contacts-group-select/contacts-group-select.vue

@@ -0,0 +1,396 @@
+<template>
+	<div class="sdk-contacts-group-select">
+		<template v-if="loading">
+			<div class="sdk-contacts-group-select__skeleton">
+				<contacts-group-select-skeleton></contacts-group-select-skeleton>
+			</div>
+		</template>
+        <div class="sdk-contacts-group-select__group is-friend-group" :class="{'is-show-filter-panel': showFriendFilterPanel, 'is-has-filter': hasFriendGroupFilter}" v-if="friendGroupData && friendGroupData.length">
+            <div class="sdk-contacts-group-select__group-head">
+				<div class="sdk-contacts-group-select__group-head-row">
+					<div class="sdk-contacts-group-select__group-head-col is-full">
+						<div class="sdk-contacts-group-select__group-title">好友分组（{{ friendGroupData ? friendGroupData.length : 0 }}）</div>
+					</div>
+					<div class="sdk-contacts-group-select__group-head-col">
+						<ui-tooltip :content="showFriendFilterPanel ? '关闭筛选' : '展开筛选'">
+							<div class="sdk-contacts-group-select__group-addon" @click="handleFriendAddonClick">
+								<ui-icon :name="showFriendFilterPanel ? 'up-down-line' : 'filter-line'"></ui-icon>
+							</div>
+						</ui-tooltip>
+					</div>
+				</div>
+				<div class="sdk-contacts-group-select__group-head-row is-filter-panel">
+					<div class="sdk-contacts-group-select__group-head-col">
+						<span class="sdk-contacts-group-select__toggle" @click="handleFriendToggleEmptyClick">
+							<span class="sdk-contacts-group-select__toggle-icon">
+								<ui-icon :name="filters.friendGroupEmpty ? 'eye-close-line' : 'eye-line'"></ui-icon>
+							</span>
+							<span class="sdk-contacts-group-select__toggle-icon">{{ filters.friendGroupEmpty ? '隐藏' : '显示' }}空分组</span>
+						</span>
+					</div>
+					<div class="sdk-contacts-group-select__group-head-col is-full">
+						<div class="sdk-contacts-group-select__group-search">
+							<ui-searchbox 
+								ref="friendGroupSearchbox" 
+								:value="filters.friendGroupKeyword" 
+								size="mini" 
+								:immediate="true" 
+								placeholder="搜索分组"
+								@search="handleFriendGroupSearch"
+							></ui-searchbox>
+						</div>
+					</div>
+				</div>
+            </div>
+            <div class="sdk-contacts-group-select__group-body" ref="friendGroupBody">
+				<template v-if="showFriendGroupData && showFriendGroupData.length">
+					<div 
+						class="sdk-contacts-group-select__group-item" 
+						v-for="group in showFriendGroupData"
+						:key="group.id"
+					>
+						<contacts-group-select-item 
+							type="friend"
+							:data="group"
+							:loading="handleCheckGroupLoading(group)"
+							@click="handleFriendGroupClick(group)"
+						>
+						</contacts-group-select-item>
+					</div>
+				</template>
+				<template v-else>
+					<div class="sdk-contacts-group-select__empty">
+						<ui-empty text="暂无相关数据"></ui-empty>
+					</div>
+				</template>
+            </div>
+        </div>
+        <div class="sdk-contacts-group-select__group is-room-group" :class="{'is-show-filter-panel': showRoomFilterPanel, 'is-has-filter': hasRoomGroupFilter}" v-if="roomGroupData && roomGroupData.length">
+            <div class="sdk-contacts-group-select__group-head">
+				<div class="sdk-contacts-group-select__group-head-row">
+					<div class="sdk-contacts-group-select__group-head-col is-full">
+						<div class="sdk-contacts-group-select__group-title">群聊分组（{{ roomGroupData ? roomGroupData.length : 0 }}）</div>
+					</div>
+					<div class="sdk-contacts-group-select__group-head-col">
+						<ui-tooltip :content="showRoomFilterPanel ? '关闭筛选' : '展开筛选'">
+							<div class="sdk-contacts-group-select__group-addon" @click="handleRoomAddonClick">
+								<ui-icon :name="showRoomFilterPanel ? 'up-down-line' : 'filter-line'"></ui-icon>
+							</div>
+						</ui-tooltip>
+					</div>
+				</div>
+				<div class="sdk-contacts-group-select__group-head-row is-filter-panel">
+					<div class="sdk-contacts-group-select__group-head-col">
+						<span class="sdk-contacts-group-select__toggle" @click="handleRoomToggleEmptyClick">
+							<span class="sdk-contacts-group-select__toggle-icon">
+								<ui-icon :name="filters.roomGroupEmpty ? 'eye-close-line' : 'eye-line'"></ui-icon>
+							</span>
+							<span class="sdk-contacts-group-select__toggle-icon">{{ filters.roomGroupEmpty ? '隐藏' : '显示' }}空分组</span>
+						</span>
+					</div>
+					<div class="sdk-contacts-group-select__group-head-col is-full">
+						<div class="sdk-contacts-group-select__group-search">
+							<ui-searchbox 
+								ref="roomGroupSearchbox" 
+								:value="filters.roomGroupKeyword" 
+								size="mini" 
+								:immediate="true" 
+								placeholder="搜索分组"
+								@search="handleRoomGroupSearch"
+							></ui-searchbox>
+						</div>
+					</div>
+				</div>
+            </div>
+            <div class="sdk-contacts-group-select__group-body" ref="roomGroupBody">
+				<template v-if="showRoomGroupData && showRoomGroupData.length">
+					<div 
+						class="sdk-contacts-group-select__group-item" 
+						v-for="group in showRoomGroupData"
+						:key="group.id"
+					>
+						<contacts-group-select-item 
+							type="room"
+							:data="group"
+							:loading="handleCheckGroupLoading(group)"
+							@click="handleRoomGroupClick(group)"
+						>
+						</contacts-group-select-item>
+					</div>
+				</template>
+				<template v-else>
+					<div class="sdk-contacts-group-select__empty">
+						<ui-empty text="暂无相关数据"></ui-empty>
+					</div>
+				</template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Icon as UiIcon, Searchbox as UiSearchbox, Empty as UiEmpty } from '@aochuang/common/components'
+import ContactsGroupSelectItem from './contacts-group-select-item'
+import ContactsGroupSelectSkeleton from './contacts-group-select-skeleton'
+
+export default {
+	name: 'SdkContactsGroupSelect',
+	components: {
+		UiIcon,
+		UiEmpty,
+		UiSearchbox,
+		ContactsGroupSelectSkeleton,
+		ContactsGroupSelectItem
+	},
+    props: {
+        friendGroupData: {
+            type: Array
+        },
+        roomGroupData: {
+            type: Array
+        },
+        queryGroupDataMethod: {
+            type: Function
+        },
+        queryGroupCountMethod: {
+            type: Function
+        },
+		checkGroupLoadingMethod: {
+			type: Function
+		}
+    },
+	data() {
+		return {
+			filters: {
+				friendGroupKeyword: null,
+				friendGroupEmpty: null,
+				roomGroupKeyword: null,
+				roomGroupEmpty: null
+			},
+			loading: false,
+			showRoomFilterPanel: false,
+			showFriendFilterPanel: false
+		}
+	},
+	computed: {
+		hasFriendGroupFilter () {
+			return !!this.filters.friendGroupEmpty || !!this.filters.friendGroupKeyword
+		},
+		hasRoomGroupFilter () {
+			return !!this.filters.roomGroupEmpty || !!this.filters.roomGroupKeyword
+		},
+		showFriendGroupData () {
+			if (!this.filters.friendGroupKeyword && !this.filters.friendGroupEmpty) {
+				return this.friendGroupData
+			}
+			return this.friendGroupData.filter(v => {
+				if (this.filters.friendGroupEmpty && !v.num) {
+					return false
+				}
+				if ((v.groupName || '').indexOf(this.filters.friendGroupKeyword) >= 0) {
+					return true
+				}
+				return false
+			})
+		},
+		showRoomGroupData () {
+			if (!this.filters.roomGroupKeyword && !this.filters.roomGroupEmpty) {
+				return this.roomGroupData
+			}
+			return this.roomGroupData.filter(v => {
+				if (this.filters.roomGroupEmpty && !v.num) {
+					return false
+				}
+				if ((v.groupName || '').indexOf(this.filters.roomGroupKeyword) >= 0) {
+					return true
+				}
+				return false
+			})
+		}
+	},
+	created () {
+		this.loadData()
+	},
+	methods: {
+		loadData () {
+			this.loading = true
+            this.queryGroupDataMethod().finally(() => {
+				this.loading = false
+            })
+		},
+		handleFriendToggleEmptyClick () {
+			this.filters.friendGroupEmpty = !this.filters.friendGroupEmpty
+		},
+		handleFriendAddonClick () {
+			this.showFriendFilterPanel = !this.showFriendFilterPanel
+			this.$nextTick(() => {
+				this.$refs.friendGroupSearchbox && this.$refs.friendGroupSearchbox.focus()
+			})
+		},
+		handleRoomToggleEmptyClick () {
+			this.filters.roomGroupEmpty = !this.filters.roomGroupEmpty
+		},
+		handleRoomAddonClick () {
+			this.showRoomFilterPanel = !this.showRoomFilterPanel
+			this.$nextTick(() => {
+				this.$refs.roomGroupSearchbox && this.$refs.roomGroupSearchbox.focus()
+			})
+		},
+		handleFriendGroupSearch ({ keyword }) {
+			this.filters.friendGroupKeyword = keyword
+		},
+		handleRoomGroupSearch ({ keyword }) {
+			this.filters.roomGroupKeyword = keyword
+		},
+		handleRoomGroupClick (group) {
+			this.$emit('select', {
+				roomGroup: group
+			})
+		},
+		handleCheckGroupLoading (group) {
+			if (this.checkGroupLoadingMethod) {
+				return this.checkGroupLoadingMethod({
+					item: group
+				})
+			}
+		},
+		handleFriendGroupClick (group) {
+			this.$emit('select', {
+				friendGroup: group
+			})
+		}
+	}
+}
+</script>
+<style lang="less">
+.sdk-contacts-group-select{
+	position: relative;
+	height: 100%;
+	overflow: auto;
+}
+.sdk-contacts-group-select__group{
+	&.is-friend-group {
+		.sdk-contacts-group-select__group-head{
+			position: sticky;
+			top: 0;
+			background-color: #fff;
+			z-index: 10;
+			&:hover {
+				background-color: #f8f8f8;
+			}
+		}
+	}
+	&.is-room-group {
+		.sdk-contacts-group-select__group-head{
+			position: sticky;
+			top: 0;
+			background-color: #fff;
+			z-index: 10;
+			&:hover {
+				background-color: #f8f8f8;
+			}
+		}
+	}
+	&.is-show-filter-panel{
+		.sdk-contacts-group-select__group-head{
+			color: #333;
+			background-color: #f8f8f8;
+		}
+		.sdk-contacts-group-select__group-head-row.is-filter-panel{
+			height: auto;
+			overflow: initial;
+		}
+	}
+	&.is-has-filter{
+		.sdk-contacts-group-select__group-addon{
+			color: #4387ff;
+		}
+	}
+}
+.sdk-contacts-group-select__group-head{
+	line-height: 24px;
+	padding: 6px;
+	margin: 0 6px 3px;
+	box-sizing: content-box;
+	align-items: center;
+	cursor: pointer;
+	position: relative;
+	border-radius: 3px;
+	&:hover {
+		color: #333;
+		background-color: #f8f8f8;
+	}
+}
+.sdk-contacts-group-select__group-head-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	&.is-filter-panel{
+		height: 0;
+		overflow: hidden;
+	}
+}
+.sdk-contacts-group-select__group-head-col {
+	&.is-full {
+		flex: 1;
+		min-width: 0;
+	}
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+.sdk-contacts-group-select__group-title{
+	color: #999;
+	font-size: 12px;
+	transition: all .25s;
+	flex: 1;
+	min-width: 0;
+}
+.sdk-contacts-group-select__group-addon{
+	transition: all .25s;
+	width: 24px;
+	height: 24px;
+	text-align: center;
+	line-height: 24px;
+	border-radius: 3px;
+	cursor: pointer;
+	transition: all .25s;
+	color: #999;
+	&:hover {
+		color: #333;
+		background-color: rgba(0,0,0,.05);
+	}
+}
+.sdk-contacts-group-select__group-item{
+	margin-left: 6px;
+	margin-right: 6px;
+}
+.sdk-contacts-group-select__skeleton{
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #fff;
+	z-index: 10;
+}
+.sdk-contacts-group-select__empty{
+	padding: 24px 0;
+}
+.sdk-contacts-group-select__toggle{
+	font-size: 12px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	cursor: pointer;
+	transition: all .25s;
+	&:hover {
+		color: #4387ff;
+	}
+}
+.sdk-contacts-group-select__toggle-icon {
+	margin-right: 4px;
+}
+</style>

package/components/contacts-group-select/index.js

@@ -0,0 +1,3 @@
+import ContactsGroupSelect from './contacts-group-select.vue'
+
+export default ContactsGroupSelect

package/components/contacts-room-select/contacts-room-select-skeleton.vue

@@ -0,0 +1,41 @@
+<template>
+    <div clas="sdk-contacts-room-select-skeleton">
+        <div
+            class="sdk-contacts-room-select-skeleton__item"
+            v-for="index in 20"
+            :key="index"    
+        >
+            <div class="sdk-contacts-room-select-skeleton__item-avatar">
+                <ui-skeleton width="32px" height="32px"></ui-skeleton>
+            </div>
+            <div class="sdk-contacts-room-select-skeleton__item-main">
+                <ui-skeleton width="100%" height="18px"></ui-skeleton>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiSkeleton from '@aochuang/common/components/skeleton'
+
+export default {
+    name: 'SdkContactsRoomSelectSkeleton',
+    components: {
+        UiSkeleton
+    }
+}
+</script>
+<style lang="less">
+.sdk-contacts-room-select-skeleton__item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 12px;
+}
+.sdk-contacts-room-select-skeleton__item-avatar{
+    margin-right: 12px;
+}
+.sdk-contacts-room-select-skeleton__item-main {
+    flex: 1;
+    min-width: 0;
+}
+</style>

package/components/contacts-room-select/contacts-room-select.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="sdk-contacts-room-select">
+        <sdk-scroll-load-more
+            ref="loadMore"
+            :data="data"
+            :query-method="handleQueryRoomData"
+        >
+            <template slot="loading">
+                <div class="sdk-contacts-room-select__skeleton">
+                    <contacts-room-select-skeleton></contacts-room-select-skeleton>
+                </div>
+            </template>
+            <div 
+                class="sdk-contacts-room-select__list"
+                v-if="data && data.length"
+            >
+                <div 
+                    class="sdk-contacts-room-select__item" 
+                    v-for="room in data" 
+                    :key="room.id"
+                    :class="{'is-active': valueMap[room.id], 'is-disabled': handleRenderDisabled(room)}"
+                    @click="handleRoomClick(room)"
+                    @contextmenu="handleRoomItemContext(room, $event)"
+                >
+                    <div class="sdk-contacts-room-select__item-main">
+                        <sdk-room-avatar class="sdk-contacts-room-select__item-avatar" :src="room[avatarField]" :name="room[nameField]"></sdk-room-avatar>
+                        <span class="sdk-contacts-room-select__item-name" :title="room[nameField]">
+                            <slot name="name" :item="room">
+                                {{room[nameField]}}
+                            </slot>
+                        </span>
+                    </div>
+                    <template v-if="$scopedSlots.addon">
+                        <slot name="addon" :data="room"></slot>
+                    </template>
+                </div>
+            </div>
+        </sdk-scroll-load-more>
+    </div>
+</template>
+<script>
+import SdkScrollLoadMore from '../../common/scroll-load-more'
+import SdkRoomAvatar from '../../common/room-avatar'
+import ContactsRoomSelectSkeleton from './contacts-room-select-skeleton.vue'
+
+export default {
+    name: 'SdkContactsRoomSelect',
+    components: {
+        SdkRoomAvatar,
+        SdkScrollLoadMore,
+        ContactsRoomSelectSkeleton
+    },
+    props: {
+        data: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: [String, Array]
+        },
+        nameField: {
+            type: String,
+            default: 'nickname'
+        },
+        avatarField: {
+            type: String,
+            default: 'avatar'
+        },
+        disabledMethod: { 
+            type: Function
+        },
+        queryMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            loading: false
+        }
+    },
+    computed: {
+        valueMap () {
+            if (!this.value) {
+                return {}
+            }
+            if (this.multiple) {
+                if (!Array.isArray(this.value)) {
+                    return {}
+                } else {
+                    return this.value.reduce((rs, v) => {
+                        rs[v] = true
+                        return rs
+                    }, {})
+                }
+            } else {
+                return {
+                    [this.value]: true
+                }
+            }
+        }
+    },
+    methods: {
+        handleRoomItemContext (item, evt) {
+            this.$emit('item-contextmenu', item, evt)
+        },
+        handleRoomClick (item) {
+            if (this.disabledMethod && this.disabledMethod({
+                item
+            })) {
+                return
+            }
+            this.$emit('select', {
+                item
+            })
+        },
+        handleQueryRoomData (evt) {
+            this.loading = true
+            return this.queryMethod(evt).finally(() => {
+                this.loading = false
+            })
+        },
+        handleRenderDisabled (item) {
+            if (!this.disabledMethod) {
+                return false
+            }
+            return this.disabledMethod({
+                item
+            })
+        },
+        reload () {
+            return this.$refs.loadMore && this.$refs.loadMore.reload()
+        }
+    }
+}
+</script>
+<style lang="less">
+.sdk-contacts-room-select{
+    height: 100%;
+    position: relative;
+}
+.sdk-contacts-room-select__item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 8px 16px;
+	position: relative;
+    line-height: 1.5em;
+	transition: all .25s;
+    cursor: pointer;
+    &.is-disabled {
+        cursor: not-allowed;
+        opacity: .5;
+    }
+    &:not(.is-disabled) {
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(0,0,0,.03);
+        }
+        &.is-active {
+            background-color: #e0eafe;
+        }
+    }
+}
+.sdk-contacts-room-select__item-main{
+    flex: 1;
+    min-width: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.sdk-contacts-room-select__item:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 54px;
+    right: 12px;
+    border-bottom: 1px solid #f8f8f8;
+}
+.sdk-contacts-room-select__item-avatar {
+	margin-right: 8px;
+	border-radius: 3px;
+	min-width: 32px;
+	height: 32px;
+	background-color: #eee;
+	border-radius: 3px;
+}
+.sdk-contacts-room-select__item-name{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+.sdk-contacts-room-select__skeleton{
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #fff;
+	z-index: 10;
+}
+</style>

package/components/contacts-room-select/index.js

@@ -0,0 +1,3 @@
+import ContactsRoomSelect from './contacts-room-select.vue'
+
+export default ContactsRoomSelect

package/components/index.js

@@ -0,0 +1,43 @@
+import AccountSelect from './account-select'
+import ContactsGroupSelect from './contacts-group-select'
+import ContactsRoomSelect from './contacts-room-select'
+import ContactsFriendSelect from './contacts-friend-select'
+import Layout from './layout'
+import { SessionSelect, SessionSelectItem, SessionSelectItemSkeleton } from './session-select'
+import ChatEditor, { ChatEditorButton, ChatEditorToolbar, ChatEditorToolbarItem } from './chat-editor'
+import WechatChatPanel from './wechat-chat-panel'
+import WeworkChatPanel from './wework-chat-panel'
+import ChatLayout from './chat-layout'
+import ChatFriendProfile from './chat-friend-profile'
+import ChatRoomProfile from './chat-room-profile'
+import { chatControls as WechatChatControls, WechatChatControlConfig, WechatChatControlConfigMsg, WechatChatControlConfigItem } from './wechat-chat-control'
+import { MESSAGE_TYPE, formatShortMessage, formatShortSessionMessage } from './wechat-chat-control/util'
+import { MESSAGE_TYPE as MESSAGE_TYPE_W } from './wework-chat-control/util'
+
+export default {
+    formatShortMessage,
+    formatShortSessionMessage,
+    WechatChatControls,
+    WechatChatControlConfig, 
+    WechatChatControlConfigMsg,
+    WechatChatControlConfigItem,
+    MESSAGE_TYPE,
+    MESSAGE_TYPE_W,
+    AccountSelect,
+    ContactsGroupSelect,
+    ContactsRoomSelect,
+    ContactsFriendSelect,
+    Layout,
+    SessionSelect,
+    SessionSelectItem,
+    SessionSelectItemSkeleton,
+    ChatEditor,
+    ChatEditorButton, 
+    ChatEditorToolbar, 
+    ChatEditorToolbarItem, 
+    ChatLayout,
+    ChatFriendProfile,
+    ChatRoomProfile,
+    WechatChatPanel,
+    WeworkChatPanel
+}

package/components/layout/index.js

@@ -0,0 +1,3 @@
+import Layout from './layout.vue'
+
+export default Layout