样式优化，修改logo

im-uniapp/components/bar/arrow-bar.vue

@@ -0,0 +1,39 @@
+<template>
+	<view class="arrow-bar">
+		<text class="title">{{title}}</text>
+		<uni-icons class="arrow" type="right" size="16"></uni-icons>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "arrow-bar",
+		props: {
+			title: {
+				type: String,
+				required: true
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.arrow-bar {
+		width: 100%;
+		height: 90rpx;
+		font-size: 30rpx;
+		color: black;
+		margin-top: 5rpx;	
+		background-color: white;
+		line-height: 90rpx;
+		display: flex;
+		.title {
+			flex: 1;
+			margin-left: 40rpx;
+		}
+		
+		.arrow {
+			margin-right: 40rpx;
+		}
+	}
+</style>

im-uniapp/components/bar/bar-group.vue

@@ -0,0 +1,17 @@
+<template>
+	<view class="bar-group">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default{
+		name: "bar-group"
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bar-group{
+		margin: 20rpx 0;
+	}
+</style>

im-uniapp/components/bar/btn-bar.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="btn-bar" :style="style">
+		<text v-if="icon" class="icon iconfont" :class="icon"></text>
+		<text class="title">{{title}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "btn-bar",
+		props: {
+			title: {
+				type: String,
+				required: true
+			},
+			icon: {
+				type: String,
+				required: false	
+			},
+			type: {
+				type: String,
+				default: "normal"
+			},
+			color: {
+				type: String,
+				default: "#000"
+			}
+		},
+		computed: {
+			style() {
+				let color = "#000";
+				switch (this.type) {  
+				  case 'danger': 
+				    color = "#f14747";
+				    break;  
+				  case 'primary':  
+				    color = "#35567f";
+				    break;
+				}
+				return `color: ${color};`
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.btn-bar {
+		width: 100%;
+		height: 100rpx;
+		margin-top: 5rpx;
+		background-color: white;
+		line-height: 100rpx;
+		text-align: center;
+		display: flex;
+		justify-content: center;
+		.icon {
+			font-size: 40rpx;
+			font-weight: 600;
+			margin-right: 10rpx;
+		}
+		.title {
+			font-size: 32rpx;
+			font-weight: 600;
+		}
+	}
+</style>

im-uniapp/components/bar/switch-bar.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="switch-bar">
+		<text class="title">{{title}}</text>
+		<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "switch-bar",
+		props: {
+			title: {
+				type: String,
+				required: true
+			},
+			checked: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				value: this.checked
+			}
+		},
+		methods: {
+			onChange(e) {
+				this.value = true;
+				setTimeout(()=>{
+					this.value = false;
+				},100)
+				//this.value = false;
+				
+				this.$emit('change', e);
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.switch-bar {
+		width: 100%;
+		height: 100rpx;
+		font-size: 34rpx;
+		color: black;
+		margin-top: 5rpx;
+		background-color: white;
+		line-height: 100rpx;
+		display: flex;
+
+		.title {
+			flex: 1;
+			margin-left: 40rpx;
+		}
+
+		.switch {
+			margin-right: 40rpx;
+		}
+	}
+</style>

im-uniapp/components/friend-item/friend-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="friend-item" @click="showFriendInfo()">
-		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="smaller"></head-image>
+		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="small"></head-image>
 		<view class="friend-info">
 			<view class="friend-name">{{ friend.nickName}}</view>
 			<view class="friend-online">
@@ -36,7 +36,7 @@
 
 <style scope lang="scss">
 	.friend-item {
-		height: 80rpx;
+		height: 90rpx;
 		display: flex;
 		margin-bottom: 1rpx;
 		position: relative;

im-uniapp/components/group-item/group-item.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="group-item" @click="showGroupInfo()">
 		<head-image :name="group.showGroupName"
-			:url="group.headImage"></head-image>
+			:url="group.headImage" size="small"></head-image>
 		<view class="group-name">
 			<view>{{ group.showGroupName}}</view>
 		</view>
@@ -31,7 +31,7 @@
 
 <style scope lang="scss">
 	.group-item {
-		height: 100rpx;
+		height: 90rpx;
 		display: flex;
     margin-bottom: 2rpx;
 		position: relative;

im-uniapp/main.js

@@ -13,6 +13,10 @@ import useFriendStore from '@/store/friendStore.js'
 import useGroupStore from '@/store/groupStore.js'
 import useConfigStore from '@/store/configStore.js'
 import useUserStore from '@/store/userStore.js'
+import barGroup from '@/components/bar/bar-group'
+import arrowBar from '@/components/bar/arrow-bar'
+import btnBar from '@/components/bar/btn-bar'
+import switchBar from '@/components/bar/switch-bar'
 
 //import VConsole from 'vconsole'
 //new VConsole();
@@ -30,6 +34,10 @@ export function createApp() {
   const app = createSSRApp(App)
   app.use(uviewPlus);
   app.use(pinia.createPinia());
+  app.component('bar-group', barGroup);
+  app.component('arrow-bar', arrowBar);
+  app.component('btn-bar', btnBar);
+  app.component('switch-bar', switchBar);
   app.config.globalProperties.$http = request;
   app.config.globalProperties.$wsApi = socketApi;
   app.config.globalProperties.$msgType = messageType;

im-uniapp/manifest.json

@@ -2,8 +2,8 @@
     "name" : "盒子IM",
     "appid" : "__UNI__69DD57A",
     "description" : "",
-    "versionName" : "3.0.0",
-    "versionCode" : 300,
+    "versionName" : "3.1.0",
+    "versionCode" : 3100,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

im-uniapp/pages/common/user-info.vue

@@ -1,47 +1,46 @@
 <template>
 	<view class="page user-info">
-    <nav-bar back>用户信息</nav-bar>
-    <uni-card :is-shadow="false" is-full :border="false">
-      <view class="content">
-        <head-image  :name="userInfo.nickName" :url="userInfo.headImageThumb"
-        :size="160" @click="onShowFullImage()"></head-image>
+		<nav-bar back>用户信息</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<view class="content">
+				<head-image :name="userInfo.nickName" :url="userInfo.headImageThumb" :size="160"
+					@click="onShowFullImage()"></head-image>
 
-        <view class="info-item">
-          <view class="info-primary">
-            <text class="info-username">
-              {{userInfo.userName}}
-            </text>
-            <text v-show="userInfo.sex==0" class="iconfont icon-man"
-                  color="darkblue"></text>
-            <text v-show="userInfo.sex==1" class="iconfont icon-girl"
-                  color="darkred"></text>
-          </view>
-          <view class="info-text">
-            <text class="label-text">
-              昵称:
-            </text>
-            <text class="content-text">
-              {{userInfo.nickName}}
-            </text>
-          </view>
-          <view  class="info-text">
-            <view>
-              <text class="label-text">
-                签名:
-              </text>
-              <text  class="content-text">
-                {{userInfo.signature}}
-              </text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </uni-card>
-    <view class="bottom-btn">
-      <button class="btn" v-show="isFriend" type="primary" @click="onSendMessage()">发消息</button>
-      <button class="btn" v-show="!isFriend" type="primary" @click="onAddFriend()">加为好友</button>
-      <button class="btn" v-show="isFriend" type="warn" @click="onDelFriend()">删除好友</button>
-    </view>
+				<view class="info-item">
+					<view class="info-primary">
+						<text class="info-username">
+							{{userInfo.userName}}
+						</text>
+						<text v-show="userInfo.sex==0" class="iconfont icon-man" color="darkblue"></text>
+						<text v-show="userInfo.sex==1" class="iconfont icon-girl" color="darkred"></text>
+					</view>
+					<view class="info-text">
+						<text class="label-text">
+							昵称:
+						</text>
+						<text class="content-text">
+							{{userInfo.nickName}}
+						</text>
+					</view>
+					<view class="info-text">
+						<view>
+							<text class="label-text">
+								签名:
+							</text>
+							<text class="content-text">
+								{{userInfo.signature}}
+							</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</uni-card>
+		<bar-group>
+			<btn-bar v-show="isFriend" type="primary" title="发送消息" @click="onSendMessage()">
+			</btn-bar>
+			<btn-bar v-show="!isFriend" type="primary" title="加为好友" @click="onAddFriend()"></btn-bar>
+			<btn-bar v-show="isFriend" type="danger" title="删除好友" @click="onDelFriend()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 
@@ -53,9 +52,9 @@
 			}
 		},
 		methods: {
-			onShowFullImage(){
+			onShowFullImage() {
 				let imageUrl = this.userInfo.headImage;
-				if(imageUrl){
+				if (imageUrl) {
 					uni.previewImage({
 						urls: [imageUrl]
 					})
@@ -71,7 +70,7 @@
 				this.chatStore.openChat(chat);
 				let chatIdx = this.chatStore.findChatIdx(chat);
 				uni.navigateTo({
-					url:"/pages/chat/chat-box?chatIdx=" + chatIdx
+					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
 				})
 			},
 			onAddFriend() {
@@ -92,12 +91,12 @@
 					})
 				})
 			},
-			onDelFriend(){
+			onDelFriend() {
 				uni.showModal({
 					title: "确认删除",
 					content: `确认删除 '${this.userInfo.nickName}',并删除聊天记录吗?`,
-					success: (res)=> {
-						if(res.cancel)
+					success: (res) => {
+						if (res.cancel)
 							return;
 						this.$http({
 							url: `/friend/delete/${this.userInfo.id}`,
@@ -106,7 +105,7 @@
 							this.friendStore.removeFriend(this.userInfo.id);
 							this.chatStore.removePrivateChat(this.userInfo.id);
 							uni.showToast({
-								title: 	`与 '${this.userInfo.nickName}'的好友关系已解除`,
+								title: `与 '${this.userInfo.nickName}'的好友关系已解除`,
 								icon: 'none'
 							})
 						})
@@ -129,7 +128,7 @@
 					this.chatStore.updateChatFromFriend(this.userInfo);
 				})
 			},
-			loadUserInfo(id){
+			loadUserInfo(id) {
 				this.$http({
 					url: "/user/find/" + id,
 					method: 'GET'
@@ -137,7 +136,7 @@
 					this.userInfo = user;
 					// 如果发现好友的头像和昵称改了，进行更新
 					if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
-						this.userInfo.nickName != this.friendInfo.nickName)) {
+							this.userInfo.nickName != this.friendInfo.nickName)) {
 						this.updateFriendInfo()
 					}
 				})
@@ -147,7 +146,7 @@
 			isFriend() {
 				return !!this.friendInfo;
 			},
-			friendInfo(){
+			friendInfo() {
 				let friends = this.friendStore.friends;
 				let friend = friends.find((f) => f.id == this.userInfo.id);
 				return friend;
@@ -169,49 +168,51 @@
 			justify-content: space-between;
 			padding: 20rpx;
 
-      .info-item {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        padding-left: 40rpx;
-        flex: 1;
+			.info-item {
+				display: flex;
+				align-items: flex-start;
+				flex-direction: column;
+				padding-left: 40rpx;
+				flex: 1;
 
-        .info-text {
-          line-height: 1.5;
-          //margin-bottom: 10rpx;
-        }
+				.info-text {
+					line-height: 1.5;
+					//margin-bottom: 10rpx;
+				}
+
+				.label-text {
+					font-size: $im-font-size-small;
+					color: $im-text-color-light;
 
-        .label-text {
-          font-size: $im-font-size-small;
-          color: $im-text-color-light;
+				}
+
+				.content-text {
+					font-size: $im-font-size-small;
+					color: $im-text-color-light;
+				}
 
-        }
-        .content-text {
-          font-size: $im-font-size-small;
-          color: $im-text-color-light;
-        }
+				.info-primary {
+					display: flex;
+					align-items: center;
+					margin-bottom: 10rpx;
 
-        .info-primary {
-          display: flex;
-          align-items: center;
-          margin-bottom: 10rpx;
-          .info-username {
-            font-size: $im-font-size-large;
-            font-weight: 600;
-          }
+					.info-username {
+						font-size: $im-font-size-large;
+						font-weight: 600;
+					}
 
-          .icon-man {
-            color: $im-text-color;
-            font-size: $im-font-size-large;
-            padding-left: 10rpx;
-          }
+					.icon-man {
+						color: $im-text-color;
+						font-size: $im-font-size-large;
+						padding-left: 10rpx;
+					}
 
-          .icon-girl {
-            color: darkred;
-          }
-        }
-      }
+					.icon-girl {
+						color: darkred;
+					}
+				}
+			}
 		}
 
 	}
-</style>
+</style>

im-uniapp/pages/group/group-info.vue

@@ -46,11 +46,11 @@
 			</uni-section>
 			<view v-if="!group.quit"  class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
 		</view>
-		<view v-if="!group.quit"  class="bottom-btn">
-			<button type="primary" @click="onSendMessage()">发消息</button>
-			<button v-show="!isOwner" type="warn" @click="onQuitGroup()">退出群聊</button>
-			<button v-show="isOwner" type="warn" @click="onDissolveGroup()">解散群聊</button>
-		</view>
+		<bar-group v-if="!group.quit">
+			<btn-bar  type="primary" title="发送消息" @click="onSendMessage()"></btn-bar>
+			<btn-bar v-if="!isOwner" type="danger" title="退出群聊" @click="onQuitGroup()"></btn-bar>
+			<btn-bar v-if="isOwner" type="danger" title="解散群聊" @click="onDissolveGroup()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 

im-uniapp/pages/login/login.vue

@@ -1,6 +1,5 @@
 <template>
-	<view class="page login">
-    <nav-bar>盒子im</nav-bar>
+	<view class="login">
 		<view class="title">欢迎登录</view>
 		<uni-forms class="form" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
 			<uni-forms-item name="userName">
@@ -56,7 +55,7 @@
 					// 调用App.vue的初始化方法
 					getApp().$vm.init()
 					// 跳转到聊天页面   
-					uni.switchTab({
+					uni.switchTab({ 
 						url: "/pages/chat/chat"
 					})
 				})

im-uniapp/pages/mine/mine.vue

@@ -40,10 +40,12 @@
         </view>
       </view>
     </uni-card>
-		<view class="bottom-btn">
-			<button class="btn" type="primary" @click="onModifyPassword()">修改密码</button>
-			<button class="btn" type="warn" @click="onQuit()">退出</button>
-		</view>
+		<bar-group>
+			<arrow-bar title="修改密码" @click="onModifyPassword()"></arrow-bar>
+		</bar-group>
+		<bar-group>
+			<btn-bar title="退出登陆" type="danger" @click="onQuit()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 

im-uniapp/pages/register/register.vue

@@ -1,6 +1,5 @@
 <template>
-	<view class="page register">
-    <nav-bar back>盒子im</nav-bar>
+	<view class="register">
 		<view class="title">欢迎注册</view>
 		<uni-forms class="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px">
 			<uni-forms-item name="userName" label="用户名">

im-web/src/api/camera.js

@@ -15,10 +15,7 @@ ImCamera.prototype.openVideo = function() {
 			this.close()
 		}
 		let constraints = {
-			video: {
-				with: window.screen.width,
-				height: window.screen.height
-			},
+			video: true,
 			audio: {
 				echoCancellation: true, //音频开启回音消除
 				noiseSuppression: true // 开启降噪

im-web/src/view/Login.vue

@@ -3,7 +3,10 @@
 		<div class="login-content">
 			<el-form class="login-form" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px"
 				@keyup.enter.native="submitForm('loginForm')">
-				<div class="login-brand">登陆盒子IM</div>
+				<div class="login-brand">
+					<img class="logo" src="../../public/logo.png"/>
+					<div>登陆盒子IM</div>
+				</div>
 				<el-form-item label="终端" prop="userName" v-show="false">
 					<el-input type="terminal" v-model="loginForm.terminal" autocomplete="off"></el-input>
 				</el-form-item>
@@ -144,6 +147,9 @@
 				border: 1px solid #ccc;
 
 				.login-brand {
+					display: flex;
+					justify-content: center;
+					align-items: center;
 					line-height: 50px;
 					margin: 30px 0 40px 0;
 					font-size: 22px;
@@ -151,8 +157,14 @@
 					letter-spacing: 2px;
 					text-transform: uppercase;
 					text-align: center;
+					
+					.logo {
+						width: 30px;
+						height: 30px;
+						margin-right: 10px;
+					}
 				}
-
+				
 				.register {
 					display: flex;
 					flex-direction: row-reverse;

im-web/src/view/Register.vue

@@ -2,7 +2,10 @@
 	<el-container class="register-view">
 		<div>
 			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm">
-				<div class="register-brand">欢迎成为盒子IM的用户</div>
+				<div class="register-brand">
+					<img class="logo" src="../../public/logo.png"/>
+					<div>欢迎成为盒子IM的用户</div>
+				</div>
 				<el-form-item label="用户名" prop="userName">
 					<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"></el-input>
 				</el-form-item>
@@ -137,6 +140,9 @@
 			border-radius: 3%;
 			
 			.register-brand {
+				display: flex;
+				justify-content: center;
+				align-items: center;
 				line-height: 50px;
 				margin: 20px 0 30px 0;
 				font-size: 22px;
@@ -144,6 +150,12 @@
 				letter-spacing: 2px;
 				text-align: center;
 				text-transform: uppercase;
+				
+				.logo {
+					width: 30px;
+					height: 30px;
+					margin-right: 10px;
+				}
 			}
 			
 			.to-login {