@aochuang/client-sdk 1.0.308 → 1.0.309

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

@@ -15,38 +15,46 @@
       <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="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>
+      <div class="sdk-wechat-chat-panel__item">
+        <div
+          v-if="handleShowTimeDivider(item)"
+          class="sdk-wechat-chat-panel__time"
+        >
+          {{ formatMessageTime(parseMessageTime(item.wechatTime)) }}
+        </div>
+        <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>
-        <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="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 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 +68,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 +157,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 +301,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.309",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"