Merge branch 'feature/daily_bugfix_0825_b' of github.com:nagisa77/OpenIsle into feature/daily_bugfix_0825_b

This commit is contained in:
Tim
2025-08-25 15:45:19 +08:00
4 changed files with 139 additions and 1 deletions

View File

@@ -7,6 +7,10 @@
<h2 class="participant-name">
{{ isChannel ? conversationName : otherParticipant?.username }}
</h2>
<div class="chat-controls">
<i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
<i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
</div>
</div>
<div class="messages-list" ref="messagesListEl">
@@ -82,6 +86,10 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
let subscription = null
const chatFloating = useState('chatFloating', () => false)
const chatPath = useState('chatPath', () => '/message-box')
const isFloat = computed(() => route.query.float === '1')
const messages = ref([])
const participants = ref([])
const loading = ref(true)
@@ -115,6 +123,24 @@ function handleAvatarError(event) {
event.target.src = '/default-avatar.svg'
}
function minimizeChat() {
chatPath.value = route.fullPath
chatFloating.value = true
navigateTo('/')
}
function maximizeChat() {
if (window.parent) {
window.parent.postMessage(
{
type: 'maximize-chat',
path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
},
'*',
)
}
}
// No changes needed here, as renderMarkdown is now imported.
// The old function is removed.
@@ -411,6 +437,7 @@ onUnmounted(() => {
font-size: 18px;
font-weight: 600;
margin: 0;
flex: 1;
}
.messages-list {
@@ -524,4 +551,15 @@ onUnmounted(() => {
margin-left: 10px;
margin-right: 10px;
}
.chat-controls {
margin-left: auto;
cursor: pointer;
display: flex;
align-items: center;
}
.control-icon {
font-size: 16px;
}
</style>

View File

@@ -1,5 +1,9 @@
<template>
<div class="messages-container">
<div class="chat-controls">
<i v-if="!isFloat" class="fas fa-window-minimize control-icon" @click="minimizeChat"></i>
<i v-else class="fas fa-expand control-icon" @click="maximizeChat"></i>
</div>
<div class="tabs">
<div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
站内信
@@ -114,7 +118,8 @@
</template>
<script setup>
import { ref, onUnmounted, watch, onActivated } from 'vue'
import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getToken, fetchCurrentUser } from '~/utils/auth'
import { toast } from '~/main'
import { useWebSocket } from '~/composables/useWebSocket'
@@ -129,6 +134,8 @@ const config = useRuntimeConfig()
const conversations = ref([])
const loading = ref(true)
const error = ref(null)
const route = useRoute()
const currentUser = ref(null)
const API_BASE_URL = config.public.apiBaseUrl
const { connect, disconnect, subscribe, isConnected } = useWebSocket()
@@ -137,6 +144,10 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
useChannelsUnreadCount()
let subscription = null
const chatFloating = useState('chatFloating', () => false)
const chatPath = useState('chatPath', () => '/message-box')
const isFloat = computed(() => route.query.float === '1')
const activeTab = ref('messages')
const channels = ref([])
const loadingChannels = ref(false)
@@ -227,6 +238,24 @@ async function goToChannel(id) {
}
}
function minimizeChat() {
chatPath.value = route.fullPath
chatFloating.value = true
navigateTo('/')
}
function maximizeChat() {
if (window.parent) {
window.parent.postMessage(
{
type: 'maximize-chat',
path: route.fullPath.replace('?float=1', '').replace('&float=1', ''),
},
'*',
)
}
}
onActivated(async () => {
loading.value = true
currentUser.value = await fetchCurrentUser()
@@ -276,6 +305,7 @@ function goToConversation(id) {
<style scoped>
.messages-container {
position: relative;
}
.tabs {
@@ -435,6 +465,18 @@ function goToConversation(id) {
margin-left: 4px;
}
.chat-controls {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
z-index: 10;
}
.control-icon {
font-size: 16px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.conversation-item {