@aochuang/client-sdk 1.0.278

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

@@ -0,0 +1,329 @@
+<template>
+    <div 
+        class="sdk-chat-editor-suggestions"
+        v-if="isShow"
+    >
+        <div class="sdk-chat-editor-suggestions__head">
+            <div class="sdk-chat-editor-suggestions__head-left">
+                <template v-if="loading">
+                    <span class="sdk-chat-editor-suggestions__loading">
+                        <ui-loading size="mini"></ui-loading>
+                    </span>
+                </template>
+                <span class="sdk-chat-editor-suggestions__keyword">
+                    根据“{{ keyword }}”匹配话术
+                </span>
+            </div>
+            <div class="sdk-chat-editor-suggestions__head-right">
+                <span 
+                    class="sdk-chat-editor-suggestions__close" 
+                    title="关闭"
+                    @click="handleCloseClick"
+                ></span>
+            </div>
+        </div>
+        <div class="sdk-chat-editor-suggestions__body" ref="body">
+            <template v-if="data && data.length">
+                <div class="sdk-chat-editor-suggestions__list">
+                    <div 
+                        class="sdk-chat-editor-suggestions__item"
+                        :class="{'is-focus': focusId === item.id}"
+                        v-for="(item, index) in data"
+                        :key="index"
+                        :ref="`item-${item.id}`"
+                        @mouseenter="handleItemMouseEnter(item)"
+                        @click="handleItemClick(item)"
+                    >
+                        <slot name="item" :data="item"></slot>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="sdk-chat-editor-suggestions__foot">
+            <ui-icon name="information-line"></ui-icon> 提示：
+            <span class="sdk-chat-editor-suggestions__key">shift+↑</span>上移、
+            <span class="sdk-chat-editor-suggestions__key">shift+↓</span>下移、
+            <span class="sdk-chat-editor-suggestions__key">shift+回车</span>确定
+        </div>
+    </div>
+</template>
+<script>
+import { Loading as UiLoading } from '@aochuang/common/components'
+
+export default {
+    name: 'SdkChatEditorSuggestions',
+    components: {
+        UiLoading
+    },
+    props: {
+        data: {
+            type: Array
+        },
+        keyword: {
+            type: String
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        confirmMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            closed: false,
+            focusId: null
+        }
+    },
+    computed: {
+        isShow () {
+            return this.data && this.data.length && !this.closed
+        }
+    },
+    watch: {
+        keyword () {
+            this.closed = false
+        },
+        data () {
+            this.closed = false
+            this.checkAutoFocus()
+        },
+        isShow () {
+            if (!this.isShow) {
+                this.$emit('closed')
+            }
+        }
+    },
+    created () {
+        this.checkAutoFocus()
+    },
+    mounted () {
+        window.document.addEventListener('keydown', this.handleDocumentKeyDown)
+    },
+    methods: {
+        handleCloseClick () {
+            this.closed = true
+        },
+        handleItemMouseEnter (item) {
+            this.focusId = item.id
+        },
+        handleItemClick (item) {
+            if (this.confirmMethod) {
+                this.confirmMethod({
+                    item
+                })
+            }
+            this.closed = true
+        },
+        handleDocumentKeyDown (evt) {
+            if (!this.isShow) {
+                return
+            }
+            if (!evt.shiftKey) {
+                return
+            }
+            if (!this.data || !this.data.length) {
+                return
+            }
+            let index = -1
+            if (this.focusId) {
+                this.data.some((v, i) => {
+                    if (v.id === this.focusId) {
+                        index = i
+                        return true
+                    }
+                })
+            }
+            // 回车确定
+            if (evt.keyCode === 13) {
+                if (index >= 0) {
+                    evt.preventDefault()
+                    if (this.confirmMethod) {
+                        this.confirmMethod({
+                            item: this.data[index]
+                        })
+                    }
+                    this.closed = true
+                }
+                return
+            }
+            if (!this.focusId) {
+                this.focusId = this.data[0].id
+                this.scrollTo(this.focusId)
+                return
+            }
+            if (index < 0) {
+                this.focusId = this.data[0].id
+                return
+            }
+            // 向下
+            if (evt.keyCode === 40) {
+                evt.preventDefault()
+                const nextIndex = index + 1 > this.data.length - 1 ? 0 : index + 1
+                this.focusId = this.data[nextIndex].id
+                this.scrollTo(this.focusId)
+                return
+            }
+            // 向上
+            if (evt.keyCode === 38) {
+                evt.preventDefault()
+                const nextIndex = index - 1 < 0 ? this.data.length - 1 : index - 1
+                this.focusId = this.data[nextIndex].id
+                this.scrollTo(this.focusId)
+                return
+            }
+        },
+        checkAutoFocus () {
+            if (!this.data || !this.data.length) {
+                this.focusId = null
+            } else {
+                this.focusId = this.data[0].id
+            }
+        },
+        scrollTo (itemId) {
+            if (!itemId) {
+                return
+            }
+            const $body = this.$refs.body
+            if (!$body) {
+                return
+            }
+            const $item = this.$refs[`item-${itemId}`] ? this.$refs[`item-${itemId}`][0] : null
+            if (!$item) {
+                return
+            }
+            const scrollTop = $body.scrollTop
+            const scrollBottom = scrollTop + $body.clientHeight
+            const itemOffsetTop = $item.offsetTop
+            if (itemOffsetTop < scrollTop) {
+                $body.scrollTop = itemOffsetTop
+            } else if (itemOffsetTop > scrollBottom) {
+                $body.scrollTop = itemOffsetTop - $item.clientHeight
+            }
+        },
+        close () {
+            this.closed = true
+        }
+    },
+    beforeDestroy () { 
+        window.document.removeEventListener('keydown', this.handleDocumentKeyDown)
+    }
+}
+</script>
+<style>
+.sdk-chat-editor-suggestions{
+    background-color: #fff;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
+    max-height: 100%;
+    pointer-events: initial;   
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    max-width: 540px;
+    min-width: 320px;
+    display: flex;
+    flex-direction: column;
+}
+.sdk-chat-editor-suggestions__head{
+    line-height: 24px;
+    padding: 4px 12px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.sdk-chat-editor-suggestions__head-left,
+.sdk-chat-editor-suggestions__head-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-chat-editor-suggestions__close{
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    position: relative;
+    transform: rotate(45deg);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all .25s;
+    margin-right: -4px;
+}
+.sdk-chat-editor-suggestions__close:hover {
+    background-color: #eee;
+}
+.sdk-chat-editor-suggestions__close:after,
+.sdk-chat-editor-suggestions__close:before {
+    content: '';
+    position: absolute;
+    background-color: #999;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+.sdk-chat-editor-suggestions__close:before{
+    width: 10px;
+    height: 1px;
+}
+.sdk-chat-editor-suggestions__close:after{
+    height: 10px;
+    width: 1px;
+}
+.sdk-chat-editor-suggestions__loading {
+    margin-right: 4px;
+}
+.sdk-chat-editor-suggestions__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    position: relative;
+}
+.sdk-chat-editor-suggestions__foot{
+    color: #999;
+    line-height: 24px;
+    padding: 4px 12px;
+    font-size: 12px;
+    border-top: 1px solid #eee;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-chat-editor-suggestions__foot .ui-icon {
+    vertical-align: top;
+    margin-right: 4px;
+    position: relative;
+    top: -1px;
+}
+.sdk-chat-editor-suggestions__key{
+    display: inline-block;
+    line-height: 18px;
+    padding: 0 3px;
+    border: 1px solid #eee;
+    background-color: #f9f9f9;
+    border-radius: 3px;
+}
+.sdk-chat-editor-suggestions__item{
+    position: relative;
+}
+.sdk-chat-editor-suggestions__item:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    border: 2px solid #4387ff;
+    border-radius: 3px;
+    transition: all .25s;
+    opacity: 0;
+    z-index: 3;
+    pointer-events: none;
+}
+.sdk-chat-editor-suggestions__item.is-focus:after {
+    opacity: 1;
+}
+</style>

package/components/chat-editor/chat-editor-toolbar/chat-editor-toolbar-item.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="sdk-chat-editor-toolbar-item" :class="{'is-divided': divided}">
+        <template v-if="!divided">
+            <slot></slot>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SdkChatEditorToolbarItem',
+    props: {
+        divided: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+<style>
+.sdk-chat-editor-toolbar-item.sdk-chat-editor-toolbar-item:not(:last-child){
+    margin-right: 12px;
+}
+.sdk-chat-editor-toolbar-item.is-divided{
+    width: 1px;
+    height: 16px;
+    background-color: rgba(0,0,0,.1);
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+    <div class="sdk-chat-editor-toolbar">
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SdkChatEditorToolbar'
+}
+</script>
+<style>
+.sdk-chat-editor-toolbar{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+</style>