Merge pull request #4 from Angus2333/main

uniapp uikit 支持vue2

vue2/components/Appellation.vue

@@ -0,0 +1,59 @@
+<template>
+  <span class="appellation" :style="{ color: color, fontSize: fontSize + 'px'}">{{ appellation }}</span>
+</template>
+
+<script lang="ts" setup>
+import { autorun } from 'mobx';
+import { ref } from '../utils/transformVue'
+
+import { deepClone } from '../utils';
+
+const appellation = ref('')
+const { account, teamId, ignoreAlias, nickFromMsg } = defineProps({
+  account: {
+    type: String,
+    required: true
+  },
+  teamId: {
+    type: String,
+    default: null
+  },
+  ignoreAlias: {
+    type: Boolean,
+    default: false
+  },
+  nickFromMsg: {
+    type: String,
+    default: null
+  },
+  color: {
+    type: String,
+    default: '#333'
+  },
+  fontSize: {
+    type: Number,
+    default: 16
+  }
+})
+
+autorun(() => {
+  appellation.value = deepClone(uni.$UIKitStore.uiStore.getAppellation({
+    account,
+    teamId,
+    ignoreAlias,
+    nickFromMsg
+  }))
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.appellation {
+  color: #333;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

vue2/components/Avatar.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="avatar"
+    :style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
+    @click="handleAvatarClick"
+    @longpress="longpress"
+    @touchend="touchend"
+  > 
+    <!-- 使用遮罩层避免android长按头像会出现保存图片的弹窗 -->
+    <div class="img-mask"></div>
+    <image
+      :lazy-load="true"
+      class="avatar-img"
+      v-if="avatarUrl"
+      :src="avatarUrl"
+      mode="aspectFill"
+    />
+    <div class="avatar-name-wrapper"  :style="{ backgroundColor: color }">
+      <div
+        class="avatar-name-text"
+        :style="{ fontSize: fontSize + 'px' }"
+      >{{ appellation }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { customNavigateTo, customRedirectTo } from '../utils/customNavigate'
+import type { UserNameCard } from '@xkit-yx/im-store'
+import { autorun } from 'mobx'
+import { ref, computed } from '../utils/transformVue'
+import { deepClone } from '../utils';
+
+const props = defineProps({
+  account: {
+    type: String,
+    required: true
+  },
+  teamId: {
+    type: String,
+    default: ''
+  },
+  avatar: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: ''
+  },
+  gotoUserCard: {
+    type: Boolean,
+    default: false
+  },
+  fontSize: {
+    type: String,
+    default: ''
+  },
+  isRedirect: {
+    type: Boolean,
+    default: false
+  },
+})
+const $emit = defineEmits(["onLongpress"]);
+
+const avatarSize = props.size || 42
+const user = ref<UserNameCard>()
+let isLongPress = false // uniapp 长按事件也会触发点击事件，此时需要处理
+const appellation = computed(() => {
+  return uni.$UIKitStore.uiStore.getAppellation({
+    account: props.account,
+    teamId: props.teamId,
+    ignoreAlias: false,
+    nickFromMsg: '',
+  }).slice(0,2)
+})
+autorun(async () => {
+  const data = await uni.$UIKitStore.userStore.getUserActive(props.account)
+  user.value = deepClone(data)
+  
+})
+
+const avatarUrl = computed(() => {
+  user.value = deepClone(uni.$UIKitStore.userStore.users.get(props.account))
+  return props.avatar || user.value?.avatar
+})
+
+const key = `__yx_avatar_color_${props.account}__`
+let color = uni.getStorageSync(key)
+if (!color) {
+  const colorMap: { [key: number]: string } = {
+    0: '#60CFA7',
+    1: '#53C3F3',
+    2: '#537FF4',
+    3: '#854FE2',
+    4: '#BE65D9',
+    5: '#E9749D',
+    6: '#F9B751',
+  }
+  const _color = colorMap[Math.floor(Math.random() * 7)]
+  uni.setStorageSync(key, _color)
+  color = _color
+}
+
+const handleAvatarClick = () => {
+  if (props.gotoUserCard && !isLongPress) {
+    if (props.isRedirect) {
+       if (props.account === uni.$UIKitStore.userStore.myUserInfo.account) {
+        customRedirectTo({
+          url: `/pages/user-card/my-detail/index`,
+        })
+      } else {
+        customRedirectTo({
+          url: `/pages/user-card/friend/index?account=${props.account}`,
+        })
+      }
+    } else {
+       if (props.account === uni.$UIKitStore.userStore.myUserInfo.account) {
+        customNavigateTo({
+          url: `/pages/user-card/my-detail/index`,
+        })
+      } else {
+        customNavigateTo({
+          url: `/pages/user-card/friend/index?account=${props.account}`,
+        })
+      }
+    }
+  }
+}
+
+const longpress = () => {
+  isLongPress = true
+  $emit("onLongpress");
+}
+
+const touchend = () => {
+  setTimeout(() => {
+    isLongPress = false
+  }, 200)
+}
+</script>
+
+<style scoped lang="scss">
+.avatar {
+  overflow: hidden;
+  border-radius: 50%;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.img-mask{
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.avatar-name-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-name-text {
+  color: #fff;
+  size: 14px;
+}
+</style>

vue2/components/Badge.vue

@@ -0,0 +1,64 @@
+<template>
+	<div>
+		<div class="dot" v-if="dot" :style="customStyle"></div>
+		<div class="badge" v-else-if="text" :style="customStyle">{{ text }}</div>
+		<div class="hidden">{{ props.num }}</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed } from '../utils/transformVue'
+
+const props = defineProps({
+    num: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      default: 99
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    customStyle: {
+      type: Object,
+      default: () => {}
+    }})
+const max = props.max || 99
+const text = computed(() => {
+  return props.num > 0 ? props.num > max ? `${max}+` : props.num + '' : ''
+})
+
+</script>
+
+<style scoped lang="scss">
+.dot {
+  background-color: #FF4D4F;
+  color: #fff;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  z-index: 99;
+}
+
+.badge {
+  background-color: #FF4D4F;
+  color: #fff;
+  font-size: 12px;
+  min-width: 20px;
+  height: 20px;
+  line-height: 19px;
+  border-radius: 10px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  text-align: center;
+  z-index: 99;
+  position: relative;
+}
+.hidden{
+	display: none;
+}
+</style>

vue2/components/Empty.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="empty-wrapper">
+    <image class="empty-img" src="https://yx-web-nosdn.netease.im/common/e0f58096f06c18cdd101f2614e6afb09/empty.png" />
+    <div class="empty-text">{{ text }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from '@vue/composition-api'
+const props = defineProps({
+  text: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+<style lang="scss" scoped>
+.empty-wrapper {
+  margin: 75px 10px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  .empty-img {
+    display: block;
+    width: 125px;
+    height: 100px;
+  }
+
+  .empty-text {
+    display: block;
+    color: #A6ADB6;
+    margin: 10px;
+  }
+}
+</style>