@@ -54,6 +58,7 @@ const activeObj = ref(null) // 当前激活的按钮
const btnRef = ref(null) // 按钮元素-ref
const topPos = ref(30) // 顶部距离-内容的距离
const hPost = ref(0) // 顶部距离-内容的距离
+const isFold = ref(false) // 是否折叠
let posBtnAll = {} // 存储位置
// === 计算属性 ===
const list = computed(() => props.data.map((o,i) => {
@@ -100,7 +105,7 @@ const clickHandel = (o, e) => {
min-width: 4em;
border-radius: 4em;
background-color: #121212;
- .el-space{margin: 20px 0;}
+ .el-space{margin: 20px 0 0;}
.c-btn{
color: #d9dce3;
cursor: pointer;
@@ -113,6 +118,20 @@ const clickHandel = (o, e) => {
background: #454545fa;
}
}
+ .fold{
+ display: block;
+ color: #ccc;
+ font-size: 14px;
+ padding: 3px 6px;
+ cursor: pointer;
+ user-select: none;
+ margin-bottom: 10px;
+ &:hover{
+ color: #409eff;
+ border-radius: 4px;
+ // background: #454545fa;
+ }
+ }
}
.c-popover{
--top: 30px;
diff --git a/src/renderer/src/views/tool/components/upvote.vue b/src/renderer/src/views/tool/components/upvote.vue
index 7bfa0e0..8f12e4f 100644
--- a/src/renderer/src/views/tool/components/upvote.vue
+++ b/src/renderer/src/views/tool/components/upvote.vue
@@ -1,12 +1,21 @@
- 测试
+
+ 点赞
+ 疑惑
+
-
+
+
+
+
+ {{item.name}}
+
+
@@ -20,18 +29,22 @@ const props = defineProps({ test: Boolean, def: Boolean })
const slots = useSlots() // 获取插槽
let iconCache = reactive({list:[]}) // 图标缓存
const isSlot = !!Object.keys(slots).length // 是否使用了插槽
-// === 方法 ===
-const trigger = async () => {
+// === 触发 type 1 疑惑 def 点赞 ===
+const trigger = async (type, name) => {
+ if (typeof type == 'string') { name = type; type = 1 } // 兼容
iconCache.list.push({
- icon: isSlot||props.def ? '' : getRandomIcon() // 图标
+ name,
+ icon: isSlot||props.def ? '' : getRandomIcon(type) // 图标
})
nextTick(() => {
const el = warpRef.value.lastElementChild // 获取最后一个新加的元素
- animInit(el)
+ const tipEl = el.querySelector('.tip') // 获取提示元素
+ // console.log(el)
+ animInit(el, tipEl, type)
})
}
// 初始化动画
-const animInit = (el) => {
+const animInit = (el, tipEl, type) => {
const { height, width } = el.getBoundingClientRect()
const sumH = warpRef.value.clientHeight
const sumW = warpRef.value.clientWidth
@@ -41,13 +54,23 @@ const animInit = (el) => {
let opacity = 0 // 透明度
let scale = 0 // 缩放
let transform = '' // 旋转 缩放 偏移等操作
+ let transform2 = '' // 旋转 缩放 偏移等操作-恢复
let right = getRandom(5, maxw, false, true) // 随机-右距离
let isPlus = getRandomBool()?'':'-' // 随机-方向
+ let isPlus2 = isPlus ? '' : '-' // 随机-方向-恢复
let rotate = getRandom(0, 60, false, true) // 随机-旋转
let scaleMax = getRandom(0.5, 1.5, true, true)+1 // 随机-缩放倍数
setStatic(el,'position','absolute') // 设置-定位
setStatic(el, 'right', right, 'px') // 设置-右距离
+ // 特殊处理
+ if (type === 1) { // 疑惑
+ rotate = getRandom(0, 15, false, true) // 随机-旋转
+ scaleMax = getRandom(2.5, 3, true, true) // 随机-缩放倍数
+ }
+ // console.log('zdg: ', right, isPlus, rotate, scaleMax, maxw)
+
const amFn = () => { // opacity: 0.5;
+ // if (bottom == 130) return
// 到顶了- 移除元素
if (bottom > maxH) {el.remove();resetIconCache();return}
// 透明度: 进入-慢慢出现
@@ -58,12 +81,16 @@ const animInit = (el) => {
// 缩放：退出-慢慢缩小
else if (bottom > maxH - (scaleMax/0.1) && scale > 0) scale = toNumber(scale - 0.1)
bottom++
- // console.log('zdg: ', scale)
+ // console.log('zdg: ', scale) rotate(${isPlus2}${rotate}deg)
// 设置样式
transform = `rotate(${isPlus}${rotate}deg) scale(${scale})`
setStatic(el, 'bottom', bottom, 'px')
setStatic(el, 'opacity', opacity)
setStatic(el, 'transform', transform)
+ if (!!tipEl && type) {
+ transform2 = `rotate(${isPlus2}${rotate}deg) scale(${toNumber(1/scale)})`
+ setStatic(tipEl, 'transform', transform2)
+ }
requestAnimationFrame(amFn)
}
amFn() // 初次执行
@@ -77,13 +104,21 @@ const resetIconCache = () => {
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 getRandomIcon = (type) => {
+ let iconArr = []
+ switch (type) {
+ case 1: // 阿里icon-疑惑
+ iconArr = ['yiwen', 'a-yiwen', 'yihuo', 'yiwen-01']
+ break
+ default:
+ iconArr = [ // 阿里icon-点赞
+ 'zan10', 'zanping', 'zan9', 'dianzan-red', 'zan8', 'zan11', 'zan7', 'MBEfenggeduosetubiao-xihuan',
+ 'zan6', 'zan-yizan', 'zan5', 'yizan', 'zan4', 'zan3', 'zan2', 'zan1', 'zan'
+ ]
+ break
+ }
const ind = getRandom(0, iconArr.length-1)
- return iconArr[ind]
+ return iconArr[ind]||''
}
// 随机数 isFloat：是否小数 isMax：是否包含最大值
const getRandom = (min, max, isFloat, isMax, pos=2) => {
@@ -109,5 +144,39 @@ defineExpose({ trigger })
width: 30%;
height: 50%;
pointer-events: none;
+ .item{
+ display: inline-block;
+ .tip{
+ position: absolute;
+ padding: 3px 6px;
+ border-radius: 4px;
+ background: linear-gradient(90deg, #9fe597, #cce581);
+ font-size: 12px;
+ bottom: 0;
+ right: 0;
+ width: 65px;
+ transform-origin: right top;
+ span{
+ display: inline-block;
+ max-width: 100%;
+ overflow: hidden;
+ /* text-overflow: ellipsis; */
+ white-space: nowrap;
+ cursor: default;
+ }
+ &::before{
+ content: " ";
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ z-index: -1;
+ box-sizing: border-box;
+ background: linear-gradient(45deg, #b2e68d, #bce689);
+ bottom: -3px;
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/renderer/src/views/tool/sphere.vue b/src/renderer/src/views/tool/sphere.vue
index 1937f4a..6e9d9fe 100644
--- a/src/renderer/src/views/tool/sphere.vue
+++ b/src/renderer/src/views/tool/sphere.vue
@@ -78,7 +78,7 @@ const btnList = [ // 工具栏按钮列表
]
// === 页面加载完毕 ===
onMounted(async() => {
- // getClassInfo() // 获取课堂详情 ex3
+ getClassInfo() // 获取课堂详情 ex3
setTimeout(() => {
resetStatus() // 开启重置状态-监听
}, 200);
@@ -126,10 +126,11 @@ const chatChange = (type, data, ...args) => {
const msgId = (args||[])[0].message_msg_id
const { msgKey:head, msgcontent:msg, senduserid:sendId, msgType } = data
switch(head) {
- case MsgEnum.HEADS.MSG_0001:
+ case MsgEnum.HEADS.MSG_0001: // 点赞
+ case MsgEnum.HEADS.MSG_0002: // 疑惑
// console.log('点赞:', data)
if(msgIds.includes(msgId)) return // 忽略重复-点赞消息
- upvoteRef.value.trigger() // 触发点赞
+ upvoteRef.value.trigger(data.name) // 触发点赞|疑惑
if (msgIds.length >= 100) msgIds.shift() // 删除第一个
msgIds.push(msgId) // 添加到数组
break
@@ -146,6 +147,7 @@ const setIgnore = (bool) => {ipcMsgSend('tool-sphere:set:ignore', bool)}
// 重置状态: 鼠标|画板
const resetStatus = () => {
if (toolStore.isToolWin) return // 已经打开过-忽略
+ ipcMain?.removeHandler('tool-sphere:reset') // 避免已绑定，先移除在绑定
ipcMain?.handle?.('tool-sphere:reset', () => {
setTimeout(() => {
boardVueRef.value.handleMode(tabActive.value)