Revert "feat: show channel unread indicator"

This reverts commit cf4ca89e19.
This commit is contained in:
tim
2025-08-23 02:10:52 +08:00
parent 77be2bfebb
commit 4a04f4ec17
2 changed files with 54 additions and 101 deletions

View File

@@ -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;
} }

View File

@@ -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,
} };
} }