feat: 新增图片、语音、文件收发，图标头像封装等 (#74)

Author: oljc

package.json

@@ -27,7 +27,6 @@
     "alova": "^2.6.0",
     "dayjs": "^1.11.8",
     "element-plus": "^2.3.6",
-    "gsap": "^3.12.1",
     "lodash": "^4.17.21",
     "pinia": "^2.1.3",
     "pinia-plugin-persistedstate": "^3.1.0",
@@ -47,6 +46,7 @@
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/tsconfig": "^0.1.3",
+    "@vueuse/core": "^10.2.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.42.0",
     "eslint-plugin-vue": "^9.14.1",
@@ -71,6 +71,7 @@
     "unplugin-vue-components": "^0.24.1",
     "vite": "4.3.5",
     "vite-plugin-mkcert": "^1.16.0",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.6.5",
+    "xgplayer": "^3.0.5"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,143 @@
+/* stylelint-disable */
+/* eslint-disable */
+/* prettier-ignore */
+@font-face {
+  font-family: "mallchatcolor"; /* Project id 4141022 */
+  /* Color fonts */
+  src: 
+       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.woff2?t=1688220706250') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.woff?t=1688220706250') format('woff'),
+       url('//at.alicdn.com/t/c/font_4141022_j7dvq8wg0dr.ttf?t=1688220706250') format('truetype');
+}
+
+.mallchatcolor {
+  font-family: 'mallchatcolor' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-happy1:before {
+  content: '\e620';
+}
+
+.icon-laughing:before {
+  content: '\e62b';
+}
+
+.icon-other:before {
+  content: '\e67a';
+}
+
+.icon-posun:before {
+  content: '\e67e';
+}
+
+.icon-zip:before {
+  content: '\e60c';
+}
+
+.icon-wenjianjia1:before {
+  content: '\e64d';
+}
+
+.icon-at:before {
+  content: '\e629';
+}
+
+.icon-wenjianjia2:before {
+  content: '\e647';
+}
+
+.icon-tupian:before {
+  content: '\e679';
+}
+
+.icon-qcloud:before {
+  content: '\e600';
+}
+
+.icon-yuque:before {
+  content: '\e7c0';
+}
+
+.icon-dazed:before {
+  content: '\e60f';
+}
+
+.icon-happy:before {
+  content: '\e621';
+}
+
+.icon-secret:before {
+  content: '\e63c';
+}
+
+.icon-shocked:before {
+  content: '\e63e';
+}
+
+.icon-smiling:before {
+  content: '\e642';
+}
+
+.icon-yawn:before {
+  content: '\e64e';
+}
+
+.icon-github:before {
+  content: '\e709';
+}
+
+.icon-weixin:before {
+  content: '\e60d';
+}
+
+.icon-bilibili:before {
+  content: '\e60e';
+}
+
+.icon-doc:before {
+  content: '\e601';
+}
+
+.icon-code:before {
+  content: '\e602';
+}
+
+.icon-ppt:before {
+  content: '\e603';
+}
+
+.icon-txt:before {
+  content: '\e604';
+}
+
+.icon-java:before {
+  content: '\e605';
+}
+
+.icon-pdf:before {
+  content: '\e606';
+}
+
+.icon-jpg:before {
+  content: '\e607';
+}
+
+.icon-mp3:before {
+  content: '\e608';
+}
+
+.icon-mp4:before {
+  content: '\e609';
+}
+
+.icon-wenjianjia:before {
+  content: '\e60a';
+}
+
+.icon-xls:before {
+  content: '\e60b';
+}

src/assets/avatars/default.png

@@ -0,0 +1,85 @@
+/* stylelint-disable */
+/* eslint-disable */
+/* prettier-ignore */
+@font-face {
+  font-family: "mallchat"; /* Project id 4142069 */
+  src: url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.woff2?t=1688219879090') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.woff?t=1688219879090') format('woff'),
+       url('//at.alicdn.com/t/c/font_4142069_q7wdf7ccbx.ttf?t=1688219879090') format('truetype');
+}
+
+.mallchat {
+  font-family: 'mallchat' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tupian1:before {
+  content: '\e640';
+}
+
+.icon-jianpan:before {
+  content: '\e6d8';
+}
+
+.icon-saying:before {
+  content: '\e62f';
+}
+
+.icon-xiazai:before {
+  content: '\e616';
+}
+
+.icon-dislike:before {
+  content: '\e67c';
+}
+
+.icon-huojian:before {
+  content: '\e68b';
+}
+
+.icon-like:before {
+  content: '\e85c';
+}
+
+.icon-reply:before {
+  content: '\e716';
+}
+
+.icon-totop:before {
+  content: '\e63a';
+}
+
+.icon-zhankai:before {
+  content: '\e657';
+}
+
+.icon-chehui:before {
+  content: '\e665';
+}
+
+.icon-shanchu:before {
+  content: '\e6bb';
+}
+
+.icon-voice:before {
+  content: '\e85e';
+}
+
+.icon-avatar:before {
+  content: '\e648';
+}
+
+.icon-loading:before {
+  content: '\e6de';
+}
+
+.icon-copy:before {
+  content: '\e62d';
+}
+
+.icon-lahei:before {
+  content: '\e651';
+}

src/assets/iconfont/index-color.css

@@ -9,44 +9,37 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AnimateCount: typeof import('./components/AnimateCount.vue')['default']
+    Avatar: typeof import('./components/avatar/index.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
-    IconCopy: typeof import('./components/icons/IconCopy.vue')['default']
-    IconDelete: typeof import('./components/icons/IconDelete.vue')['default']
-    IconDislike: typeof import('./components/icons/iconDislike.vue')['default']
-    IconDocumentation: typeof import('./components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./components/icons/IconEcosystem.vue')['default']
-    IconLike: typeof import('./components/icons/iconLike.vue')['default']
-    IconMore: typeof import('./components/icons/IconMore.vue')['default']
-    IconRecall: typeof import('./components/icons/IconRecall.vue')['default']
-    IconReply: typeof import('./components/icons/IconReply.vue')['default']
-    IconShield: typeof import('./components/icons/IconShield.vue')['default']
-    IconSupport: typeof import('./components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./components/icons/IconTooling.vue')['default']
+    File: typeof import('./components/RenderMessage/file.vue')['default']
+    Icon: typeof import('./components/Icon/index.vue')['default']
     IEpArrowDownBold: typeof import('~icons/ep/arrow-down-bold')['default']
     IEpChatDotRound: typeof import('~icons/ep/chat-dot-round')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
     IEpFemale: typeof import('~icons/ep/female')['default']
-    IEpFold: typeof import('~icons/ep/fold')['default']
     IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
     IEpLoading: typeof import('~icons/ep/loading')['default']
     IEpLock: typeof import('~icons/ep/lock')['default']
     IEpMale: typeof import('~icons/ep/male')['default']
     IEpSuccessFilled: typeof import('~icons/ep/success-filled')['default']
-    LikeButton: typeof import('./components/LikeButton/index.vue')['default']
+    Image: typeof import('./components/RenderMessage/image.vue')['default']
     LoginBox: typeof import('./components/LoginBox/index.vue')['default']
-    RenderMsg: typeof import('./components/RenderMsg.vue')['default']
+    RenderMessage: typeof import('./components/RenderMessage/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Text: typeof import('./components/RenderMessage/text.vue')['default']
     UserSettingBox: typeof import('./components/UserSettingBox/index.vue')['default']
+    Video: typeof import('./components/RenderMessage/video.vue')['default']
+    VideoPlayer: typeof import('./components/VideoPlayer/index.vue')['default']
+    Voice: typeof import('./components/RenderMessage/voice.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']

src/assets/iconfont/index.css

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+const props = defineProps({
+  /** 图标名称 */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /** 图标尺寸 */
+  size: {
+    type: [Number, String],
+    default: 16,
+  },
+  /** 旋转角度 */
+  rotate: Number,
+  /** 加载态 */
+  spin: Boolean,
+  /** 是否多色 */
+  colorful: Boolean,
+})
+
+const iconCls = computed(() => {
+  return [
+    {
+      mallchat: !props.colorful,
+      mallchatcolor: props.colorful,
+      [`icon-spin`]: props.spin,
+    },
+    `icon-${props.icon}`,
+  ]
+})
+
+const innerStyle = computed(() => {
+  const styles: CSSProperties = {}
+  if (props.size) {
+    styles.fontSize = typeof props.size === 'number' ? `${props.size}px` : props.size
+  }
+  if (props.rotate) {
+    styles.transform = `rotate(${props.rotate}deg)`
+  }
+  return styles
+})
+</script>
+
+<template>
+  <i :class="iconCls" :style="innerStyle" />
+</template>