mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-01 23:47:39 +08:00
Revert "feat: show channel unread indicator"
This reverts commit cf4ca89e19.
This commit is contained in:
@@ -6,10 +6,7 @@
|
|||||||
<button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
|
<button class="menu-btn" ref="menuBtn" @click="$emit('toggle-menu')">
|
||||||
<i class="fas fa-bars"></i>
|
<i class="fas fa-bars"></i>
|
||||||
</button>
|
</button>
|
||||||
<span
|
<span v-if="isMobile && unreadMessageCount > 0" class="menu-unread-dot"></span>
|
||||||
v-if="isMobile && (messageUnreadCount > 0 || channelUnreadCount > 0)"
|
|
||||||
class="menu-unread-dot"
|
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<NuxtLink class="logo-container" :to="`/`" @click="refrechData">
|
<NuxtLink class="logo-container" :to="`/`" @click="refrechData">
|
||||||
<img
|
<img
|
||||||
@@ -53,10 +50,9 @@
|
|||||||
<ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
|
<ToolTip v-if="isLogin" content="站内信和频道" placement="bottom">
|
||||||
<div class="messages-icon" @click="goToMessages">
|
<div class="messages-icon" @click="goToMessages">
|
||||||
<i class="fas fa-comments"></i>
|
<i class="fas fa-comments"></i>
|
||||||
<span v-if="messageUnreadCount > 0" class="unread-badge">
|
<span v-if="unreadMessageCount > 0" class="unread-badge">{{
|
||||||
{{ messageUnreadCount }}
|
unreadMessageCount
|
||||||
</span>
|
}}</span>
|
||||||
<span v-else-if="channelUnreadCount > 0" class="messages-unread-dot"></span>
|
|
||||||
</div>
|
</div>
|
||||||
</ToolTip>
|
</ToolTip>
|
||||||
|
|
||||||
@@ -106,10 +102,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
const isLogin = computed(() => authState.loggedIn)
|
const isLogin = computed(() => authState.loggedIn)
|
||||||
const isMobile = useIsMobile()
|
const isMobile = useIsMobile()
|
||||||
const { count: totalUnreadCount, channelUnreadCount, fetchUnreadCount } = useUnreadCount()
|
const { count: unreadMessageCount, fetchUnreadCount } = useUnreadCount()
|
||||||
const messageUnreadCount = computed(() =>
|
|
||||||
Math.max(totalUnreadCount.value - channelUnreadCount.value, 0),
|
|
||||||
)
|
|
||||||
const avatar = ref('')
|
const avatar = ref('')
|
||||||
const showSearch = ref(false)
|
const showSearch = ref(false)
|
||||||
const searchDropdown = ref(null)
|
const searchDropdown = ref(null)
|
||||||
@@ -420,16 +413,6 @@ onMounted(async () => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-unread-dot {
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
right: -4px;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rss-icon {
|
.rss-icon {
|
||||||
animation: rss-glow 2s 3;
|
animation: rss-glow 2s 3;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,123 +1,93 @@
|
|||||||
import { ref, watch } from 'vue'
|
import { ref, watch, onMounted } from 'vue';
|
||||||
import { useWebSocket } from './useWebSocket'
|
import { useWebSocket } from './useWebSocket';
|
||||||
import { getToken } from '~/utils/auth'
|
import { getToken } from '~/utils/auth';
|
||||||
|
|
||||||
const count = ref(0)
|
const count = ref(0);
|
||||||
const channelUnreadCount = ref(0)
|
let isInitialized = false;
|
||||||
let isInitialized = false
|
let wsSubscription = null;
|
||||||
let wsSubscription = null
|
|
||||||
|
|
||||||
export function useUnreadCount() {
|
export function useUnreadCount() {
|
||||||
const config = useRuntimeConfig()
|
const config = useRuntimeConfig();
|
||||||
const API_BASE_URL = config.public.apiBaseUrl
|
const API_BASE_URL = config.public.apiBaseUrl;
|
||||||
const { subscribe, isConnected, connect } = useWebSocket()
|
const { subscribe, isConnected, connect } = useWebSocket();
|
||||||
|
|
||||||
const fetchTotalUnreadCount = async () => {
|
const fetchUnreadCount = async () => {
|
||||||
const token = getToken()
|
const token = getToken();
|
||||||
if (!token) {
|
if (!token) {
|
||||||
count.value = 0
|
count.value = 0;
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${API_BASE_URL}/api/messages/unread-count`, {
|
const response = await fetch(`${API_BASE_URL}/api/messages/unread-count`, {
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
})
|
});
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const data = await response.json()
|
const data = await response.json();
|
||||||
count.value = data
|
count.value = data;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch unread count:', error)
|
console.error('Failed to fetch unread count:', error);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchChannelUnreadCount = async () => {
|
|
||||||
const token = getToken()
|
|
||||||
if (!token) {
|
|
||||||
channelUnreadCount.value = 0
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const response = await fetch(`${API_BASE_URL}/api/channels`, {
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
|
||||||
})
|
|
||||||
if (response.ok) {
|
|
||||||
const channels = await response.json()
|
|
||||||
channelUnreadCount.value = channels.reduce((sum, ch) => sum + (ch.unreadCount || 0), 0)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch channel unread count:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchUnreadCount = async () => {
|
|
||||||
await Promise.all([fetchTotalUnreadCount(), fetchChannelUnreadCount()])
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const initialize = async () => {
|
const initialize = async () => {
|
||||||
const token = getToken()
|
const token = getToken();
|
||||||
if (!token) {
|
if (!token) {
|
||||||
count.value = 0
|
count.value = 0;
|
||||||
channelUnreadCount.value = 0
|
return;
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 总是获取最新的未读数量
|
// 总是获取最新的未读数量
|
||||||
fetchUnreadCount()
|
fetchUnreadCount();
|
||||||
|
|
||||||
// 确保WebSocket连接
|
// 确保WebSocket连接
|
||||||
if (!isConnected.value) {
|
if (!isConnected.value) {
|
||||||
connect(token)
|
connect(token);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置WebSocket监听
|
// 设置WebSocket监听
|
||||||
await setupWebSocketListener()
|
await setupWebSocketListener();
|
||||||
}
|
};
|
||||||
|
|
||||||
const setupWebSocketListener = async () => {
|
const setupWebSocketListener = async () => {
|
||||||
// 只有在还没有订阅的情况下才设置监听
|
// 只有在还没有订阅的情况下才设置监听
|
||||||
if (!wsSubscription) {
|
if (!wsSubscription) {
|
||||||
watch(
|
|
||||||
isConnected,
|
watch(isConnected, (newValue) => {
|
||||||
(newValue) => {
|
|
||||||
if (newValue && !wsSubscription) {
|
if (newValue && !wsSubscription) {
|
||||||
const destination = `/user/queue/unread-count`
|
const destination = `/user/queue/unread-count`;
|
||||||
wsSubscription = subscribe(destination, (message) => {
|
wsSubscription = subscribe(destination, (message) => {
|
||||||
const unreadCount = parseInt(message.body, 10)
|
const unreadCount = parseInt(message.body, 10);
|
||||||
if (!isNaN(unreadCount)) {
|
if (!isNaN(unreadCount)) {
|
||||||
count.value = unreadCount
|
count.value = unreadCount;
|
||||||
fetchChannelUnreadCount()
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true },
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
}, { immediate: true });
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 自动初始化逻辑 - 确保每次调用都能获取到未读数量并设置监听
|
// 自动初始化逻辑 - 确保每次调用都能获取到未读数量并设置监听
|
||||||
const token = getToken()
|
const token = getToken();
|
||||||
if (token) {
|
if (token) {
|
||||||
if (!isInitialized) {
|
if (!isInitialized) {
|
||||||
isInitialized = true
|
isInitialized = true;
|
||||||
initialize() // 完整初始化,包括WebSocket监听
|
initialize(); // 完整初始化,包括WebSocket监听
|
||||||
} else {
|
} else {
|
||||||
// 即使已经初始化,也要确保获取最新的未读数量并确保WebSocket监听存在
|
// 即使已经初始化,也要确保获取最新的未读数量并确保WebSocket监听存在
|
||||||
fetchUnreadCount()
|
fetchUnreadCount();
|
||||||
|
|
||||||
// 确保WebSocket连接和监听都存在
|
// 确保WebSocket连接和监听都存在
|
||||||
if (!isConnected.value) {
|
if (!isConnected.value) {
|
||||||
connect(token)
|
connect(token);
|
||||||
}
|
}
|
||||||
setupWebSocketListener()
|
setupWebSocketListener();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
count,
|
count,
|
||||||
channelUnreadCount,
|
|
||||||
fetchUnreadCount,
|
fetchUnreadCount,
|
||||||
initialize,
|
initialize,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user