mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-11 13:17:29 +08:00
Revert "feat: support floating message box"
This reverts commit cd73747164.
# Conflicts:
# frontend_nuxt/pages/message-box/index.vue
This commit is contained in:
@@ -22,7 +22,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<GlobalPopups />
|
<GlobalPopups />
|
||||||
<ConfirmDialog />
|
<ConfirmDialog />
|
||||||
<ChatFloating />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -31,7 +30,6 @@ import HeaderComponent from '~/components/HeaderComponent.vue'
|
|||||||
import MenuComponent from '~/components/MenuComponent.vue'
|
import MenuComponent from '~/components/MenuComponent.vue'
|
||||||
import GlobalPopups from '~/components/GlobalPopups.vue'
|
import GlobalPopups from '~/components/GlobalPopups.vue'
|
||||||
import ConfirmDialog from '~/components/ConfirmDialog.vue'
|
import ConfirmDialog from '~/components/ConfirmDialog.vue'
|
||||||
import ChatFloating from '~/components/ChatFloating.vue'
|
|
||||||
import { useIsMobile } from '~/utils/screen'
|
import { useIsMobile } from '~/utils/screen'
|
||||||
|
|
||||||
const isMobile = useIsMobile()
|
const isMobile = useIsMobile()
|
||||||
|
|||||||
@@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="chatFloating" class="chat-floating">
|
|
||||||
<iframe :src="iframeSrc" class="chat-frame"></iframe>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
const chatFloating = useState('chatFloating', () => false)
|
|
||||||
const chatPath = useState('chatPath', () => '/message-box')
|
|
||||||
|
|
||||||
const iframeSrc = computed(() =>
|
|
||||||
chatPath.value.includes('?') ? `${chatPath.value}&float=1` : `${chatPath.value}?float=1`,
|
|
||||||
)
|
|
||||||
|
|
||||||
if (process.client) {
|
|
||||||
window.addEventListener('message', (event) => {
|
|
||||||
if (event.data?.type === 'maximize-chat') {
|
|
||||||
chatFloating.value = false
|
|
||||||
navigateTo(event.data.path || chatPath.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chat-floating {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
width: 400px;
|
|
||||||
height: 70vh;
|
|
||||||
max-height: 600px;
|
|
||||||
background: var(--background-color);
|
|
||||||
border: 1px solid var(--normal-border-color);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-frame {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.chat-floating {
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 60vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -7,10 +7,6 @@
|
|||||||
<h2 class="participant-name">
|
<h2 class="participant-name">
|
||||||
{{ isChannel ? conversationName : otherParticipant?.username }}
|
{{ isChannel ? conversationName : otherParticipant?.username }}
|
||||||
</h2>
|
</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>
|
||||||
|
|
||||||
<div class="messages-list" ref="messagesListEl">
|
<div class="messages-list" ref="messagesListEl">
|
||||||
@@ -86,10 +82,6 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
|
|||||||
const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
|
const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
|
||||||
let subscription = null
|
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 messages = ref([])
|
||||||
const participants = ref([])
|
const participants = ref([])
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
@@ -123,24 +115,6 @@ function handleAvatarError(event) {
|
|||||||
event.target.src = '/default-avatar.svg'
|
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.
|
// No changes needed here, as renderMarkdown is now imported.
|
||||||
// The old function is removed.
|
// The old function is removed.
|
||||||
|
|
||||||
@@ -437,7 +411,6 @@ onUnmounted(() => {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-list {
|
.messages-list {
|
||||||
@@ -551,15 +524,4 @@ onUnmounted(() => {
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-controls {
|
|
||||||
margin-left: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-icon {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="messages-container">
|
<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="tabs">
|
||||||
<div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
|
<div :class="['tab', { active: activeTab === 'messages' }]" @click="activeTab = 'messages'">
|
||||||
站内信
|
站内信
|
||||||
@@ -118,8 +114,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
|
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
import { ref, onUnmounted, watch, onActivated } from 'vue'
|
||||||
import { getToken, fetchCurrentUser } from '~/utils/auth'
|
import { getToken, fetchCurrentUser } from '~/utils/auth'
|
||||||
import { toast } from '~/main'
|
import { toast } from '~/main'
|
||||||
import { useWebSocket } from '~/composables/useWebSocket'
|
import { useWebSocket } from '~/composables/useWebSocket'
|
||||||
@@ -144,10 +140,6 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
|
|||||||
useChannelsUnreadCount()
|
useChannelsUnreadCount()
|
||||||
let subscription = null
|
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 activeTab = ref('messages')
|
||||||
const channels = ref([])
|
const channels = ref([])
|
||||||
const loadingChannels = ref(false)
|
const loadingChannels = ref(false)
|
||||||
@@ -238,24 +230,6 @@ 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 () => {
|
onActivated(async () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
currentUser.value = await fetchCurrentUser()
|
currentUser.value = await fetchCurrentUser()
|
||||||
@@ -305,7 +279,6 @@ function goToConversation(id) {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.messages-container {
|
.messages-container {
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
@@ -465,18 +438,6 @@ function goToConversation(id) {
|
|||||||
margin-left: 4px;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.conversation-item {
|
.conversation-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user