优化
This commit is contained in:
@@ -201,6 +201,11 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
/* 类型样式 */
|
/* 类型样式 */
|
||||||
.notice-bar--info {
|
.notice-bar--info {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9999;
|
||||||
background-color: #eff6ff;
|
background-color: #eff6ff;
|
||||||
color: #1e40af;
|
color: #1e40af;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export const useNoticeStore = defineStore('notice', () => {
|
|||||||
try {
|
try {
|
||||||
const res = await getActiveNotices()
|
const res = await getActiveNotices()
|
||||||
console.log('[NoticeStore] 获取公告', res)
|
console.log('[NoticeStore] 获取公告', res)
|
||||||
notices.value = Array.isArray(res) ? res : []
|
notices.value = Array.isArray(res) ? res.filter(n => !n.deleted) : []
|
||||||
lastFetchTime.value = Date.now()
|
lastFetchTime.value = Date.now()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[NoticeStore] 获取公告失败:', error)
|
console.error('[NoticeStore] 获取公告失败:', error)
|
||||||
|
|||||||
@@ -99,7 +99,7 @@
|
|||||||
<div
|
<div
|
||||||
v-if="contextMenu.visible"
|
v-if="contextMenu.visible"
|
||||||
class="context-menu"
|
class="context-menu"
|
||||||
:style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px' }"
|
:style="{ top: contextMenu.y + 'px', left: contextMenu.x + 'px', transformOrigin: contextMenu.isMine ? 'top right' : 'top left' }"
|
||||||
@mouseleave="hideContextMenu"
|
@mouseleave="hideContextMenu"
|
||||||
>
|
>
|
||||||
<div v-if="contextMenu.msg?.type === 'text'" class="context-menu-item" @click="copyMessage">复制</div>
|
<div v-if="contextMenu.msg?.type === 'text'" class="context-menu-item" @click="copyMessage">复制</div>
|
||||||
@@ -149,9 +149,13 @@ function showContextMenu(event, msg, index) {
|
|||||||
const rect = messagePageRef.value?.getBoundingClientRect() || { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }
|
const rect = messagePageRef.value?.getBoundingClientRect() || { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }
|
||||||
let x = event.clientX - rect.left
|
let x = event.clientX - rect.left
|
||||||
let y = event.clientY - rect.top
|
let y = event.clientY - rect.top
|
||||||
|
const isMine = msg.senderId == currentUser.value.id
|
||||||
|
// 自己的消息在右侧,菜单向左偏移
|
||||||
|
if (isMine) x -= menuWidth
|
||||||
if (x + menuWidth > rect.width) x -= menuWidth
|
if (x + menuWidth > rect.width) x -= menuWidth
|
||||||
|
if (x < 0) x = 0
|
||||||
if (y + menuHeight > rect.height) y -= menuHeight
|
if (y + menuHeight > rect.height) y -= menuHeight
|
||||||
contextMenu.value = { visible: true, x, y, msg, index }
|
contextMenu.value = { visible: true, x, y, msg, index, isMine }
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideContextMenu() {
|
function hideContextMenu() {
|
||||||
@@ -684,6 +688,19 @@ onUnmounted(() => {
|
|||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transform-origin: top left;
|
||||||
|
animation: context-menu-in 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes context-menu-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu-item {
|
.context-menu-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user