mirror of https://gitee.com/godoos/godoos.git
18 changed files with 1548 additions and 405 deletions
File diff suppressed because it is too large
After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class="group-member-container"> |
||||
|
<!-- 群成员列表 --> |
||||
|
<div |
||||
|
class="member-list" |
||||
|
v-for="item in groupMembers" |
||||
|
:key="item.userId" |
||||
|
> |
||||
|
<!-- 头像和昵称 --> |
||||
|
<div class="member-item"> |
||||
|
<div class="avatar-container"> |
||||
|
<el-avatar |
||||
|
style="width: 100%; height: 100%;" |
||||
|
:src="item.avatar" |
||||
|
/> |
||||
|
</div> |
||||
|
<span>{{ item.nickname }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { useChatStore } from "@/stores/chat"; |
||||
|
const store = useChatStore(); |
||||
|
|
||||
|
// 使用模拟数据 |
||||
|
|
||||
|
// 使用模拟数据,定义40条 |
||||
|
const groupMembers = ref( |
||||
|
Array.from({ length: 40 }, (v, i) => ({ |
||||
|
userId: `${i + 1}`, |
||||
|
avatar: `path/to/avatar${i + 1}.jpg`, |
||||
|
nickname: `用户1111111111111111${i + 1}`, |
||||
|
})) |
||||
|
); |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.group-member-container { |
||||
|
margin: 10px 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.member-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.avatar-container { |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.member-item span { |
||||
|
width: 90px; |
||||
|
margin-left: 10px; |
||||
|
font-size: 12px; |
||||
|
color: #86909C; |
||||
|
overflow: hidden; /* 防止内容溢出 */ |
||||
|
white-space: nowrap; /* 保持文本在一行 */ |
||||
|
text-overflow: ellipsis; /* 文本溢出显示省略号 */ |
||||
|
max-width: 150px; /* 最大宽度,根据需要调整 */ |
||||
|
} |
||||
|
</style> |
@ -1,173 +1,172 @@ |
|||||
<template> |
<template> |
||||
<div |
<div |
||||
v-if="store.targetChatId == null" |
v-if="store.targetChatId" |
||||
style="height: 280px; width: 100%" |
class="chat-user-info" |
||||
class="no-message-container" |
|
||||
> |
> |
||||
<el-icon |
<!-- 用户信息区域 --> |
||||
:size="180" |
<div |
||||
color="#0078d7" |
v-if=" |
||||
|
store.targetUserInfo && |
||||
|
Object.keys(store.targetUserInfo).length > 0 |
||||
|
" |
||||
|
class="user-content" |
||||
> |
> |
||||
<ChatDotSquare /> |
<div class="user-details"> |
||||
</el-icon> |
<h2>{{ store.targetUserInfo.displayName }}</h2> |
||||
<p class="welcome-text">欢迎使用GodoOS</p> |
<p>工号:{{ targetUserInfo.jobNumber }}</p> |
||||
|
<p>岗位:{{ targetUserInfo.desc }}</p> |
||||
|
<p>邮箱:{{ targetUserInfo.email }}</p> |
||||
|
<p>电话:{{ targetUserInfo.phone }}</p> |
||||
|
<p>入职日期:{{ targetUserInfo.hiredDate }}</p> |
||||
|
</div> |
||||
|
<div class="avatar"> |
||||
|
<el-avatar |
||||
|
style="width: 80px; height: 80px" |
||||
|
:src="targetUserInfo.avatar" |
||||
|
alt="avatar" |
||||
|
/> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
|
||||
|
<!-- 群信息区域 --> |
||||
<div |
<div |
||||
v-else-if=" |
v-else-if=" |
||||
store.targetUserInfo && Object.keys(store.targetUserInfo).length > 0 |
store.targetGroupInfo && |
||||
|
Object.keys(store.targetGroupInfo).length > 0 |
||||
" |
" |
||||
class="user-info-container" |
class="group-content" |
||||
> |
> |
||||
|
<div class="group-details"> |
||||
|
<h2>{{ store.targetGroupInfo.displayName }}</h2> |
||||
|
<p>群ID:{{ store.targetGroupInfo.chatId }}</p> |
||||
|
<p>群人数:{{ targetGroupInfo.memberCount }}人</p> |
||||
|
<p>创建时间:{{ targetGroupInfo.createdAt }}</p> |
||||
|
</div> |
||||
|
<div class="group-avatar"> |
||||
|
<div class="avatar-container"> |
||||
<el-avatar |
<el-avatar |
||||
class="user-avatar" |
style="width: 80px; height: 80px" |
||||
:size="80" |
:src="targetGroupInfo.avatar" |
||||
:src="store.targetUserInfo.avatarUrl || ''" |
alt="group-avatar" |
||||
/> |
/> |
||||
<h2 class="user-name">{{ store.targetUserInfo.displayName }}</h2> |
|
||||
<div class="user-details"> |
|
||||
<p><strong>邮箱:</strong> {{ store.targetUserInfo.email }}</p> |
|
||||
<p><strong>电话:</strong> {{ store.targetUserInfo.phone }}</p> |
|
||||
<p><strong>描述:</strong> {{ store.targetUserInfo.desc }}</p> |
|
||||
<p><strong>工号:</strong> {{ store.targetUserInfo.jobNumber }}</p> |
|
||||
<p> |
|
||||
<strong>工作地点:</strong> {{ store.targetUserInfo.workPlace }} |
|
||||
</p> |
|
||||
<p> |
|
||||
<strong>入职日期:</strong> {{ store.targetUserInfo.hiredDate }} |
|
||||
</p> |
|
||||
</div> |
</div> |
||||
<el-button |
|
||||
class="send-message-btn" |
|
||||
@click="sendMessage(store.targetChatId, 'user')" |
|
||||
> |
|
||||
发送消息 |
|
||||
</el-button> |
|
||||
</div> |
</div> |
||||
<!-- 群聊信息 --> |
</div> |
||||
<div |
|
||||
v-else |
|
||||
class="group-info-container" |
|
||||
> |
|
||||
<el-avatar |
|
||||
class="group-avatar" |
|
||||
:size="80" |
|
||||
><span style="font-size: 40px;">群</span></el-avatar> |
|
||||
|
|
||||
<h2 class="group-name">{{ store.targetGroupInfo.displayName }}</h2> |
<!-- 分割线 --> |
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
<!-- 发送按钮 --> |
||||
|
<div class="send-button-container"> |
||||
<el-button |
<el-button |
||||
class="send-message-btn" |
type="primary" |
||||
@click="sendMessage(store.targetChatId, 'group')" |
@click=" |
||||
|
sendMessage( |
||||
|
store.targetGroupInfo?.chatId || |
||||
|
store.targetUserInfo.chatId, |
||||
|
store.targetGroupInfo |
||||
|
? 'group' |
||||
|
: store.targetUserInfo.type |
||||
|
) |
||||
|
" |
||||
> |
> |
||||
发送消息 |
发送消息 |
||||
</el-button> |
</el-button> |
||||
</div> |
</div> |
||||
|
</div> |
||||
|
<div v-else>1</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { useChatStore } from "@/stores/chat"; |
import { useChatStore } from "@/stores/chat"; |
||||
|
|
||||
const store = useChatStore(); |
const store = useChatStore(); |
||||
|
|
||||
|
// 模拟用户信息 |
||||
|
const targetUserInfo = { |
||||
|
avatar: "./logo.png", |
||||
|
jobNumber: 12345678, |
||||
|
desc: "测试岗位", |
||||
|
email: "12345678@qq.com", |
||||
|
phone: "12345678910", |
||||
|
hiredDate: "2024-01-01", |
||||
|
}; |
||||
|
|
||||
|
// 模拟群信息 |
||||
|
const targetGroupInfo = { |
||||
|
avatar: "./logo.png", |
||||
|
chatId: "1234567890", |
||||
|
memberCount: 100, |
||||
|
createdAt: "2024-01-01", |
||||
|
}; |
||||
|
|
||||
const sendMessage = (chatId: string, type: string) => { |
const sendMessage = (chatId: string, type: string) => { |
||||
store.currentNavId = 0; |
store.currentNavId = 0; |
||||
console.log(chatId, type); |
store.getGroupMemberList(chatId); |
||||
store.addChatListAndGetChatHistory(chatId, type); |
store.addChatListAndGetChatHistory(chatId, type); |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
/* 无消息提示样式 */ |
.chat-user-info { |
||||
.no-message-container { |
|
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: center; |
width: 100%; |
||||
justify-content: center; |
padding: 20px; |
||||
text-align: center; |
|
||||
color: #4a4a4a; |
|
||||
} |
} |
||||
|
|
||||
.welcome-text { |
.user-content, |
||||
font-size: 18px; |
.group-content { |
||||
font-weight: 600; |
display: flex; |
||||
margin-top: 10px; |
align-items: center; |
||||
color: #333; |
justify-content: space-between; |
||||
} |
} |
||||
|
|
||||
/* 用户信息容器 */ |
.user-details, |
||||
.user-info-container { |
.group-details { |
||||
|
flex: 1; |
||||
display: flex; |
display: flex; |
||||
width: 100%; |
|
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 100%; |
|
||||
padding: 20px; |
|
||||
text-align: center; |
|
||||
} |
} |
||||
|
|
||||
/* 用户头像 */ |
.user-details h2, |
||||
.user-avatar { |
.group-details h2 { |
||||
margin-bottom: 15px; |
margin: 0; |
||||
border-radius: 50%; |
font-size: 1.5rem; |
||||
} |
} |
||||
|
|
||||
/* 用户名标题 */ |
.user-details p, |
||||
.user-name { |
.group-details p { |
||||
font-size: 22px; |
margin: 5px 0; |
||||
font-weight: 700; |
color: #666; |
||||
color: #333; |
|
||||
margin-bottom: 15px; |
|
||||
} |
} |
||||
|
|
||||
/* 用户详细信息 */ |
.avatar, |
||||
.user-details { |
.group-avatar { |
||||
text-align: left; |
width: 80px; |
||||
background-color: #f8f9fa; |
height: 100%; |
||||
padding: 20px; |
object-fit: cover; |
||||
border-radius: 10px; |
margin-left: 20px; |
||||
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); |
|
||||
max-width: 200px; |
|
||||
width: 100%; |
|
||||
margin-bottom: 30px; |
|
||||
} |
} |
||||
|
|
||||
.user-details p { |
.divider { |
||||
margin: 8px 0; |
width: 100%; |
||||
color: #333; |
height: 1px; |
||||
|
background-color: #e0e0e0; |
||||
|
margin: 20px 0; |
||||
} |
} |
||||
|
|
||||
.user-details p strong { |
.send-button-container { |
||||
color: #333; |
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 20px; |
||||
} |
} |
||||
|
|
||||
/* 发送消息按钮 */ |
.el-button { |
||||
.send-message-btn { |
background-color: #0d42d2; |
||||
width: 100%; |
|
||||
max-width: 240px; |
|
||||
font-size: 16px; |
|
||||
background-color: #0078d4; |
|
||||
color: #fff; |
color: #fff; |
||||
border-radius: 8px; |
|
||||
box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3); |
|
||||
font-weight: 600; |
|
||||
transition: background-color 0.3s; |
|
||||
} |
|
||||
|
|
||||
.send-message-btn:hover { |
|
||||
background-color: #005a9e; |
|
||||
} |
} |
||||
|
.el-button:hover { |
||||
/* 群聊信息容器 */ |
background-color: #4080ff; |
||||
.group-info-container { |
color: #fff; |
||||
display: flex; |
|
||||
width: 100%; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 100%; |
|
||||
padding: 20px; |
|
||||
text-align: center; |
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue