lq/nl-im-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化了本地存储和一些组件细分，完成了复制图片、适配可以直接发送的功能

Browse Source
This commit is contained in:
年糕崽崽
2025-07-03 15:36:34 +08:00
parent adf9f73431
commit bcee1e7cc6
34 changed files with 5954 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/Chat.vue
View File

@@ -1,49 +1,67 @@
<template>
<div class="h-screen flex bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5">
<!-- 背景装饰 -->
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute w-72 h-72 bg-blue-500 rounded-full opacity-10 top-10 left-10 animate-float"></div>
<div class="absolute w-48 h-48 bg-cyan-400 rounded-full opacity-10 top-60 right-15 animate-float-delayed"></div>
<div class="absolute w-36 h-36 bg-red-400 rounded-full opacity-10 bottom-10 left-20 animate-float-slow"></div>
</div>
<!-- 连接状态指示器 -->
<ConnectionStatus />
<!-- 录音状态指示器 -->
<RecordingIndicator v-if="isRecording" />
<!-- 主聊天容器 -->
<div class="flex-1 max-w-7xl mx-auto bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden flex z-10">
<!-- 好友列表 -->
<FriendList class="w-80 min-w-80" />
<!-- 聊天区域 -->
<ChatArea class="flex-1 min-w-0" />
</div>
<!-- 媒体预览模态框 -->
<MediaPreview />
<div class="h-screen flex bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5">
<!-- 背景装饰 -->
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute w-72 h-72 bg-blue-500 rounded-full opacity-10 top-10 left-10 animate-float"></div>
<div class="absolute w-48 h-48 bg-cyan-400 rounded-full opacity-10 top-60 right-15 animate-float-delayed"></div>
<div class="absolute w-36 h-36 bg-red-400 rounded-full opacity-10 bottom-10 left-20 animate-float-slow"></div>
</div>
<!-- 连接状态指示器 -->
<ConnectionStatus />
<!-- 录音状态指示器 -->
<RecordingIndicator />
<!-- 主聊天容器 -->
<div class="flex-1 max-w-7xl mx-auto bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden flex z-10">
<!-- 侧边导航 -->
<SideNavigation @nav-change="handleNavChange" />
<!-- 好友列表 -->
<FriendList
class="w-80 min-w-80"
/>
<!-- 聊天区域 -->
<div class="flex-1 min-w-0">
<ChatArea v-if="chatStore.currentFriend && currentNav === 'chat'" />
<FriendsManagement v-else-if="currentNav === 'friends'" />
<GroupsManagement v-else-if="currentNav === 'groups'" />
<MomentsView v-else-if="currentNav === 'moments'" />
<EmptyState v-else />
</div>
</div>
<!-- 媒体预览模态框 -->
<MediaPreview />
</div>
</template>
<script setup>
import { onMounted, onUnmounted, provide } from 'vue';
import { ref, onMounted, onUnmounted, provide } from 'vue';
import { useUserStore } from '@/stores/user';
import { useChatStore } from '@/stores/chat';
import { useThemeStore } from '@/stores/theme';
import { useWebSocket } from '@/composables/useWebSocket';
import { useRecording } from '@/composables/useRecording';
import SideNavigation from '@/components/SideNavigation.vue';
import FriendList from '@/components/FriendList.vue';
import ChatArea from '@/components/ChatArea.vue';
import EmptyState from '@/components/EmptyState.vue';
import ConnectionStatus from '@/components/ConnectionStatus.vue';
import RecordingIndicator from '@/components/RecordingIndicator.vue';
import MediaPreview from '@/components/MediaPreview.vue';
import FriendsManagement from '@/components/FriendsManagement.vue';
import GroupsManagement from '@/components/GroupsManagement.vue';
import MomentsView from '@/components/MomentsView.vue';
const userStore = useUserStore();
const chatStore = useChatStore();
const themeStore = useThemeStore();
const currentNav = ref('chat');
// 初始化WebSocket连接
const { connectWebSocket, disconnectWebSocket } = useWebSocket();
@@ -53,56 +71,63 @@ const { isRecording } = useRecording();
// 提供录音状态给子组件
provide('isRecording', isRecording);
// 处理导航切换
const handleNavChange = (nav) => {
currentNav.value = nav;
};
// 检查用户会话
userStore.checkSession();
// 加载主题
themeStore.loadTheme();
// 加载好友列表
const currentUser = userStore.currentUser;
const presetUsers = userStore.presetUsers;
onMounted(() => {
if (currentUser) {
chatStore.loadFriends(presetUsers, currentUser.id);
connectWebSocket();
}
onMounted(async () => {
if (userStore.currentUser) {
// 初始化数据库
await chatStore.initDB();
// 加载好友列表
await chatStore.loadFriends(userStore.presetUsers, userStore.currentUser.id);
// 连接WebSocket
connectWebSocket();
}
});
onUnmounted(() => {
disconnectWebSocket();
disconnectWebSocket();
});
</script>
<style scoped>
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-delayed {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-5deg); }
100% { transform: translateY(0px) rotate(0deg); }
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes float-slow {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
animation: float 12s infinite ease-in-out;
animation: float 12s infinite ease-in-out;
}
.animate-float-delayed {
animation: float-delayed 15s infinite ease-in-out;
animation: float-delayed 15s infinite ease-in-out;
}
.animate-float-slow {
animation: float-slow 18s infinite ease-in-out;
animation: float-slow 18s infinite ease-in-out;
}
</style>

274
src/views/Login.vue
View File

@@ -1,39 +1,117 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-purple-900 to-pink-300 p-5">
<!-- 背景装饰 -->
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute w-72 h-72 bg-blue-500 rounded-full opacity-10 top-10 left-10 animate-float"></div>
<div class="absolute w-48 h-48 bg-cyan-400 rounded-full opacity-10 top-60 right-15 animate-float-delayed"></div>
<div class="absolute w-36 h-36 bg-red-400 rounded-full opacity-10 bottom-10 left-20 animate-float-slow"></div>
<div class="min-h-screen relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900">
<!-- 动态背景 -->
<div class="absolute inset-0">
<!-- 渐变网格 -->
<div class="absolute inset-0 opacity-20 jbwg"></div>
<!-- 浮动装饰元素 -->
<div class="floating-shapes">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="shape shape-3"></div>
<div class="shape shape-4"></div>
<div class="shape shape-5"></div>
<div class="shape shape-6"></div>
</div>
<!-- 光效 -->
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
<div class="absolute top-0 right-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-8 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
</div>
<!-- 主内容 -->
<div class="relative z-10 flex items-center justify-center min-h-screen p-6">
<div class="w-full max-w-6xl">
<!-- 玻璃态卡片 -->
<div class="backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl shadow-2xl overflow-hidden">
<!-- 头部区域 -->
<div class="relative p-8 text-center">
<!-- 装饰性图标 -->
<div class="inline-flex items-center justify-center w-20 h-20 mb-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
WebSocket 聊天系统
</h1>
<p class="text-xl text-white/80 mb-2">现代化实时通讯平台</p>
<p class="text-white/60">选择用户身份开始您的聊天之旅</p>
</div>
<a-card class="w-full max-w-4xl bg-white/90 backdrop-blur-sm shadow-2xl border-0 z-10">
<template #title>
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-800 mb-2">高级WebSocket聊天系统</h1>
<p class="text-gray-600">选择以下用户之一登录聊天系统</p>
</div>
</template>
<!-- 用户选择区域 -->
<div class="p-8 pt-0">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
<div
v-for="user in userStore.presetUsers"
:key="user.id"
class="user-card group relative"
@click="handleLogin(user)"
>
<!-- 卡片背景 -->
<div class="absolute inset-0 bg-gradient-to-br from-white/20 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl transition-all duration-300 group-hover:from-white/30 group-hover:to-white/10 group-hover:border-white/40 group-hover:shadow-xl group-hover:scale-105"></div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mt-6">
<div
v-for="user in userStore.presetUsers"
:key="user.id"
class="user-card p-4 border-2 border-transparent rounded-xl text-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 hover:border-blue-500 hover:shadow-lg"
@click="handleLogin(user)"
>
<div
class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white text-xl font-bold"
:style="{ background: user.color }"
>
{{ user.name.charAt(0) }}
</div>
<h4 class="text-lg font-semibold text-gray-800 mb-1">{{ user.name }}</h4>
<p class="text-sm text-gray-500">ID: {{ user.id }}</p>
<!-- 卡片内容 -->
<div class="relative p-6 text-center cursor-pointer">
<!-- 头像 -->
<div class="relative mb-4">
<div
class="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center text-white text-xl font-bold shadow-lg transition-transform duration-300 group-hover:scale-110"
:style="{ background: `linear-gradient(135deg, ${user.color}, ${adjustColor(user.color, -20)})` }"
>
{{ user.name.charAt(0) }}
</div>
<!-- 在线状态指示器 -->
<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 border-2 border-white rounded-full shadow-sm"></div>
</div>
<!-- 用户信息 -->
<h4 class="text-lg font-semibold text-white mb-1 group-hover:text-blue-200 transition-colors">
{{ user.name }}
</h4>
<p class="text-sm text-white/60 group-hover:text-white/80 transition-colors">
ID: {{ user.id }}
</p>
<!-- 悬停效果 -->
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</div>
</a-card>
</div>
</div>
<!-- 底部装饰 -->
<div class="px-8 pb-8">
<div class="flex items-center justify-center space-x-4 text-white/40 text-sm">
<span class="flex items-center space-x-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
<span>安全加密</span>
</span>
<span>•</span>
<span class="flex items-center space-x-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
</svg>
<span>实时通讯</span>
</span>
<span>•</span>
<span class="flex items-center space-x-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
<span>多媒体支持</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
@@ -45,40 +123,138 @@ const userStore = useUserStore();
const router = useRouter();
const handleLogin = (user) => {
userStore.login(user);
message.success(`欢迎回来，${user.name}！`);
router.push('/');
userStore.login(user);
message.success({
content: `欢迎回来，${user.name}！`,
duration: 2,
style: {
marginTop: '20vh',
}
});
router.push('/');
};
// 颜色调整函数
const adjustColor = (color, amount) => {
const usePound = color[0] === '#';
const col = usePound ? color.slice(1) : color;
const num = parseInt(col, 16);
let r = (num >> 16) + amount;
let g = (num >> 8 & 0x00FF) + amount;
let b = (num & 0x0000FF) + amount;
r = r > 255 ? 255 : r < 0 ? 0 : r;
g = g > 255 ? 255 : g < 0 ? 0 : g;
b = b > 255 ? 255 : b < 0 ? 0 : b;
return (usePound ? '#' : '') + (r << 16 | g << 8 | b).toString(16).padStart(6, '0');
};
</script>
<style scoped>
/* 浮动动画 */
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
100% { transform: translateY(0px) rotate(0deg); }
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
}
@keyframes float-delayed {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-5deg); }
100% { transform: translateY(0px) rotate(0deg); }
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes float-slow {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
.jbwg {
background: url(‘data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.1"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E’);
}
.animate-float {
animation: float 12s infinite ease-in-out;
.animate-blob {
animation: blob 7s infinite;
}
.animate-float-delayed {
animation: float-delayed 15s infinite ease-in-out;
.animation-delay-2000 {
animation-delay: 2s;
}
.animate-float-slow {
animation: float-slow 18s infinite ease-in-out;
.animation-delay-4000 {
animation-delay: 4s;
}
/* 浮动装饰形状 */
.floating-shapes {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.shape {
position: absolute;
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.shape-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 120px;
height: 120px;
top: 20%;
right: 10%;
animation-delay: 1s;
}
.shape-3 {
width: 60px;
height: 60px;
top: 60%;
left: 20%;
animation-delay: 2s;
}
.shape-4 {
width: 100px;
height: 100px;
bottom: 20%;
right: 20%;
animation-delay: 3s;
}
.shape-5 {
width: 40px;
height: 40px;
top: 40%;
left: 60%;
animation-delay: 4s;
}
.shape-6 {
width: 90px;
height: 90px;
bottom: 40%;
left: 40%;
animation-delay: 5s;
}
/* 用户卡片悬停效果 */
.user-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-card:hover {
transform: translateY(-8px);
}
/* 响应式调整 */
@media (max-width: 768px) {
.shape {
display: none;
}
}
</style>