@aochuang/client-sdk 1.0.278

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

@@ -0,0 +1,350 @@
+<template>
+  <div class="sdk-chat-panel-box" :class="[dir ? 'is-dir-' + dir : '', {'is-blank': blank, 'is-recalled': recalled}]">
+    <div class="sdk-chat-panel-box__avatar" @contextmenu="handleUserAvatarContextmenu" @click="handleUserAvatarClick">
+      <template v-if="userData && userData.avatar">
+        <sdk-user-avatar :src="userData.avatar"></sdk-user-avatar>
+      </template>
+    </div>
+    <div class="sdk-chat-panel-box__main">
+      <div class="sdk-chat-panel-box__head">
+        <span class="sdk-chat-panel-box__name">
+          {{ userData ? userData.name : '' }}
+        </span>
+      </div>
+      <div class="sdk-chat-panel-box__body" @contextmenu="handleBodyContextMenu">
+        <component 
+          class="sdk-chat-panel-box__msg"
+          :is="inner_href ? 'a' : 'div'"
+          :href="inner_href"
+          v-bind="inner_href ? {'target': '_blank'} : {}"
+        >
+          <b class="sdk-chat-panel-box__msg-arrow" v-if="dir && !blank">
+            <b class="sdk-chat-panel-box__msg-arrow-main" :style="arrowStyle"></b>
+          </b>
+          <div class="sdk-chat-panel-box__msg-main" :style="style">
+            <slot :update-prop="handleUpdateProp" :set-foot-vnode="handleSetFootVnode" :update-style="handleUpdateStyle"></slot>
+          </div>
+        </component>
+        <div class="sdk-chat-panel-box__append">
+          <slot name="append" :update-prop="handleUpdateProp"></slot>
+        </div>
+      </div>
+      <div class="sdk-chat-panel-box__foot">
+        <component :is="inner_foot_vnode"></component>
+        <slot name="foot"></slot>
+        <span class="sdk-chat-panel-box__date">
+          {{ sendTime }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import SdkUserAvatar from '../../common/user-avatar'
+import { formatDate } from '../../utils/date'
+
+export default {
+  name: 'SdkChatPanelBox',
+  components: {
+    SdkUserAvatar
+  },
+  inject: {
+    SdkChatPanelChat: {
+      from: 'SdkChatPanelChat',
+      default: null
+    }
+  },
+  provide () {
+    return {
+      SdkChatPanelBox: this
+    }
+  },
+  props: {
+    dir: {
+      type: String,
+      validator (value) {
+        return ['left', 'right'].indexOf(value) >= 0
+      }
+    },
+    href: {
+      type: String
+    },
+    target: {
+      type: String,
+      default: '_blank'
+    },
+    data: {
+      type: Object
+    },
+    bgColor: {
+      type: String
+    },
+    brColor: {
+      type: String
+    },
+    width: {
+      type: String
+    },
+    maxWidth: {
+      type: String
+    },
+    blank: {
+      type: Boolean,
+      default: false
+    },
+    fetchUserMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      /**
+       * {
+       *    name: xxx,
+       *    avatar: null
+       * }
+      */
+      userData: null,
+      inner_href: this.href,
+      inner_foot_vnode: null,
+      inner_bg_color: this.bgColor,
+      inner_br_color: this.brColor
+    }
+  },
+  computed: {
+    recalled () {
+      return this.data.recalled
+    },
+    msgTimeField () {
+      return this.SdkChatPanelChat.msgTimeField
+    },
+    sendTime () {
+      return formatDate(this.data[this.msgTimeField], 'YYYY-mm-dd HH:MM')
+    },
+    innerBgColor () {
+      let bgColor
+      if (this.inner_bg_color) {
+        bgColor = this.inner_bg_color
+      } else {
+        if (this.dir === 'right') {
+          bgColor = '#c9e3fc'
+        } else {
+          bgColor = '#e5e5e6'
+        }
+      }
+      return bgColor
+    },
+    innerBrColor () {
+      let brColor
+      if (this.inner_br_color) {
+        brColor = this.inner_br_color
+      } else {
+        if (this.innerBgColor === '#e5e5e6') {
+          brColor = '#ebebeb'
+        } else {
+          brColor = this.innerBgColor
+        }
+      }
+      return brColor
+    },
+    style () {
+      if (this.blank) {
+        return
+      }
+      return {
+        'width': this.width,
+        'max-width': this.maxWidth,
+        'background-color': this.innerBgColor,
+        'border-color': this.innerBrColor
+      }
+    },
+    arrowStyle () {
+      if (this.blank) {
+        return
+      }
+      return {
+        'background-color': this.innerBgColor,
+        'border-color': this.innerBrColor
+      }
+    }
+  },
+  watch: {
+    data () {
+      this.refreshUserData()
+    },
+    brColor () {
+      this.inner_br_color = this.brColor
+    },
+    bgColor () {
+      this.inner_bg_color = this.bgColor
+    }
+  },
+  created () {
+    this.refreshUserData()
+  },
+  methods: {
+    refreshUserData () {
+      if (!this.fetchUserMethod) {
+        return
+      }
+      this.loading = true
+      this.fetchUserMethod({
+        data: this.data
+      }).then(rs => {
+        this.userData = rs
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleUserAvatarContextmenu (evt) {
+      this.$emit('user-avatar-contextmenu', evt)
+    },
+    handleUserAvatarClick (evt) {
+      this.$emit('user-avatar-click', evt)
+    },
+    handleUpdateProp (name, value) {
+      if (!['href'].includes(name)) {
+        throw new Error('不支持的更新属性名称' + name)
+      }
+      this.$set(this, 'inner_' + name, value)
+    },
+    /**
+     * {
+     *    brColor: null,
+     *    bgColor: null
+     * }
+    */
+    handleUpdateStyle (style) {
+      if (!style) {
+        return
+      }
+      if (style.bgColor) {
+        this.inner_bg_color = style.bgColor
+      }
+      if (style.brColor) {
+        this.inner_br_color = style.bgColor
+      }
+    },
+    handleSetFootVnode (vnode) {
+      this.inner_foot_vnode = vnode
+    },
+    handleBodyContextMenu (evt) {
+      this.SdkChatPanelChat && this.SdkChatPanelChat.triggerMessageContentContextMenu(evt)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-panel-box{
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  &.is-dir-left {
+    flex-direction: row;
+    .sdk-chat-panel-box__avatar{
+      margin-right: 12px;
+    }
+    .sdk-chat-panel-box__msg-arrow{
+      position: absolute;
+      left: -6px;
+    }
+    .sdk-chat-panel-box__msg-arrow-main{
+      left: 2px;
+    }
+  }
+  &.is-dir-right {
+    flex-direction: row-reverse;
+    .sdk-chat-panel-box__avatar{
+      margin-left: 12px;
+    }
+    .sdk-chat-panel-box__msg-arrow{
+      position: absolute;
+      right: -6px;
+    }
+    .sdk-chat-panel-box__body{
+      flex-direction: row-reverse;
+    }
+    .sdk-chat-panel-box__main{
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    .sdk-chat-panel-box__msg-arrow-main{
+      right: 2px;
+    }
+  }
+  &.is-recalled{
+    .sdk-chat-panel-box__msg{
+      opacity: .6;
+    }
+  }
+}
+.sdk-chat-panel-box__avatar{
+  margin-top: 24px;
+  width: 32px;
+  height: 32px;
+  background: #eee;
+  border-radius: 3px;
+}
+.sdk-chat-panel-box__head{
+  line-height: 24px;
+  min-height: 24px;
+}
+.sdk-chat-panel-box__name{
+  font-size: 12px;
+  color: #888;
+}
+.sdk-chat-panel-box__body{
+  display: flex;
+  flex-direction: row;
+  align-items: center; 
+}
+.sdk-chat-panel-box__foot{
+  line-height: 24px;
+}
+.sdk-chat-panel-box__date{
+  font-size: 12px;
+  color: #888;
+}
+.sdk-chat-panel-box__msg{
+  position: relative;
+  text-decoration: none;
+}
+.sdk-chat-panel-box__msg-main{
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  border-color: transparent;
+  transition: all .25s;
+}
+a.sdk-chat-panel-box__msg{
+  &:hover{
+    .sdk-chat-panel-box__msg-main {
+      background-color: #f9fafe!important;
+      border-color: #1aa2e8!important;
+    }
+    .sdk-chat-panel-box__msg-arrow-main{
+      background-color: #f9fafe!important;
+      border-color: #1aa2e8!important;
+    }
+  }
+}
+.sdk-chat-panel-box__msg-arrow{
+  position: absolute;
+  top: 10px;
+  z-index: 3;
+  width: 7px;
+  height: 20px;
+  overflow: hidden;
+}
+.sdk-chat-panel-box__msg-arrow-main{
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border: 1px solid transparent;
+  position: absolute;
+  top: 3px;
+  transition: all .3s;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="sdk-chat-panel-chat" :class="className" :data-msg-type="item.msgType">
+    <ui-button type="link" v-if="!isInnerMsg && showContextBtn && dir === 'right'" class="sdk-chat-panel-chat__context" @click="handleViewContextClick">查看上下文</ui-button>
+    <div class="sdk-chat-panel-chat__main">
+      <slot name="chat" :item="item" :dir="dir">
+        <component 
+          :is="control" 
+          :data="item" 
+          :dir="dir"
+          :fetch-user-method="fetchUserMethod"
+        >
+          <template slot="append" slot-scope="scope">
+            <slot name="chat-append" :item="item"></slot>
+          </template>
+          <template slot="foot" slot-scope="scope">
+            <slot name="chat-foot" :item="item"></slot>
+          </template>
+        </component>
+      </slot>
+    </div>
+    <ui-button type="link" v-if="!isInnerMsg && showContextBtn && dir === 'left'" class="sdk-chat-panel-chat__context" @click="handleViewContextClick">查看上下文</ui-button>
+  </div>
+</template>
+<script>
+import ChatPanelInnerMsg from './chat-panel-inner-msg'
+import ChatPanelBox from './chat-panel-box'
+
+export default {
+  name: 'SdkChatPanelChat',
+  components: {
+    ChatPanelBox
+  },
+  provide () {
+    return {
+      SdkChatPanelChat: this
+    } 
+  },
+  props: {
+    dir: {
+      type: String,
+      required: true,
+      validator (value) {
+        return ['left', 'right'].indexOf(value) >= 0
+      }
+    },
+    id: {
+      type: [Number, String]
+    },
+    item: {
+      type: Object
+    },
+    msgTimeField: {
+      type: String,
+      requried: true
+    },
+    renderControl: {
+      type: Function
+    },
+    fetchUserMethod: {
+      type: Function
+    },
+    showContextBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    className () {
+      const cls = []
+      if (this.dir) {
+        cls.push('is-' + this.dir)
+      }
+      return cls
+    },
+    isInnerMsg () {
+      return this.item.msgType === '_EMPTY_'
+    },
+    control () {
+      if (this.item && this.item.msgType === '_EMPTY_') {
+        return ChatPanelInnerMsg
+      }
+      if (this.renderControl) {
+        const rs = this.renderControl({
+          item: this.item
+        })
+        if (rs) {
+          return rs
+        }
+      } 
+      return null
+    }
+  },
+  methods: {
+    handleViewContextClick () {
+      this.$emit('view-context')
+    },
+    handleContentClick () {
+      this.$emit('content-click')
+    },
+    triggerMessageContentContextMenu (evt) {
+      this.$emit('contextmenu', evt)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-panel-chat{
+  padding: 3px 12px;
+  transition: background-color .25s;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .sdk-chat-panel-chat__main{
+    flex: 1;
+    min-width: 0;
+  }
+  &:hover {
+    background-color: rgba(0,0,0,.04);
+  }
+}
+</style>