@aochuang/client-sdk 1.0.278

package/common/context-menu/context-menu.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    class="ui-context-menu"
+    :class="{'is-active': boxVisible}"
+    v-show="innerData.length"
+  >
+    <ui-context-menu-box
+      ref="menubox"
+      :visible="boxVisible && innerShowData.length > 0"
+      :left="boxLeft"
+      :top="boxTop"
+    >
+      <template
+        v-for="(item, index) in innerData"
+      >
+        <ui-context-menu-group
+          v-if="item.items && item.visible !== false"
+          v-bind="item"
+          :active="handleRenderIsActive(item)"
+          :key="'group-' + index"
+          @mouseenter="handleItemMouseEnter(item)"
+          @item-click="handleGroupItemClick"
+          @group-click="handleGroupClick"
+        ></ui-context-menu-group>
+        <ui-context-menu-item
+          v-else-if="item.visible !== false"
+          v-bind="item"
+          :key="'item' + index"
+          :active="handleRenderIsActive(item)"
+          @mouseleave="handleItemMouseLeave(item)"
+          @mouseenter="handleItemMouseEnter(item)"
+          @click="handleItemClick(item)"
+        ></ui-context-menu-item>
+      </template>
+    </ui-context-menu-box>
+  </div>
+</template>
+<script>
+import UiContextMenuBox from './context-menu-box'
+import UiContextMenuGroup from './context-menu-group'
+import UiContextMenuItem from './context-menu-item'
+
+import {
+  getOptimalCoordinate,
+  getWindowRect,
+  createRectByXY,
+  getElementRect
+} from './utils.js'
+
+export default {
+  name: 'UiContextMenu',
+  components: {
+    UiContextMenuBox,
+    UiContextMenuGroup,
+    UiContextMenuItem
+  },
+  props: {
+    value: {
+      type: Boolean
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      boxVisible: false,
+      activeSubItem: null,
+      boxLeft: 0,
+      boxTop: 0
+    }
+  },
+  computed: {
+    innerData () {
+      return (this.data).filter(v => {
+        if (typeof v.visible === 'function') {
+          return v.visible()
+        } else {
+          return v.visible !== false
+        }
+      })
+    },
+    innerShowData () {
+      return this.innerData.filter(v => !v.divided)
+    }
+  },
+  mounted () {
+    window.document.addEventListener('mousewheel', this.handleDocumentMouseWheel)
+    window.document.addEventListener('mousedown', this.handleDocumentMouseDown)
+    // window.document.addEventListener('contextmenu', this.handleDocumentContextMenu)
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        val ? this.open(this.left, this.top) : this.close()
+      }
+    }
+  },
+  methods: {
+    handleGroupClick () {
+      this.close()
+    },
+    handleGroupItemClick ({ item }) {
+      if (!item.disabled) {
+        if (item.click) {
+          item.click({
+            item
+          })
+        }
+        this.$emit('item-click', {
+          item
+        })
+      }
+      this.close()
+    },
+    handleItemClick (item) {
+      const disabled = typeof item.disabled === 'function' ? item.disabled() : item.disabled
+      if (!disabled) {
+        if (item.click) {
+          item.click({
+            item
+          })
+        }
+        this.$emit('item-click', {
+          item
+        })
+      }
+      this.close()
+    },
+    handleDocumentMouseWheel (e) {
+      if (this.boxVisible) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    },
+    handleDocumentMouseDown (e) {
+      this.close()
+    },
+    handleItemMouseEnter (item) {
+      const disabled = typeof item.disabled === 'function' ? item.disabled() : item.disabled
+      if (disabled) {
+        this.activeSubItem = null
+      } else {
+        this.activeSubItem = item
+      }
+    },
+    handleItemMouseLeave (item) {
+      this.activeSubItem = null
+    },
+    handleRenderIsActive (item) {
+      return this.activeSubItem === item
+    },
+    open (x = 0, y = 0) {
+      const baseRect = createRectByXY(x, y)
+      const windowRect = getWindowRect()
+      const elementRect = getElementRect(this.$refs.menubox.$el)
+      const rect = getOptimalCoordinate(baseRect, windowRect, elementRect)
+      this.boxVisible = true
+      this.boxLeft = rect.left
+      this.boxTop = rect.top
+      this.$emit('input', true)
+    },
+    close () {
+      this.boxVisible = false
+      this.activeSubItem = null
+      this.$emit('input', false)
+    }
+  },
+  beforeUnmount () {
+    window.document.removeEventListener('mousewheel', this.handleDocumentMouseWheel)
+    window.document.removeEventListener('mousedown', this.handleDocumentMouseDown)
+    // window.document.removeEventListener('contextmenu', this.handleDocumentContextMenu)
+  }
+}
+</script>
+<style>
+.ui-context-menu * {
+  box-sizing: content-box;
+}
+.ui-context-menu{
+  color: #333;
+}
+.ui-context-menu.is-active{
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30000;
+}
+</style>

package/common/context-menu/index.js

@@ -0,0 +1,3 @@
+import ContextMenu from './context-menu.vue'
+
+export default ContextMenu

package/common/context-menu/utils.js

@@ -0,0 +1,138 @@
+function getSumRangeRect (baseRect, rangeRect) {
+  const rt = {
+    left: baseRect.right,
+    top: baseRect.top - rangeRect.top,
+    bottom: rangeRect.bottom,
+    right: rangeRect.right
+  }
+  rt.width = rt.right - rt.left
+  rt.height = rt.bottom - rt.top
+  const rb = {
+    left: baseRect.right,
+    top: rangeRect.top,
+    right: rangeRect.right,
+    bottom: rangeRect.bottom
+  }
+  rb.width = rb.right - rb.left
+  rb.height = rb.bottom - rb.top
+  const lt = {
+    left: rangeRect.left,
+    top: baseRect.top - rangeRect.top,
+    bottom: rangeRect.bottom,
+    right: baseRect.left
+  }
+  lt.width = lt.right - lt.left
+  lt.height = lt.bottom - lt.top
+  const lb = {
+    left: rangeRect.left,
+    top: rangeRect.top,
+    right: baseRect.left,
+    bottom: rangeRect.bottom
+  }
+  lb.width = lb.right - lb.left
+  lb.height = lb.bottom - lb.top
+  return {
+    rt,
+    rb,
+    lt,
+    lb
+  }
+}
+
+/**
+ * 获取最佳定位坐标
+ * @param { Object } baseRect - 基点容器坐标大小
+ * @param { Object } rangeRect - 范围容器坐标大小
+ * @param { Object } elementRect - 元素容器坐标大小
+*/
+export function getOptimalCoordinate (baseRect, rangeRect, elementRect) {
+  const { rt, rb, lt, lb } = getSumRangeRect(baseRect, rangeRect)
+  let returnRect = null
+  if (rt.width >= elementRect.width && rt.height >= elementRect.height) {
+    returnRect = {
+      left: rt.left,
+      top: rt.top,
+      right: rt.left + elementRect.width,
+      bottom: rt.top + elementRect.height,
+      width: elementRect.width,
+      height: elementRect.height
+    }
+  } else if (rb.width >= elementRect.width && rb.height >= elementRect.height) {
+    returnRect = {
+      left: rb.left,
+      right: rb.left + elementRect.width,
+      top: rb.bottom - elementRect.height,
+      bottom: rb.bottom,
+      width: elementRect.width,
+      height: elementRect.height
+    }
+  } else if (lt.width >= elementRect.width && lt.height >= elementRect.height) {
+    returnRect = {
+      left: lt.right - elementRect.width,
+      right: lt.right,
+      top: lt.top,
+      bottom: lt.top + elementRect.height,
+      width: elementRect.width,
+      height: elementRect.height
+    }
+  } else if (lb.width >= elementRect.width && lb.height >= elementRect.height) {
+    returnRect = {
+      left: lt.right - elementRect.width,
+      right: lt.right,
+      top: lb.bottom - elementRect.height,
+      bottom: lb.bottom,
+      width: elementRect.width,
+      height: elementRect.height
+    }
+  } else {
+    returnRect = {
+      left: rt.left,
+      top: rt.top,
+      right: rt.left + elementRect.width,
+      bottom: rt.top + elementRect.height,
+      width: elementRect.width,
+      height: elementRect.height
+    }
+  }
+  return returnRect
+}
+
+/**
+ * 获取窗口坐标大小
+*/
+export function getWindowRect () {
+  return {
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    right: window.innerWidth,
+    bottom: window.innerHeight
+  }
+}
+
+/**
+ * 根据鼠标时间对象创建坐标尺寸
+*/
+export function createRectByXY (x, y) {
+  return {
+    left: x,
+    top: y,
+    right: x,
+    bottom: y,
+    width: 0,
+    height: 0
+  }
+}
+
+export function getElementRect (element, offsetY = 0) {
+  const rect = element.getBoundingClientRect()
+  return {
+    left: rect.left,
+    top: rect.top + offsetY,
+    right: rect.right,
+    bottom: rect.bottom + offsetY,
+    width: rect.width,
+    height: rect.height
+  }
+}

package/common/friend-avatar/default.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755860383442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4771" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m72.576 0l878.848 0q72.576 0 72.576 72.576l0 878.848q0 72.576-72.576 72.576l-878.848 0q-72.576 0-72.576-72.576l0-878.848q0-72.576 72.576-72.576Z" fill="#EFEFEE" p-id="4772"></path><path d="M508.928 750.976h-220.16c-23.808 0-32.512-9.6-33.408-33.408a62.336 62.336 0 0 1 39.68-64c45.952-21.504 91.392-44.416 136.96-66.944 27.776-13.696 32-34.944 12.8-58.368a162.048 162.048 0 0 1-41.088-112.128 309.76 309.76 0 0 1 2.176-64 106.368 106.368 0 0 1 163.712-62.72 102.4 102.4 0 0 1 46.08 87.04 344.704 344.704 0 0 1-3.072 73.472 192 192 0 0 1-41.984 82.432c-15.36 18.688-12.8 38.4 8.704 50.304 40.448 21.376 82.048 40.576 123.136 60.8 19.2 9.344 39.936 15.872 52.736 36.48a72.576 72.576 0 0 1 7.936 48.256c-2.176 15.36-12.8 22.784-30.976 22.784z" fill="#C2C1C1" p-id="4773"></path></svg>

package/common/friend-avatar/friend-avatar.vue

@@ -0,0 +1,29 @@
+<script>
+import SdkAvatar from '../avatar'
+
+export default {
+    name: 'SdkFriendAvatar',
+    functional: true,
+    props: {
+		src: {
+			type: String
+		},
+		round: {
+			type: Boolean
+		},
+		size: {
+			type: String,
+			default: 'small'
+		}
+    },
+    render (h, c) {
+        const { src, ...nextProps } = c.props
+        return h(SdkAvatar, {
+            class: ['sdk-friend-avatar', c.data.staticClass],
+            props: Object.assign({}, nextProps, {
+                src: src || require('./default.svg')
+            })
+        })
+    }
+}
+</script>

package/common/friend-avatar/index.js

@@ -0,0 +1,3 @@
+import FriendAvatar from './friend-avatar.vue'
+
+export default FriendAvatar

package/common/image/index.js

@@ -0,0 +1,3 @@
+import { Image } from '@aochuang/common/components'
+
+export default Image

package/common/index.js

@@ -0,0 +1,17 @@
+import Badge from './badge'
+import Avatar from './avatar'
+import UserAvatar from './user-avatar'
+import FriendAvatar from './friend-avatar'
+import RoomAvatar from './room-avatar'
+import ContextMenu from './context-menu'
+import ScrollLoadMore from './scroll-load-more'
+
+export default {
+    Avatar,
+    UserAvatar,
+    FriendAvatar,
+    RoomAvatar,
+    Badge,
+    ContextMenu,
+    ScrollLoadMore
+}

package/common/room-avatar/default.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1755860383442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4771" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M0 0m72.576 0l878.848 0q72.576 0 72.576 72.576l0 878.848q0 72.576-72.576 72.576l-878.848 0q-72.576 0-72.576-72.576l0-878.848q0-72.576 72.576-72.576Z" fill="#EFEFEE" p-id="4772"></path>
+<path d="M512.03580317 303.16011854a101.43037616 101.43037616 0 1 0 0 202.86075235 101.43037616 101.43037616 0 0 0 0-202.86075235zM380.42335603 351.74501811a77.585466 77.585466 0 1 0 24.31035136 145.46827333c4.04575804-2.11238694 6.08653863-3.186482 6.55197982-5.33467209 0.4654412-2.1481901-1.07409506-4.22477388-4.26057704-8.4137446A130.71736793 130.71736793 0 0 1 380.70978136 404.59049471c0-14.14225153 2.25559961-27.7832587 6.40876716-40.56498984 1.61114258-5.01244358 2.43461545-7.51866537 1.25311088-9.38043013-1.1457014-1.86176476-3.43710416-2.21979644-7.94830337-2.86425347zM386.15186297 549.95135854c4.94083724-3.04326932 11.67183291-6.87420834 18.51023809-10.56193469 9.02239844-4.83342774 13.56940085-7.26804319 13.13976281-10.52613152-0.39383486-3.22228515-5.01244358-4.40378971-14.28546421-6.65938933a145.89791136 145.89791136 0 0 0-116.57511641 20.90905037 250.90860436 250.90860436 0 0 1-5.01244357 3.22228515c-9.38043013 5.9075228-24.99061156 15.78919729-35.55254626 27.46103019-6.73099566 7.37545268-13.42618817 17.47194619-14.64349589 30.00305515-1.28891407 13.35458183 3.93834852 25.8498876 14.07064519 36.73405081 13.56940085 14.50028322 30.07466148 27.81906187 54.49242236 31.54259139 5.72850695 0.89507921 8.59276042 1.32471724 10.3113125-0.4654412 1.68274892-1.79015842 1.07409506-5.15565626-0.214819-11.92245509a73.07426677 73.07426677 0 0 1-0.85927605-21.33868838c2.5062218-24.09553236 16.14722896-41.60328172 26.49434464-52.1652164 16.1114258-16.3262448 38.30939022-29.32279494 50.12443581-36.23280645zM619.33789894 539.38942386c6.83840517 3.68772636 13.56940085 7.51866537 18.51023809 10.56193468 11.81504558 6.91001151 34.01301 19.90656165 50.1244358 36.23280644 10.34711568 10.56193469 23.98812285 28.06968405 26.49434464 52.16521641 0.7876697 7.44705904 0.42963802 14.57188955-0.82347288 21.33868838-1.28891407 6.76679885-1.93337108 10.16809983-0.214819 11.92245509 1.71855208 1.79015842 4.5470024 1.3605204 10.27550933 0.46544119 24.41776087-3.68772636 40.9588247-17.04230817 54.49242235-31.54259138 10.13229667-10.88416321 15.39536242-23.34366582 14.0706452-36.73405081-1.21730773-12.53110895-7.91250022-22.62760245-14.6434959-30.00305515-10.56193469-11.67183291-26.13631296-21.5535074-35.51674308-27.46103019l-5.01244358-3.22228515a145.89791136 145.89791136 0 0 0-116.61091957-20.90905036c-9.23721745 2.25559961-13.89162935 3.40130101-14.32126737 6.65938933-0.35803168 3.25808833 4.15316753 5.69270379 13.17556597 10.52613151zM612.7143128 491.87861935c-0.4654412-2.1481901 1.07409506-4.22477388 4.26057703-8.4137446A130.71736793 130.71736793 0 0 0 643.29021864 404.59049471c0-14.14225153-2.25559961-27.7832587-6.37296399-40.56498984-1.64694575-5.01244358-2.43461545-7.51866537-1.28891405-9.38043013 1.18150456-1.86176476 3.43710416-2.21979644 7.94830337-2.86425347a77.585466 77.585466 0 1 1-24.31035136 145.46827333c-4.00995487-2.1481901-6.08653863-3.22228515-6.55197982-5.37047526z" fill="#C2C1C1" p-id="3996"></path><path d="M409.17330026 571.03942475a195.84333132 195.84333132 0 0 1 205.76080898-1e-8c1.86176476 1.1457014 4.18897071 2.5062218 6.9100115 4.08156121 12.20888044 7.16063367 31.65000089 18.54604125 44.89717322 31.97222941 8.30633507 8.48535093 16.61267016 20.01397116 18.11640322 34.37104168 1.61114258 15.39536242-4.90503407 29.6092203-17.36453668 41.92551024-20.55101869 20.33619967-46.04287461 37.45011417-79.44723075 37.45011418H436.02567658c-33.36855297 0-58.86040889-17.11391451-79.41142757-37.45011418-12.45950261-12.31628994-18.97567927-26.56595097-17.36453668-41.88970707 1.50373308-14.39287372 9.81006815-25.92149394 18.11640322-34.37104169 13.24717233-13.46199133 32.65248962-24.81159572 44.86137005-31.97222941l0.1074095-0.07160634a346.5746704 346.5746704 0 0 0 6.80260199-4.04575802z" fill="#C2C1C1" p-id="3997"></path>
+</svg>

package/common/room-avatar/index.js

@@ -0,0 +1,3 @@
+import RoomAvatar from './room-avatar.vue'
+
+export default RoomAvatar

package/common/room-avatar/room-avatar.vue

@@ -0,0 +1,29 @@
+<script>
+import SdkAvatar from '../avatar'
+
+export default {
+    name: 'SdkRoomAvatar',
+    functional: true,
+    props: {
+		src: {
+			type: String
+		},
+		round: {
+			type: Boolean
+		},
+		size: {
+			type: String,
+			default: 'small'
+		}
+    },
+    render (h, c) {
+        const { src, ...nextProps } = c.props
+        return h(SdkAvatar, {
+            class: ['sdk-room-avatar', c.data.staticClass],
+            props: Object.assign({}, nextProps, {
+                src: src || require('./default.svg')
+            })
+        })
+    }
+}
+</script>

package/common/scroll-load-more/index.js

@@ -0,0 +1,3 @@
+import ScrollLoadMore from './scroll-load-more.vue'
+
+export default ScrollLoadMore

package/common/scroll-load-more/scroll-load-more.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="sdk-scroll-load-more" @scroll="handleScroll">
+        <template v-if="reloading">
+            <div class="sdk-scroll-load-more__reloading">
+                <slot name="loading">
+                    数据加载中...
+                </slot>
+            </div>
+        </template>
+        <template v-else-if="!data || !data.length">
+            <div class="sdk-scroll-load-more__empty">暂无相关数据</div>
+        </template>
+        <template v-else>
+            <slot :loading="loading" :reloading="reloading" :not-more="notMore"></slot>
+        </template>
+        <template v-if="!reloading && loading">
+            <div class="sdk-scroll-load-more__loading">
+                <ui-loading size="mini" text="数据加载中..."></ui-loading>
+            </div>
+        </template>
+        <template v-else-if="showLoadMoreButton">
+            <div class="sdk-scroll-load-more__loadmore" @click="handleLoadMoreClick">加载更多数据</div>
+        </template>
+        <template v-else-if="notMore && (data && pageSize && data.length > pageSize)">
+            <div class="sdk-scroll-load-more__notmore">数据加载完毕~</div>
+        </template>
+    </div>
+</template>
+<script>
+import UiLoading from '@aochuang/common/components/loading'
+
+export default {
+    name: 'SdkScrollLoadMore',
+    components: {
+        UiLoading
+    },
+    props: {
+        data: {
+            type: Array
+        },
+        pageSize: {
+            type: [Number, Boolean],
+            default: 40
+        },
+        autoLoad: {
+            type: Boolean,
+            default: true
+        },
+        queryMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            reloading: false,
+            notMore: false,
+            loading: false
+        }
+    },
+    computed: {
+        showLoadMoreButton () {
+            return !this.reloading && !this.loading && !this.notMore && this.pageSize && this.data && this.data.length
+        }
+    },
+    created () {
+        if (this.autoLoad) {
+            this.reload()
+        }
+    }, 
+    methods: {
+        scrollTop (top) {
+            this.$el.scrollTop = top
+        },
+        handleScroll (evt) {
+            if (this.loading || this.notMore) {
+                this.$emit('scroll', evt)
+            } else {
+                const scrollTop = evt.target.scrollTop + evt.target.clientHeight
+                if (evt.target.scrollHeight - 10 <= scrollTop) {
+                    if (this.lastScrollTop === scrollTop) {
+                    return
+                    }
+                    this.lastScrollTop = scrollTop
+                    this.loadMoreData()
+                }
+                this.$emit('scroll', evt)
+            }
+        },
+        reload (filters) {
+            this.pageIndex = 0
+            this.notMore = false
+            this.$el && (this.$el.scrollTop = 0)
+            this.reloading = true
+            return Promise.all([this.loadData(false, filters)]).then(rs => {
+                return rs[0]
+            }).finally(() => {
+                this.reloading = false
+            })
+        },
+        loadMoreData () {
+            if (this.notMore) {
+                return
+            }
+            this.pageIndex++
+            return this.loadData()
+        },
+        handleLoadMoreClick () {
+            if (this.loading) {
+                return
+            }
+            return this.loadMoreData()
+        },
+        loadData (isLoading, filters) {
+            if (!this.queryMethod) {
+                return Promise.reject()
+            }
+            if (this.loading) {
+                return
+            }
+            const params = {}
+            if (this.pageSize) {
+                params.pageIndex = this.pageIndex
+                params.pageSize = this.pageSize
+            }
+            if (isLoading !== false) {
+                this.loading = true
+            }
+            return this.queryMethod(Object.assign({}, filters, {
+                isReload: params.pageIndex === 0
+            }, params)).then((data) => {
+                if (!this.pageSize) {
+                    this.notMore = true
+                } else {
+                    if (data && data.length < this.pageSize) {
+                        this.notMore = true
+                    }
+                }
+                return data
+            }).finally(() => {
+                if (isLoading !== false) {
+                    this.loading = false
+                }
+            })
+        }
+    }
+}
+</script>
+<style>
+.sdk-scroll-load-more{
+    height: 100%;
+    overflow: auto;
+    position: relative;
+}
+.sdk-scroll-load-more__reloading,
+.sdk-scroll-load-more__empty{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 12px;
+    padding: 24px 12px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+}
+.sdk-scroll-load-more__notmore{
+    text-align: center;
+    color: #999;
+    padding: 12px;
+}
+.sdk-scroll-load-more__loadmore{
+    text-align: center;
+    color: #52a1e4;
+    padding: 12px;
+    cursor: pointer;
+}
+.sdk-scroll-load-more__loadmore:hover{
+    color: #2b82cf;
+}
+.sdk-scroll-load-more__loading{
+    color: #999;
+    padding: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+</style>

package/common/user-avatar/default.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755860383442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4771" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0m72.576 0l878.848 0q72.576 0 72.576 72.576l0 878.848q0 72.576-72.576 72.576l-878.848 0q-72.576 0-72.576-72.576l0-878.848q0-72.576 72.576-72.576Z" fill="#EFEFEE" p-id="4772"></path><path d="M508.928 750.976h-220.16c-23.808 0-32.512-9.6-33.408-33.408a62.336 62.336 0 0 1 39.68-64c45.952-21.504 91.392-44.416 136.96-66.944 27.776-13.696 32-34.944 12.8-58.368a162.048 162.048 0 0 1-41.088-112.128 309.76 309.76 0 0 1 2.176-64 106.368 106.368 0 0 1 163.712-62.72 102.4 102.4 0 0 1 46.08 87.04 344.704 344.704 0 0 1-3.072 73.472 192 192 0 0 1-41.984 82.432c-15.36 18.688-12.8 38.4 8.704 50.304 40.448 21.376 82.048 40.576 123.136 60.8 19.2 9.344 39.936 15.872 52.736 36.48a72.576 72.576 0 0 1 7.936 48.256c-2.176 15.36-12.8 22.784-30.976 22.784z" fill="#C2C1C1" p-id="4773"></path></svg>

package/common/user-avatar/index.js

@@ -0,0 +1,3 @@
+import UserAvatar from './user-avatar.vue'
+
+export default UserAvatar

package/common/user-avatar/user-avatar.vue

@@ -0,0 +1,29 @@
+<script>
+import SdkAvatar from '../avatar'
+
+export default {
+    name: 'SdkUserAvatar',
+    functional: true,
+    props: {
+		src: {
+			type: String
+		},
+		round: {
+			type: Boolean
+		},
+		size: {
+			type: String,
+			default: 'small'
+		}
+    },
+    render (h, c) {
+        const { src, ...nextProps } = c.props
+        return h(SdkAvatar, {
+            class: ['sdk-user-avatar', c.data.staticClass],
+            props: Object.assign({}, nextProps, {
+                src: src || require('./default.svg')
+            })
+        })
+    }
+}
+</script>