点赞动画优化

src/renderer/src/api/apiService.js

@@ -13,9 +13,11 @@ export class ApiService {
     if (!!data) config[method=='get'?'params':'data'] = data
     if (!!option) Object.assign(config, option)
     // 特殊格式处理
-    if (type == 'file') config.headers = { 'Content-Type': 'multipart/form-data' }
-    else if (type == 'json') config.headers = { 'Content-Type': 'application/json' }
-    else if (type == 'form') config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
+    let headers
+    if (type == 'file') headers = { 'Content-Type': 'multipart/form-data' }
+    else if (type == 'json') headers = { 'Content-Type': 'application/json' }
+    else if (type == 'form') headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
+    headers && (config.headers = { ...config.headers, ...headers })
     return request(config)
   }
 }

src/renderer/src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2794390 */
-  src: url('iconfont.woff2?t=1723453634574') format('woff2'),
-       url('iconfont.woff?t=1723453634574') format('woff'),
-       url('iconfont.ttf?t=1723453634574') format('truetype'),
-       url('iconfont.svg?t=1723453634574#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1724134927539') format('woff2'),
+       url('iconfont.woff?t=1724134927539') format('woff'),
+       url('iconfont.ttf?t=1724134927539') format('truetype'),
+       url('iconfont.svg?t=1724134927539#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,74 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zan:before {
+  content: "\e658";
+}
+
+.icon-zan1:before {
+  content: "\e659";
+}
+
+.icon-zan2:before {
+  content: "\e65a";
+}
+
+.icon-zan3:before {
+  content: "\e65c";
+}
+
+.icon-zan4:before {
+  content: "\e67c";
+}
+
+.icon-yizan:before {
+  content: "\e67e";
+}
+
+.icon-zan5:before {
+  content: "\e67f";
+}
+
+.icon-zan-yizan:before {
+  content: "\e680";
+}
+
+.icon-zan6:before {
+  content: "\e681";
+}
+
+.icon-MBEfenggeduosetubiao-xihuan:before {
+  content: "\e682";
+}
+
+.icon-zan7:before {
+  content: "\e683";
+}
+
+.icon-zan11:before {
+  content: "\e6ff";
+}
+
+.icon-zan8:before {
+  content: "\e684";
+}
+
+.icon-dianzan-red:before {
+  content: "\e685";
+}
+
+.icon-zan9:before {
+  content: "\e69e";
+}
+
+.icon-zanping:before {
+  content: "\100ae";
+}
+
+.icon-zan10:before {
+  content: "\e686";
+}
+
 .icon-arrangement:before {
   content: "\e656";
 }

src/renderer/src/assets/iconfont/iconfont.json

@@ -5,6 +5,125 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1242129",
+      "name": "赞",
+      "font_class": "zan",
+      "unicode": "e658",
+      "unicode_decimal": 58968
+    },
+    {
+      "icon_id": "1741390",
+      "name": "赞",
+      "font_class": "zan1",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "3159200",
+      "name": "赞",
+      "font_class": "zan2",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
+    },
+    {
+      "icon_id": "3402139",
+      "name": "赞",
+      "font_class": "zan3",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "4931286",
+      "name": "赞 (1)",
+      "font_class": "zan4",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "4942300",
+      "name": "已赞",
+      "font_class": "yizan",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "5806181",
+      "name": "赞",
+      "font_class": "zan5",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "7172310",
+      "name": "赞-已赞",
+      "font_class": "zan-yizan",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "7293361",
+      "name": "赞2",
+      "font_class": "zan6",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "8705087",
+      "name": "MBE风格多色图标-喜欢",
+      "font_class": "MBEfenggeduosetubiao-xihuan",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "10024138",
+      "name": "赞",
+      "font_class": "zan7",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "11055391",
+      "name": "赞",
+      "font_class": "zan11",
+      "unicode": "e6ff",
+      "unicode_decimal": 59135
+    },
+    {
+      "icon_id": "11086734",
+      "name": "赞",
+      "font_class": "zan8",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "23592614",
+      "name": "点赞",
+      "font_class": "dianzan-red",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "26327261",
+      "name": "赞",
+      "font_class": "zan9",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "27804883",
+      "name": "赞评",
+      "font_class": "zanping",
+      "unicode": "100ae",
+      "unicode_decimal": 65710
+    },
+    {
+      "icon_id": "29252894",
+      "name": "赞",
+      "font_class": "zan10",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
     {
       "icon_id": "4978988",
       "name": "作业-布置作业",

src/renderer/src/plugins/imChat/imLiseners.js

@@ -5,7 +5,7 @@
  */
 // @ts-ignore
 const API = window?.api || {}
-const timRenderInstance = API.getTimRender()
+const timRenderInstance = API?.getTimRender?.() || {}
 
 // im 事件监听
 export class IMListeners {

src/renderer/src/views/tool/components/upvote.vue

@@ -1,23 +1,32 @@
 <template>
   <el-button v-if="props.test" type="primary" @click="trigger">测试</el-button>
   <div ref="warpRef" class="c-warp">
-    <template v-for="i in sum">
-      <slot><el-icon><Star /></el-icon></slot>
+    <template v-for="(item, index) in iconCache.list">
+      <slot>
+        <el-icon v-if="props.def"><Star /></el-icon>
+        <svg v-else class="icon" aria-hidden="true">
+          <use :xlink:href="`#icon-`+item.icon"></use>
+        </svg>
+      </slot>
     </template>
   </div>
 </template>
 <script setup>
 // 功能说明：动画-点赞
-import { nextTick, ref } from 'vue'
+import { ref, nextTick, useSlots, reactive } from 'vue'
 import {Star} from '@element-plus/icons-vue'
 const warpRef = ref(null)
-const props = defineProps({ test: Boolean })
-const sum = ref(0)
+const props = defineProps({ test: Boolean, def: Boolean })
+const slots = useSlots()  // 获取插槽
+let iconCache = reactive({list:[]}) // 图标缓存
+const isSlot = !!Object.keys(slots).length // 是否使用了插槽
 // === 方法 ===
-const trigger = () => {
-  sum.value++
+const trigger = async () => {
+  iconCache.list.push({
+    icon: isSlot||props.def ? '' : getRandomIcon() // 图标
+  })
   nextTick(() => {
-    const el = warpRef.value.lastElementChild // 获取最后一个新加的元素
+    const el = warpRef.value.lastElementChild     // 获取最后一个新加的元素
     animInit(el)
   })
 }
@@ -35,12 +44,12 @@ const animInit = (el) => {
   let right = getRandom(5, maxw, false, true)   // 随机-右距离
   let isPlus = getRandomBool()?'':'-'           // 随机-方向
   let rotate = getRandom(0, 60, false, true)    // 随机-旋转
-  let scaleMax = getRandom(0, 1, true, true)+1  // 随机-缩放倍数
+  let scaleMax = getRandom(0.5, 1.5, true, true)+1  // 随机-缩放倍数
   setStatic(el,'position','absolute')           // 设置-定位
   setStatic(el, 'right', right, 'px')           // 设置-右距离
   const amFn = () => { //  opacity: 0.5;
     // 到顶了- 移除元素
-    if (bottom > maxH) {el.remove();return}
+    if (bottom > maxH) {el.remove();resetIconCache();return}
     // 透明度: 进入-慢慢出现
     if (bottom < 101 && opacity < 1) opacity = toNumber(opacity + 0.01)
     else if (bottom > maxH - 100 && opacity > 0) opacity = toNumber(opacity - 0.01)
@@ -59,8 +68,23 @@ const animInit = (el) => {
   }
   amFn() // 初次执行
 }
+
 // 设置-静态样式
 const setStatic = (el, type, val, end) => el.style[type] = val + (end || '')
+// 重置缓存列表
+const resetIconCache = () => {
+  const len = warpRef.value?.children?.length||0
+  if (!len && iconCache.list.length) iconCache.list = []
+}
+// 随机图案样式-默认
+const getRandomIcon = () => {
+  const iconArr = [ // 阿里icon
+    'zan10', 'zanping', 'zan9', 'dianzan-red', 'zan8', 'zan11', 'zan7', 'MBEfenggeduosetubiao-xihuan',
+    'zan6', 'zan-yizan', 'zan5', 'yizan', 'zan4', 'zan3', 'zan2', 'zan1', 'zan'
+  ]
+  const ind = getRandom(0, iconArr.length-1)
+  return iconArr[ind]
+}
 // 随机数 isFloat：是否小数 isMax：是否包含最大值
 const getRandom = (min, max, isFloat, isMax, pos=2) => {
   const maxVal = isMax ? max - min + 1 : max - min
@@ -71,6 +95,8 @@ const getRandom = (min, max, isFloat, isMax, pos=2) => {
 const getRandomBool = () => Math.random() > 0.5
 // 转换数字-(小数精度丢失)
 const toNumber = (v, pos = 2) => Number(v.toFixed(pos))
+// 延时
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 // 暴露方法
 defineExpose({ trigger })
 </script>

src/renderer/src/views/tool/sphere.vue

@@ -78,7 +78,7 @@ const btnList = [ // 工具栏按钮列表
 ]
 // === 页面加载完毕 ===
 onMounted(async() => {
-  getClassInfo() // 获取课堂详情 ex3
+  // getClassInfo() // 获取课堂详情 ex3
   setTimeout(() => {
     resetStatus() // 开启重置状态-监听
   }, 200);
@@ -93,7 +93,7 @@ const getClassInfo = async () => {
   let timGroupId = data?.ex3 || ''
   console.log('获取群ID:', timGroupId)
   const chat = await imChatRef.value?.initImChat(timGroupId) // 初始化im-chat
-  if (!timGroupId) timGroupId = chat.timGroupId
+  if (!timGroupId) timGroupId = chat?.timGroupId
   classManageApi.startClass(classObj.id, timGroupId) // 开始上课
 }
 // 切换tab-change
@@ -128,10 +128,10 @@ const chatChange = (type, data, ...args) => {
     switch(head) {
       case MsgEnum.HEADS.MSG_0001:
         // console.log('点赞:', data)
-        if(msgIds.includes(msgId)) return
-        upvoteRef.value.trigger()
-        if (msgIds.length >= 100) msgIds.shift() // 删除第一个
-        msgIds.push(msgId) // 添加到数组
+        if(msgIds.includes(msgId)) return         // 忽略重复-点赞消息
+        upvoteRef.value.trigger()                 // 触发点赞
+        if (msgIds.length >= 100) msgIds.shift()  // 删除第一个
+        msgIds.push(msgId)                        // 添加到数组
         break
       default:
         console.log('未知消息:', data)