前端：
优化electron效果
This commit is contained in:
parent
333391d16f
commit
2ecaa28091
@ -27,6 +27,11 @@ function createWindow() {
|
||||
mainWindow.show()
|
||||
})
|
||||
|
||||
mainWindow.on('close', (event) => {
|
||||
event.preventDefault();
|
||||
mainWindow.hide()
|
||||
})
|
||||
|
||||
mainWindow.webContents.setWindowOpenHandler((details) => {
|
||||
shell.openExternal(details.url)
|
||||
return { action: 'deny' }
|
||||
@ -75,9 +80,10 @@ app.whenReady().then(() => {
|
||||
// explicitly with Cmd + Q.
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
//app.quit()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
|
||||
@ -1,15 +1,68 @@
|
||||
import { ipcMain, BrowserWindow } from "electron";
|
||||
import { ipcMain, BrowserWindow } from 'electron'
|
||||
import icon from '../../../resources/icon.png?asset'
|
||||
import { join } from 'path'
|
||||
import { is } from '@electron-toolkit/utils'
|
||||
|
||||
export function registerWindowHandler() {
|
||||
const windowMapData = new Map()
|
||||
|
||||
export function registerWindowHandler(){
|
||||
ipcMain.on('window-action', (event, action) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
if (!win) return;
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if (!win) return
|
||||
const actions = {
|
||||
minimize: () => win.minimize(),
|
||||
maximize: () => (win.isMaximized() ? win.unmaximize() : win.maximize()),
|
||||
close: () => win.hide(),
|
||||
closeThis: () => {
|
||||
const mainWin = BrowserWindow.fromId(1); // 假设 ID 1 是主窗口
|
||||
const win = BrowserWindow.fromWebContents(event.sender)
|
||||
if(win.id != mainWin?.id){
|
||||
win.destroy()
|
||||
}
|
||||
},
|
||||
isMaximized: () => win.isMaximized()
|
||||
};
|
||||
actions[action]?.();
|
||||
}
|
||||
actions[action]?.()
|
||||
})
|
||||
ipcMain.on('window-new', (event, { route, data }) => {
|
||||
const win = new BrowserWindow({
|
||||
width: 900,
|
||||
height: 670,
|
||||
show: true,
|
||||
autoHideMenuBar: true,
|
||||
frame: false,
|
||||
...(process.platform === 'linux' ? { icon } : {}), // Linux 必须在这里设
|
||||
icon: join(__dirname, '../../../resources/icon.png'), // Windows 开发环境预览
|
||||
webPreferences: {
|
||||
preload: join(__dirname, '../preload/index.js'),
|
||||
sandbox: false
|
||||
}
|
||||
})
|
||||
|
||||
const winId = win.id
|
||||
windowMapData.set(winId, data)
|
||||
|
||||
// 窗口关闭时，记得清理内存，防止内存泄漏
|
||||
win.on('closed', () => {
|
||||
windowMapData.delete(winId)
|
||||
})
|
||||
|
||||
// 构建 Query 参数
|
||||
const queryStr = `?winId=${winId}`
|
||||
|
||||
if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
|
||||
// 开发环境：通常使用 Hash 路由 (如 http://localhost:5173/#/your-route?winId=1)
|
||||
win.loadURL(`${process.env['ELECTRON_RENDERER_URL']}#/${route}${queryStr}`)
|
||||
} else {
|
||||
// 生产环境：loadFile 必须通过 hash 参数来传递路由和参数
|
||||
// 注意：join 会合并路径，hash 部分需要单独传给 options
|
||||
win.loadFile(join(__dirname, '../../renderer/index.html'), {
|
||||
hash: `${route}${queryStr}`
|
||||
})
|
||||
}
|
||||
})
|
||||
// 3. 增加数据索要接口
|
||||
ipcMain.handle('get-window-data', (event, winId) => {
|
||||
return windowMapData.get(Number(winId))
|
||||
})
|
||||
}
|
||||
|
||||
@ -7,7 +7,10 @@ const api = {
|
||||
minimize: () => ipcRenderer.send('window-action', 'minimize'),
|
||||
maximize: () => ipcRenderer.send('window-action', 'maximize'),
|
||||
close: () => ipcRenderer.send('window-action', 'close'),
|
||||
isMaximized: () => ipcRenderer.send('window-action', 'isMaximized')
|
||||
closeThis: () => ipcRenderer.send('window-action', 'closeThis'),
|
||||
isMaximized: () => ipcRenderer.send('window-action', 'isMaximized'),
|
||||
newWindow: (route, data) => ipcRenderer.send('window-new', { route, data }),
|
||||
getWindowData: (winId) => ipcRenderer.invoke('get-window-data', winId)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,15 +10,6 @@ import Alert from '@/components/messages/Alert.vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { useAuthStore } from './stores/auth';
|
||||
//import { useSignalRStore } from './stores/signalr';
|
||||
|
||||
onMounted(async () => {
|
||||
const { useSignalRStore } = await import('./stores/signalr');
|
||||
const authStore = useAuthStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
if(authStore.token){
|
||||
signalRStore.initSignalR();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
#app {
|
||||
|
||||
@ -6,9 +6,12 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn maximize" @click="toggleMaximize" title="最大化/还原">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="1.5" y="1.5" width="7" height="7" v-if="!isMaximized" />
|
||||
<path d="M3 1h6v6H3z M1 3h6v6H1z" v-else fill="currentColor" fill-opacity="0.5" />
|
||||
<svg v-if="!isMaximized" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<rect x="1.5" y="1.5" width="7" height="7" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 16 16" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 3.5h6v6" stroke="currentColor" stroke-width="1.4" />
|
||||
<rect x="4" y="5" width="6.5" height="6.5" stroke="currentColor" stroke-width="1.4" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="control-btn close" @click="close" title="关闭">
|
||||
@ -44,16 +47,19 @@ function close() {
|
||||
<style scoped>
|
||||
/* 窗口控制按钮 */
|
||||
.window-controls {
|
||||
z-index: 999;
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: drag;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
/* 允许拖动整个窗口 */
|
||||
-webkit-app-region: no-drag;
|
||||
width: 46px; /* 较宽的点击区域，类似 Win10/11 */
|
||||
width: 46px;
|
||||
/* 较宽的点击区域，类似 Win10/11 */
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
@ -64,10 +70,12 @@ function close() {
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.control-btn.close:hover {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<WindowControls/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { previewImages } from 'hevue-img-preview/v3'
|
||||
import {onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import WindowControls from '../WindowControls.vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const imageList = ref([]);
|
||||
|
||||
const index = ref(0);
|
||||
|
||||
onMounted(async () => {
|
||||
const winId = route.query.winId;
|
||||
const data = await window.api.window.getWindowData(winId);
|
||||
imageList.value = data.imageList;
|
||||
index.value = data.index;
|
||||
previewImages({
|
||||
imgList: imageList.value.map(m => m.content.url),
|
||||
nowImgIndex: index,
|
||||
clickMaskCLose: false,
|
||||
disabledImgRightClick:true,
|
||||
closeBtn: true,
|
||||
zIndex: 998,
|
||||
closeFn: () => {
|
||||
window.api.window.closeThis();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -70,6 +70,9 @@ const routes = [
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{ path: '/test', component: TestView },
|
||||
{
|
||||
path: '/imgpre', component: () => import('@/components/electron/ImagePreview.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
@ -6,8 +6,6 @@ import { useChatStore } from "./chat";
|
||||
import { authService } from "@/services/auth";
|
||||
import { generateSessionId } from "@/utils/sessionIdTools";
|
||||
import { messageHandler } from "@/handler/messageHandler";
|
||||
import { useBrowserNotification } from "@/services/useBrowserNotification";
|
||||
import { useConversationStore } from "./conversation";
|
||||
import { SignalRMessageHandler } from "@/utils/signalr/SignalMessageHandler";
|
||||
import { signalRConnectionEventHandler } from "@/utils/signalr/signalRConnectionEventHandler";
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import defaultAvatar from '@/assets/default_avatar.png'
|
||||
import { useRouter } from 'vue-router';
|
||||
@ -43,6 +43,15 @@ function handleStartChat(contact) {
|
||||
console.error('Invalid contact object:', contact);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { useSignalRStore } = await import('../stores/signalr');
|
||||
const authStore = useAuthStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
if(authStore.token){
|
||||
signalRStore.initSignalR();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,222 +1,206 @@
|
||||
<template>
|
||||
<div v-if="true" class="modal-mask" @click.self="close">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h2>添加好友</h2>
|
||||
<button class="icon-close" @click="close">×</button>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="mask" @click.self="close">
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar" @click.stop>
|
||||
<button @click="prev" title="上一张" v-html="feather.icons['arrow-left'].toSvg({width:15,height15})"></button>
|
||||
<button @click="next" title="下一张">▶</button>
|
||||
<button @click="zoomOut" title="缩小">－</button>
|
||||
<button @click="zoomIn" title="放大">＋</button>
|
||||
<button @click="rotate" title="旋转">⟳</button>
|
||||
<button @click="download" title="下载">⬇</button>
|
||||
<button @click="close" title="关闭">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="file"
|
||||
placeholder="搜索 ID / 手机号"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="current"
|
||||
class="img"
|
||||
:style="style"
|
||||
@mousedown="onDown"
|
||||
@wheel.prevent="onWheel"
|
||||
@dblclick="toggleZoom"
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
<!-- 索引 -->
|
||||
<div class="indicator">{{ index + 1 }} / {{ list.length }}</div>
|
||||
|
||||
<!-- 左右翻页大按钮 -->
|
||||
<div class="nav left" @click.stop="prev">‹</div>
|
||||
<div class="nav right" @click.stop="next">›</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { uploadFile } from '@/services/upload/uploader';
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import feather from 'feather-icons'
|
||||
|
||||
// 接收父组件的 v-model 用于控制显示隐藏
|
||||
const props = defineProps(['modelValue']);
|
||||
const emit = defineEmits(['update:modelValue', 'add-friend']);
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
list: { type: Array, default: ['http://localhost:5202/uploads/files/IM/2026/02/2/b92f0a4ba0f0.jpg', 'http://localhost:5202/uploads/files/IM/2026/02/2/b92f0a4ba0f0.jpg'] },
|
||||
start: { type: Number, default: 0 }
|
||||
})
|
||||
|
||||
const keyword = ref('');
|
||||
const loading = ref(false);
|
||||
const userResult = ref(null);
|
||||
const hasSearched = ref(false);
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
// 关闭时重置状态
|
||||
userResult.value = null;
|
||||
hasSearched.value = false;
|
||||
keyword.value = '';
|
||||
};
|
||||
const visible = ref(true)
|
||||
const index = ref(0)
|
||||
const scale = ref(1)
|
||||
const rotateDeg = ref(0)
|
||||
const offset = ref({ x: 0, y: 0 })
|
||||
|
||||
const onSearch = async () => {
|
||||
if (!keyword.value) return;
|
||||
let dragging = false
|
||||
let startPos = { x: 0, y: 0 }
|
||||
|
||||
loading.value = true;
|
||||
hasSearched.value = false;
|
||||
watch(() => props.modelValue, v => {
|
||||
visible.value = v
|
||||
if (v) {
|
||||
index.value = props.start
|
||||
reset()
|
||||
}
|
||||
})
|
||||
|
||||
// 模拟 API 请求延时
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
hasSearched.value = true;
|
||||
const current = computed(() => props.list[index.value] || '')
|
||||
|
||||
// 模拟搜索结果
|
||||
if (keyword.value === '12345') {
|
||||
userResult.value = {
|
||||
userId: '12345',
|
||||
nickname: '极简猫',
|
||||
avatar: 'https://api.dicebear.com/7.x/beta/svg?seed=Felix'
|
||||
};
|
||||
} else {
|
||||
userResult.value = null;
|
||||
}
|
||||
}, 600);
|
||||
};
|
||||
const style = computed(() => ({
|
||||
transform: `translate(${offset.value.x}px, ${offset.value.y}px) scale(${scale.value}) rotate(${rotateDeg.value}deg)`
|
||||
}))
|
||||
|
||||
|
||||
const handleFileChange = async (event) => {
|
||||
const file = event.target.files[0];
|
||||
uploadFile(file, {
|
||||
onProgress: (p) => {
|
||||
console.log(`当前进度：${p}%`);
|
||||
}
|
||||
});
|
||||
function reset() {
|
||||
scale.value = 1
|
||||
rotateDeg.value = 0
|
||||
offset.value = { x: 0, y: 0 }
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
emit('add-friend', userResult.value);
|
||||
// 通常这里会显示“已发送请求”提示
|
||||
close();
|
||||
};
|
||||
function close() { emit('update:modelValue', false) }
|
||||
function prev() { if(index.value>0){ index.value--; reset() } }
|
||||
function next() { if(index.value<props.list.length-1){ index.value++; reset() } }
|
||||
function zoomIn() { scale.value = Math.min(scale.value + 0.2, 5) }
|
||||
function zoomOut() { scale.value = Math.max(scale.value - 0.2, 0.3) }
|
||||
function toggleZoom() { scale.value = scale.value === 1 ? 2 : 1 }
|
||||
function rotate() { rotateDeg.value = (rotateDeg.value + 90) % 360 }
|
||||
|
||||
function onWheel(e){
|
||||
if(e.ctrlKey){ e.deltaY>0?zoomOut():zoomIn() }
|
||||
else { e.deltaY>0?next():prev() }
|
||||
}
|
||||
|
||||
function onDown(e){
|
||||
dragging = true
|
||||
startPos = { x: e.clientX - offset.value.x, y: e.clientY - offset.value.y }
|
||||
window.addEventListener('mousemove', onMove)
|
||||
window.addEventListener('mouseup', onUp)
|
||||
}
|
||||
|
||||
function onMove(e){ if(!dragging) return; offset.value={ x:e.clientX-startPos.x, y:e.clientY-startPos.y } }
|
||||
function onUp(){ dragging=false; window.removeEventListener('mousemove',onMove); window.removeEventListener('mouseup',onUp) }
|
||||
|
||||
async function download(){
|
||||
try{
|
||||
const res = await fetch(current.value)
|
||||
const blob = await res.blob()
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(blob)
|
||||
a.download = current.value.split('/').pop()
|
||||
a.click()
|
||||
URL.revokeObjectURL(a.href)
|
||||
}catch(e){ console.error(e) }
|
||||
}
|
||||
|
||||
function onKey(e){
|
||||
if(!visible.value) return
|
||||
if(e.key==='Escape') close()
|
||||
if(e.key==='ArrowLeft') prev()
|
||||
if(e.key==='ArrowRight') next()
|
||||
if(e.key==='ArrowUp') zoomIn()
|
||||
if(e.key==='ArrowDown') zoomOut()
|
||||
if(e.key==='r'||e.key==='R') rotate()
|
||||
}
|
||||
|
||||
onMounted(()=> window.addEventListener('keydown',onKey))
|
||||
onUnmounted(()=> window.removeEventListener('keydown',onKey))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 遮罩层 */
|
||||
.modal-mask {
|
||||
.mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(0,0,0,0.95);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 容器 */
|
||||
.modal-container {
|
||||
background: #ffffff;
|
||||
width: 360px;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
/* 图片 */
|
||||
.img {
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
/* 工具栏 */
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
display: flex;
|
||||
background: #f5f5f7;
|
||||
gap: 14px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(20,20,20,0.85);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #007aff; /* 经典的克莱因蓝/苹果蓝 */
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
.toolbar button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
.toolbar button:hover { background: rgba(255,255,255,.2); transform: scale(1.05);}
|
||||
.toolbar button:active { transform: scale(0.95); }
|
||||
|
||||
/* 用户卡片 */
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
/* 左右翻页按钮 */
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-top: -32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.add-action-btn {
|
||||
width: 100%;
|
||||
background: #f0f7ff;
|
||||
color: #007aff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
.nav.left { left: 32px; }
|
||||
.nav.right { right: 32px; }
|
||||
.nav:hover { background: rgba(255,255,255,.2); }
|
||||
|
||||
.add-action-btn:hover {
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.fade-slide-enter-active, .fade-slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.fade-slide-enter-from, .fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
/* 底部索引 */
|
||||
.indicator {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
font-size: 16px;
|
||||
color: #ddd;
|
||||
background: rgba(0,0,0,.5);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,120 +4,108 @@
|
||||
<header class="chat-header">
|
||||
<span class="title">{{ conversationInfo?.targetName || '未选择会话' }}</span>
|
||||
<div class="actions">
|
||||
<button class="tool-btn" @click="startCall('video')" v-html="feather.icons['video'].toSvg({width:20, height: 20})"></button>
|
||||
<button class="tool-btn" @click="startCall('voice')" v-html="feather.icons['phone-call'].toSvg({width:20, height: 20})"></button>
|
||||
<button class="tool-btn" @click="infoShowHandler" v-html="feather.icons['more-vertical'].toSvg({width:20, height: 20})"></button>
|
||||
<button class="tool-btn" @click="startCall('video')"
|
||||
v-html="feather.icons['video'].toSvg({ width: 20, height: 20 })"></button>
|
||||
<button class="tool-btn" @click="startCall('voice')"
|
||||
v-html="feather.icons['phone-call'].toSvg({ width: 20, height: 20 })"></button>
|
||||
<button class="tool-btn" @click="infoShowHandler"
|
||||
v-html="feather.icons['more-vertical'].toSvg({ width: 20, height: 20 })"></button>
|
||||
</div>
|
||||
</header>
|
||||
<div :class="{'main': !isElectron(), 'main-electron':isElectron()}">
|
||||
<div :class="{ 'main': !isElectron(), 'main-electron': isElectron() }">
|
||||
<div class="chat-history" ref="historyRef">
|
||||
<HistoryLoading ref="loadingRef" :loading="isLoading" :finished="isFinished" :error="hasError" @retry="loadHistoryMsg"/>
|
||||
<UserHoverCard ref="userHoverCardRef"/>
|
||||
<ContextMenu ref="menuRef"/>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="videoOpen" class="video-overlay" @click.self="videoOpen = false">
|
||||
<HistoryLoading ref="loadingRef" :loading="isLoading" :finished="isFinished" :error="hasError"
|
||||
@retry="loadHistoryMsg" />
|
||||
<UserHoverCard ref="userHoverCardRef" />
|
||||
<ContextMenu ref="menuRef" />
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="videoOpen" class="video-overlay" @click.self="videoOpen = false">
|
||||
|
||||
<div class="video-dialog">
|
||||
<div class="close-bar" @click="videoOpen = false">
|
||||
<span>正在播放视频</span>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="video-dialog">
|
||||
<div class="close-bar" @click="videoOpen = false">
|
||||
<span>正在播放视频</span>
|
||||
<button class="close-btn">×</button>
|
||||
</div>
|
||||
|
||||
<div class="player-wrapper">
|
||||
<vue3-video-player
|
||||
:src="videoUrl"
|
||||
poster="https://xxx.jpg"
|
||||
:controls="true"
|
||||
:autoplay="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-wrapper">
|
||||
<vue3-video-player :src="videoUrl" poster="https://xxx.jpg" :controls="true" :autoplay="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<div v-for="m in chatStore.messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
|
||||
<img @mouseenter="(e) => handleHoverCard(e,m)" @mouseleave="closeHoverCard" :src="(m.senderId == myInfo.id ? (myInfo?.avatar || defaultAvatar) :m.chatType == MESSAGE_TYPE.GROUP ? m.senderAvatar : conversationInfo?.targetAvatar) ?? defaultAvatar" class="avatar-chat" />
|
||||
|
||||
<div class="msg-content">
|
||||
<div class="group-sendername" v-if="m.chatType == MESSAGE_TYPE.GROUP && m.senderId != myInfo.id">{{ m.senderName }}</div>
|
||||
<div :class="['bubble', m.type == 'Text' ? 'text-bubble' : '']" @contextmenu.prevent="(e) => handleRightClick(e, m)">
|
||||
<div v-if="m.type === 'Text'">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === FILE_TYPE.Image" class="image-msg-container" :style="getImageStyle(m.content)">
|
||||
<img
|
||||
class="image-msg-content"
|
||||
:src="m.isImgLoading || m.isLoading ? m.localUrl : m.content.thumb"
|
||||
alt="图片消息" @click="imagePreview(m)"
|
||||
>
|
||||
|
||||
<div v-if="m.isImgLoading || m.isError" class="image-overlay">
|
||||
<div v-if="m.isImgLoading" class="progress-box">
|
||||
<div class="circular-progress">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<circle class="bg" cx="20" cy="20" r="16" />
|
||||
<circle
|
||||
class="bar"
|
||||
cx="20" cy="20" r="16"
|
||||
:style="{ strokeDashoffset: 100 - (m.progress || 0) }"
|
||||
/>
|
||||
</svg>
|
||||
<span class="pct">{{ m.progress || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i v-if="m.isError" class="error-icon" v-html="feather.icons['alert-circle'].toSvg({width:24, height: 24})"></i>
|
||||
</div>
|
||||
</div>
|
||||
<VideoMsg v-else-if="m.type === FILE_TYPE.Video"
|
||||
:thumbnailUrl="m.localUrl ?? m.content.thumb"
|
||||
:duration="m.content.duration"
|
||||
:w="m.content.w"
|
||||
:h="m.content.h"
|
||||
:uploading="m.isImgLoading"
|
||||
:progress="+m.progress"
|
||||
@play="playHandler(m)"
|
||||
/>
|
||||
<VoiceMsg v-else-if="m.type === FILE_TYPE.Voice"
|
||||
:url="m.localUrl ?? m.content.url"
|
||||
:duration="m.content.duration"
|
||||
:isRead="true"
|
||||
:isSelf="m.senderId == myInfo.id"
|
||||
/>
|
||||
<div class="status" v-if="m.senderId == myInfo.id">
|
||||
<i v-if="m.isError" style="color: red;" v-html="feather.icons['alert-circle'].toSvg({width:18, height: 18})"></i>
|
||||
<i v-if="m.isLoading" class="loaderIcon" v-html="feather.icons['loader'].toSvg({width:18, height: 18})"></i>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<div v-for="m in chatStore.messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
|
||||
<img @mouseenter="(e) => handleHoverCard(e, m)" @mouseleave="closeHoverCard"
|
||||
:src="(m.senderId == myInfo.id ? (myInfo?.avatar || defaultAvatar) : m.chatType == MESSAGE_TYPE.GROUP ? m.senderAvatar : conversationInfo?.targetAvatar) ?? defaultAvatar"
|
||||
class="avatar-chat" />
|
||||
|
||||
<div class="msg-content">
|
||||
<div class="group-sendername" v-if="m.chatType == MESSAGE_TYPE.GROUP && m.senderId != myInfo.id">{{
|
||||
m.senderName }}</div>
|
||||
<div :class="['bubble', m.type == 'Text' ? 'text-bubble' : '']"
|
||||
@contextmenu.prevent="(e) => handleRightClick(e, m)">
|
||||
<div v-if="m.type === 'Text'">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === FILE_TYPE.Image" class="image-msg-container" :style="getImageStyle(m.content)">
|
||||
<img class="image-msg-content" :src="m.isImgLoading || m.isLoading ? m.localUrl : m.content.thumb"
|
||||
alt="图片消息" @click="imagePreview(m)">
|
||||
|
||||
<div v-if="m.isImgLoading || m.isError" class="image-overlay">
|
||||
<div v-if="m.isImgLoading" class="progress-box">
|
||||
<div class="circular-progress">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<circle class="bg" cx="20" cy="20" r="16" />
|
||||
<circle class="bar" cx="20" cy="20" r="16"
|
||||
:style="{ strokeDashoffset: 100 - (m.progress || 0) }" />
|
||||
</svg>
|
||||
<span class="pct">{{ m.progress || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i v-if="m.isError" class="error-icon"
|
||||
v-html="feather.icons['alert-circle'].toSvg({ width: 24, height: 24 })"></i>
|
||||
</div>
|
||||
</div>
|
||||
<VideoMsg v-else-if="m.type === FILE_TYPE.Video" :thumbnailUrl="m.localUrl ?? m.content.thumb"
|
||||
:duration="m.content.duration" :w="m.content.w" :h="m.content.h" :uploading="m.isImgLoading"
|
||||
:progress="+m.progress" @play="playHandler(m)" />
|
||||
<VoiceMsg v-else-if="m.type === FILE_TYPE.Voice" :url="m.localUrl ?? m.content.url"
|
||||
:duration="m.content.duration" :isRead="true" :isSelf="m.senderId == myInfo.id" />
|
||||
<div class="status" v-if="m.senderId == myInfo.id">
|
||||
<i v-if="m.isError" style="color: red;"
|
||||
v-html="feather.icons['alert-circle'].toSvg({ width: 18, height: 18 })"></i>
|
||||
<i v-if="m.isLoading" class="loaderIcon"
|
||||
v-html="feather.icons['loader'].toSvg({ width: 18, height: 18 })"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="msg-time">{{ formatDate(m.timeStamp) }}</span>
|
||||
<span class="msg-time">{{ formatDate(m.timeStamp) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="chat-footer">
|
||||
<div class="toolbar">
|
||||
<button class="tool-btn" @click="toggleEmoji" v-html="feather.icons['smile'].toSvg({width:25, height: 25})">
|
||||
</button>
|
||||
<label class="tool-btn">
|
||||
<i v-html="feather.icons['file'].toSvg({width:25, height: 25})"></i>
|
||||
<input type="file" hidden @change="handleFile($event.target.files)" />
|
||||
</label>
|
||||
<button :class="['tool-btn', isRecord ? 'is-recording' : '']" @mousedown="startRecord" @mouseup="stopRecord" v-html="feather.icons[isRecord ? 'mic' : 'mic-off'].toSvg({width:25, height: 25})">
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="input"
|
||||
placeholder="请输入消息..."
|
||||
@keydown.enter.exact.prevent="sendText"
|
||||
></textarea>
|
||||
<div class="send-row">
|
||||
<button class="send-btn" :disabled="!input.trim()" @click="sendText">发送(S)</button>
|
||||
</div>
|
||||
</footer>
|
||||
<InfoSidebar v-if="infoSideBarShow" class="infoSideBar" :chatType="conversationInfo.chatType ?? null" :groupData="conversationInfo"/>
|
||||
<footer class="chat-footer">
|
||||
<div class="toolbar">
|
||||
<button class="tool-btn" @click="toggleEmoji" v-html="feather.icons['smile'].toSvg({ width: 25, height: 25 })">
|
||||
</button>
|
||||
<label class="tool-btn">
|
||||
<i v-html="feather.icons['file'].toSvg({ width: 25, height: 25 })"></i>
|
||||
<input type="file" hidden @change="handleFile($event.target.files)" />
|
||||
</label>
|
||||
<button :class="['tool-btn', isRecord ? 'is-recording' : '']" @mousedown="startRecord" @mouseup="stopRecord"
|
||||
v-html="feather.icons[isRecord ? 'mic' : 'mic-off'].toSvg({ width: 25, height: 25 })">
|
||||
</button>
|
||||
</div>
|
||||
<textarea v-model="input" placeholder="请输入消息..." @keydown.enter.exact.prevent="sendText"></textarea>
|
||||
<div class="send-row">
|
||||
<button class="send-btn" :disabled="!input.trim()" @click="sendText">发送(S)</button>
|
||||
</div>
|
||||
</footer>
|
||||
<InfoSidebar v-if="infoSideBarShow" class="infoSideBar" :chatType="conversationInfo.chatType ?? null"
|
||||
:groupData="conversationInfo" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -150,10 +138,10 @@ import { isElectron } from '../../../utils/electronHelper';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
id:{
|
||||
type: String,
|
||||
required:true
|
||||
}
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const infoSideBarShow = ref(false);
|
||||
@ -162,7 +150,7 @@ const chatStore = useChatStore();
|
||||
const signalRStore = useSignalRStore();
|
||||
const conversationStore = useConversationStore();
|
||||
const message = useMessage();
|
||||
const {sendMessage, sendFileMessage, sendTextMessage} = useSendMessageHandler();
|
||||
const { sendMessage, sendFileMessage, sendTextMessage } = useSendMessageHandler();
|
||||
|
||||
const input = ref(''); // 输入框内容
|
||||
const historyRef = ref(null); // 绑定 DOM 用于滚动
|
||||
@ -186,10 +174,10 @@ const videoUrl = ref(null);
|
||||
const videoOpen = ref(false)
|
||||
|
||||
const infoShowHandler = () => {
|
||||
if(infoSideBarShow.value)
|
||||
infoSideBarShow.value = false;
|
||||
else
|
||||
infoSideBarShow.value =true;
|
||||
if (infoSideBarShow.value)
|
||||
infoSideBarShow.value = false;
|
||||
else
|
||||
infoSideBarShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
@ -221,22 +209,31 @@ const getImageStyle = (content) => {
|
||||
|
||||
const imagePreview = (m) => {
|
||||
const imageList = chatStore.messages
|
||||
.filter(x => x.type == 'Image')
|
||||
;
|
||||
.filter(x => x.type == 'Image')
|
||||
;
|
||||
const index = imageList.indexOf(m);
|
||||
previewImages({
|
||||
imgList: imageList.map(m => m.content.url),
|
||||
nowImgIndex: index
|
||||
});
|
||||
if (isElectron()) {
|
||||
const safeData = JSON.parse(JSON.stringify( {
|
||||
imageList,
|
||||
index
|
||||
}));
|
||||
window.api.window.newWindow('imgpre',safeData);
|
||||
} else {
|
||||
previewImages({
|
||||
imgList: imageList.map(m => m.content.url),
|
||||
nowImgIndex: index
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const startRecord = async () => {
|
||||
try{
|
||||
const stream = await navigator.mediaDevices.getUserMedia({audio:true});
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
mediaRecorder = new MediaRecorder(stream);
|
||||
audioChunks = [];
|
||||
mediaRecorder.ondataavailable = e => {
|
||||
if(e.data.size > 0) audioChunks.push(e.data);
|
||||
if (e.data.size > 0) audioChunks.push(e.data);
|
||||
}
|
||||
// 录音结束后的处理
|
||||
mediaRecorder.onstop = () => {
|
||||
@ -251,13 +248,13 @@ const startRecord = async () => {
|
||||
});
|
||||
handleFile([audioFile]).finally(() => {
|
||||
// 停止所有轨道以关闭麦克风图标
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
});
|
||||
};
|
||||
|
||||
mediaRecorder.start();
|
||||
isRecord.value = true;
|
||||
}catch(e){
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
message.error('无法获取麦克风权限!');
|
||||
}
|
||||
@ -330,15 +327,15 @@ const handleRightClick = (e, m) => {
|
||||
},
|
||||
{
|
||||
label: '多选',
|
||||
action: () => {}
|
||||
action: () => { }
|
||||
},
|
||||
{
|
||||
label: '翻译',
|
||||
action: () => {}
|
||||
action: () => { }
|
||||
},
|
||||
{
|
||||
label: '引用',
|
||||
action: () => {}
|
||||
action: () => { }
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
@ -356,7 +353,7 @@ watch(
|
||||
conversationStore.conversations.find(x => x.id == conversationInfo.value.id).unreadCount = 0;
|
||||
signalRStore.clearUnreadCount(conversationInfo.value.id);
|
||||
},
|
||||
{deep: true}
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 自动滚动到底部
|
||||
@ -387,30 +384,30 @@ async function handleFile(files) {
|
||||
let info = {};
|
||||
let localUrl = null;
|
||||
let img = null;
|
||||
switch(getMessageType(file.type)){
|
||||
switch (getMessageType(file.type)) {
|
||||
case FILE_TYPE.Image:
|
||||
localUrl = URL.createObjectURL(file);
|
||||
img = await loadImage(localUrl);
|
||||
info = new ImageInfo(file.type, '[图片]', img.width, img.height, await generateImageThumbnailBlob(await loadImage(localUrl), 200));
|
||||
break;
|
||||
|
||||
case FILE_TYPE.Video: {
|
||||
const imgBlob = await getVideoThumbnailBlob(file);
|
||||
localUrl = URL.createObjectURL(imgBlob);
|
||||
img = await loadImage(localUrl);
|
||||
case FILE_TYPE.Video: {
|
||||
const imgBlob = await getVideoThumbnailBlob(file);
|
||||
localUrl = URL.createObjectURL(imgBlob);
|
||||
img = await loadImage(localUrl);
|
||||
|
||||
info = new VideoInfo(file.type,'[视频]', img.width, img.height, imgBlob, await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
case FILE_TYPE.Voice: {
|
||||
localUrl = URL.createObjectURL(file);
|
||||
info = new VoiceInfo(file.type,'[语音消息]', await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
info = new VideoInfo(file.type, '[视频]', img.width, img.height, imgBlob, await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
case FILE_TYPE.Voice: {
|
||||
localUrl = URL.createObjectURL(file);
|
||||
info = new VoiceInfo(file.type, '[语音消息]', await getVideoDuration(file));
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
await sendFileMessage(file, conversationInfo,info,localUrl);
|
||||
await sendFileMessage(file, conversationInfo, info, localUrl);
|
||||
}
|
||||
|
||||
function toggleEmoji() {
|
||||
@ -422,20 +419,20 @@ async function loadConversation(conversationId) {
|
||||
const res = await messageService.getConversationById(conversationId);
|
||||
conversationInfo.value = res.data;
|
||||
*/
|
||||
if(conversationStore.conversations.length == 0){
|
||||
await conversationStore.loadUserConversations();
|
||||
}
|
||||
conversationInfo.value = conversationStore.conversations.find(x => x.id == Number(conversationId));
|
||||
if (conversationStore.conversations.length == 0) {
|
||||
await conversationStore.loadUserConversations();
|
||||
}
|
||||
conversationInfo.value = conversationStore.conversations.find(x => x.id == Number(conversationId));
|
||||
}
|
||||
|
||||
const initChat = async (newId) => {
|
||||
await loadConversation(newId);
|
||||
if(conversationInfo.value){
|
||||
if (conversationInfo.value) {
|
||||
const sessionid = generateSessionId(
|
||||
conversationInfo.value.userId, conversationInfo.value.targetId, conversationInfo.value.chatType == MESSAGE_TYPE.GROUP)
|
||||
await chatStore.swtichSession(sessionid,newId);
|
||||
isFinished.value = false;
|
||||
scrollToBottom();
|
||||
conversationInfo.value.userId, conversationInfo.value.targetId, conversationInfo.value.chatType == MESSAGE_TYPE.GROUP)
|
||||
await chatStore.swtichSession(sessionid, newId);
|
||||
isFinished.value = false;
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
}
|
||||
@ -446,7 +443,7 @@ watch(
|
||||
() => {
|
||||
// 如果没有 ID，或者 Store 还没加载，返回一个安全的默认值
|
||||
if (!conversationStore.conversations.length) {
|
||||
return [props.id,null];
|
||||
return [props.id, null];
|
||||
}
|
||||
|
||||
// 尝试找到当前会话
|
||||
@ -465,9 +462,9 @@ watch(
|
||||
// 场景 A：路由切换 (ID 变了)
|
||||
// 这里的逻辑是：只要切了 ID，先加载本地的给用户看
|
||||
//if (newId !== oldId) {
|
||||
// 注意：这里只是加载本地缓存，不负责去服务器拉新
|
||||
// 真正的“拉新”逻辑交给下面的 isInited 判断
|
||||
await initChat(newId);
|
||||
// 注意：这里只是加载本地缓存，不负责去服务器拉新
|
||||
// 真正的“拉新”逻辑交给下面的 isInited 判断
|
||||
await initChat(newId);
|
||||
//}
|
||||
|
||||
// 场景 B：检测到需要补洞 (isInited 变为 false)
|
||||
@ -482,23 +479,23 @@ watch(
|
||||
const msgList = await chatStore.fetchNewMsgFromServier(newId);
|
||||
|
||||
const session = conversationStore.conversations.find(x => x.id == Number(newId));
|
||||
if(msgList && msgList.length > 0){
|
||||
const minSequenceId = Math.min(...msgList.map(m => m.sequenceId));
|
||||
const locaMaxSequenceId = chatStore.maxSequenceId;
|
||||
if(locaMaxSequenceId < (minSequenceId - 1)){
|
||||
chatStore.messages = [];;
|
||||
}
|
||||
await chatStore.pushAndSortMessagesAsync(msgList, generateSessionId(session.userId, session.targetId, session.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
if (msgList && msgList.length > 0) {
|
||||
const minSequenceId = Math.min(...msgList.map(m => m.sequenceId));
|
||||
const locaMaxSequenceId = chatStore.maxSequenceId;
|
||||
if (locaMaxSequenceId < (minSequenceId - 1)) {
|
||||
chatStore.messages = [];;
|
||||
}
|
||||
// 3. 如果有新消息，存入 Store
|
||||
await chatStore.pushAndSortMessagesAsync(msgList, generateSessionId(session.userId, session.targetId, session.chatType == MESSAGE_TYPE.GROUP), true);
|
||||
}
|
||||
// 3. 如果有新消息，存入 Store
|
||||
|
||||
|
||||
|
||||
// 4. 关键步骤：手动把状态回正！
|
||||
// 必须重新 find 一次对象，确保引用是对的
|
||||
if (session) {
|
||||
session.isInitialized = true;
|
||||
console.log(`[同步完成] 会话 ${newId} 状态已重置为 true`);
|
||||
session.isInitialized = true;
|
||||
console.log(`[同步完成] 会话 ${newId} 状态已重置为 true`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
@ -509,14 +506,14 @@ watch(
|
||||
);
|
||||
|
||||
const initObs = async () => {
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
|
||||
// 只有当 Loading 组件进入视口，且满足触发条件
|
||||
if (entry.isIntersecting) {
|
||||
loadHistoryMsg();
|
||||
}
|
||||
loadHistoryMsg();
|
||||
}
|
||||
}, {
|
||||
root: historyRef.value, // 指定监听容器
|
||||
threshold: 0.1 // 露出 10% 就算触发
|
||||
@ -527,7 +524,7 @@ await nextTick();
|
||||
// 如果 sentinel 是组件，需要拿它底下的 $el
|
||||
observer.observe(loadingRef.value.$el || loadingRef.value);
|
||||
}
|
||||
// 3. 【主动侦测逻辑】
|
||||
// 3. 【主动侦测逻辑】
|
||||
// 如果当前没有在加载，且还没有结束，且内容还没有撑开容器
|
||||
const el = historyRef.value;
|
||||
if (el && !isLoading.value && !isFinished.value) {
|
||||
@ -555,7 +552,8 @@ onUnmounted(() => {
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* 确保占满父容器 */
|
||||
height: 100%;
|
||||
/* 确保占满父容器 */
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
@ -584,6 +582,7 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
/* 遮罩层：全屏、黑色半透明、固定定位 */
|
||||
.video-overlay {
|
||||
position: fixed;
|
||||
@ -595,7 +594,8 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999; /* 确保在最顶层 */
|
||||
z-index: 9999;
|
||||
/* 确保在最顶层 */
|
||||
}
|
||||
|
||||
/* 播放器弹窗主体 */
|
||||
@ -606,7 +606,7 @@ onUnmounted(() => {
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 顶部状态栏（包含关闭按钮） */
|
||||
@ -637,15 +637,19 @@ onUnmounted(() => {
|
||||
|
||||
.player-wrapper {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9; /* 锁定 16:9 比例 */
|
||||
aspect-ratio: 16 / 9;
|
||||
/* 锁定 16:9 比例 */
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 进场动画 */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -679,15 +683,23 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.image-msg {
|
||||
max-width: 100px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
max-width: 100px;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 容器：由计算属性决定宽高 */
|
||||
@ -705,14 +717,16 @@ onUnmounted(() => {
|
||||
.image-msg-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 关键：裁剪而非拉伸 */
|
||||
object-fit: cover;
|
||||
/* 关键：裁剪而非拉伸 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 覆盖层 */
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
inset: 0; /* 铺满父容器 */
|
||||
inset: 0;
|
||||
/* 铺满父容器 */
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -727,21 +741,27 @@ onUnmounted(() => {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.circular-progress svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.circular-progress circle {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.circular-progress .bg {
|
||||
stroke: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.circular-progress .bar {
|
||||
stroke: #ffffff;
|
||||
stroke-dasharray: 100; /* 这里的 100 对应周长 */
|
||||
stroke-dasharray: 100;
|
||||
/* 这里的 100 对应周长 */
|
||||
transition: stroke-dashoffset 0.2s;
|
||||
}
|
||||
|
||||
.circular-progress .pct {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@ -750,6 +770,7 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
@ -789,15 +810,18 @@ onUnmounted(() => {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loaderIcon {
|
||||
display: inline-block; /* 必须是 block 或 inline-block 才能旋转 */
|
||||
display: inline-block;
|
||||
/* 必须是 block 或 inline-block 才能旋转 */
|
||||
line-height: 0;
|
||||
animation: spin 1s linear infinite; /* 1秒转一圈，线性速度，无限循环 */
|
||||
animation: spin 1s linear infinite;
|
||||
/* 1秒转一圈，线性速度，无限循环 */
|
||||
}
|
||||
|
||||
.status {
|
||||
@ -809,6 +833,7 @@ onUnmounted(() => {
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg.mine .msg-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user