mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 06:02:38 +08:00
添加聊天模块
This commit is contained in:
icssoa
parent
e4ad03a744
commit
8218a4ba81
@ -9,7 +9,7 @@
|
||||
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cool-vue/crud": "^5.0.10",
|
||||
"@cool-vue/crud": "^5.0.11",
|
||||
"@element-plus/icons-vue": "^1.1.3",
|
||||
"@vueuse/core": "^8.2.5",
|
||||
"axios": "^0.27.2",
|
||||
|
||||
@ -18,18 +18,29 @@
|
||||
append-to-body
|
||||
:controls="['slot-expand', 'cl-flex1', 'fullscreen', 'close']"
|
||||
>
|
||||
<div class="cl-chat">
|
||||
<chat-session />
|
||||
<chat-message />
|
||||
<div
|
||||
class="cl-chat"
|
||||
:class="{
|
||||
'is-mini': app.browser.isMini,
|
||||
'is-expand': isExpand
|
||||
}"
|
||||
>
|
||||
<div class="cl-chat__session">
|
||||
<chat-session />
|
||||
</div>
|
||||
|
||||
<div class="cl-chat__right">
|
||||
<chat-message />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 展开按钮 -->
|
||||
<template #slot-expand>
|
||||
<button class="cl-dialog__controls-icon">
|
||||
<el-icon @click="session.visible = false" v-if="session.visible">
|
||||
<el-icon @click="isExpand = true" v-if="!isExpand">
|
||||
<notebook />
|
||||
</el-icon>
|
||||
<el-icon @click="session.visible = true" v-else>
|
||||
<el-icon @click="isExpand = false" v-else>
|
||||
<arrow-left />
|
||||
</el-icon>
|
||||
</button>
|
||||
@ -47,13 +58,14 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { provide, ref, watch } from "vue";
|
||||
import { nextTick, provide, ref, watch } from "vue";
|
||||
import { module } from "/@/cool/utils";
|
||||
import { useCool } from "/@/cool";
|
||||
import { useBase } from "/$/base";
|
||||
import ChatMessage from "./message.vue";
|
||||
import ChatSession from "./session.vue";
|
||||
import { Notebook, ArrowLeft, BellFilled } from "@element-plus/icons-vue";
|
||||
import { debounce } from "lodash";
|
||||
|
||||
const { service } = useCool();
|
||||
|
||||
@ -64,19 +76,74 @@ const { app } = useBase();
|
||||
const { options } = module.get("upload");
|
||||
|
||||
// 是否可见
|
||||
const visible = ref<boolean>(false);
|
||||
const visible = ref(false);
|
||||
|
||||
// 会话
|
||||
const session = reactive({
|
||||
visible: true,
|
||||
list: []
|
||||
// 是否展开
|
||||
const isExpand = ref(true);
|
||||
|
||||
// 聊天
|
||||
const chat = reactive({
|
||||
inputValue: "",
|
||||
session: {
|
||||
loading: false,
|
||||
value: null,
|
||||
list: []
|
||||
},
|
||||
message: {
|
||||
loading: false,
|
||||
list: [],
|
||||
pagination: {}
|
||||
},
|
||||
// 滚动到底部
|
||||
scrollToBottom: debounce(() => {
|
||||
nextTick(() => {
|
||||
const box = document.querySelector(".cl-chat .chat-message .list");
|
||||
box?.scroll({
|
||||
top: 100000 + Math.random(),
|
||||
behavior: "smooth"
|
||||
});
|
||||
});
|
||||
}, 300),
|
||||
// 获取会话列表
|
||||
async getSession() {
|
||||
this.session.loading = true;
|
||||
await service.im.session.page().then((res) => {
|
||||
chat.session.list = res.list;
|
||||
|
||||
// 默认加载第一个会话的消息
|
||||
if (!this.session.value) {
|
||||
this.setSession(res.list[0]);
|
||||
}
|
||||
});
|
||||
this.session.loading = false;
|
||||
},
|
||||
// 设置会话
|
||||
async setSession(data: any) {
|
||||
// 清空消息列表
|
||||
this.message.list = [];
|
||||
// 设置值
|
||||
this.session.value = data;
|
||||
// 获取消息
|
||||
await this.getMessage();
|
||||
// 滚动到底
|
||||
this.scrollToBottom();
|
||||
},
|
||||
// 获取消息
|
||||
async getMessage() {
|
||||
this.message.loading = true;
|
||||
await service.im.message.page().then((res) => {
|
||||
chat.message.list = res.list;
|
||||
chat.message.pagination = res.pagination;
|
||||
});
|
||||
this.message.loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 监听屏幕大小变化
|
||||
watch(
|
||||
() => app.browser.isMini,
|
||||
(val) => {
|
||||
session.visible = val ? false : true;
|
||||
isExpand.value = val ? false : true;
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
@ -93,9 +160,7 @@ function close() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
provide("chat", {
|
||||
session
|
||||
});
|
||||
provide("chat", chat);
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
@ -106,12 +171,15 @@ defineExpose({
|
||||
<style lang="scss">
|
||||
.cl-chat {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: #eee;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&__icon {
|
||||
padding: 5px;
|
||||
.el-badge__content {
|
||||
transform: translateY(-50%) translateX(100%) scale(0.8) !important;
|
||||
}
|
||||
@ -126,5 +194,42 @@ defineExpose({
|
||||
&__footer {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
&__session {
|
||||
height: calc(100% - 10px);
|
||||
width: 345px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&__right {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
transition: width 0.3s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.is-mini {
|
||||
&.is-expand {
|
||||
.cl-chat__session {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.cl-chat__session {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.cl-chat__right {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expand {
|
||||
.cl-chat__right {
|
||||
width: calc(100% - 350px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,57 @@
|
||||
<template>
|
||||
<div class="cl-chat__message">
|
||||
<div class="head"></div>
|
||||
<div class="list scroller1"></div>
|
||||
<div
|
||||
class="chat-message"
|
||||
v-loading="chat?.message.loading"
|
||||
element-loading-text="消息列表加载中"
|
||||
>
|
||||
<!-- 头部 -->
|
||||
<div class="head">
|
||||
<template v-if="chat?.session.value">
|
||||
<div class="avatar">
|
||||
<el-avatar
|
||||
:size="30"
|
||||
shape="square"
|
||||
:src="chat?.session.value.avatar"
|
||||
></el-avatar>
|
||||
</div>
|
||||
<span class="name">与“{{ chat?.session.value.nickName }}”聊天中</span>
|
||||
|
||||
<ul class="tools">
|
||||
<li></li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="list scroller1">
|
||||
<ul>
|
||||
<li v-for="(item, index) in list" :key="index">
|
||||
<div
|
||||
class="item"
|
||||
:class="{
|
||||
'is-right': item.type == 1
|
||||
}"
|
||||
>
|
||||
<div class="avatar">
|
||||
<el-avatar :size="36" shape="square" :src="item.avatar"></el-avatar>
|
||||
</div>
|
||||
|
||||
<div class="det">
|
||||
<div class="h">
|
||||
<span class="name">{{ item.nickName }}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="is-text">
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="footer">
|
||||
<div class="tools">
|
||||
<ul>
|
||||
@ -10,35 +60,144 @@
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<el-input type="textarea" :rows="1" placeholder="输入内容"></el-input>
|
||||
<el-button type="success">发送</el-button>
|
||||
<el-input
|
||||
v-model="chat.inputValue"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
resize="none"
|
||||
:autosize="{
|
||||
minRows: 4,
|
||||
maxRows: 10
|
||||
}"
|
||||
placeholder="输入内容"
|
||||
></el-input>
|
||||
<el-button size="small" type="success" @click="send">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue-demi";
|
||||
import { useChat } from "../hooks";
|
||||
|
||||
const { chat } = useChat();
|
||||
|
||||
// 过滤列表
|
||||
const list = computed(() => chat?.message.list);
|
||||
|
||||
function send() {
|
||||
chat?.scrollToBottom();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cl-chat__message {
|
||||
.chat-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0 10px;
|
||||
|
||||
.name {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
ul {
|
||||
& > li {
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
|
||||
.avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.det {
|
||||
.h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5px;
|
||||
|
||||
.is-text {
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 0 5px 5px 5px;
|
||||
max-width: 400px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.is-img {
|
||||
.el-image {
|
||||
max-width: 300px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.avatar {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.det {
|
||||
.h {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.content {
|
||||
.is-text {
|
||||
border-radius: 5px 0 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 10px;
|
||||
|
||||
.tools {
|
||||
@ -47,8 +206,8 @@
|
||||
|
||||
ul {
|
||||
li {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 3px;
|
||||
background-color: #eee;
|
||||
margin-right: 10px;
|
||||
@ -59,9 +218,13 @@
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,75 +1,85 @@
|
||||
<template>
|
||||
<div
|
||||
class="cl-chat__session"
|
||||
:class="{
|
||||
'is-position': app.browser.isMini,
|
||||
'is-show': chat?.session.visible
|
||||
}"
|
||||
>
|
||||
<div class="head"></div>
|
||||
<div class="chat-session">
|
||||
<div class="head">
|
||||
<el-input v-model="keyWord" placeholder="关键字搜索" clearable></el-input>
|
||||
</div>
|
||||
|
||||
<div class="list scroller1">
|
||||
<div class="item" v-for="(item, index) in 13" :key="index">
|
||||
<div class="list scroller1" v-loading="chat?.session.loading">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="{
|
||||
'is-active': item.id == chat?.session.value?.id
|
||||
}"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<div class="avatar">
|
||||
<el-badge value="2">
|
||||
<el-avatar shape="square"></el-avatar>
|
||||
<el-badge :value="item.num" :hidden="item.num == 0">
|
||||
<el-avatar shape="square" :src="item.avatar"></el-avatar>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<div class="det">
|
||||
<p class="name">神仙都没用</p>
|
||||
<p class="name">{{ item.nickName }}</p>
|
||||
<p class="message">
|
||||
https://g0qwq7gr7l.feishu.cn/docx/doxcnkMF3PFehilJTyHbEivkUod
|
||||
{{ item.text }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<p class="date">2022-04-21 12:22</p>
|
||||
<el-tag size="small">厦门</el-tag>
|
||||
<p class="date">{{ item.createTime }}</p>
|
||||
<!-- <el-tag size="small">厦门</el-tag> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="list.length == 0" image-size="100" description="暂无会话"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useChat } from "../hooks";
|
||||
import { useBase } from "/$/base";
|
||||
import { useCool } from "/@/cool";
|
||||
|
||||
const { app } = useBase();
|
||||
const { service } = useCool();
|
||||
const { chat } = useChat();
|
||||
|
||||
// 关键字
|
||||
const keyWord = ref("");
|
||||
|
||||
// 过滤列表
|
||||
const list = computed(
|
||||
() => chat?.session.list.filter((e) => e.nickName.includes(keyWord.value)) || []
|
||||
);
|
||||
|
||||
// 会话详情
|
||||
function toDetail(item: any) {
|
||||
chat?.setSession(item);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
chat?.getSession();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cl-chat__session {
|
||||
.chat-session {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
transition: width 0.2s ease-in-out;
|
||||
border-radius: 5px;
|
||||
|
||||
&.is-show {
|
||||
width: 350px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.is-position {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 51px;
|
||||
height: calc(100% - 56px);
|
||||
z-index: 3000;
|
||||
|
||||
&.is-show {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
padding: 10px;
|
||||
|
||||
.el-input {
|
||||
height: 30px;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
@ -101,7 +111,7 @@ const { chat } = useChat();
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.message {
|
||||
@ -118,10 +128,15 @@ const { chat } = useChat();
|
||||
|
||||
.date {
|
||||
margin-bottom: 5px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&.is-active {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&:not(.is-active):hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,32 @@
|
||||
import { inject } from "vue";
|
||||
|
||||
declare interface Item {
|
||||
id: string;
|
||||
avatar: string;
|
||||
nickName: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
declare interface Chat {
|
||||
inputValue: string;
|
||||
session: {
|
||||
visible: boolean;
|
||||
list: any[];
|
||||
loading: boolean;
|
||||
value: Item;
|
||||
list: Item[];
|
||||
};
|
||||
message: {
|
||||
loading: boolean;
|
||||
list: Item[];
|
||||
pagination: {
|
||||
page: number;
|
||||
total: number;
|
||||
size: number;
|
||||
};
|
||||
};
|
||||
scrollToBottom(): void;
|
||||
getSession(params?: any): void;
|
||||
setSession(data: any): void;
|
||||
getMessage(params?: any): void;
|
||||
}
|
||||
|
||||
export function useChat() {
|
||||
|
||||
47
src/modules/chat/service/message.ts
Normal file
47
src/modules/chat/service/message.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { BaseService, Service } from "/@/cool";
|
||||
import Mock from "mockjs";
|
||||
|
||||
@Service("im/message")
|
||||
class ImMessage extends BaseService {
|
||||
page() {
|
||||
return new Promise((resolve) => {
|
||||
const data = Mock.mock({
|
||||
"list|20": [
|
||||
{
|
||||
id: "@id",
|
||||
nickName: "@name",
|
||||
createTime: "@datetime(HH:mm:ss)",
|
||||
text: "@cparagraph(5)",
|
||||
content() {
|
||||
return JSON.stringify({ text: this.text });
|
||||
},
|
||||
"contentType|0-3": 0,
|
||||
"type|0-1": 0,
|
||||
avatar() {
|
||||
return Mock.Random.image(
|
||||
"40x40",
|
||||
Mock.Random.color(),
|
||||
"#FFF",
|
||||
"png",
|
||||
this.nickName[0]
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
list: data.list,
|
||||
pagination: {
|
||||
total: 20,
|
||||
page: 1,
|
||||
size: 20
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default ImMessage;
|
||||
43
src/modules/chat/service/session.ts
Normal file
43
src/modules/chat/service/session.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { BaseService, Service } from "/@/cool";
|
||||
import Mock from "mockjs";
|
||||
|
||||
@Service("im/session")
|
||||
class ImSession extends BaseService {
|
||||
page() {
|
||||
return new Promise((resolve) => {
|
||||
const data = Mock.mock({
|
||||
"list|20": [
|
||||
{
|
||||
id: "@id",
|
||||
nickName: "@name",
|
||||
createTime: "@datetime(HH:mm:ss)",
|
||||
text: "@cparagraph(5)",
|
||||
"num|0-99": 0,
|
||||
avatar() {
|
||||
return Mock.Random.image(
|
||||
"40x40",
|
||||
Mock.Random.color(),
|
||||
"#FFF",
|
||||
"png",
|
||||
this.nickName[0]
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
list: data.list,
|
||||
pagination: {
|
||||
total: 20,
|
||||
page: 1,
|
||||
size: 20
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default ImSession;
|
||||
@ -984,10 +984,10 @@
|
||||
"@babel/helper-validator-identifier" "^7.16.7"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@cool-vue/crud@^5.0.10":
|
||||
version "5.0.10"
|
||||
resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.0.10.tgz#c2d70504fccdf89c907e1d32e62a93dd777fba9c"
|
||||
integrity sha512-a3jZPS+Y/+7IJTA3iYjD7PK83rwtIDrnE0tcf5LfenZ7JnnlXs+QFMRybGypJfoeswsG97JmWFeSY6o/JyALDw==
|
||||
"@cool-vue/crud@^5.0.11":
|
||||
version "5.0.11"
|
||||
resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-5.0.11.tgz#fbca5084c4d1e9e82fba00f17bbbb984bd2ee38e"
|
||||
integrity sha512-0N1w5RCZqDKz5DLmhwXNLxZIbJPt/lkW8DuFzXB/cpeZTYYLc+5VubbD+KTah1YyA6C2js+Wt1MlKhC0gY6ROA==
|
||||
dependencies:
|
||||
array.prototype.flat "^1.2.4"
|
||||
core-js "^3.21.1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user