add(main)：完善主面板
This commit is contained in:
parent
06410a75e7
commit
964b129e5e
BIN
frontend/web/src/assets/default_avatar.png
Normal file
BIN
frontend/web/src/assets/default_avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 KiB |
@ -11,6 +11,23 @@ const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: MainView,
|
||||
children: [
|
||||
{
|
||||
path: '/messages',
|
||||
name: 'userMessages',
|
||||
component: () => import('@/views/messages/MessageList.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/messages/chat/:id',
|
||||
name: '/msgChat',
|
||||
component: () => import('@/views/messages/MessageContent.vue'),
|
||||
props: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{ path: '/contacts', name: 'userContacts', component: () => import('@/views/contact/ContactList.vue') },
|
||||
{ path: '/settings', name: 'userSettings', component: () => import('@/views/settings/SettingMenu.vue') }
|
||||
],
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
}
|
||||
|
||||
@ -7,5 +7,11 @@ export const authService = {
|
||||
* @returns
|
||||
*/
|
||||
login: (data) => request.post('/auth/login', data),
|
||||
|
||||
/**
|
||||
* 用户注册
|
||||
* @param {*} data
|
||||
* @returns
|
||||
*/
|
||||
register: (data) => request.post('/auth/register', data)
|
||||
}
|
||||
@ -3,7 +3,8 @@ import { defineStore } from 'pinia'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref(localStorage.getItem('user_token') || '');
|
||||
const userInfo = ref(null);
|
||||
const refreshToken = ref(localStorage.getItem('refresh_token') || '');
|
||||
const userInfo = ref(localStorage.getItem('user_info') || '');
|
||||
|
||||
//判断是否已登录
|
||||
const isLoggedIn = computed(() => !!token.value);
|
||||
@ -13,10 +14,13 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
* @param {String} newToken 用户凭证
|
||||
* @param {*} user 用户信息
|
||||
*/
|
||||
function setLoginInfo(newToken, user) {
|
||||
function setLoginInfo(newToken, newRefreshToken, user) {
|
||||
token.value = newToken;
|
||||
refreshToken.value = newRefreshToken
|
||||
userInfo.value = user;
|
||||
localStorage.setItem('user_token', newToken);
|
||||
localStorage.setItem('refresh_token', refreshToken)
|
||||
localStorage.setItem('user_info', user)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -26,6 +30,8 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
token.value = '';
|
||||
userInfo.value = null;
|
||||
localStorage.removeItem('user_token');
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user_info')
|
||||
}
|
||||
|
||||
return { token, userInfo, isLoggedIn, setLoginInfo, logout };
|
||||
|
||||
@ -1,477 +1,226 @@
|
||||
<template>
|
||||
<div class="im-container">
|
||||
<nav class="sidebar" aria-label="主导航">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar">我</div>
|
||||
<div class="status-dot"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu" role="tablist">
|
||||
<button
|
||||
v-for="item in menus"
|
||||
:key="item.key"
|
||||
@click="currentTab = item.key"
|
||||
:class="['menu-btn', { active: currentTab === item.key }]"
|
||||
:title="item.label"
|
||||
:aria-pressed="currentTab === item.key"
|
||||
>
|
||||
<i :class="item.icon" class="menu-icon" aria-hidden="true"></i>
|
||||
<span v-if="item.notification" class="notification-badge">{{ item.notification }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-menu">
|
||||
<button class="menu-btn" title="设置" @click="currentTab = 'settings'">
|
||||
<i class="fas fa-cog menu-icon"></i>
|
||||
</button>
|
||||
<nav class="nav-sidebar">
|
||||
<div class="user-self">
|
||||
<img :src="myInfo?.avatar ?? defaultAvatar" class="avatar-std" />
|
||||
</div>
|
||||
<router-link class="nav-item" to="/messages" active-class="active">💬</router-link>
|
||||
<router-link class="nav-item" to="/contacts" active-class="active">👤</router-link>
|
||||
<router-link class="nav-item" to="/settings" active-class="active">⚙️</router-link>
|
||||
</nav>
|
||||
|
||||
<aside class="list-panel">
|
||||
<div class="panel-header">
|
||||
<h2>{{ currentTabTitle }}</h2>
|
||||
<div class="header-actions">
|
||||
<button class="add-btn" :title="currentTab === 'chat' ? '发起新聊天' : '添加好友'"><i class="fas fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-wrapper">
|
||||
<div class="search-box">
|
||||
<i class="fas fa-search search-icon" aria-hidden="true"></i>
|
||||
<input type="text" placeholder="搜索..." v-model="searchText" aria-label="搜索" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-content custom-scroll">
|
||||
<transition-group name="list" tag="ul" v-if="currentTab === 'chat'" class="chat-list">
|
||||
<li
|
||||
v-for="chat in filteredChats"
|
||||
:key="chat.id"
|
||||
@click="selectChat(chat)"
|
||||
:class="['list-item', { active: currentChat?.id === chat.id }]"
|
||||
>
|
||||
<div class="item-avatar">
|
||||
{{ getInitials(chat.name) }}
|
||||
<span v-if="chat.status === 'online'" class="online-dot" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="row-top">
|
||||
<span class="item-name">{{ chat.name }}</span>
|
||||
<span class="item-time">{{ chat.lastTime }}</span>
|
||||
</div>
|
||||
<div class="row-bottom">
|
||||
<span class="item-msg">{{ chat.lastMsg }}</span>
|
||||
<span v-if="chat.unread > 0" class="unread-badge">{{ chat.unread }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
|
||||
<ul v-else-if="currentTab === 'friends'" class="friend-list">
|
||||
<li v-for="f in filteredFriends" :key="f.id" class="list-item">
|
||||
<div class="item-avatar friend">
|
||||
{{ getInitials(f.name) }}
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="row-top">
|
||||
<span class="item-name">{{ f.name }}</span>
|
||||
</div>
|
||||
<div class="row-bottom">
|
||||
<span :class="['status-text', f.status]">
|
||||
{{ f.status === 'online' ? '在线' : '离线' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-else class="empty-placeholder">
|
||||
<div class="icon-bg">
|
||||
<i :class="getEmptyIcon()"></i>
|
||||
</div>
|
||||
<h3>{{ currentTab === 'groups' ? '暂无群聊' : '设置中心' }}</h3>
|
||||
<p>这里目前什么都没有</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="chat-stage">
|
||||
<template v-if="currentChat">
|
||||
<header class="chat-header">
|
||||
<div class="user-profile">
|
||||
<div class="header-avatar">{{ getInitials(currentChat.name) }}</div>
|
||||
<div class="header-info">
|
||||
<div class="header-name">{{ currentChat.name }}</div>
|
||||
<div class="header-status">
|
||||
<span class="status-indicator" :class="currentChat.status"></span>
|
||||
{{ currentChat.status === 'online' ? '在线' : '离线' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-tools">
|
||||
<button class="tool-btn" title="语音通话"><i class="fas fa-phone-alt"></i></button>
|
||||
<button class="tool-btn" title="视频通话"><i class="fas fa-video"></i></button>
|
||||
<button class="tool-btn" title="更多选项"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="chat-body custom-scroll" ref="chatBody">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.from === 'me' ? 'msg-me' : 'msg-them']"
|
||||
>
|
||||
<div class="msg-avatar" v-if="msg.from !== 'me'">
|
||||
{{ getInitials(currentChat.name) }}
|
||||
</div>
|
||||
<div class="msg-bubble-group">
|
||||
<div class="msg-bubble">
|
||||
{{ msg.text }}
|
||||
</div>
|
||||
<div class="msg-meta">{{ msg.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="chat-footer">
|
||||
<div class="input-container">
|
||||
<button class="attach-btn" title="发送文件"><i class="fas fa-plus"></i></button>
|
||||
<textarea
|
||||
v-model="input"
|
||||
placeholder="输入消息..."
|
||||
@keydown.enter.prevent="handleSend"
|
||||
rows="1"
|
||||
ref="messageInput"
|
||||
></textarea>
|
||||
<button class="emoji-btn" title="表情"><i class="far fa-smile"></i></button>
|
||||
<button class="send-btn" @click="handleSend" :disabled="!input.trim()">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<div class="empty-chat" v-else>
|
||||
<div class="empty-illustration">
|
||||
<i class="fas fa-comments"></i>
|
||||
</div>
|
||||
<h3>开启美好对话</h3>
|
||||
<p>选择左侧联系人，开始畅所欲言</p>
|
||||
</div>
|
||||
</main>
|
||||
<router-view></router-view>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, onMounted } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import defaultAvatar from '@/assets/default_avatar.png'
|
||||
|
||||
/** (原代码未改动，样式优化专注于 CSS) */
|
||||
const currentTab = ref('chat')
|
||||
const searchText = ref('')
|
||||
const chats = ref([
|
||||
{ id: 1, name: 'Allen Zhang', lastMsg: '今晚一起吃饭吗？', lastTime: '10:30', unread: 2, status: 'online' },
|
||||
{ id: 2, name: 'Sarah Lee', lastMsg: '设计稿已经发你邮箱了', lastTime: '昨天', unread: 0, status: 'online' },
|
||||
{ id: 3, name: 'David Wang', lastMsg: '项目进度怎么样？', lastTime: '周三', unread: 1, status: 'offline' },
|
||||
{ id: 4, name: 'Product Team', lastMsg: '下周一开会讨论需求', lastTime: '周一', unread: 0, status: 'online' },
|
||||
{ id: 5, name: 'Lisa Chen', lastMsg: '好的，没问题', lastTime: '3月15日', unread: 0, status: 'online' },
|
||||
])
|
||||
const friends = ref([
|
||||
{ id: 1, name: 'Allen Zhang', status: 'online' },
|
||||
{ id: 2, name: 'Sarah Lee', status: 'online' },
|
||||
{ id: 3, name: 'David Wang', status: 'offline' },
|
||||
{ id: 4, name: 'Product Team', status: 'online' },
|
||||
])
|
||||
const menus = ref([
|
||||
{ key: 'chat', label: '消息', icon: 'fas fa-comment-alt', notification: computed(() => chats.value.reduce((sum, c) => sum + c.unread, 0)) },
|
||||
{ key: 'friends', label: '联系人', icon: 'fas fa-user-friends', notification: 0 },
|
||||
{ key: 'groups', label: '群聊', icon: 'fas fa-users', notification: 0 },
|
||||
])
|
||||
const currentChat = ref(null)
|
||||
const messages = ref([])
|
||||
const input = ref('')
|
||||
const chatBody = ref(null)
|
||||
const messageInput = ref(null)
|
||||
const authStore = useAuthStore();
|
||||
const myInfo = authStore.userInfo;
|
||||
|
||||
const filteredChats = computed(() => {
|
||||
if (!searchText.value) return chats.value
|
||||
const lowerSearch = searchText.value.toLowerCase()
|
||||
return chats.value.filter(
|
||||
(chat) => chat.name.toLowerCase().includes(lowerSearch) || chat.lastMsg.toLowerCase().includes(lowerSearch),
|
||||
)
|
||||
})
|
||||
|
||||
const filteredFriends = computed(() => {
|
||||
if (!searchText.value) return friends.value
|
||||
const lowerSearch = searchText.value.toLowerCase()
|
||||
return friends.value.filter((friend) => friend.name.toLowerCase().includes(lowerSearch))
|
||||
})
|
||||
|
||||
const currentTabTitle = computed(() => {
|
||||
const map = { chat: '消息', friends: '通讯录', groups: '群组', settings: '设置' }
|
||||
return map[currentTab.value] || '消息'
|
||||
})
|
||||
|
||||
function getInitials(name) { return name ? name.substring(0, 1).toUpperCase() : '' }
|
||||
function getEmptyIcon() { if (currentTab.value === 'groups') return 'fas fa-users'; if (currentTab.value === 'settings') return 'fas fa-cog'; return 'fas fa-box-open' }
|
||||
function formatTime(date) { return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }
|
||||
function scrollBottom() { if (chatBody.value) chatBody.value.scrollTop = chatBody.value.scrollHeight }
|
||||
function focusInput() { if (messageInput.value) messageInput.value.focus() }
|
||||
function selectChat(chat) {
|
||||
currentChat.value = chat
|
||||
messages.value = [
|
||||
{ id: 1, from: 'them', text: `Hi，我是 ${chat.name}`, time: '09:15' },
|
||||
{ id: 2, from: 'me', text: '你好！最近怎么样？', time: '09:16' },
|
||||
{ id: 3, from: 'them', text: '挺好的，你呢？', time: '09:20' },
|
||||
]
|
||||
nextTick(() => { scrollBottom(); focusInput() })
|
||||
if (chat.unread > 0) chat.unread = 0
|
||||
}
|
||||
function simulateReply() {
|
||||
if (!currentChat.value) return
|
||||
const replies = ['收到', '这个设计不错', '稍等我看一下', '哈哈哈哈', '明白，我马上处理']
|
||||
const randomReply = replies[Math.floor(Math.random() * replies.length)]
|
||||
setTimeout(() => {
|
||||
messages.value.push({ id: Date.now(), from: 'them', text: randomReply, time: formatTime(new Date()) })
|
||||
nextTick(scrollBottom)
|
||||
}, 500 + Math.random() * 1500)
|
||||
}
|
||||
function handleSend() {
|
||||
if (!input.value.trim()) return
|
||||
messages.value.push({ id: Date.now(), from: 'me', text: input.value, time: formatTime(new Date()) })
|
||||
input.value = ''
|
||||
nextTick(scrollBottom)
|
||||
if (currentChat.value) {
|
||||
currentChat.value.lastMsg = messages.value[messages.value.length - 1].text
|
||||
currentChat.value.lastTime = formatTime(new Date())
|
||||
}
|
||||
simulateReply()
|
||||
}
|
||||
|
||||
onMounted(() => { if (chats.value.length > 0) selectChat(chats.value[0]) })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ------------------- 设计代币 (简约优雅) ------------------- */
|
||||
:root{
|
||||
/* 极简设计变量：避免与外部容器背景冲突 */
|
||||
--bg: #f9fafb; /* 比外部纯白略深的浅灰，形成层级 */ /* 组件自身有背景，不透明 */
|
||||
--panel: #ffffff; /* 面板纯白 */
|
||||
--border: #e5e7eb; /* 轻边框 */
|
||||
--text: #1f2937; /* 主文字 */
|
||||
--muted: #6b7280; /* 次文字 */
|
||||
--primary: #4f46e5; /* 主色：靛蓝 */
|
||||
--primary-contrast: #ffffff; /* 主色上的前景色 */ /* 单一强调色（靛蓝） */
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--radius: 10px;
|
||||
--shadow: 0 2px 6px rgba(0,0,0,0.04); /* 极弱阴影 */
|
||||
--fn: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
|
||||
}
|
||||
|
||||
.im-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 1. 基础容器：锁定宽高，禁止抖动 */
|
||||
.im-container {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 650px;
|
||||
margin: 40px auto;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--bg); /* 浅灰背景，明确区分外层 */
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
font-family: var(--fn);
|
||||
color: var(--text);
|
||||
box-shadow: 0 12px 48px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* ------------------- 侧边栏 ------------------- */
|
||||
.sidebar{
|
||||
width: 64px;
|
||||
background: #ffffff; /* 内部区域保持纯白 */
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 16px 6px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
/* 导航栏 */
|
||||
.nav-sidebar {
|
||||
width: 60px;
|
||||
flex-shrink: 0;
|
||||
background: #282828;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
gap: 24px;
|
||||
}
|
||||
.avatar{
|
||||
width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#7c3aed);
|
||||
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;box-shadow:0 4px 10px rgba(37,99,235,0.12);
|
||||
.user-self { margin-bottom: 10px; }
|
||||
|
||||
/* 2. 列表区修复 */
|
||||
.list-panel {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.avatar-wrapper{position:relative;margin-bottom:18px}
|
||||
.status-dot{position:absolute;right:6px;bottom:6px;width:11px;height:11px;background:var(--success);border-radius:50%;box-shadow:0 0 0 2px var(--panel)}
|
||||
.menu{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
|
||||
.menu-btn{
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--muted); /* 默认图标灰 */
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
|
||||
/* 修复：搜索框美化 */
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #dbdbdb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 5px;
|
||||
}
|
||||
.search-icon { font-size: 12px; color: #666; }
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Font Awesome 兜底：不管外部怎么写 */
|
||||
.menu-btn i{
|
||||
color: currentColor;
|
||||
}
|
||||
.menu-btn:hover{
|
||||
background: #f3f4f6; /* 纯灰 hover，不使用渐变 */
|
||||
color: var(--primary);
|
||||
transform: none;
|
||||
}
|
||||
.menu-btn.active{
|
||||
background: var(--primary); /* 选中态：主色背景 */
|
||||
color: var(--primary-contrast); /* 明确指定前景色 */
|
||||
}
|
||||
.scroll-area { flex: 1; overflow-y: auto; }
|
||||
|
||||
/* 防止 font-awesome 被父级覆盖 */
|
||||
.menu-btn.active .menu-icon{
|
||||
font-size: 18px;
|
||||
color: inherit; /* 关键：图标严格继承 button 的 color */
|
||||
}
|
||||
.menu-icon{font-size:18px}
|
||||
.notification-badge{position:absolute;top:8px;right:10px;background:var(--danger);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-size:11px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,0.08)}
|
||||
.bottom-menu{margin-top:auto;padding-bottom:6px}
|
||||
|
||||
/* ------------------- 中间面板 ------------------- */
|
||||
.list-panel{
|
||||
width: 300px;
|
||||
background: #ffffff; /* 中间列表纯白 */
|
||||
border-right: 1px solid var(--border);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px}
|
||||
.panel-header h2{margin:0;font-size:18px;font-weight:700;color:var(--text)}
|
||||
.add-btn{background:var(--primary);border:none;color:#fff;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 12px rgba(37,99,235,0.12)}
|
||||
.search-wrapper{padding:8px}
|
||||
.search-box{position:relative}
|
||||
.search-box input{width:100%;padding:10px 12px 10px 36px;border-radius:10px;border:1px solid rgba(15,23,42,0.05);background:rgba(255,255,255,0.9);font-size:14px;color:var(--text);box-shadow:inset 0 1px 0 rgba(0,0,0,0.02)}
|
||||
.search-box input:focus{outline:none;border-color:rgba(37,99,235,0.35);box-shadow:0 6px 20px rgba(37,99,235,0.06)}
|
||||
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}
|
||||
.list-content{flex:1;overflow:auto;padding-right:6px}
|
||||
|
||||
.chat-list,.friend-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
|
||||
.list-item{display:flex;align-items:center;padding:10px;border-radius:10px;cursor:pointer;transition:all .16s ease;background:transparent}
|
||||
.list-item:hover{
|
||||
background: #f9fafb; /* 极轻 hover */
|
||||
transform: none;
|
||||
}
|
||||
.list-item.active{
|
||||
background: #eef2ff; /* 单色选中 */
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.item-avatar{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:15px;margin-right:12px;flex-shrink:0}
|
||||
.item-avatar.friend{background:linear-gradient(135deg,#ecfdf5,#ecfeff);color:var(--success)}
|
||||
.online-dot{position:absolute;right:4px;bottom:6px;width:10px;height:10px;background:var(--success);border-radius:50%;box-shadow:0 0 0 2px var(--panel)}
|
||||
|
||||
.item-info{flex:1;min-width:0;display:flex;flex-direction:column}
|
||||
.row-top{display:flex;justify-content:space-between;align-items:center}
|
||||
.item-name{font-weight:600;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
|
||||
.item-time{font-size:12px;color:var(--muted);flex-shrink:0;margin-left:8px}
|
||||
.item-msg{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.unread-badge{background:var(--danger);color:#fff;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}
|
||||
.status-text{font-size:13px;color:var(--muted)}
|
||||
.status-text.online{color:var(--success);font-weight:600}
|
||||
|
||||
/* ------------------- 聊天区 ------------------- */
|
||||
.chat-stage{
|
||||
/* 3. 聊天主面板修复 */
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff; /* 聊天区纯白 */
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-header{
|
||||
height: 64px;
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.user-profile{display:flex;align-items:center;gap:12px}
|
||||
.header-avatar{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700}
|
||||
.header-name{font-weight:700}
|
||||
.header-status{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
|
||||
.status-indicator{display:inline-block;width:8px;height:8px;border-radius:999px}
|
||||
.status-indicator.online{background:var(--success)}
|
||||
.status-indicator.offline{background:rgba(15,23,42,0.08)}
|
||||
.header-tools{display:flex;gap:8px}
|
||||
.tool-btn{background:transparent;border:1px solid rgba(15,23,42,0.04);padding:8px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
|
||||
|
||||
.chat-body{flex:1;padding:20px;display:flex;flex-direction:column;gap:12px;overflow:auto}
|
||||
.msg-row{display:flex;gap:10px;align-items:flex-end}
|
||||
.msg-me{justify-content:flex-end}
|
||||
.msg-them{justify-content:flex-start}
|
||||
.msg-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#eef2ff,#e9d5ff);display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700}
|
||||
.msg-bubble-group{max-width:70%;display:flex;flex-direction:column;align-items:flex-start}
|
||||
.msg-bubble{
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
color: var(--text);
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* 修复：本人消息右侧对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 别人发的：默认靠左 */
|
||||
.msg.other { flex-direction: row; }
|
||||
|
||||
/* 本人发的：翻转排列方向，靠右显示 */
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* 修复：本人消息文字和时间戳也需要右对齐 */
|
||||
.msg.mine .msg-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 9px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
box-shadow: none;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
.msg-me .msg-bubble{
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
.msg-meta{font-size:12px;color:var(--muted);margin-top:6px}
|
||||
|
||||
.chat-footer{
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
.other .bubble { background: #fff; color: #333; }
|
||||
.mine .bubble { background: #95ec69; color: #000; }
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.input-container{
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
gap: 8px;
|
||||
background: #f9fafb;
|
||||
padding: 8px;
|
||||
|
||||
/* 头像样式统一 */
|
||||
.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
||||
.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
/* 未读气泡 */
|
||||
.avatar-container { position: relative; }
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
.input-container:focus-within{box-shadow:0 8px 30px rgba(37,99,235,0.06)}
|
||||
.input-container textarea{flex:1;border:none;background:transparent;resize:none;outline:none;font-size:14px;line-height:1.5;min-height:36px;max-height:120px}
|
||||
.attach-btn,.emoji-btn{background:transparent;border:none;padding:8px;border-radius:8px;cursor:pointer}
|
||||
.send-btn{
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast); /* 明确发送按钮图标颜色 */
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.send-btn i{
|
||||
color: currentColor; /* 防止图标丢失 */
|
||||
/* 输入框区域修复 */
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.send-btn:disabled{
|
||||
background: #c7d2fe;
|
||||
color: #ffffff;
|
||||
}
|
||||
.send-btn:disabled{opacity:0.5;cursor:not-allowed}
|
||||
.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
|
||||
.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
|
||||
|
||||
/* ------------------- 细节与响应式 ------------------- */
|
||||
.custom-scroll::-webkit-scrollbar{width:8px}
|
||||
.custom-scroll::-webkit-scrollbar-thumb{background:rgba(15,23,42,0.06);border-radius:999px}
|
||||
|
||||
@media (max-width:900px){
|
||||
.im-container{flex-direction:column;width:94vw;height:92vh}
|
||||
.sidebar{flex-direction:row;width:100%;height:64px;padding:8px}
|
||||
.list-panel{width:100%;order:2;border-right:none;border-top:1px solid rgba(15,23,42,0.03)}
|
||||
.chat-stage{order:1}
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
.send-row { display: flex; justify-content: flex-end; }
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.send-btn:hover { background: #e2e2e2; }
|
||||
|
||||
/* 列表美化 */
|
||||
.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
.list-item:hover:not(.active) { background: #ddd; }
|
||||
.info { flex: 1; overflow: hidden; }
|
||||
.name-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.name { font-size: 14px; font-weight: 500; }
|
||||
.time { font-size: 11px; color: #999; }
|
||||
.last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; }
|
||||
.nav-item.active { opacity: 1; }
|
||||
</style>
|
||||
@ -87,7 +87,7 @@ const handleLogin = async () => {
|
||||
const res = await authService.login(form);
|
||||
if(res.code === 0){
|
||||
message.success('登陆成功。')
|
||||
authStore.setLoginInfo(res.data.token, res.data.userInfo);
|
||||
authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo);
|
||||
loading.value = false;
|
||||
router.push('/index')
|
||||
}else{
|
||||
|
||||
315
frontend/web/src/views/contact/ContactList.vue
Normal file
315
frontend/web/src/views/contact/ContactList.vue
Normal file
@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div class="contact-container">
|
||||
<aside class="contact-list-panel">
|
||||
<div class="search-section">
|
||||
<div class="search-box">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input v-model="searchQuery" placeholder="搜索联系人" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-area">
|
||||
<div class="fixed-entries">
|
||||
<div class="list-item mini">
|
||||
<div class="icon-box orange">👤+</div>
|
||||
<div class="name">新的朋友</div>
|
||||
</div>
|
||||
<div class="list-item mini">
|
||||
<div class="icon-box green">👥</div>
|
||||
<div class="name">群聊</div>
|
||||
</div>
|
||||
<div class="list-item mini">
|
||||
<div class="icon-box blue">🏷️</div>
|
||||
<div class="name">标签</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-title">我的好友</div>
|
||||
<div v-for="c in filteredContacts"
|
||||
:key="c.id"
|
||||
class="list-item"
|
||||
:class="{active: activeContactId === c.id}"
|
||||
@click="activeContactId = c.id">
|
||||
<img :src="c.avatar" class="avatar-std" />
|
||||
<div class="info">
|
||||
<div class="name">{{ c.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="profile-main">
|
||||
<div v-if="currentContact" class="profile-card">
|
||||
<header class="profile-header">
|
||||
<div class="text-info">
|
||||
<h2 class="display-name">
|
||||
{{ currentContact.name }}
|
||||
<span :class="['gender-tag', currentContact.gender]">
|
||||
{{ currentContact.gender === 'm' ? '♂' : '♀' }}
|
||||
</span>
|
||||
</h2>
|
||||
<p class="sub-text">微信号：{{ currentContact.wxid }}</p>
|
||||
<p class="sub-text">地区：{{ currentContact.region }}</p>
|
||||
</div>
|
||||
<img :src="currentContact.avatar" class="big-avatar" />
|
||||
</header>
|
||||
|
||||
<div class="profile-body">
|
||||
<div class="info-row">
|
||||
<span class="label">备注名</span>
|
||||
<span class="value">{{ currentContact.alias || '未设置' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">个性签名</span>
|
||||
<span class="value">{{ currentContact.signature || '这个家伙很懒，什么都没留下' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">来源</span>
|
||||
<span class="value">通过搜索微信号添加</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="profile-footer">
|
||||
<button class="btn-primary" @click="handleGoToChat">发消息</button>
|
||||
<button class="btn-ghost">音视频通话</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<div class="empty-logo">👤</div>
|
||||
<p>请在左侧选择联系人查看详情</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const searchQuery = ref('')
|
||||
const activeContactId = ref(null)
|
||||
|
||||
// 模拟联系人数据
|
||||
const contacts = ref([
|
||||
{ id: 101, name: '南浔', wxid: 'nan_xun_99', region: '浙江 杭州', avatar: 'https://i.pravatar.cc/40?1', gender: 'f', signature: '山有木兮木有枝', alias: '南酱' },
|
||||
{ id: 102, name: '老张', wxid: 'zhang_boss', region: '广东 深圳', avatar: 'https://i.pravatar.cc/40?10', gender: 'm', signature: '搞钱要紧', alias: '张总' },
|
||||
{ id: 103, name: 'UI小王', wxid: 'wang_design', region: '上海 黄浦', avatar: 'https://i.pravatar.cc/40?5', gender: 'f', signature: '不改了，真的不改了', alias: '' },
|
||||
{ id: 104, name: '测试组长', wxid: 'test_pro', region: '北京', avatar: 'https://i.pravatar.cc/40?8', gender: 'm', signature: 'Bug 哪里跑', alias: '铁面人' }
|
||||
])
|
||||
|
||||
const filteredContacts = computed(() => {
|
||||
return contacts.value.filter(c =>
|
||||
c.name.includes(searchQuery.value) || c.wxid.includes(searchQuery.value)
|
||||
)
|
||||
})
|
||||
|
||||
const currentContact = computed(() => {
|
||||
return contacts.value.find(c => c.id === activeContactId.value)
|
||||
})
|
||||
|
||||
// 发送事件给父组件（用于切换回聊天Tab并打开会话）
|
||||
const emit = defineEmits(['start-chat'])
|
||||
function handleGoToChat() {
|
||||
if (currentContact.value) {
|
||||
emit('start-chat', { ...currentContact.value })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-container {
|
||||
display: flex;
|
||||
width: 100%; /* 继承父组件的高度和宽度 */
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* --- 左侧列表栏 --- */
|
||||
.contact-list-panel {
|
||||
width: 250px;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #dbdbdb;
|
||||
padding: 5px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover { background: #e2e2e2; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
|
||||
.avatar-std {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.icon-box.orange { background: #faad14; }
|
||||
.icon-box.green { background: #52c41a; }
|
||||
.icon-box.blue { background: #1890ff; }
|
||||
|
||||
/* --- 右侧名片区 --- */
|
||||
.profile-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
width: 420px;
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-size: 24px;
|
||||
color: #000;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gender-tag { font-size: 16px; }
|
||||
.gender-tag.m { color: #1890ff; }
|
||||
.gender-tag.f { color: #ff4d4f; }
|
||||
|
||||
.sub-text {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.big-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-row .label {
|
||||
width: 80px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-row .value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
width: 160px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-ghost:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-logo {
|
||||
font-size: 80px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
</style>
|
||||
1
frontend/web/src/views/contact/UserInfoContent.vue
Normal file
1
frontend/web/src/views/contact/UserInfoContent.vue
Normal file
@ -0,0 +1 @@
|
||||
<template></template>
|
||||
234
frontend/web/src/views/messages/MessageContent.vue
Normal file
234
frontend/web/src/views/messages/MessageContent.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<section class="chat-panel">
|
||||
<header class="chat-header">
|
||||
<span class="title">{{ currentSession?.name || '未选择会话' }}</span>
|
||||
<div class="actions">
|
||||
<button @click="startCall('video')">📹</button>
|
||||
<button @click="startCall('voice')">📞</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="chat-history" ref="historyRef">
|
||||
<div v-for="m in activeMessages" :key="m.id" :class="['msg', m.mine ? 'mine' : 'other']">
|
||||
<img :src="m.mine ? (myInfo?.avatar || defaultAvatar) : currentSession?.avatar" class="avatar-chat" />
|
||||
|
||||
<div class="msg-content">
|
||||
<div class="bubble">
|
||||
<div v-if="m.type === 'text'">{{ m.content }}</div>
|
||||
<div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
|
||||
</div>
|
||||
<span class="msg-time">{{ m.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="chat-footer">
|
||||
<div class="toolbar">
|
||||
<button @click="toggleEmoji">😀</button>
|
||||
<label class="tool-btn">
|
||||
📁 <input type="file" hidden @change="handleFile" />
|
||||
</label>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, onMounted } from 'vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import defaultAvatar from '@/assets/default_avatar.png';
|
||||
|
||||
const props = defineProps({
|
||||
id:{
|
||||
type: String,
|
||||
required:true
|
||||
}
|
||||
})
|
||||
const input = ref(''); // 输入框内容
|
||||
const historyRef = ref(null); // 绑定 DOM 用于滚动
|
||||
const myInfo = useAuthStore().userInfo;
|
||||
|
||||
// --- 模拟会话数据 (实际开发中应从后端或 store 获取) ---
|
||||
const sessions = ref([
|
||||
{ id: 1, name: '南浔', avatar: 'https://i.pravatar.cc/40?1', last: '' },
|
||||
{ id: 2, name: '技术群', avatar: 'https://i.pravatar.cc/40?2', last: '' }
|
||||
]);
|
||||
|
||||
// --- 消息数据 ---
|
||||
const messages = ref({
|
||||
1: [
|
||||
{ id: 1, type: 'text', content: '在干嘛？', mine: false, time: '14:00' },
|
||||
{ id: 2, type: 'text', content: '在写代码呢，帮你调样式', mine: true, time: '14:02' }
|
||||
],
|
||||
2: []
|
||||
});
|
||||
|
||||
// --- 计算属性 ---
|
||||
const currentSession = computed(() => sessions.value.find(s => s.id == props.id));
|
||||
const activeMessages = computed(() => messages.value[props.id] || []);
|
||||
|
||||
// --- 功能函数 ---
|
||||
|
||||
// 自动滚动到底部
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick(); // 等待 DOM 更新后执行
|
||||
if (historyRef.value) {
|
||||
historyRef.value.scrollTop = historyRef.value.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
// 发送文本
|
||||
function sendText() {
|
||||
if (!input.value.trim()) return;
|
||||
|
||||
const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
const newMessage = {
|
||||
id: Date.now(),
|
||||
type: 'text',
|
||||
content: input.value,
|
||||
mine: true,
|
||||
time: now
|
||||
};
|
||||
|
||||
// 插入消息
|
||||
if (!messages.value[props.id]) {
|
||||
messages.value[props.id] = [];
|
||||
}
|
||||
messages.value[props.id].push(newMessage);
|
||||
|
||||
// 同步更新会话列表最后一条摘要
|
||||
if (currentSession.value) {
|
||||
currentSession.value.last = input.value;
|
||||
}
|
||||
|
||||
input.value = ''; // 清空输入框
|
||||
scrollToBottom(); // 滚动
|
||||
}
|
||||
|
||||
// 通话模拟
|
||||
function startCall(type) {
|
||||
console.log(`发起${type === 'video' ? '视频' : '语音'}通话`);
|
||||
}
|
||||
|
||||
// 文件处理模拟
|
||||
function handleFile(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file) console.log('选中文件:', file.name);
|
||||
}
|
||||
|
||||
function toggleEmoji() {
|
||||
console.log('打开表情面板');
|
||||
}
|
||||
|
||||
// 初始化时滚动到底部
|
||||
onMounted(() => {
|
||||
scrollToBottom();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 核心布局修复 */
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* 确保占满父容器 */
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* 历史区域：自动撑开并处理滚动 */
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 消息对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.msg.mine .msg-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 9px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
max-width: 450px;
|
||||
word-break: break-all;
|
||||
background: #fff;
|
||||
}
|
||||
.mine .bubble {
|
||||
background: #95ec69;
|
||||
}
|
||||
|
||||
.avatar-chat {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.send-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
245
frontend/web/src/views/messages/MessageList.vue
Normal file
245
frontend/web/src/views/messages/MessageList.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div id="MsgList">
|
||||
<aside class="list-panel">
|
||||
<div class="search-section">
|
||||
<div class="search-box">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input v-model="searchQuery" placeholder="搜索" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-area">
|
||||
<div v-for="s in filteredSessions" :key="s.id"
|
||||
class="list-item" :class="{active: activeId === s.id}" @click="selectSession(s)">
|
||||
<div class="avatar-container">
|
||||
<img :src="s.avatar" class="avatar-std" />
|
||||
<span v-if="s.unread > 0" class="unread-badge">{{ s.unread }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name-row">
|
||||
<span class="name">{{ s.name }}</span>
|
||||
<span class="time">{{ s.lastTime }}</span>
|
||||
</div>
|
||||
<div class="last-msg">{{ s.last }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<RouterView></RouterView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import router from '@/router'
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
const searchQuery = ref('')
|
||||
const input = ref('')
|
||||
const historyRef = ref(null)
|
||||
const activeId = ref(1)
|
||||
|
||||
const sessions = ref([
|
||||
{ id: 1, name: '南浔', last: '在写代码呢', lastTime: '14:20', avatar: 'https://i.pravatar.cc/40?1', unread: 2 },
|
||||
{ id: 2, name: '技术群', last: '部署好了', lastTime: '12:05', avatar: 'https://i.pravatar.cc/40?2', unread: 0 }
|
||||
])
|
||||
|
||||
const filteredSessions = computed(() => sessions.value.filter(s => s.name.includes(searchQuery.value)))
|
||||
|
||||
const currentSession = computed(() => sessions.value.find(s => s.id === activeId.value))
|
||||
|
||||
function selectSession(s) {
|
||||
activeId.value = s.id
|
||||
s.unread = 0
|
||||
router.push(`/messages/chat/${s.id}`)
|
||||
scrollToBottom()
|
||||
}
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (historyRef.value) historyRef.value.scrollTop = historyRef.value.scrollHeight
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#MsgList {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 2. 列表区修复 */
|
||||
.list-panel {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
background: #eee;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 修复：搜索框美化 */
|
||||
.search-section {
|
||||
padding: 20px 12px 10px 12px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #dbdbdb;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
gap: 5px;
|
||||
}
|
||||
.search-icon { font-size: 12px; color: #666; }
|
||||
.search-box input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-area { flex: 1; overflow-y: auto; }
|
||||
|
||||
/* 3. 聊天主面板修复 */
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
/* 修复：本人消息右侧对齐逻辑 */
|
||||
.msg {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 别人发的：默认靠左 */
|
||||
.msg.other { flex-direction: row; }
|
||||
|
||||
/* 本人发的：翻转排列方向，靠右显示 */
|
||||
.msg.mine {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
/* 修复：本人消息文字和时间戳也需要右对齐 */
|
||||
.msg.mine .msg-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: 9px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.other .bubble { background: #fff; color: #333; }
|
||||
.mine .bubble { background: #95ec69; color: #000; }
|
||||
|
||||
.msg-time {
|
||||
font-size: 11px;
|
||||
color: #b2b2b2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 头像样式统一 */
|
||||
.avatar-std { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
||||
.avatar-chat { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
/* 未读气泡 */
|
||||
.avatar-container { position: relative; }
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
/* 输入框区域修复 */
|
||||
.chat-footer {
|
||||
height: 160px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar { display: flex; gap: 12px; margin-bottom: 5px; font-size: 20px; color: #666; }
|
||||
.toolbar button { background: none; border: none; cursor: pointer; opacity: 0.7; }
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.send-row { display: flex; justify-content: flex-end; }
|
||||
.send-btn {
|
||||
background: #f5f5f5;
|
||||
color: #07c160;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.send-btn:hover { background: #e2e2e2; }
|
||||
|
||||
/* 列表美化 */
|
||||
.list-item { display: flex; padding: 12px; gap: 12px; cursor: pointer; }
|
||||
.list-item.active { background: #c6c6c6; }
|
||||
.list-item:hover:not(.active) { background: #ddd; }
|
||||
.info { flex: 1; overflow: hidden; }
|
||||
.name-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.name { font-size: 14px; font-weight: 500; }
|
||||
.time { font-size: 11px; color: #999; }
|
||||
.last-msg { font-size: 12px; color: #888; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.nav-item { font-size: 24px; cursor: pointer; opacity: 0.5; }
|
||||
.nav-item.active { opacity: 1; }
|
||||
</style>
|
||||
1
frontend/web/src/views/settings/SettingMenu.vue
Normal file
1
frontend/web/src/views/settings/SettingMenu.vue
Normal file
@ -0,0 +1 @@
|
||||
<template></template>
|
||||
Loading…
Reference in New Issue
Block a user