@aochuang/client-sdk 1.0.278

package/components/chat-panel/chat-panel-increment.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="sdk-chat-panel-increment">
+    <span v-if="loading" class="sdk-chat-panel-increment__loading">
+      <ui-icon name="loading"></ui-icon> 加载消息中...
+    </span>
+    <template v-else-if="complete">
+      <div v-if="!rangeLoad" class="sdk-chat-panel-increment__placeholder">{{completeText}}</div>
+      <div v-else class="sdk-chat-panel-increment__loadmore" @click="handleRangeClick">点击加载更多消息</div>
+    </template>
+    <div v-else-if="showLoadMore" class="sdk-chat-panel-increment__loadmore" @click="handleMoreClick">点击加载更多消息</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SdkChatPanelIncrement',
+  model: {
+    prop: 'placeholder'
+  },
+  props: {
+    loading: {
+      type: Boolean
+    },
+    complete: {
+      type: Boolean
+    },
+    completeText: {
+      type: String,
+      default: '消息已加载完毕'
+    },
+    showLoadMore: {
+      type: Boolean
+    },
+    rangeLoad: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleMoreClick () {
+      if (this.loading) {
+        return
+      }
+      if (this.rangeLoad) {
+        this.$emit('range')
+      } else {
+        this.$emit('load')
+      }
+    },
+    handleRangeClick () {
+      if (this.loading) {
+        return
+      }
+      this.$emit('range')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.sdk-chat-panel-increment{
+  padding: 4px 20px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  box-sizing: content-box;
+}
+.sdk-chat-panel-increment__loadmore,
+.sdk-chat-panel-increment__placeholder,
+.sdk-chat-panel-increment__loading{
+  display: inline-block;
+  padding: 0 12px;
+  color: #ccc;
+}
+.sdk-chat-panel-increment__loadmore{
+  cursor: pointer;
+  transition: color .3s;
+  &:hover{
+    color: #404040;
+  }
+}
+</style>

package/components/chat-panel/chat-panel-inner-msg.vue

@@ -0,0 +1,25 @@
+<script>
+export default {
+  name: 'SdkChatPanelInnerMsg',
+  functional: true,
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  render (h, c) {
+    return h('div', {
+      class: 'sdk-chat-panel-inner-msg'
+    }, [c.props.data.content])
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-panel-inner-msg{
+  text-align: center;
+  color: #999;
+  width: 100%;
+  padding: 6px 0;
+}
+</style>

package/components/chat-panel/chat-panel-loading.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="sdk-chat-panel-loading"><ui-icon name="loading" :size="30"></ui-icon> 数据加载中</div>
+</template>
+<script>
+import { Icon as UiIcon } from '@aochuang/common/components'
+
+export default {
+  name: 'AcChatPanelLoading',
+  components: {
+    UiIcon
+  }
+}
+</script>
+<style lang="less">
+
+</style>
+<style lang="less">
+.sdk-chat-panel-loading{
+  padding: 10px 20px;
+  text-align: center;
+  color: #ccc;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+</style>

package/components/chat-panel/chat-panel-nearest.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="sdk-chat-panel-nearest" :class="{'is-loading': loading}" v-if="!empty">
+    <div class="sdk-chat-panel-nearest__handle">
+      <template v-if="loading">
+        <div class="sdk-chat-panel-nearest__button">
+          <div class="sdk-chat-panel-nearest__button-main">
+            <span class="sdk-chat-panel-nearest__button-text">加载消息中...</span>
+            <ui-icon name="loading"></ui-icon> 
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="sdk-chat-panel-nearest__button">
+          <div class="sdk-chat-panel-nearest__button-main" @click="handleLoadMoreClick">
+            <span class="sdk-chat-panel-nearest__button-text">加载最近消息</span>
+            <span class="sdk-chat-panel-nearest__button-icon"></span>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="sdk-chat-panel-nearest__main">
+      <div class="sdk-chat-panel-nearest__button" v-if="!empty">
+        <div class="sdk-chat-panel-nearest__button-main" @click="handleLoadNewClick">
+          <span class="sdk-chat-panel-nearest__button-text">滚动到最新消息</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AcChatPanelNearest',
+  props: {
+    loading: {
+      type: Boolean
+    },
+    empty: {
+      type: Boolean
+    }
+  },
+  methods: {
+    handleLoadMoreClick () {
+      if (this.loading) {
+        return
+      }
+      this.$emit('load')
+    },
+    handleLoadNewClick () {
+      if (this.loading) {
+        return
+      }
+      this.$emit('reload')
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-panel-nearest{
+  position: relative;
+  background-color: rgba(255, 255, 255, .95);
+  box-shadow: 0 0 3px rgba(0,0,0,.1);
+  border-radius: 15px;
+  cursor: pointer;
+  color: #666;
+  &:not(.is-loading) {
+    &:hover{
+      .sdk-chat-panel-nearest__main{
+        display: block;
+      }
+      .sdk-chat-panel-nearest__button-icon{
+        transform: rotate(180deg);
+      }
+    }
+    .sdk-chat-panel-nearest__button{
+      &:hover {
+        color: #0052CC;
+      }
+    }
+  }
+  &.is-loading{
+    color: #888;
+    cursor: not-allowed;
+  }
+}
+.sdk-chat-panel-nearest__main{
+  display: none;
+}
+.sdk-chat-panel-nearest__button-main{
+  line-height: 24px;
+  padding: 4px 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sdk-chat-panel-nearest__button-text{
+  margin-right: 2px;
+}
+.sdk-chat-panel-nearest__button-icon{
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: relative;
+  vertical-align: top;
+  transition: all .25s;
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  border-radius: 50%;
+  &:before{
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    content: '';
+    width: 6px;
+    height: 6px;
+    border: 1px solid #666;
+    border-left: 0;
+    border-top: 0;
+    display: inline-block;
+    transform: rotate(45deg) translateY(-50%);
+  }
+  &:after{
+    content: '';
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    border: 1px solid #666;
+    border-left: 0;
+    border-top: 0;
+    display: inline-block;
+    margin-top: -5px;
+    transform: rotate(45deg) translateY(-50%);
+  }
+}
+</style>

package/components/chat-panel/chat-panel.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="sdk-chat-panel">
+    <div class="sdk-chat-panel__filter" v-if="$slots.filter">
+      <slot name="filter"></slot>
+    </div>
+    <div class="sdk-chat-panel__panel" ref="panel">
+      <div class="sdk-chat-panel__main">
+        <chat-panel-chats
+          key="result"
+          ref="result"
+          class="sdk-chat-panel__result"
+          :data="data"
+          :page-size="pageSize"
+          :loading="loading"
+          :auto-load="autoLoad"
+          :key-field="keyField"
+          :start-date="innerStartDate"
+          :end-date="innerEndDate"
+          :msg-time-field="msgTimeField"
+          :enable-range-load="true"
+          :context-chat-id="contextChatId"
+          :render-control="renderControl"
+          :chat-class-method="chatClassMethod"
+          :is-sender-method="isSenderMethod"
+          :fetch-user-method="fetchUserMethod"
+          :fetch-data-method="handleDefaultFetchChatData"
+          :show-context-btn="mode === 'filter'"
+          :enable-default-date-range="enableDefaultDateRange"
+          @loaded="handleChatsLoaded"
+          @initloaded="handleChatsInitLoaded"
+          @view-context="handleChatsViewContext"
+          @chat-contextmenu="handleChatContext"
+        >
+          <template slot="chat" slot-scope="scope">
+            <slot name="chat" v-bind="scope"></slot>
+          </template>
+          <template slot-scope="scope" slot="chat-foot">
+            <slot name="chat-foot" v-bind="scope"></slot>
+          </template>
+          <template slot="chat-append" slot-scope="scope">
+            <slot name="chat-append" v-bind="scope"></slot>
+            <template v-if="selectable && handleFilterSelectMessageMethod(scope.item)">
+              <div class="sdk-chat-panel__checkbox">
+                <ui-checkbox :value="checkMsgMap[scope.item.msgId]" @input="handleMsgCheckboxChange(scope.item, $event)"></ui-checkbox>
+              </div>
+            </template>
+          </template>
+        </chat-panel-chats>
+      </div>
+      <slot name="main"></slot>
+    </div>
+    <div class="bi-chat-panel__toolbar" v-if="checkTotal > 0">
+      <ui-toolbar>
+        <ui-toolbar-item>
+          已选择{{ checkTotal }}条消息
+        </ui-toolbar-item>
+        <ui-toolbar-item :divided="true"></ui-toolbar-item>
+        <ui-toolbar-item>
+          <ui-button :click="handleCancelCheckClick">取消已选</ui-button>
+        </ui-toolbar-item>
+        <ui-toolbar-item>
+          <ui-button :click="handleConfirmCheckClick" type="primary">{{confirmSelectButtonText || '确定已选'}}</ui-button>
+        </ui-toolbar-item>
+      </ui-toolbar>
+    </div>
+  </div>
+</template>
+<script>
+import ChatPanelChats from './chat-panel-chats'
+import { parseDate } from '@aochuang/common/utils/date'
+
+export default {
+  name: 'AcChatPanel',
+  components: {
+    ChatPanelChats
+  },
+  props: {
+    mode: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['default', 'filter'].includes(value)
+      }
+    },
+    keyField: {
+      type: String
+    },
+    startDate: {
+      type: [String, Number]
+    },
+    endDate: {
+      type: [String, Number]
+    },
+    msgTimeField: {
+      type: String,
+      default: 'wechatTime'
+    },
+    /**
+     * 上下文定位聊天消息
+    */
+    contextChatId: {
+      type: String
+    },
+    data: {
+      type: [Array, Object]
+    },
+    fetchDataMethod: {
+      type: Function
+    },
+    renderControl: {
+      type: Function
+    },
+    fetchUserMethod: {
+      type: Function
+    },
+    chatClassMethod: {
+      type: Function
+    },
+    isSenderMethod: {
+      type: Function
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 没有pageSize的时候证明不需要分页加载
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    enableDefaultDateRange: {
+      type: Boolean,
+      default: true
+    },
+    confirmSelectMethod: {
+      type: Function
+    },
+    filterSelectMessageMethod: {
+      type: Function
+    },
+    confirmSelectButtonText: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      /**
+       * 默认聊天面板是否准备完毕，这里存在两个面板，一个搜索结果面板，一个正常聊天记录面板
+       * 增加这个属性的目的是为了解决初时有过滤条件时，不能去创建默认的聊天面板，否则会出现请求重复加载情况，让人以为时bug
+      */
+      isDefaultReady: false,
+      chatData: [],
+      checkMsgMap: {}
+    }
+  },
+  computed: {
+    innerStartDate () {
+      if (!this.startDate) {
+        return
+      }
+      return parseDate(this.startDate).getTime()
+    },
+    innerEndDate () {
+      if (!this.endDate) {
+        return
+      }
+      return parseDate(this.endDate).getTime()
+    },
+    checkTotal () {
+      return Object.keys(this.checkMsgMap).length
+    }
+  },
+  methods: {
+    handleFilterSelectMessageMethod (msg) {
+      if (!this.filterSelectMessageMethod) {
+        return true
+      }
+      return this.filterSelectMessageMethod({
+        item: msg
+      })
+    },
+    handleMsgCheckboxChange (msg, value) {
+      if (value) {
+        this.$set(this.checkMsgMap, msg.msgId, true)
+      } else {
+        this.$delete(this.checkMsgMap, msg.msgId)
+      }
+    },
+    handleChatsLoaded ({ data }) {
+      this.chatData = data
+    },
+    handleChatsViewContext ({ chat }) {
+      this.$emit('view-context', {
+        item: chat
+      })
+    },
+    handleDefaultFetchChatData (filters) {
+      if (!this.fetchDataMethod) {
+        return Promise.reject()
+      }
+      return this.fetchDataMethod(filters)
+    },
+    handleChatsInitLoaded () {
+      this.$emit('initloaded')
+    },
+    scrollTo (msgId) {
+      this.$refs.result && this.$refs.result.scrollTo(msgId)
+    },
+    scrollToBottom () {
+      this.$refs.result && this.$refs.result.scrollToBottom()
+    },
+    reload () {
+      return this.$refs.result && this.$refs.result.reloadChatData()
+    },
+    handleCancelCheckClick () {
+      this.checkMsgMap = {}
+      return false
+    },
+    handleConfirmCheckClick () {
+      this.confirmSelectMethod && this.confirmSelectMethod({
+        selection: this.chatData.filter(v => this.checkMsgMap[v.msgId])
+      })
+      return false
+    },
+    handleChatContext (item, evt) {
+      this.$emit('chat-contextmenu', item, evt)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-panel{
+  display: flex;
+  height: 100%;
+  flex-direction: column;;
+  position: relative;
+}
+.sdk-chat-panel__filter{
+  box-shadow: 0 2px 4px rgba(0,0,0,.05);
+  z-index: 50;
+  padding: 6px 12px;
+}
+.sdk-chat-panel__return{
+  box-shadow: 0 2px 4px rgba(0,0,0,.05);
+  z-index: 3;
+  padding: 6px 12px;
+}
+.sdk-chat-panel__panel{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  &::-webkit-scrollbar-thumb{
+    background-color: transparent;
+  }
+  &:hover{
+    &::-webkit-scrollbar-thumb{
+      background-color: #ddd;
+      &:hover {
+        background-color: #ccc;
+      }
+    }
+  }
+}
+.sdk-chat-panel__main,
+.sdk-chat-panel__context{
+  flex: 1;
+  min-height: 0;
+}
+.sdk-chat-panel__chats{
+  flex: 1;
+}
+.sdk-chat-panel__checkbox{
+  display: inline-block;
+  padding: 12px;
+}
+.bi-chat-panel__toolbar{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 12px;
+}
+</style>

package/components/chat-panel/index.js

@@ -0,0 +1,3 @@
+import ChatPanel from './chat-panel.vue'
+
+export default ChatPanel

package/components/chat-panel/util.js

@@ -0,0 +1,83 @@
+import { unique } from '../../utils/string'
+
+const RENDER_BOX_FN = []
+
+/**
+ * 注册一个是否渲染外壳逻辑
+*/ 
+export function registerIsRenderBoxFn (fn) {
+  if (typeof fn !== 'function') {
+    return
+  }
+  RENDER_BOX_FN.push(fn)
+}
+
+/**
+ * 获取是否渲染外壳逻辑函数清单
+*/
+export function getIsRenderBoxFns (f) {
+  return RENDER_BOX_FN
+}
+
+/**
+ * 构造一条内部组件消息
+ * 例如2022-03-04～2034-12-23无消息数据
+*/
+export function newInnerMessage (options, idField, msgTimeField) {
+  return Object.assign({
+    msgType: '_EMPTY_', // default、targetRangeNotMessage
+    content: null,
+    [msgTimeField]: null
+  }, options, {
+    [idField]: unique(),
+    _inner: true
+  })
+}
+
+/**
+ * 剔除重复的消息数据
+ * 因为有可能当前后台加载过来的消息已经加载过了，如果不剔除重复的，那么后面判断消息数量为空的逻辑会出问题，就永远不知道是不是真的没有消息了
+*/
+export function uniqRepeartMessageData (currMsg, allMsg, idField) {
+  if (!allMsg || !allMsg.length) {
+    return currMsg
+  }
+  // 先只取最近的100条消息
+  const uniqMsgMap = allMsg.slice(0, 100).reduce((rs, v) => {
+    rs[v[idField]] = v
+    return rs
+  }, {})
+  return (currMsg || []).filter(v => !uniqMsgMap[v[idField]])
+}
+
+/**
+ * 判断元素是否在父元素的滚动可见区域内
+ * @param {HTMLElement} element - 要判断的子元素
+ * @param {HTMLElement} parent - 父元素（滚动容器）
+ * @returns {boolean} - 是否可见
+ */
+export function isElementInParentViewport(element, parent) {
+  // 获取元素相对于父元素的位置和尺寸
+  const elementRect = element.getBoundingClientRect()
+  const parentRect = parent.getBoundingClientRect()
+
+  // 计算元素相对于父元素的坐标（考虑父元素的滚动偏移）
+  const relativeTop = elementRect.top - parentRect.top + parent.scrollTop
+  const relativeLeft = elementRect.left - parentRect.left + parent.scrollLeft
+  const relativeBottom = relativeTop + elementRect.height - 2 // 减去2个像素容差一下
+  const relativeRight = relativeLeft + elementRect.width
+
+  // 父元素的可视区域范围
+  const parentVisibleTop = parent.scrollTop
+  const parentVisibleLeft = parent.scrollLeft
+  const parentVisibleBottom = parent.scrollTop + parent.clientHeight
+  const parentVisibleRight = parent.scrollLeft + parent.clientWidth
+
+  // 判断元素是否与父元素的可视区域重叠
+  return (
+    relativeTop < parentVisibleBottom &&    // 元素顶部在父元素可视区域底部之上
+    relativeBottom > parentVisibleTop &&    // 元素底部在父元素可视区域顶部之下
+    relativeLeft < parentVisibleRight &&    // 元素左侧在父元素可视区域右侧之左
+    relativeRight > parentVisibleLeft       // 元素右侧在父元素可视区域左侧之右
+  )
+}