La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

!60 web端样式风格调整 

Merge pull request !60 from blue/v_2.0.0
master
blue 2 years ago
committed by Gitee
parent
249b74a86c 2f0b69a2e0
commit
2f51aa11b7
No known key found for this signature in database GPG Key ID: 173E9B9CA92EEF8F
22 changed files with 332 additions and 226 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      README.md
  2. 2
      im-server/src/main/java/com/bx/imserver/netty/ws/WebSocketServer.java
  3. 98
      im-ui/src/App.vue
  4. 38
      im-ui/src/assets/iconfont/iconfont.css
  5. BIN
      im-ui/src/assets/iconfont/iconfont.ttf
  6. 53
      im-ui/src/components/chat/ChatBox.vue
  7. 10
      im-ui/src/components/chat/ChatItem.vue
  8. 9
      im-ui/src/components/friend/AddFriend.vue
  9. 8
      im-ui/src/components/friend/FriendItem.vue
  10. 13
      im-ui/src/components/group/AddGroupMember.vue
  11. 10
      im-ui/src/components/group/GroupItem.vue
  12. 3
      im-ui/src/components/setting/Setting.vue
  13. 15
      im-ui/src/view/Chat.vue
  14. 77
      im-ui/src/view/Friend.vue
  15. 73
      im-ui/src/view/Group.vue
  16. 62
      im-ui/src/view/Home.vue
  17. 9
      im-ui/src/view/Login.vue
  18. 28
      im-uniapp/App.vue
  19. 4
      im-uniapp/common/request.js
  20. 14
      im-uniapp/components/chat-item/chat-item.vue
  21. 16
      im-uniapp/pages/login/login.vue
  22. 8
      im-uniapp/store/chatStore.js

8
README.md
View File

@ -249,13 +249,6 @@ wsApi.onClose((e) => {
欢迎进群与小伙们一起交流， **申请加群前请务必先star哦** 欢迎进群与小伙们一起交流， **申请加群前请务必先star哦**
#### 嘿嘿
![输入图片说明](%E6%88%AA%E5%9B%BE/%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E7%A0%81.png)
悄悄放个二维码在这，宝子们..你懂我意思吧
#### 点下star吧 #### 点下star吧
如果项目对您有帮助，请点亮右上方的star，支持一下作者吧！ 如果项目对您有帮助，请点亮右上方的star，支持一下作者吧！
@ -264,4 +257,5 @@ wsApi.onClose((e) => {
1. 本系统允许用于商业用途，且不收费（自愿投币）。**但切记不要用于任何非法用途** ，本软件作者不会为此承担任何责任 1. 本系统允许用于商业用途，且不收费（自愿投币）。**但切记不要用于任何非法用途** ，本软件作者不会为此承担任何责任
1. 基于本系统二次开发后再次开源的项目，请注明引用出处，以避免引发不必要的误会 1. 基于本系统二次开发后再次开源的项目，请注明引用出处，以避免引发不必要的误会
1. 如果您也想体验开源(bei bai piao)的快感，成为本项目的贡献者，欢迎提交PR。开发前最好提前联系作者，避免功能重复开发 1. 如果您也想体验开源(bei bai piao)的快感，成为本项目的贡献者，欢迎提交PR。开发前最好提前联系作者，避免功能重复开发
1. 作者目前不打算接项目，如果能接受1k/天以上的报价，也可以聊聊

2
im-server/src/main/java/com/bx/imserver/netty/ws/WebSocketServer.java
View File

@ -61,7 +61,7 @@ public class WebSocketServer implements IMServer {
protected void initChannel(Channel ch) { protected void initChannel(Channel ch) {
// 获取职责链 // 获取职责链
ChannelPipeline pipeline = ch.pipeline(); ChannelPipeline pipeline = ch.pipeline();
pipeline.addLast(new IdleStateHandler(120, 0, 0, TimeUnit.SECONDS)); pipeline.addLast(new IdleStateHandler(60, 0, 0, TimeUnit.SECONDS));
pipeline.addLast("http-codec", new HttpServerCodec()); pipeline.addLast("http-codec", new HttpServerCodec());
pipeline.addLast("aggregator", new HttpObjectAggregator(65535)); pipeline.addLast("aggregator", new HttpObjectAggregator(65535));
pipeline.addLast("http-chunked", new ChunkedWriteHandler()); pipeline.addLast("http-chunked", new ChunkedWriteHandler());

98
im-ui/src/App.vue
View File

@ -1,33 +1,89 @@
<template> <template>
<div id="app"> <div id="app">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
export default {
name: 'App',
components: {}
}
</script>
<style lang="scss">
@import './assets/style/global.css';
export default { #app {
name: 'App', font-family: 'Avenir', Helvetica, Arial, sans-serif;
components: { -webkit-font-smoothing: antialiased;
} -moz-osx-font-smoothing: grayscale;
color: #2c3e50;
position: absolute;
height: 100%;
width: 100%;
} }
</script>
<style> .el-message {
@import './assets/style/global.css'; z-index: 99999999 !important;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; .el-scrollbar__thumb {
-webkit-font-smoothing: antialiased; background-color: #A0A8AF !important;
-moz-osx-font-smoothing: grayscale; }
color: #2c3e50;
position: absolute; .el-dialog {
height: 100%; border-radius: 8px !important;
width: 100%; overflow: hidden !important;
}
.el-dialog__header {
background-color: #5870e6 !important;
}
.el-dialog__title {
color: #f8f8f8 !important;
}
.el-dialog__close {
color: white !important;
font-size: 20px;
}
.el-checkbox__inner {
border-radius: 50% !important;
}
.el-input__inner {
border-radius: 5px !important;
border: #587FF0 1px solid !important;
}
.el-textarea__inner{
border-radius: 5px !important;
border: #587FF0 1px solid !important;
}
.el-icon-search {
color:#587FF0 !important;
}
.el-button--primary {
background-color: #687Ff0 !important;
border-color: #687Ff0 !important;
}
.el-button--success {
background-color: #4cae1b !important;
border-color: #4cae1b !important;
}
.el-button--danger {
background-color: #ea4949 !important;
border-color: #ea4949 !important;
} }
.el-message { .el-button {
z-index: 99999999 !important; padding: 8px 15px !important;
} }
</style> </style>

38
im-ui/src/assets/iconfont/iconfont.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3791506 */ font-family: "iconfont"; /* Project id 3791506 */
src: url('iconfont.ttf?t=1711892447736') format('truetype'); src: url('iconfont.ttf?t=1714220334746') format('truetype');
} }
.iconfont { .iconfont {
@ -11,6 +11,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-chat:before {
content: "\e600";
}
.icon-setting:before {
content: "\e620";
}
.icon-friend:before {
content: "\e604";
}
.icon-exit:before { .icon-exit:before {
content: "\e9e4"; content: "\e9e4";
} }
@ -31,34 +43,14 @@
content: "\e61a"; content: "\e61a";
} }
.icon-biaoqing:before { .icon-emoji:before {
content: "\e60c"; content: "\e60c";
} }
.icon-youyinpin:before { .icon-group:before {
content: "\e649";
}
.icon-audio:before {
content: "\e800";
}
.icon-group_fill:before {
content: "\e7f4"; content: "\e7f4";
} }
.icon-yinpin:before {
content: "\e68a";
}
.icon-emoji:before {
content: "\e6f6";
}
.icon-voiceprint:before {
content: "\e953";
}
.icon-phone-reject:before { .icon-phone-reject:before {
content: "\e605"; content: "\e605";
} }

BIN
im-ui/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

53
im-ui/src/components/chat/ChatBox.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()"> <div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
<el-container> <el-container>
<el-header height="60px"> <el-header height="56px">
<span>{{ title }}</span> <span>{{ title }}</span>
<span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more" <span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more"
@click="showSide = !showSide"></span> @click="showSide = !showSide"></span>
@ -25,7 +25,7 @@
</el-main> </el-main>
<el-footer height="240px" class="im-chat-footer"> <el-footer height="240px" class="im-chat-footer">
<div class="chat-tool-bar"> <div class="chat-tool-bar">
<div title="表情" class="icon iconfont icon-biaoqing" ref="emotion" <div title="表情" class="icon iconfont icon-emoji" ref="emotion"
@click.stop="showEmotionBox()"> @click.stop="showEmotionBox()">
</div> </div>
<div title="发送图片"> <div title="发送图片">
@ -58,7 +58,7 @@
<div contenteditable="true" v-show="!sendImageUrl" ref="editBox" class="send-text-area" <div contenteditable="true" v-show="!sendImageUrl" ref="editBox" class="send-text-area"
:disabled="lockMessage" @paste.prevent="onEditorPaste" :disabled="lockMessage" @paste.prevent="onEditorPaste"
@compositionstart="onEditorCompositionStart" @compositionend="onEditorCompositionEnd" @compositionstart="onEditorCompositionStart" @compositionend="onEditorCompositionEnd"
@input="onEditorInput" :placeholder="isReceipt ? '【回执消息】' : ''" @blur="onEditBoxBlur()" @input="onEditorInput" :placeholder="placeholder" @blur="onEditBoxBlur()"
@keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.enter.prevent="onKeyEnter">x @keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.enter.prevent="onKeyEnter">x
</div> </div>
@ -123,6 +123,7 @@ export default {
groupMembers: [], groupMembers: [],
sendImageUrl: "", sendImageUrl: "",
sendImageFile: "", sendImageFile: "",
placeholder: "",
isReceipt: true, isReceipt: true,
showVoice: false, // 是否显示语音录制弹窗 showVoice: false, // 是否显示语音录制弹窗
showSide: false, // 是否显示群聊信息栏 showSide: false, // 是否显示群聊信息栏
@ -191,6 +192,7 @@ export default {
this.atSearchText = this.focusNode.textContent.substring(stIdx + 1); this.atSearchText = this.focusNode.textContent.substring(stIdx + 1);
} }
} }
this.refreshPlaceHolder();
}, },
onEditorCompositionStart() { onEditorCompositionStart() {
@ -238,6 +240,7 @@ export default {
}, },
onSwitchReceipt() { onSwitchReceipt() {
this.isReceipt = !this.isReceipt; this.isReceipt = !this.isReceipt;
this.refreshPlaceHolder();
}, },
createSendText() { createSendText() {
let sendText = this.isReceipt ? "【回执消息】" : ""; let sendText = this.isReceipt ? "【回执消息】" : "";
@ -684,6 +687,17 @@ export default {
let div = document.getElementById("chatScrollBox"); let div = document.getElementById("chatScrollBox");
div.scrollTop = div.scrollHeight; div.scrollTop = div.scrollHeight;
}); });
},
refreshPlaceHolder(){
console.log("placeholder")
if(this.isReceipt){
this.placeholder = "【回执消息】"
}else if(this.$refs.editBox && this.$refs.editBox.innerHTML){
this.placeholder = ""
}else{
this.placeholder = "聊点什么吧~";
}
} }
}, },
computed: { computed: {
@ -710,6 +724,7 @@ export default {
} }
return this.chat.messages.length; return this.chat.messages.length;
} }
}, },
watch: { watch: {
chat: { chat: {
@ -735,6 +750,8 @@ export default {
this.resetEditor(); this.resetEditor();
// 复位回执消息 // 复位回执消息
this.isReceipt = false; this.isReceipt = false;
// 更新placeholder
this.refreshPlaceHolder();
} }
}, },
immediate: true immediate: true
@ -761,32 +778,28 @@ export default {
width: 100%; width: 100%;
background: #f8f8f8; background: #f8f8f8;
border: #dddddd solid 1px; border: #dddddd solid 1px;
.el-header { .el-header {
padding: 5px; padding: 3px;
background-color: white; background-color: #5870e6;
line-height: 50px; line-height: 50px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
border: #dddddd solid 1px; color: #f8f8f8;
.btn-side { .btn-side {
position: absolute; position: absolute;
right: 20px; right: 20px;
line-height: 60px; line-height: 50px;
font-size: 22px; font-size: 25px;
cursor: pointer; cursor: pointer;
&:hover {
font-size: 30px;
}
} }
} }
.im-chat-main { .im-chat-main {
padding: 0; padding: 0;
border: #dddddd solid 1px;
.im-chat-box { .im-chat-box {
>ul { >ul {
padding: 0 20px; padding: 0 20px;
@ -802,23 +815,21 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
border: #dddddd solid 1px;
.chat-tool-bar { .chat-tool-bar {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
height: 40px; height: 40px;
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
border: #dddddd solid 1px; border-top: #ccc solid 1px;
padding: 2px; padding: 2px;
background-color: #E8F2FF;
>div { >div {
font-size: 22px; font-size: 22px;
cursor: pointer; cursor: pointer;
color: #333333; color: black;
line-height: 34px; line-height: 34px;
width: 34px; width: 34px;
height: 34px; height: 34px;

10
im-ui/src/components/chat/ChatItem.vue
View File

@ -100,19 +100,19 @@
padding: 5px; padding: 5px;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
background-color: #fafafa; background-color: white;
white-space: nowrap; white-space: nowrap;
color: black; color: black;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #eeeeee; background-color: #F8FAFF;
} }
&.active { &.active {
background-color: #e8e8f0; background-color: #F4F9FF;
} }
.chat-left { .chat-left {
position: relative; position: relative;
display: flex; display: flex;

9
im-ui/src/components/friend/AddFriend.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<el-dialog title="添加好友" :visible.sync="dialogVisible" width="30%" :before-close="onClose"> <el-dialog title="添加好友" :visible.sync="dialogVisible" width="30%" :before-close="onClose">
<el-input placeholder="输入用户名或昵称,最多展示20条" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()"> <el-input placeholder="输入用户名或昵称进行,最多展示20条" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()">
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> <i class="el-icon-search el-input__icon" slot="suffix"
@click="onSearch()"> </i>
</el-input> </el-input>
<el-scrollbar style="height:400px"> <el-scrollbar style="height:400px">
<div v-for="(user) in users" :key="user.id" v-show="user.id != $store.state.userStore.userInfo.id"> <div v-for="(user) in users" :key="user.id" v-show="user.id != $store.state.userStore.userInfo.id">
@ -21,8 +22,8 @@
<div>昵称:{{user.nickName}}</div> <div>昵称:{{user.nickName}}</div>
</div> </div>
</div> </div>
<el-button type="success" size="small" v-show="!isFriend(user.id)" plain @click="onAddFriend(user)">添加</el-button> <el-button type="success" size="mini" v-show="!isFriend(user.id)" @click="onAddFriend(user)">添加</el-button>
<el-button type="info" size="small" v-show="isFriend(user.id)" plain disabled>已添加</el-button> <el-button type="info" size="mini" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>

8
im-ui/src/components/friend/FriendItem.vue
View File

@ -95,13 +95,13 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #eeeeee; background-color: #F8FAFF;
} }
&.active { &.active {
background-color: #dddddd; background-color: #F4F9FF;
} }
.friend-avatar { .friend-avatar {
display: flex; display: flex;
justify-content: center; justify-content: center;

13
im-ui/src/components/group/AddGroupMember.vue
View File

@ -2,9 +2,9 @@
<el-dialog title="邀请好友" :visible.sync="visible" width="50%" :before-close="onClose"> <el-dialog title="邀请好友" :visible.sync="visible" width="50%" :before-close="onClose">
<div class="agm-container"> <div class="agm-container">
<div class="agm-l-box"> <div class="agm-l-box">
<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" <el-input placeholder="搜索好友" v-model="searchText"
@keyup.enter.native="onSearch()"> @keyup.enter.native="onSearch()">
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> <i class="el-icon-search el-input__icon" slot="suffix"> </i>
</el-input> </el-input>
<el-scrollbar style="height:400px;"> <el-scrollbar style="height:400px;">
<div v-for="(friend,index) in friends" :key="friend.id"> <div v-for="(friend,index) in friends" :key="friend.id">
@ -132,9 +132,10 @@
display: flex; display: flex;
.agm-l-box { .agm-l-box {
flex: 1; flex: 1;
border: #53a0e79c solid 1px; border: #587FF0 solid 1px;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
.el-checkbox { .el-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
@ -171,14 +172,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
padding: 5px; padding: 10px;
font-weight: 600; font-weight: 600;
color: #53a0e7cc; color: #687Ff0;
} }
.agm-r-box { .agm-r-box {
flex: 1; flex: 1;
border: #53a0e79c solid 1px; border: #587FF0 solid 1px;
border-radius: 5px; border-radius: 5px;
.agm-select-tip { .agm-select-tip {

10
im-ui/src/components/group/GroupItem.vue
View File

@ -41,14 +41,16 @@
padding: 5px; padding: 5px;
padding-left: 10px; padding-left: 10px;
align-items: center; align-items: center;
background-color: #fafafa; background-color: white;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
&:hover { &:hover {
background-color: #eeeeee; background-color: #F8FAFF;
} }
&.active { &.active {
background-color: #dddddd; background-color: #F4F9FF;
} }
.group-avatar { .group-avatar {
@ -63,7 +65,7 @@
line-height: 50px; line-height: 50px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 15px;
font-weight: 600; font-weight: 600;
} }
} }

3
im-ui/src/components/setting/Setting.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog class="setting" title="设置" :visible.sync="visible" width="500px" :before-close="onClose"> <el-dialog class="setting" title="设置" :visible.sync="visible" width="500px" :before-close="onClose">
<el-form :model="userInfo" label-width="80px" :rules="rules" ref="settingForm"> <el-form :model="userInfo" label-width="70px" :rules="rules" ref="settingForm">
<el-form-item label="头像"> <el-form-item label="头像">
<file-upload class="avatar-uploader" <file-upload class="avatar-uploader"
:action="imageAction" :action="imageAction"
@ -108,6 +108,7 @@
<style lang="scss" > <style lang="scss" >
.setting { .setting {
.avatar-uploader { .avatar-uploader {
.el-upload { .el-upload {

15
im-ui/src/view/Chat.vue
View File

@ -2,8 +2,8 @@
<el-container class="chat-page"> <el-container class="chat-page">
<el-aside width="260px" class="chat-list-box"> <el-aside width="260px" class="chat-list-box">
<div class="chat-list-header"> <div class="chat-list-header">
<el-input width="200px" placeholder="搜索" v-model="searchText"> <el-input class="search-text" placeholder="搜索" v-model="searchText">
<el-button slot="append" icon="el-icon-search"></el-button> <i class="el-icon-search el-input__icon" slot="prefix"> </i>
</el-input> </el-input>
</div> </div>
<div class="chat-list-loadding" v-if="loading" v-loading="true" element-loading-text="消息接收中..." <div class="chat-list-loadding" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
@ -74,9 +74,14 @@
width: 3rem; width: 3rem;
.chat-list-header { .chat-list-header {
padding: 5px; padding: 3px 8px;
background-color: white;
line-height: 50px; line-height: 50px;
.el-input__inner {
border-radius: 10px !important;
background-color: #F8F8F8;
}
} }
.chat-list-loadding{ .chat-list-loadding{
@ -90,6 +95,8 @@
.chat-list-items { .chat-list-items {
flex: 1; flex: 1;
background: #F8F8F8;
margin: 0 3px;
} }
} }
} }

77
im-ui/src/view/Friend.vue
View File

@ -2,19 +2,16 @@
<el-container class="friend-page"> <el-container class="friend-page">
<el-aside width="260px" class="friend-list-box"> <el-aside width="260px" class="friend-list-box">
<div class="friend-list-header"> <div class="friend-list-header">
<div class="friend-list-search"> <el-input class="search-text" placeholder="搜索" v-model="searchText">
<el-input width="200px" placeholder="搜索好友" v-model="searchText"> <i class="el-icon-search el-input__icon" slot="prefix"> </i>
<el-button slot="append" icon="el-icon-search"></el-button> </el-input>
</el-input> <el-button plain class="add-btn" icon="el-icon-plus" title="添加好友"
</div> @click="onShowAddFriend()"></el-button>
<el-button plain icon="el-icon-plus" style="border: none; padding:12px; font-size: 20px;color: black;" <add-friend :dialogVisible="showAddFriend" @close="onCloseAddFriend"></add-friend>
title="添加好友" @click="onShowAddFriend()"></el-button>
<add-friend :dialogVisible="showAddFriend" @close="onCloseAddFriend">
</add-friend>
</div> </div>
<el-scrollbar class="friend-list-items"> <el-scrollbar class="friend-list-items">
<div v-for="(friend,index) in $store.state.friendStore.friends" :key="index"> <div v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
<friend-item v-show="friend.nickName.startsWith(searchText)" :index="index" <friend-item v-show="friend.nickName.startsWith(searchText)" :index="index"
:active="friend === $store.state.friendStore.activeFriend" @chat="onSendMessage(friend)" :active="friend === $store.state.friendStore.activeFriend" @chat="onSendMessage(friend)"
@delete="onDelItem(friend,index)" @click.native="onActiveItem(friend,index)"> @delete="onDelItem(friend,index)" @click.native="onActiveItem(friend,index)">
</friend-item> </friend-item>
@ -27,9 +24,7 @@
</div> </div>
<div v-show="userInfo.id"> <div v-show="userInfo.id">
<div class="friend-detail"> <div class="friend-detail">
<head-image :size="200" <head-image :size="200" :name="userInfo.nickName" :url="userInfo.headImage"
:name="userInfo.nickName"
:url="userInfo.headImage"
@click.native="showFullImage()"></head-image> @click.native="showFullImage()"></head-image>
<div> <div>
<div class="info-item"> <div class="info-item">
@ -41,17 +36,20 @@
<el-descriptions-item label="性别">{{ userInfo.sex==0?"男":"女" }}</el-descriptions-item> <el-descriptions-item label="性别">{{ userInfo.sex==0?"男":"女" }}</el-descriptions-item>
<el-descriptions-item label="签名">{{ userInfo.signature }}</el-descriptions-item> <el-descriptions-item label="签名">{{ userInfo.signature }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<div class="frient-btn-group"> <div class="frient-btn-group">
<el-button v-show="isFriend" icon="el-icon-chat-dot-round" type="primary" @click="onSendMessage(userInfo)">发送消息</el-button> <el-button v-show="isFriend" icon="el-icon-position" type="primary"
<el-button v-show="!isFriend" icon="el-icon-plus" type="primary" @click="onAddFriend(userInfo)">加为好友</el-button> @click="onSendMessage(userInfo)">发消息</el-button>
<el-button v-show="isFriend" icon="el-icon-delete" type="danger" @click="onDelItem(userInfo,activeIdx)">删除好友</el-button> <el-button v-show="!isFriend" icon="el-icon-plus" type="primary"
@click="onAddFriend(userInfo)">加为好友</el-button>
<el-button v-show="isFriend" icon="el-icon-delete" type="danger"
@click="onDelItem(userInfo,activeIdx)">删除好友</el-button>
</div> </div>
</div> </div>
</div> </div>
<el-divider content-position="center"></el-divider> <el-divider content-position="center"></el-divider>
</div> </div>
</el-container> </el-container>
</el-container> </el-container>
@ -106,7 +104,7 @@
}) })
}) })
}, },
onAddFriend(user){ onAddFriend(user) {
this.$http({ this.$http({
url: "/friend/add", url: "/friend/add",
method: "post", method: "post",
@ -116,12 +114,12 @@
}).then((data) => { }).then((data) => {
this.$message.success("添加成功，对方已成为您的好友"); this.$message.success("添加成功，对方已成为您的好友");
let friend = { let friend = {
id:user.id, id: user.id,
nickName: user.nickName, nickName: user.nickName,
headImage: user.headImage, headImage: user.headImage,
online: user.online online: user.online
} }
this.$store.commit("addFriend",friend); this.$store.commit("addFriend", friend);
}) })
}, },
onSendMessage(user) { onSendMessage(user) {
@ -172,14 +170,14 @@
friendStore() { friendStore() {
return this.$store.state.friendStore; return this.$store.state.friendStore;
}, },
isFriend(){ isFriend() {
return this.friendStore.friends.find((f)=>f.id==this.userInfo.id); return this.friendStore.friends.find((f) => f.id == this.userInfo.id);
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style lang="scss">
.friend-page { .friend-page {
.friend-list-box { .friend-list-box {
display: flex; display: flex;
@ -191,16 +189,28 @@
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 3px 8px;
background-color: white;
.friend-list-search { .el-input__inner {
flex: 1; border-radius: 10px !important;
background-color: #F8F8F8;
}
.add-btn {
padding: 5px !important;
margin: 5px;
font-size: 20px;
color: #587FF0;
border: #587FF0 1px solid;
background-color: #F0F8FF;
border-radius: 50%;
} }
} }
.friend-list-items { .friend-list-items {
flex: 1; flex: 1;
margin: 0 3px;
background: #F8F8F8;
} }
} }
@ -210,16 +220,14 @@
border: #dddddd solid 1px; border: #dddddd solid 1px;
.friend-header { .friend-header {
width: 100%; padding: 3px;
height: 50px; height: 50px;
padding: 5px;
line-height: 50px; line-height: 50px;
font-size: 20px; font-size: 20px;
text-align: left;
text-indent: 10px;
font-weight: 600; font-weight: 600;
background-color: white; text-align: center;
border: #dddddd solid 1px; color: #f8f8f8;
background-color: #5870e6;
} }
.friend-detail { .friend-detail {
@ -230,6 +238,7 @@
.info-item { .info-item {
margin-left: 20px; margin-left: 20px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px ;
} }
.description { .description {

73
im-ui/src/view/Group.vue
View File

@ -2,13 +2,11 @@
<el-container class="group-page"> <el-container class="group-page">
<el-aside width="260px" class="group-list-box"> <el-aside width="260px" class="group-list-box">
<div class="group-list-header"> <div class="group-list-header">
<div class="group-list-search"> <el-input class="search-text" placeholder="搜索" v-model="searchText">
<el-input width="200px" placeholder="搜索群聊" v-model="searchText"> <i class="el-icon-search el-input__icon" slot="prefix"> </i>
<el-button slot="append" icon="el-icon-search"></el-button> </el-input>
</el-input> <el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊"
</div> @click="onCreateGroup()"></el-button>
<el-button plain icon="el-icon-plus" style="border: none; padding: 12px; font-size: 20px;color: black;"
title="创建群聊" @click="onCreateGroup()"></el-button>
</div> </div>
<el-scrollbar class="group-list-items"> <el-scrollbar class="group-list-items">
<div v-for="(group,index) in groupStore.groups" :key="index"> <div v-for="(group,index) in groupStore.groups" :key="index">
@ -26,17 +24,17 @@
<div v-show="activeGroup.id"> <div v-show="activeGroup.id">
<div class="group-info"> <div class="group-info">
<div> <div>
<file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction" <file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction"
:showLoading="true" :maxSize="maxSize" @success="onUploadSuccess" :showLoading="true" :maxSize="maxSize" @success="onUploadSuccess"
:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']"> :fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
<img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar"> <img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</file-upload> </file-upload>
<head-image v-show="!isOwner" class="avatar" :size="200" <head-image v-show="!isOwner" class="avatar" :size="200" :url="activeGroup.headImage"
:url="activeGroup.headImage"
:name="activeGroup.remark"> :name="activeGroup.remark">
</head-image> </head-image>
<el-button class="send-btn" icon="el-icon-chat-dot-round" type="primary" @click="onSendMessage()">发送消息</el-button> <el-button class="send-btn" icon="el-icon-position" type="primary"
@click="onSendMessage()">发消息</el-button>
</div> </div>
<el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules" <el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules"
ref="groupForm"> ref="groupForm">
@ -58,7 +56,7 @@
maxlength="1024" placeholder="群主未设置"></el-input> maxlength="1024" placeholder="群主未设置"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<el-button type="success" @click="onSaveGroup()">提交</el-button> <el-button type="success" @click="onSaveGroup()">保存</el-button>
<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出群聊</el-button> <el-button type="danger" v-show="!isOwner" @click="onQuit()">退出群聊</el-button>
<el-button type="danger" v-show="isOwner" @click="onDissolve()">解散群聊</el-button> <el-button type="danger" v-show="isOwner" @click="onDissolve()">解散群聊</el-button>
</div> </div>
@ -69,8 +67,7 @@
<div class="group-member-list"> <div class="group-member-list">
<div v-for="(member) in groupMembers" :key="member.id"> <div v-for="(member) in groupMembers" :key="member.id">
<group-member v-show="!member.quit" class="group-member" :member="member" <group-member v-show="!member.quit" class="group-member" :member="member"
:showDel="isOwner&&member.userId!=activeGroup.ownerId" :showDel="isOwner&&member.userId!=activeGroup.ownerId" @del="onKick"></group-member>
@del="onKick"></group-member>
</div> </div>
<div class="group-invite"> <div class="group-invite">
<div class="invite-member-btn" title="邀请好友进群聊" @click="onInviteMember()"> <div class="invite-member-btn" title="邀请好友进群聊" @click="onInviteMember()">
@ -159,7 +156,7 @@
this.showAddGroupMember = false; this.showAddGroupMember = false;
}, },
onUploadSuccess(data) { onUploadSuccess(data) {
this.activeGroup.headImage =data.originUrl; this.activeGroup.headImage = data.originUrl;
this.activeGroup.headImageThumb = data.thumbUrl; this.activeGroup.headImageThumb = data.thumbUrl;
}, },
onSaveGroup() { onSaveGroup() {
@ -249,9 +246,9 @@
this.groupMembers = members; this.groupMembers = members;
}) })
}, },
reset(){ reset() {
this.activeGroup={}; this.activeGroup = {};
this.groupMembers=[]; this.groupMembers = [];
} }
}, },
computed: { computed: {
@ -278,22 +275,33 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: #dddddd solid 1px; border: #dddddd solid 1px;
background: white; background: #F8F8F8;
.group-list-header { .group-list-header {
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 5px; padding: 3px 8px;
background-color: white;
.el-input__inner {
.group-list-search { border-radius: 10px !important;
flex: 1; }
.add-btn {
padding: 5px !important;
margin: 5px;
font-size: 20px;
color: #587FF0;
border: #587FF0 1px solid;
background-color: #F0F8FF;
border-radius: 50%;
} }
} }
.group-list-items { .group-list-items {
flex: 1; flex: 1;
margin: 0 3px;
background: #F8F8F8;
} }
} }
@ -301,26 +309,25 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: #dddddd solid 1px; border: #dddddd solid 1px;
.group-header { .group-header {
width: 100%; padding: 3px;
height: 50px; height: 50px;
padding: 5px;
line-height: 50px; line-height: 50px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
text-align: left; text-align: center;
text-indent: 10px; color: #f8f8f8;
background-color: white; background-color: #5870e6;
border: #dddddd solid 1px;
} }
.group-container { .group-container {
padding: 20px; margin: 20px;
.group-info { .group-info {
display: flex; display: flex;
padding: 5px 20px; padding: 5px 20px;
.group-form { .group-form {
flex: 1; flex: 1;
padding-left: 40px; padding-left: 40px;

62
im-ui/src/view/Home.vue
View File

@ -3,29 +3,29 @@
<el-aside width="80px" class="navi-bar"> <el-aside width="80px" class="navi-bar">
<div class="user-head-image"> <div class="user-head-image">
<head-image :name="$store.state.userStore.userInfo.nickName" <head-image :name="$store.state.userStore.userInfo.nickName"
:url="$store.state.userStore.userInfo.headImageThumb" :size="60" :url="$store.state.userStore.userInfo.headImageThumb" :size="50"
@click.native="showSettingDialog = true"> @click.native="showSettingDialog = true">
</head-image> </head-image>
</div> </div>
<el-menu background-color="#333333" text-color="#ddd" style="margin-top: 30px;"> <el-menu background-color="#19082f" style="margin-top: 25px;">
<el-menu-item title="聊天"> <el-menu-item title="聊天">
<router-link v-bind:to="'/home/chat'"> <router-link class="link" v-bind:to="'/home/chat'">
<span class="el-icon-chat-dot-round"></span> <span class="icon iconfont icon-chat"></span>
<div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div> <div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div>
</router-link> </router-link>
</el-menu-item> </el-menu-item>
<el-menu-item title="好友"> <el-menu-item title="好友">
<router-link v-bind:to="'/home/friend'"> <router-link class="link" v-bind:to="'/home/friend'">
<span class="el-icon-user"></span> <span class="icon iconfont icon-friend"></span>
</router-link> </router-link>
</el-menu-item> </el-menu-item>
<el-menu-item title="群聊"> <el-menu-item title="群聊">
<router-link v-bind:to="'/home/group'"> <router-link class="link" v-bind:to="'/home/group'">
<span class="icon iconfont icon-group_fill"></span> <span class="icon iconfont icon-group"></span>
</router-link> </router-link>
</el-menu-item> </el-menu-item>
<el-menu-item title="设置" @click="showSetting()"> <el-menu-item title="设置" @click="showSetting()">
<span class="el-icon-setting"></span> <span class="icon iconfont icon-setting"></span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<div class="exit-box" @click="onExit()" title="退出"> <div class="exit-box" @click="onExit()" title="退出">
@ -322,8 +322,8 @@
<style scoped lang="scss"> <style scoped lang="scss">
.navi-bar { .navi-bar {
background: #333333; background: #19082f;
padding: 10px; padding: 15px;
padding-top: 50px; padding-top: 50px;
.el-menu { .el-menu {
@ -331,22 +331,22 @@
flex: 1; flex: 1;
.el-menu-item { .el-menu-item {
margin: 25px 0; margin: 20px 0;
background-color: #19082f !important;
.router-link-exact-active span { padding: 0 !important;
color: white !important; text-align: center;
} .link {
text-decoration: none;
&.router-link-active .icon {
span { color: #d5894c;
font-size: 24px !important;
color: #aaaaaa;
&:hover {
color: white !important;
} }
} }
.icon {
font-size: 26px !important;
color: #ddd;
}
.unread-text { .unread-text {
position: absolute; position: absolute;
@ -365,30 +365,28 @@
} }
} }
.exit-box { .exit-box {
position: absolute; position: absolute;
width: 60px; width: 60px;
bottom: 40px; bottom: 40px;
color: #aaaaaa; color: #ccc;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
.icon { .icon {
font-size: 28px; font-size: 28px;
} }
&:hover { &:hover {
color: white !important; color: white;
} }
} }
} }
.content-box { .content-box {
padding: 0; padding: 0;
background-color: #E9EEF3; background-color: #f8f8f8;
color: #333; color: black;
text-align: center; text-align: center;
} }
</style> </style>

9
im-ui/src/view/Login.vue
View File

@ -30,6 +30,13 @@
<li>uniapp移动端支持发送语音消息</li> <li>uniapp移动端支持发送语音消息</li>
</ul> </ul>
</div> </div>
<div>
<h3>最近更新(2024-04-27)：</h3>
<ul>
<li>uniapp端加载离线消息慢以及卡顿问题优化</li>
<li>web端样式风格调整</li>
</ul>
</div>
<div> <div>
<h3>如果本项目对您有帮助,请在gitee上帮忙点个star</h3> <h3>如果本项目对您有帮助,请在gitee上帮忙点个star</h3>
</div> </div>
@ -178,7 +185,7 @@
.login-view { .login-view {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgb(232, 242, 255); background: #E8F2FF;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;

28
im-uniapp/App.vue
View File

@ -243,18 +243,32 @@
// this.audioTip = uni.createInnerAudioContext(); // this.audioTip = uni.createInnerAudioContext();
// this.audioTip.src = "/static/audio/tip.wav"; // this.audioTip.src = "/static/audio/tip.wav";
// this.audioTip.play(); // this.audioTip.play();
} },
isExpired(loginInfo){
if(!loginInfo || !loginInfo.expireTime){
return true;
}
return loginInfo.expireTime < new Date().getTime();
},
}, },
onLaunch() { onLaunch() {
// 登录状态校验 // 登录状态校验
if (uni.getStorageSync("loginInfo")) { let loginInfo = uni.getStorageSync("loginInfo")
if (!this.isExpired(loginInfo)) {
console.log("初始化")
// 初始化 // 初始化
this.init() this.init();
} else { // 跳转到聊天页面
// 跳转到登录页 uni.switchTab({
uni.navigateTo({ url: "/pages/chat/chat"
url: "/pages/login/login"
}) })
} else{
// 跳转到登录页
// #ifdef H5
uni.navigateTo({
url: "/pages/login/login"
})
// #endif
} }
} }
} }

4
im-uniapp/common/request.js
View File

@ -41,7 +41,9 @@ const request = (options) => {
getApp().exit(); getApp().exit();
return; return;
} }
uni.setStorageSync("loginInfo", res.data.data); let newInfo = res.data.data;
newInfo.expireTime = new Date().getTime() + newInfo.refreshTokenExpiresIn*1000;
uni.setStorageSync("loginInfo", newInfo);
requestList.forEach(cb => cb()); requestList.forEach(cb => cb());
requestList = []; requestList = [];
isRefreshToken = false; isRefreshToken = false;

14
im-uniapp/components/chat-item/chat-item.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<view class="chat-item" :class="active?'active':''" @click="showChatBox()"> <view class="chat-item" :class="active?'active':''" >
<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
<view class="mask" @tap="showChatBox()"></view>
<view class="left"> <view class="left">
<head-image :url="chat.headImage" :name="chat.showName" :size="90"></head-image> <head-image :url="chat.headImage" :name="chat.showName" :size="90"></head-image>
<view v-if="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view> <view v-if="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view>
@ -12,7 +14,7 @@
<view class="chat-content"> <view class="chat-content">
<view class="chat-at-text">{{atText}}</view> <view class="chat-at-text">{{atText}}</view>
<view class="chat-send-name" v-show="chat.sendNickName">{{chat.sendNickName+':&nbsp;'}}</view> <view class="chat-send-name" v-show="chat.sendNickName">{{chat.sendNickName+':&nbsp;'}}</view>
<rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text> <rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
</view> </view>
</view> </view>
</view> </view>
@ -75,7 +77,13 @@
&.active { &.active {
background-color: #eeeeee; background-color: #eeeeee;
} }
.mask {
position: absolute;
width: 100%;
height: 100%;
}
.left { .left {
position: relative; position: relative;
display: flex; display: flex;

16
im-uniapp/pages/login/login.vue
View File

@ -3,7 +3,7 @@
<view class="login-title">欢迎登录</view> <view class="login-title">欢迎登录</view>
<uni-forms style="margin-top: 100px;" :modelValue="loginForm" :rules="rules" validate-trigger="bind"> <uni-forms style="margin-top: 100px;" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
<uni-forms-item name="userName"> <uni-forms-item name="userName">
<uni-easyinput type="text" v-model="loginForm.userName" prefix-icon="person" focus placeholder="用户名" /> <uni-easyinput type="text" v-model="loginForm.userName" prefix-icon="person" placeholder="用户名" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item name="password"> <uni-forms-item name="password">
<uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="密码" /> <uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="密码" />
@ -45,11 +45,12 @@
url: '/login', url: '/login',
data: this.loginForm, data: this.loginForm,
method: 'POST' method: 'POST'
}).then(data => { }).then(loginInfo => {
console.log("登录成功,自动跳转到聊天页面...") console.log("登录成功,自动跳转到聊天页面...")
uni.setStorageSync("userName", this.loginForm.userName); uni.setStorageSync("userName", this.loginForm.userName);
uni.setStorageSync("password", this.loginForm.password); uni.setStorageSync("password", this.loginForm.password);
uni.setStorageSync("loginInfo", data); loginInfo.expireTime = new Date().getTime() + loginInfo.refreshTokenExpiresIn*1000;
uni.setStorageSync("loginInfo", loginInfo);
// 调用App.vue的初始化方法 // 调用App.vue的初始化方法
getApp().init() getApp().init()
// 跳转到聊天页面 // 跳转到聊天页面
@ -59,17 +60,10 @@
}) })
} }
}, },
onLoad() { onLoad() {
this.loginForm.userName = uni.getStorageSync("userName"); this.loginForm.userName = uni.getStorageSync("userName");
this.loginForm.password = uni.getStorageSync("password"); this.loginForm.password = uni.getStorageSync("password");
let loginInfo = uni.getStorageSync("loginInfo");
if (loginInfo) {
// 跳转到聊天页面
uni.switchTab({
url: "/pages/chat/chat"
})
}
} }
} }
</script> </script>

8
im-uniapp/store/chatStore.js
View File

@ -27,6 +27,7 @@ export default {
mutations: { mutations: {
initChats(state, chatsData) { initChats(state, chatsData) {
cacheChats = []; cacheChats = [];
state.chats = [];
for (let chat of chatsData.chats) { for (let chat of chatsData.chats) {
// 已删除的会话直接丢弃 // 已删除的会话直接丢弃
if (chat.delete) { if (chat.delete) {
@ -50,7 +51,7 @@ export default {
} }
}) })
}) })
console.log(cacheChats.length)
}, },
openChat(state, chatInfo) { openChat(state, chatInfo) {
let chats = this.getters.findChats(); let chats = this.getters.findChats();
@ -294,6 +295,7 @@ export default {
}); });
// 将消息一次性装载回来 // 将消息一次性装载回来
state.chats = cacheChats; state.chats = cacheChats;
console.log(cacheChats.length)
this.commit("saveToStorage"); this.commit("saveToStorage");
}, },
saveToStorage(state) { saveToStorage(state) {
@ -302,7 +304,7 @@ export default {
return; return;
} }
let userId = userStore.state.userInfo.id; let userId = userStore.state.userInfo.id;
let key = "chats-" + userId; let key = "chats-app-" + userId;
let chatsData = { let chatsData = {
privateMsgMaxId: state.privateMsgMaxId, privateMsgMaxId: state.privateMsgMaxId,
groupMsgMaxId: state.groupMsgMaxId, groupMsgMaxId: state.groupMsgMaxId,
@ -327,7 +329,7 @@ export default {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let userId = userStore.state.userInfo.id; let userId = userStore.state.userInfo.id;
uni.getStorage({ uni.getStorage({
key: "chats-" + userId, key: "chats-app-" + userId,
success(res) { success(res) {
context.commit("initChats", res.data); context.commit("initChats", res.data);
resolve() resolve()

Write Preview
Loading…
Cancel
Save