@aochuang/client-sdk 1.0.308 → 1.0.310

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

@@ -35,7 +35,7 @@
         <div class="sdk-chat-panel-box__foot-row" v-if="inner_foot_vnode">
           <component :is="inner_foot_vnode"></component>
         </div>
-        <div class="sdk-chat-panel-box__foot-row" v-if="$slots.foot">
+        <div class="sdk-chat-panel-box__foot-row" v-if="$slots.foot || $scopedSlots.foot">
           <slot name="foot"></slot>
         </div>
         <div class="sdk-chat-panel-box__foot-row is-last">

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

@@ -105,7 +105,7 @@ export default {
 </script>
 <style lang="less">
 .sdk-chat-panel-chat{
-  padding: 3px 12px;
+  padding: 0 12px;
   transition: background-color .25s;
   display: flex;
   flex-direction: row;

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

@@ -18,31 +18,35 @@
           @range="handleIncrementRangeMore"
         ></chat-panel-increment>
         <template v-if="dataType === 'array'">
-          <chat-panel-chat
+          <template
             v-for="item in data"
-            :key="'chat_' + item[keyField]"
-            :dir="handleisSenderMethod(item) ? 'right' : 'left'"
-            :class="handleChatClassMethod(item)"
-            :id="item[keyField]"
-            :item="item"
-            :render-control="renderControl"
-            :fetch-user-method="fetchUserMethod"
-            :ref="'chat_' + item[keyField]"
-            :show-context-btn="showContextBtn"
-            :msg-time-field="msgTimeField"
-            @view-context="handleViewContextClick(item)"
-            @contextmenu="handleChatContextMenu(item, $event)"
           >
-            <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-scope="scope" slot="chat-append">
-              <slot name="chat-append" v-bind="scope"></slot>
-            </template>
-          </chat-panel-chat>
+            <slot name="chat-before" :item="item"></slot>
+            <chat-panel-chat
+              :key="'chat_' + item[keyField]"
+              :dir="handleisSenderMethod(item) ? 'right' : 'left'"
+              :class="handleChatClassMethod(item)"
+              :id="item[keyField]"
+              :item="item"
+              :render-control="renderControl"
+              :fetch-user-method="fetchUserMethod"
+              :ref="'chat_' + item[keyField]"
+              :show-context-btn="showContextBtn"
+              :msg-time-field="msgTimeField"
+              @view-context="handleViewContextClick(item)"
+              @contextmenu="handleChatContextMenu(item, $event)"
+            >
+              <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-scope="scope" slot="chat-append">
+                <slot name="chat-append" v-bind="scope"></slot>
+              </template>
+            </chat-panel-chat>
+          </template>
         </template>
         <template v-else>
           <template v-for="day in data">
@@ -52,6 +56,7 @@
               <template
                 v-for="item in milliseconds"
               >
+                <slot name="chat-before" :item="item"></slot>
                 <chat-panel-chat
                   :key="'chat_' + item[keyField]"
                   :dir="handleisSenderMethod(item) ? 'right' : 'left'"

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

@@ -31,6 +31,9 @@
           @view-context="handleChatsViewContext"
           @chat-contextmenu="handleChatContext"
         >
+          <template slot="chat-before" slot-scope="scope">
+            <slot name="chat-before" v-bind="scope"></slot>
+          </template>
           <template slot="chat" slot-scope="scope">
             <slot name="chat" v-bind="scope"></slot>
           </template>

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

@@ -14,39 +14,49 @@
     <template slot="filter">
       <slot name="filter"></slot>
     </template>
-    <template slot="chat" slot-scope="{ item, dir }">
-      <chat-panel-item
-        :item="item"
-        :dir="dir"
-        :fetch-user-method="fetchUserMethod"
-        :config="config"
-        :show-user-name="showUserName"
-        @user-avatar-click="handleUserAvatarClick"
-        @user-avatar-contextmenu="handleUserAvatarContextmenu"
+    <template slot="chat-before" slot-scope="{ item }">
+      <div
+        v-if="handleShowTimeDivider(item)"
+        class="sdk-wechat-chat-panel__time"
       >
-        <template slot="box-append"> 
-          <slot name="box-append" :item="item"></slot>
-        </template>
-        <template slot="box-append-bottom" slot-scope="scope"> 
-          <slot name="box-append-bottom" :item="item" :hover="scope.hover"></slot>
-        </template>
-        <template slot="chat-append" slot-scope="{ item, updateProp }">
-          <chat-panel-chat-status
-            :data="item"
-            :update-chat-box-prop="updateProp"
-          ></chat-panel-chat-status>
-        </template>
-        <template slot="chat-prefix" slot-scope="{ item }">
-          <template v-if="selectable && handleFilterSelectMessageMethod(item)">
-            <div class="sdk-wechat-chat-panel__checkbox">
-              <ui-checkbox :value="!!checkMsgMap[item[keyField]]" @input="handleMsgCheckboxChange(item, $event)"></ui-checkbox>
-            </div>
+        {{ formatMessageTime(parseMessageTime(item.wechatTime)) }}
+      </div>
+    </template>
+    <template slot="chat" slot-scope="{ item, dir }">
+      <div class="sdk-wechat-chat-panel__item">
+        <chat-panel-item
+          :item="item"
+          :dir="dir"
+          :fetch-user-method="fetchUserMethod"
+          :config="config"
+          :show-user-name="showUserName"
+          @user-avatar-click="handleUserAvatarClick"
+          @user-avatar-contextmenu="handleUserAvatarContextmenu"
+        >
+          <template slot="box-append">
+            <slot name="box-append" :item="item"></slot>
+          </template>
+          <template slot="box-append-bottom" slot-scope="scope">
+            <slot name="box-append-bottom" :item="item" :hover="scope.hover"></slot>
+          </template>
+          <template slot="chat-append" slot-scope="{ item, updateProp }">
+            <chat-panel-chat-status
+              :data="item"
+              :update-chat-box-prop="updateProp"
+            ></chat-panel-chat-status>
+          </template>
+          <template slot="chat-prefix" slot-scope="{ item }">
+            <template v-if="selectable && handleFilterSelectMessageMethod(item)">
+              <div class="sdk-wechat-chat-panel__checkbox">
+                <ui-checkbox :value="!!checkMsgMap[item[keyField]]" @input="handleMsgCheckboxChange(item, $event)"></ui-checkbox>
+              </div>
+            </template>
           </template>
-        </template>
-        <template slot="quote-message-append" slot-scope="{ item, quoteMessageData }">
-          <slot name="chat-quote-message-append" :item="item" :quote-message-data="quoteMessageData"></slot>
-        </template>
-      </chat-panel-item>
+          <template slot="quote-message-append" slot-scope="{ item, quoteMessageData }">
+            <slot name="chat-quote-message-append" :item="item" :quote-message-data="quoteMessageData"></slot>
+          </template>
+        </chat-panel-item>
+      </div>
     </template>
     <template slot="main">
       <slot name="main"></slot>
@@ -60,6 +70,8 @@
 import SdkChatPanel from '../chat-panel'
 import ChatPanelItem from './chat-panel-item.vue'
 import ChatPanelChatStatus from './chat-panel-chat-status/chat-panel-chat-status.vue'
+import { formatDate } from '../../utils/date'
+import { getPreviousMessage } from './util'
 
 export default {
   name: 'SdkWechatChatPanel',
@@ -147,6 +159,43 @@ export default {
     }
   },
   methods: {
+    handleShowTimeDivider (item) {
+      if (!item || item.msgType === '_EMPTY_') {
+        return false
+      }
+      const currentTime = this.parseMessageTime(item.wechatTime)
+      if (currentTime === null) {
+        return false
+      }
+      const previousItem = getPreviousMessage(this.data, item)
+      if (!previousItem || previousItem.msgType === '_EMPTY_') {
+        return true
+      }
+      const previousTime = this.parseMessageTime(previousItem.wechatTime)
+      return previousTime === null || currentTime - previousTime >= 5 * 60 * 1000
+    },
+    parseMessageTime (value) {
+      if (value === null || value === undefined || value === '') {
+        return null
+      }
+      const date = new Date(typeof value === 'string' && /^[0-9]+$/.test(value) ? Number(value) : value)
+      const time = date.getTime()
+      return isNaN(time) ? null : time
+    },
+    formatMessageTime (time) {
+      const date = new Date(time)
+      const now = new Date()
+      const isToday = date.getFullYear() === now.getFullYear() &&
+        date.getMonth() === now.getMonth() &&
+        date.getDate() === now.getDate()
+      if (isToday) {
+        return formatDate(date, 'HH:MM')
+      }
+      if (date.getFullYear() === now.getFullYear()) {
+        return formatDate(date, 'mm-dd HH:MM')
+      }
+      return formatDate(date, 'YYYY-mm-dd HH:MM')
+    },
     handleChatClassMethod () {
       return {
         'is-selectable': this.selectable
@@ -254,6 +303,31 @@ export default {
     padding-left: 40px;
     position: relative;
   }
+  .sdk-chat-panel-box__date{
+    opacity: 0;
+    transition: opacity .2s;
+  }
+  .sdk-chat-panel-box:hover{
+    .sdk-chat-panel-box__date{
+      opacity: 1;
+    }
+  }
+}
+.sdk-wechat-chat-panel__item{
+  width: 100%;
+  .sdk-wechat-chat-panel__time + .sdk-wechat-panel-item{
+    .sdk-wechat-chat-panel__checkbox{
+      transform: translateY(calc(-50% + 16px));
+    }
+  }
+}
+.sdk-wechat-chat-panel__time{
+  padding: 8px 0 5px;
+  color: #999;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  user-select: none;
 }
 .sdk-wechat-chat-panel__checkbox{
   position: absolute;

package/components/wechat-chat-panel/util.js

@@ -0,0 +1,75 @@
+const DAY_MILLISECONDS = 24 * 60 * 60 * 1000
+
+function parseTime (value) {
+  if (value === null || value === undefined || value === '') {
+    return null
+  }
+  const date = new Date(typeof value === 'string' && /^[0-9]+$/.test(value) ? Number(value) : value)
+  const time = date.getTime()
+  return isNaN(time) ? null : time
+}
+
+function getLastMessage (messages) {
+  if (!Array.isArray(messages) || !messages.length) {
+    return
+  }
+  return messages[messages.length - 1]
+}
+
+function getPreviousGroupMessage (groups, currentKey) {
+  const keys = Object.keys(groups || {})
+  const currentIndex = keys.indexOf(String(currentKey))
+  for (let index = currentIndex - 1; index >= 0; index--) {
+    const message = getLastMessage(groups[keys[index]])
+    if (message) {
+      return message
+    }
+  }
+}
+
+export function getPreviousMessage (data, message, timeField = 'wechatTime') {
+  if (!data || !message) {
+    return
+  }
+  if (Array.isArray(data)) {
+    const index = data.indexOf(message)
+    return index > 0 ? data[index - 1] : undefined
+  }
+
+  const time = parseTime(message[timeField])
+  if (time === null) {
+    return
+  }
+  const day = Math.floor(time / DAY_MILLISECONDS)
+  const milliseconds = time - day * DAY_MILLISECONDS
+  const dayData = data[day]
+  if (!dayData) {
+    return
+  }
+
+  const messages = dayData[milliseconds]
+  if (Array.isArray(messages)) {
+    const messageIndex = messages.indexOf(message)
+    if (messageIndex > 0) {
+      return messages[messageIndex - 1]
+    }
+  }
+
+  const previousMessage = getPreviousGroupMessage(dayData, milliseconds)
+  if (previousMessage) {
+    return previousMessage
+  }
+
+  const dayKeys = Object.keys(data)
+  const currentDayIndex = dayKeys.indexOf(String(day))
+  for (let index = currentDayIndex - 1; index >= 0; index--) {
+    const previousDay = data[dayKeys[index]]
+    const previousDayKeys = Object.keys(previousDay || {})
+    for (let groupIndex = previousDayKeys.length - 1; groupIndex >= 0; groupIndex--) {
+      const message = getLastMessage(previousDay[previousDayKeys[groupIndex]])
+      if (message) {
+        return message
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aochuang/client-sdk",
-  "version": "1.0.308",
+  "version": "1.0.310",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"