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 |
@ -1,115 +1,137 @@ |
|||||
<script setup> |
<script setup> |
||||
import { useChatStore } from "@/stores/chat"; |
import { useChatStore } from "@/stores/chat"; |
||||
import { Setting as SettingIcon } from "@element-plus/icons-vue"; |
import { Setting as SettingIcon } from "@element-plus/icons-vue"; |
||||
|
|
||||
const store = useChatStore(); |
const store = useChatStore(); |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<el-row> |
<!-- 头像 --> |
||||
<el-avatar |
<el-row> |
||||
shape="square" |
<el-avatar |
||||
:size="40" |
shape="square" |
||||
class="userAvatar" |
:size="40" |
||||
:src="store.userInfo.avatar" |
class="userAvatar" |
||||
/> |
:src="store.userInfo.avatar" |
||||
</el-row> |
/> |
||||
<el-row @click="store.setCurrentNavId(0)"> |
</el-row> |
||||
<div class="menu-icon-box"> |
|
||||
<el-icon |
<!-- 菜单按钮 --> |
||||
v-if="store.currentNavId === 0" |
<el-row @click="store.setCurrentNavId(0)"> |
||||
class="menu-icon-on" |
<div class="menu-icon-box"> |
||||
> |
<el-icon |
||||
<ChatLineRound /> |
v-if="store.currentNavId === 0" |
||||
</el-icon> |
class="menu-icon-on" |
||||
<el-icon |
> |
||||
v-else |
<Comment /> |
||||
class="menu-icon" |
</el-icon> |
||||
> |
<el-icon |
||||
<ChatRound /> |
v-else |
||||
</el-icon> |
class="menu-icon" |
||||
</div> |
> |
||||
</el-row> |
<Comment /> |
||||
<el-row @click="store.setCurrentNavId(1)"> |
</el-icon> |
||||
<div class="menu-icon-box"> |
</div> |
||||
<el-icon |
</el-row> |
||||
v-if="store.currentNavId === 1" |
|
||||
class="menu-icon-on" |
<el-row @click="store.setCurrentNavId(1)"> |
||||
> |
<div class="menu-icon-box"> |
||||
<UserFilled /> |
<el-icon |
||||
</el-icon> |
v-if="store.currentNavId === 1" |
||||
<el-icon |
class="menu-icon-on" |
||||
v-else |
> |
||||
class="menu-icon" |
<UserFilled /> |
||||
> |
</el-icon> |
||||
<User /> |
<el-icon |
||||
</el-icon> |
v-else |
||||
</div> |
class="menu-icon" |
||||
</el-row> |
> |
||||
<el-row @click="store.setCurrentNavId(2)"> |
<User /> |
||||
<div class="menu-icon-box"> |
</el-icon> |
||||
<el-icon |
</div> |
||||
v-if="store.currentNavId === 2" |
</el-row> |
||||
class="menu-icon-on" |
|
||||
> |
<el-row @click="store.setCurrentNavId(2)"> |
||||
<Platform /> |
<div class="menu-icon-box"> |
||||
</el-icon> |
<el-icon |
||||
<el-icon |
v-if="store.currentNavId === 2" |
||||
v-else |
class="menu-icon-on" |
||||
class="menu-icon" |
> |
||||
> |
<Platform /> |
||||
<Monitor /> |
</el-icon> |
||||
</el-icon> |
<el-icon |
||||
</div> |
v-else |
||||
</el-row> |
class="menu-icon" |
||||
<el-row @click="store.setCurrentNavId(5)"> |
> |
||||
<div class="menu-icon-box"> |
<Monitor /> |
||||
<el-icon |
</el-icon> |
||||
v-if="store.currentNavId === 5" |
</div> |
||||
class="menu-icon-on" |
</el-row> |
||||
> |
|
||||
<SettingIcon /> |
<!-- 设置按钮固定在底部 --> |
||||
</el-icon> |
<el-row |
||||
<el-icon |
class="settings-icon-row" |
||||
v-else |
@click="store.setCurrentNavId(5)" |
||||
class="menu-icon" |
> |
||||
> |
<div class="menu-icon-box"> |
||||
<SettingIcon /> |
<el-icon |
||||
</el-icon> |
v-if="store.currentNavId === 5" |
||||
</div> |
class="menu-icon-on" |
||||
</el-row> |
> |
||||
|
<Tools /> |
||||
|
</el-icon> |
||||
|
<el-icon |
||||
|
v-else |
||||
|
class="menu-icon" |
||||
|
> |
||||
|
<Tools /> |
||||
|
</el-icon> |
||||
|
</div> |
||||
|
</el-row> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.userAvatar { |
.chat-user-info { |
||||
margin: 6px auto; |
position: relative; |
||||
-webkit-app-region: no-drag; |
height: 100%; |
||||
} |
} |
||||
|
|
||||
|
.userAvatar { |
||||
|
margin: 6px auto; |
||||
|
-webkit-app-region: no-drag; |
||||
|
} |
||||
|
|
||||
|
.menu-icon-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin: 10px auto; |
||||
|
transition: all 0.5s; |
||||
|
} |
||||
|
|
||||
.menu-icon-box { |
.menu-icon { |
||||
display: flex; |
margin: 0 auto; |
||||
align-items: center; |
font-size: 25px; |
||||
justify-content: center; |
cursor: pointer; |
||||
width: 40px; |
color: #86909C; |
||||
height: 40px; |
} |
||||
margin: 10px auto; |
|
||||
/* border-radius: 15%; */ |
|
||||
transition: all 0.5s; |
|
||||
} |
|
||||
/* .menu-icon-box:hover { |
|
||||
background-color: #d9d9d9; |
|
||||
} */ |
|
||||
|
|
||||
.menu-icon { |
.menu-icon-on { |
||||
margin: 0px auto; |
margin: 0 auto; |
||||
font-size: 25px; |
font-size: 25px; |
||||
cursor: pointer; |
color: #0d42d2; |
||||
} |
cursor: pointer; |
||||
|
} |
||||
|
|
||||
.menu-icon-on { |
/* 设置按钮独立在底部 */ |
||||
margin: 0px auto; |
.settings-icon-row { |
||||
font-size: 25px; |
position: absolute; |
||||
color: #2A6BF2; |
bottom: 20px; |
||||
cursor: pointer; |
left: 0; |
||||
} |
right: 0; |
||||
</style> |
width: 55px; |
||||
|
height: 55px; |
||||
|
} |
||||
|
</style> |
||||
|
@ -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> |
||||
</div> |
<p>岗位:{{ targetUserInfo.desc }}</p> |
||||
|
<p>邮箱:{{ targetUserInfo.email }}</p> |
||||
<div |
<p>电话:{{ targetUserInfo.phone }}</p> |
||||
v-else-if=" |
<p>入职日期:{{ targetUserInfo.hiredDate }}</p> |
||||
store.targetUserInfo && Object.keys(store.targetUserInfo).length > 0 |
</div> |
||||
" |
<div class="avatar"> |
||||
class="user-info-container" |
<el-avatar |
||||
> |
style="width: 80px; height: 80px" |
||||
<el-avatar |
:src="targetUserInfo.avatar" |
||||
class="user-avatar" |
alt="avatar" |
||||
:size="80" |
/> |
||||
:src="store.targetUserInfo.avatarUrl || ''" |
</div> |
||||
/> |
|
||||
<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 |
|
||||
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> |
|
||||
|
|
||||
<el-button |
<!-- 群信息区域 --> |
||||
class="send-message-btn" |
<div |
||||
@click="sendMessage(store.targetChatId, 'group')" |
v-else-if=" |
||||
|
store.targetGroupInfo && |
||||
|
Object.keys(store.targetGroupInfo).length > 0 |
||||
|
" |
||||
|
class="group-content" |
||||
> |
> |
||||
发送消息 |
<div class="group-details"> |
||||
</el-button> |
<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 |
||||
|
style="width: 80px; height: 80px" |
||||
|
:src="targetGroupInfo.avatar" |
||||
|
alt="group-avatar" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分割线 --> |
||||
|
<div class="divider"></div> |
||||
|
|
||||
|
<!-- 发送按钮 --> |
||||
|
<div class="send-button-container"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click=" |
||||
|
sendMessage( |
||||
|
store.targetGroupInfo?.chatId || |
||||
|
store.targetUserInfo.chatId, |
||||
|
store.targetGroupInfo |
||||
|
? 'group' |
||||
|
: store.targetUserInfo.type |
||||
|
) |
||||
|
" |
||||
|
> |
||||
|
发送消息 |
||||
|
</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; |
|
||||
} |
} |
||||
|
.el-button:hover { |
||||
.send-message-btn:hover { |
background-color: #4080ff; |
||||
background-color: #005a9e; |
color: #fff; |
||||
} |
|
||||
|
|
||||
/* 群聊信息容器 */ |
|
||||
.group-info-container { |
|
||||
display: flex; |
|
||||
width: 100%; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
height: 100%; |
|
||||
padding: 20px; |
|
||||
text-align: center; |
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
@ -1,21 +1,24 @@ |
|||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; |
||||
|
//svg插件需要配置代码
|
||||
|
import ElementPlus from 'element-plus'; |
||||
|
import 'element-plus/dist/index.css'; |
||||
import { createApp } from "vue"; |
import { createApp } from "vue"; |
||||
|
import screenShort from "vue-web-screen-shot"; |
||||
import App from "./App.vue"; |
import App from "./App.vue"; |
||||
import pinia from './stores/index.ts' |
import './assets/windows10.scss'; |
||||
import ElementPlus from 'element-plus' |
import { i18n } from './i18n/index.ts'; |
||||
import 'element-plus/dist/index.css' |
import pinia from './stores/index.ts'; |
||||
import './assets/windows10.scss' |
import router from './system/router'; |
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|
||||
import router from './system/router' |
|
||||
import screenShort from "vue-web-screen-shot" |
|
||||
import {i18n} from './i18n/index.ts' |
|
||||
const app = createApp(App) |
const app = createApp(App) |
||||
|
|
||||
app.use(router) |
app.use(router) |
||||
app.use(ElementPlus) |
app.use(ElementPlus) |
||||
app.use(pinia) |
app.use(pinia) |
||||
app.use(i18n) |
app.use(i18n) |
||||
|
|
||||
app.use(screenShort, { enableWebRtc: true }) |
app.use(screenShort, { enableWebRtc: true }) |
||||
|
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
||||
app.component(key, component) |
app.component(key, component) |
||||
} |
} |
||||
app.mount("#app"); |
app.mount("#app"); |
||||
|
Loading…
Reference in new issue