qingfeng/pc_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(路由): 添加用户和聊天页面路由

Browse Source 
style(页脚): 更新版权信息和样式，添加链接和响应式设计

style(全局样式): 引入CSS变量，统一设计系统

refactor(主页面): 使用CSS变量优化样式，提升可维护性

style(购物车): 应用CSS变量，优化交互效果和动画

feat(头部导航): 增强用户信息展示和搜索类型切换动画

feat(聊天页面): 新增聊天功能界面，支持用户列表和消息交互

feat(用户信息): 重构用户信息页面，添加订单状态和功能菜单
This commit is contained in:
qingfeng1121
2026-01-12 13:56:17 +08:00
parent 0c07d33bf9
commit c287650fbb
9 changed files with 3685 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

703
src/Views/Chat.vue Normal file
View File

@@ -0,0 +1,703 @@
<!-- 聊天界面 -->
<template>
<div>
<div id="chat">
<!-- 左右结构 左边聊天导航栏（用户1 用户2 用户3 等 从上到下分布 一个用户一个li标签） 右边聊天内容（根据导航栏切换） -->
<div id="chat-nav">
<div class="nav-header">
<h2>消息</h2>
<!-- 搜索框 -->
<div class="search-container">
<input type="text" placeholder="搜索用户" v-model="searchTerm" class="search-input">
<i class="fas fa-search search-icon"></i>
</div>
</div>
<div class="user-list-container">
<ul class="user-list">
<li v-for="user in chatUsers" :key="user.id" :class="{ active: activeUserId === user.id }"
@click="selectUser(user.id)">
<div class="user-avatar">
<img :src="user.avatar" :alt="user.name">
</div>
<div class="user-info">
<div class="user-header">
<span class="user-name">{{ user.name }}</span>
<span class="message-time">{{ user.lastMessageTime }}</span>
</div>
<div class="user-last-message">
{{ user.lastMessage }}
</div>
</div>
<div v-if="user.unreadCount > 0" class="unread-badge">
{{ user.unreadCount }}
</div>
</li>
</ul>
</div>
</div>
<!-- 右边聊天内容 -->
<div id="chat-content">
<!-- 聊天头部 -->
<div v-if="activeUser" class="chat-header">
<div class="chat-user-info">
<div>
<h3>{{ activeUser.name }}</h3>
<p class="user-status">在线</p>
</div>
</div>
</div>
<!-- 聊天历史 -->
<div v-if="activeUser" class="chat-history">
<div v-for="(message, index) in messages" :key="index"
:class="{ 'chat-message': true, 'sent': message.sender === 'me', 'received': message.sender !== 'me' }">
<div v-if="message.sender !== 'me'" class="user-avatar small">
<img :src="activeUser.avatar" :alt="activeUser.name">
</div>
<div class="message-content">
<div class="message-text">{{ message.text }}</div>
<div class="message-time">{{ message.time }}</div>
</div>
</div>
</div>
<!-- 消息输入区 -->
<div v-if="activeUser" class="chat-input-area">
<div class="input-container">
<button class="input-btn">😊</button>
<button class="input-btn">📎</button>
<input type="text" v-model="newMessage" placeholder="输入消息..." class="message-input"
@keyup.enter="sendMessage">
<button class="input-btn">🎤</button>
</div>
<button class="send-btn" @click="sendMessage">发送</button>
</div>
<!-- 空状态 -->
<div v-else class="empty-state">
<img src="#" alt="选择聊天">
<h3>选择一个聊天</h3>
<p>开始与您的联系人聊天</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
// 搜索用户的关键词
const searchTerm = ref('')
// 聊天用户数据
const chatUsers = ref([
{
id: 1,
name: '用户1',
avatar: '?prompt=user%20avatar%20friendly%20smile&image_size=square',
lastMessage: '你好，我想购买商品1',
lastMessageTime: '10:00',
unreadCount: 2
},
{
id: 2,
name: '用户2',
avatar: '?prompt=user%20avatar%20professional%20business&image_size=square',
lastMessage: '订单什么时候发货？',
lastMessageTime: '09:30',
unreadCount: 0
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
},
{
id: 3,
name: '用户3',
avatar: '?prompt=user%20avatar%20casual%20young&image_size=square',
lastMessage: '商品质量怎么样？',
lastMessageTime: '昨天',
unreadCount: 1
}
])
// 消息数据
const messages = ref([
{
sender: 'user1',
text: '你好，我想购买商品1',
time: '10:00'
},
{
sender: 'me',
text: '您好，欢迎咨询，请问有什么可以帮助您的？',
time: '10:01'
},
{
sender: 'user1',
text: '商品1有货吗？',
time: '10:02'
}
])
// 当前活跃用户ID
const activeUserId = ref(1)
// 新消息
const newMessage = ref('')
// 计算当前活跃用户
const activeUser = computed(() => {
return chatUsers.value.find(user => user.id === activeUserId.value)
})
// 选择用户
const selectUser = (userId: number) => {
activeUserId.value = userId
// 清除未读消息数
const user = chatUsers.value.find(user => user.id === userId)
if (user) {
user.unreadCount = 0
}
}
// 发送消息
const sendMessage = () => {
if (newMessage.value.trim()) {
messages.value.push({
sender: 'me',
text: newMessage.value,
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
})
// 更新最后一条消息
if (activeUser.value) {
activeUser.value.lastMessage = newMessage.value
activeUser.value.lastMessageTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}
// 清空输入框
newMessage.value = ''
}
}
</script>
<style scoped>
#chat {
background-color: var(--bg-color);
display: flex;
justify-content: center;
box-sizing: border-box;
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl) 150px 0 150px;
}
/* 左侧聊天导航栏 */
#chat-nav {
width: 320px;
background-color: var(--bg-color);
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
padding: var(--spacing-sm) 0 0 var(--spacing-sm);
border: 1px solid var(--border-color);
border-right: none;
}
.nav-header {
padding: var(--spacing-md);
align-items: center;
}
.nav-header h2 {
margin: 0;
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
}
.search-container {
margin-top: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
display: flex;
align-items: center;
border-radius: var(--border-radius-xl);
border: 1px solid var(--border-color);
}
.search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: var(--font-size-sm);
color: var(--text-primary);
}
.search-icon {
font-size: var(--font-size-base);
color: var(--text-tertiary);
margin-left: var(--spacing-sm);
}
.user-list-container {
background-color: var(--card-bg);
overflow-x: auto;
max-height: 50vh;
}
.new-chat-btn {
width: 32px;
height: 32px;
border-radius: var(--border-radius-full);
background-color: var(--primary-color);
color: #ffffff;
border: none;
font-size: var(--font-size-lg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
}
.new-chat-btn:hover {
background-color: var(--primary-hover);
transform: scale(1.1);
}
#chat-nav .user-list-container ul {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
overflow-y: auto;
}
#chat-nav .user-list-container li {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-md);
cursor: pointer;
transition: all var(--transition-normal);
}
#chat-nav .user-list-container li:hover {
background-color: var(--bg-color);
border-radius: var(--border-radius-sm);
}
#chat-nav .user-list-container li.active {
background-color: var(--bg-primary-lightest);
border-radius: var(--border-radius-sm);
}
.user-avatar {
width: 50px;
height: 50px;
border-radius: var(--border-radius-full);
overflow: hidden;
margin-right: var(--spacing-md);
flex-shrink: 0;
border-radius: var(--border-radius-lg);
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar.small {
width: 36px;
height: 36px;
margin-right: var(--spacing-sm);
}
.user-info {
flex: 1;
min-width: 0;
}
.user-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xs);
}
.user-name {
font-weight: 600;
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.message-time {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
}
.user-last-message {
font-size: var(--font-size-xs);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.unread-badge {
background-color: var(--primary-color);
color: #ffffff;
font-size: var(--font-size-xs);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--border-radius-xl);
min-width: 20px;
text-align: center;
margin-left: var(--spacing-sm);
}
/* 右侧聊天内容 */
#chat-content {
flex: 1;
display: flex;
flex-direction: column;
background-color: var(--bg-color);
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
border: 1px solid var(--border-color);
border-left: none;
}
/* 聊天头部 */
.chat-header {
background-color: var(--bg-color);
padding: var(--spacing-md) var(--spacing-md);
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0 var(--border-radius-lg) 0 0;
}
.chat-user-info {
display: flex;
align-items: center;
width: 100%;
padding: 10px;
border-bottom: 1px solid #e0e0e0;
}
.chat-user-info h3 {
margin: 0 0 2px;
font-size: 16px;
font-weight: 600;
color: #333333;
}
.user-status {
font-size: 12px;
color: #4caf50;
margin: 0;
}
.chat-actions {
display: flex;
gap: 10px;
}
.action-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #f0f0f0;
border: none;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.action-btn:hover {
background-color: #e0e0e0;
}
/* 聊天历史 */
.chat-history {
flex: 1;
padding: 20px;
overflow-y: auto;
background-color: #f5f5f5;
background-image: url('?prompt=chat%20background%20pattern%20subtle%20light&image_size=landscape_16_9');
background-size: cover;
background-position: center;
}
.chat-message {
display: flex;
margin-bottom: 15px;
align-items: flex-end;
}
.chat-message.sent {
flex-direction: row-reverse;
}
.chat-message.sent .user-avatar {
margin-right: 0;
margin-left: 10px;
}
.message-content {
max-width: 70%;
display: flex;
flex-direction: column;
}
.chat-message.sent .message-content {
align-items: flex-end;
}
.message-text {
padding: 10px 15px;
border-radius: 18px;
margin-bottom: 4px;
line-height: 1.4;
}
.chat-message.received .message-text {
background-color: #ffffff;
border-bottom-left-radius: 4px;
}
.chat-message.sent .message-text {
background-color: #ff5000;
color: #ffffff;
border-bottom-right-radius: 4px;
}
.message-time {
font-size: 11px;
color: #999999;
}
/* 消息输入区 */
.chat-input-area {
background-color: #f5f5f5;
padding: 15px 20px;
border-top: 1px solid #e0e0e0;
border-radius: 0 0 10px 0;
display: flex;
align-items: center;
gap: 10px;
}
.input-container {
flex: 1;
display: flex;
align-items: center;
background-color: #f0f0f0;
border-radius: 24px;
padding: 8px 15px;
gap: 10px;
}
.input-btn {
background: none;
border: none;
font-size: 16px;
cursor: pointer;
padding: 4px;
}
.message-input {
flex: 1;
border: none;
background: none;
outline: none;
font-size: 14px;
color: #333333;
min-width: 0;
}
.message-input::placeholder {
color: #999999;
}
.send-btn {
padding: 8px 20px;
background-color: #ff5000;
color: #ffffff;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.send-btn:hover {
background-color: #ff6a00;
}
/* 空状态 */
.empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
padding: 40px;
text-align: center;
}
.empty-state img {
width: 120px;
height: 120px;
margin-bottom: 20px;
opacity: 0.6;
}
.empty-state h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 600;
color: #333333;
}
.empty-state p {
margin: 0;
font-size: 14px;
color: #999999;
}
/* 响应式设计 */
@media (max-width: 768px) {
#chat-nav {
width: 280px;
}
.chat-history {
padding: 15px;
}
.message-content {
max-width: 80%;
}
}
@media (max-width: 480px) {
#chat-nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#chat-nav.active {
transform: translateX(0);
}
#chat-content {
width: 100%;
}
.chat-header {
padding: 15px;
}
.chat-input-area {
padding: 10px 15px;
}
}
</style>