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> |
|||
import { useChatStore } from "@/stores/chat"; |
|||
import { Setting as SettingIcon } from "@element-plus/icons-vue"; |
|||
import { useChatStore } from "@/stores/chat"; |
|||
import { Setting as SettingIcon } from "@element-plus/icons-vue"; |
|||
|
|||
const store = useChatStore(); |
|||
const store = useChatStore(); |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-avatar |
|||
shape="square" |
|||
:size="40" |
|||
class="userAvatar" |
|||
:src="store.userInfo.avatar" |
|||
/> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(0)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 0" |
|||
class="menu-icon-on" |
|||
> |
|||
<ChatLineRound /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<ChatRound /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(1)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 1" |
|||
class="menu-icon-on" |
|||
> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<User /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(2)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 2" |
|||
class="menu-icon-on" |
|||
> |
|||
<Platform /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<Monitor /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(5)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 5" |
|||
class="menu-icon-on" |
|||
> |
|||
<SettingIcon /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<SettingIcon /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<!-- 头像 --> |
|||
<el-row> |
|||
<el-avatar |
|||
shape="square" |
|||
:size="40" |
|||
class="userAvatar" |
|||
:src="store.userInfo.avatar" |
|||
/> |
|||
</el-row> |
|||
|
|||
<!-- 菜单按钮 --> |
|||
<el-row @click="store.setCurrentNavId(0)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 0" |
|||
class="menu-icon-on" |
|||
> |
|||
<Comment /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<Comment /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
|
|||
<el-row @click="store.setCurrentNavId(1)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 1" |
|||
class="menu-icon-on" |
|||
> |
|||
<UserFilled /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<User /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
|
|||
<el-row @click="store.setCurrentNavId(2)"> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 2" |
|||
class="menu-icon-on" |
|||
> |
|||
<Platform /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<Monitor /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
|
|||
<!-- 设置按钮固定在底部 --> |
|||
<el-row |
|||
class="settings-icon-row" |
|||
@click="store.setCurrentNavId(5)" |
|||
> |
|||
<div class="menu-icon-box"> |
|||
<el-icon |
|||
v-if="store.currentNavId === 5" |
|||
class="menu-icon-on" |
|||
> |
|||
<Tools /> |
|||
</el-icon> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<Tools /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.userAvatar { |
|||
margin: 6px auto; |
|||
-webkit-app-region: no-drag; |
|||
} |
|||
.chat-user-info { |
|||
position: relative; |
|||
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 { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 40px; |
|||
height: 40px; |
|||
margin: 10px auto; |
|||
/* border-radius: 15%; */ |
|||
transition: all 0.5s; |
|||
} |
|||
/* .menu-icon-box:hover { |
|||
background-color: #d9d9d9; |
|||
} */ |
|||
.menu-icon { |
|||
margin: 0 auto; |
|||
font-size: 25px; |
|||
cursor: pointer; |
|||
color: #86909C; |
|||
} |
|||
|
|||
.menu-icon { |
|||
margin: 0px auto; |
|||
font-size: 25px; |
|||
cursor: pointer; |
|||
} |
|||
.menu-icon-on { |
|||
margin: 0 auto; |
|||
font-size: 25px; |
|||
color: #0d42d2; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.menu-icon-on { |
|||
margin: 0px auto; |
|||
font-size: 25px; |
|||
color: #2A6BF2; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
/* 设置按钮独立在底部 */ |
|||
.settings-icon-row { |
|||
position: absolute; |
|||
bottom: 20px; |
|||
left: 0; |
|||
right: 0; |
|||
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> |
|||
<div |
|||
v-if="store.targetChatId == null" |
|||
style="height: 280px; width: 100%" |
|||
class="no-message-container" |
|||
v-if="store.targetChatId" |
|||
class="chat-user-info" |
|||
> |
|||
<el-icon |
|||
:size="180" |
|||
color="#0078d7" |
|||
<!-- 用户信息区域 --> |
|||
<div |
|||
v-if=" |
|||
store.targetUserInfo && |
|||
Object.keys(store.targetUserInfo).length > 0 |
|||
" |
|||
class="user-content" |
|||
> |
|||
<ChatDotSquare /> |
|||
</el-icon> |
|||
<p class="welcome-text">欢迎使用GodoOS</p> |
|||
</div> |
|||
|
|||
<div |
|||
v-else-if=" |
|||
store.targetUserInfo && Object.keys(store.targetUserInfo).length > 0 |
|||
" |
|||
class="user-info-container" |
|||
> |
|||
<el-avatar |
|||
class="user-avatar" |
|||
:size="80" |
|||
:src="store.targetUserInfo.avatarUrl || ''" |
|||
/> |
|||
<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 class="user-details"> |
|||
<h2>{{ store.targetUserInfo.displayName }}</h2> |
|||
<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> |
|||
<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" |
|||
@click="sendMessage(store.targetChatId, 'group')" |
|||
<!-- 群信息区域 --> |
|||
<div |
|||
v-else-if=" |
|||
store.targetGroupInfo && |
|||
Object.keys(store.targetGroupInfo).length > 0 |
|||
" |
|||
class="group-content" |
|||
> |
|||
发送消息 |
|||
</el-button> |
|||
<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 |
|||
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 v-else>1</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { useChatStore } from "@/stores/chat"; |
|||
|
|||
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) => { |
|||
store.currentNavId = 0; |
|||
console.log(chatId, type); |
|||
store.getGroupMemberList(chatId); |
|||
store.addChatListAndGetChatHistory(chatId, type); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 无消息提示样式 */ |
|||
.no-message-container { |
|||
.chat-user-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
color: #4a4a4a; |
|||
width: 100%; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.welcome-text { |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
margin-top: 10px; |
|||
color: #333; |
|||
.user-content, |
|||
.group-content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
/* 用户信息容器 */ |
|||
.user-info-container { |
|||
.user-details, |
|||
.group-details { |
|||
flex: 1; |
|||
display: flex; |
|||
width: 100%; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100%; |
|||
padding: 20px; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 用户头像 */ |
|||
.user-avatar { |
|||
margin-bottom: 15px; |
|||
border-radius: 50%; |
|||
.user-details h2, |
|||
.group-details h2 { |
|||
margin: 0; |
|||
font-size: 1.5rem; |
|||
} |
|||
|
|||
/* 用户名标题 */ |
|||
.user-name { |
|||
font-size: 22px; |
|||
font-weight: 700; |
|||
color: #333; |
|||
margin-bottom: 15px; |
|||
.user-details p, |
|||
.group-details p { |
|||
margin: 5px 0; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 用户详细信息 */ |
|||
.user-details { |
|||
text-align: left; |
|||
background-color: #f8f9fa; |
|||
padding: 20px; |
|||
border-radius: 10px; |
|||
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); |
|||
max-width: 200px; |
|||
width: 100%; |
|||
margin-bottom: 30px; |
|||
.avatar, |
|||
.group-avatar { |
|||
width: 80px; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.user-details p { |
|||
margin: 8px 0; |
|||
color: #333; |
|||
.divider { |
|||
width: 100%; |
|||
height: 1px; |
|||
background-color: #e0e0e0; |
|||
margin: 20px 0; |
|||
} |
|||
|
|||
.user-details p strong { |
|||
color: #333; |
|||
.send-button-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
/* 发送消息按钮 */ |
|||
.send-message-btn { |
|||
width: 100%; |
|||
max-width: 240px; |
|||
font-size: 16px; |
|||
background-color: #0078d4; |
|||
.el-button { |
|||
background-color: #0d42d2; |
|||
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; |
|||
} |
|||
|
|||
/* 群聊信息容器 */ |
|||
.group-info-container { |
|||
display: flex; |
|||
width: 100%; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 100%; |
|||
padding: 20px; |
|||
text-align: center; |
|||
.el-button:hover { |
|||
background-color: #4080ff; |
|||
color: #fff; |
|||
} |
|||
</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 screenShort from "vue-web-screen-shot"; |
|||
import App from "./App.vue"; |
|||
import pinia from './stores/index.ts' |
|||
import ElementPlus from 'element-plus' |
|||
import 'element-plus/dist/index.css' |
|||
import './assets/windows10.scss' |
|||
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' |
|||
import './assets/windows10.scss'; |
|||
import { i18n } from './i18n/index.ts'; |
|||
import pinia from './stores/index.ts'; |
|||
import router from './system/router'; |
|||
const app = createApp(App) |
|||
|
|||
app.use(router) |
|||
app.use(ElementPlus) |
|||
app.use(pinia) |
|||
app.use(i18n) |
|||
|
|||
app.use(screenShort, { enableWebRtc: true }) |
|||
|
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
app.component(key, component) |
|||
app.component(key, component) |
|||
} |
|||
app.mount("#app"); |
|||
|
Loading…
Reference in new issue