From 3456e9ba08489831a0880241d4c6c58abb2a10b8 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Mon, 29 Sep 2025 17:57:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E9=99=86=E5=92=8C=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-uniapp/pages/login/login.vue       | 294 ++++++++++++++++----
 im-uniapp/pages/register/register.vue | 369 ++++++++++++++++++++------
 2 files changed, 530 insertions(+), 133 deletions(-)

diff --git a/im-uniapp/pages/login/login.vue b/im-uniapp/pages/login/login.vue
index fc99aa7..03c9e5b 100644
--- a/im-uniapp/pages/login/login.vue
+++ b/im-uniapp/pages/login/login.vue
@@ -1,58 +1,93 @@
 <template>
 	<view class="login">
-		<view class="title">欢迎登录</view>
-		<view class="form">
-			<uni-forms :modelValue="loginForm" :rules="rules" validate-trigger="bind">
-				<uni-forms-item name="userName">
-					<uni-easyinput type="text" v-model="loginForm.userName" prefix-icon="person" placeholder="用户名" />
-				</uni-forms-item>
-				<uni-forms-item name="password">
-					<uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="密码" />
-				</uni-forms-item>
-				<button class="btn-submit" @click="submit" type="primary">登录</button>
-			</uni-forms>
+		<!-- 主要内容区域 -->
+		<view class="content">
+			<!-- Logo和标题区域 -->
+			<view class="header">
+				<view class="title">欢迎登录</view>
+				<view class="subtitle">登录您的账号，开启聊天之旅</view>
+			</view>
+
+			<!-- 表单区域 -->
+			<view class="form-container">
+				<view class="form">
+					<view class="form-item" :class="{'focused': userNameFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-username"></view>
+						</view>
+						<input class="input" type="text" v-model="dataForm.userName" placeholder="用户名"
+							@focus="userNameFocused = true" @blur="userNameFocused = false" />
+					</view>
+					<view class="form-item" :class="{'focused': passwordFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-pwd"></view>
+						</view>
+						<input class="input" :type="isShowPwd?'text':'password'" v-model="dataForm.password"
+							placeholder="密码" @focus="passwordFocused = true" @blur="passwordFocused = false" />
+						<view class="icon-suffix iconfont" :class="isShowPwd?'icon-pwd-show':'icon-pwd-hide'"
+							@click="onSwitchShowPwd"></view>
+					</view>
+				</view>
+
+				<!-- 登录按钮 -->
+				<button class="submit-btn" @click="submit" type="primary">
+					<view class="btn-content">
+						<text class="btn-text">立即登录</text>
+					</view>
+				</button>
+
+				<!-- 底部导航 -->
+				<view class="nav-tool-bar">
+					<view class="nav-register">
+						<navigator url="/pages/register/register" class="register-link">
+							<text class="register-text">没有账号？</text>
+							<text class="register-highlight">立即注册</text>
+						</navigator>
+					</view>
+				</view>
+			</view>
 		</view>
-		<navigator class="nav-register" url="/pages/register/register">
-			没有账号,前往注册
-		</navigator>
 	</view>
 </template>
 
 <script>
+import UNI_APP from '@/.env.js';
 export default {
 	data() {
 		return {
-			loginForm: {
+			isShowPwd: false,
+			userNameFocused: false,
+			passwordFocused: false,
+			dataForm: {
 				terminal: 1, // APP终端
 				userName: '',
 				password: ''
-			},
-			rules: {
-				userName: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入用户名',
-					}]
-				},
-				password: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入密码',
-					}]
-				}
 			}
 		}
 	},
 	methods: {
 		submit() {
+			if (!this.dataForm.userName) {
+				return uni.showToast({
+					title: "请输入您的账号",
+					icon: "none"
+				})
+			}
+			if (!this.dataForm.password) {
+				return uni.showToast({
+					title: "请输入您的密码",
+					icon: "none"
+				})
+			}
 			this.$http({
 				url: '/login',
-				data: this.loginForm,
+				data: this.dataForm,
 				method: 'POST'
 			}).then(loginInfo => {
 				console.log("登录成功,自动跳转到聊天页面...")
-				uni.setStorageSync("userName", this.loginForm.userName);
-				uni.setStorageSync("password", this.loginForm.password);
+				uni.setStorageSync("userName", this.dataForm.userName);
+				uni.setStorageSync("password", this.dataForm.password);
+				uni.setStorageSync("isAgree", this.isAgree);
 				uni.setStorageSync("loginInfo", loginInfo);
 				// 调用App.vue的初始化方法
 				getApp().$vm.init()
@@ -60,44 +95,199 @@ export default {
 				uni.switchTab({
 					url: "/pages/chat/chat"
 				})
+			}).catch((e) => {
+				console.log("登录失败：", e);
 			})
-		}
+			// 清理数据，防止缓存未失效
+			getApp().$vm.unloadStore();
+		},
+		onSwitchShowPwd() {
+			this.isShowPwd = !this.isShowPwd;
+		},
 	},
-
 	onLoad() {
-		this.loginForm.userName = uni.getStorageSync("userName");
-		this.loginForm.password = uni.getStorageSync("password");
+		this.dataForm.userName = uni.getStorageSync("userName");
+		this.dataForm.password = uni.getStorageSync("password");
 	}
 }
 </script>
 
 <style lang="scss" scoped>
 .login {
-	.title {
-		padding-top: 250rpx;
-		padding-bottom: 50rpx;
-		color: $im-color-primary;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	// 主要内容区域
+	.content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin-top: 120rpx;
+		// #ifdef APP-PLUS
+		margin-top: calc(120rpx + var(--status-bar-height));
+		// #endif
+		padding: 0 60rpx;
+	}
+
+	// 头部区域
+	.header {
 		text-align: center;
-		font-size: 24px;
-		font-weight: bold;
+		padding: 80rpx 0;
+
+		.title {
+			color: $im-color-primary;
+			font-size: 48rpx;
+			font-weight: 700;
+			margin-bottom: 20rpx;
+			letter-spacing: 2rpx;
+		}
+
+		.subtitle {
+			color: $im-text-color-light;
+			font-size: 28rpx;
+			opacity: 0.8;
+		}
 	}
 
+	// 表单容器
+	.form-container {
+		display: flex;
+		flex-direction: column;
+	}
+
+	// 表单样式
 	.form {
-		padding: 50rpx;
+		margin-bottom: 20rpx;
+
+		.form-item {
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: 0 30rpx;
+			height: 100rpx;
+			margin: 24rpx 0;
+			border-radius: 25rpx;
+			background: rgba(255, 255, 255, 0.9);
+			border: 2rpx solid transparent;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+			transition: all 0.3s ease;
 
-		.btn-submit {
-			margin-top: 80rpx;
-			border-radius: 50rpx;
+			&.focused {
+				border-color: $im-color-primary;
+				box-shadow: 0 8rpx 32rpx rgba($im-color-primary, 0.15);
+				transform: translateY(-2rpx);
+			}
+
+			.icon-wrapper {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 60rpx;
+				height: 60rpx;
+				margin-right: 30rpx;
+				border-radius: 50%;
+				background: $im-bg-active;
+				transition: all 0.3s ease;
+
+				.icon {
+					font-size: 32rpx;
+					color: $im-color-primary;
+					font-weight: bold;
+				}
+			}
+
+			&.focused .icon-wrapper {
+				transform: scale(1.1);
+			}
+
+			.input {
+				flex: 1;
+				font-size: 32rpx;
+				color: #333;
+				background: transparent;
+				border: none;
+				outline: none;
+
+				&::placeholder {
+					color: $im-text-color-light;
+					font-size: 30rpx;
+				}
+			}
+
+			.icon-suffix {
+				font-size: 36rpx;
+				padding: 10rpx;
+			}
 		}
 	}
 
-	.nav-register {
-		position: fixed;
+	// 登录按钮
+	.submit-btn {
+		height: 100rpx;
+		border-radius: 50rpx;
+		border: none;
+		box-shadow: 0 8rpx 32rpx rgba($im-color-primary, 0.3);
+		transition: all 0.3s ease;
+		overflow: hidden;
+		position: relative;
 		width: 100%;
-		bottom: 100rpx;
-		color: $im-color-primary;
-		text-align: center;
-		font-size: $im-font-size;
+
+		&:active {
+			transform: translateY(2rpx);
+			box-shadow: 0 4rpx 16rpx rgba($im-color-primary, 0.4);
+
+			&::before {
+				left: 100%;
+			}
+		}
+
+		.btn-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			color: white;
+			font-size: $im-font-size-large;
+			font-weight: 600;
+
+			.btn-text {
+				margin-right: 10rpx;
+			}
+		}
+
+		&:active .btn-icon {
+			transform: translateX(4rpx);
+		}
+	}
+
+	// 底部导航
+	.nav-tool-bar {
+		padding: 40rpx 0 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.nav-register {
+			.register-link {
+				display: flex;
+				align-items: center;
+				text-decoration: none;
+
+				.register-text {
+					color: $im-text-color-light;
+					font-size: $im-font-size-small;
+					margin-right: 8rpx;
+				}
+
+				.register-highlight {
+					color: $im-color-primary;
+					font-size: $im-font-size-small;
+					font-weight: 600;
+				}
+			}
+		}
 	}
 }
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/register/register.vue b/im-uniapp/pages/register/register.vue
index 163d4b4..d511311 100644
--- a/im-uniapp/pages/register/register.vue
+++ b/im-uniapp/pages/register/register.vue
@@ -1,88 +1,142 @@
 <template>
 	<view class="register">
-		<view class="title">欢迎注册</view>
-		<view class="form">
-			<uni-forms  ref="form" :modelValue="dataForm" :rules="rules" validate-trigger="bind" label-width="80px">
-				<uni-forms-item name="userName" label="用户名">
-					<uni-easyinput type="text" v-model="dataForm.userName" placeholder="用户名"  maxlength="20"/>
-				</uni-forms-item>
-				<uni-forms-item name="nickName" label="昵称">
-					<uni-easyinput type="text" v-model="dataForm.nickName" placeholder="昵称" maxlength="20"/>
-				</uni-forms-item>
-				<uni-forms-item name="password" label="密码">
-					<uni-easyinput type="password" v-model="dataForm.password" placeholder="密码" maxlength="20"/>
-				</uni-forms-item>
-				<uni-forms-item name="corfirmPassword" label="确认密码">
-					<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" maxlength="20"/>
-				</uni-forms-item>
-				<button class="btn-submit" @click="submit" type="primary">注册并登录</button>
-			</uni-forms>
+		<!-- 主要内容区域 -->
+		<view class="content">
+			<!-- Logo和标题区域 -->
+			<view class="header" @longpress.prevent="onLongPressHeader()">
+				<view class="title"> 用户注册 </view>
+				<view class="subtitle">创建您的账号，开始精彩旅程</view>
+			</view>
+
+			<!-- 表单区域 -->
+			<view class="form-container">
+				<view class="form">
+					<!-- 用户名输入 -->
+					<view class="form-item" :class="{'focused': userNameFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-username"></view>
+						</view>
+						<input class="input" type="text" v-model="dataForm.userName" placeholder="请填写用户名"
+							@focus="userNameFocused = true" @blur="userNameFocused = false" />
+					</view>
+					
+					<!-- 用户名输入 -->
+					<view class="form-item" :class="{'focused': nickNameFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-username"></view>
+						</view>
+						<input class="input" type="text" v-model="dataForm.nickName" placeholder="请填写昵称"
+							@focus="nickNameFocused = true" @blur="nickNameFocused = false" />
+					</view>
+
+					<!-- 密码输入 -->
+					<view class="form-item" :class="{'focused': passwordFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-pwd"></view>
+						</view>
+						<input class="input" :type="isShowPwd?'text':'password'" v-model="dataForm.password"
+							placeholder="请设置密码" @focus="passwordFocused = true" @blur="passwordFocused = false" />
+						<view class="icon-suffix iconfont" :class="isShowPwd?'icon-pwd-show':'icon-pwd-hide'"
+							@click="onSwitchShowPwd"></view>
+					</view>
+
+					<!-- 确认密码输入 -->
+					<view class="form-item" :class="{'focused': confirmPasswordFocused}">
+						<view class="icon-wrapper">
+							<view class="icon iconfont icon-pwd"></view>
+						</view>
+						<input class="input" :type="isShowConfirmPwd?'text':'password'"
+							v-model="dataForm.confirmPassword" placeholder="确认密码" @focus="confirmPasswordFocused = true"
+							@blur="confirmPasswordFocused = false" />
+						<view class="icon-suffix iconfont" :class="isShowConfirmPwd?'icon-pwd-show':'icon-pwd-hide'"
+							@click="onSwitchShowConfirmPwd"></view>
+					</view>
+
+					<!-- 注册按钮 -->
+					<button class="submit-btn" @click="submit" type="primary">
+						<view class="btn-content">
+							<text class="btn-text">注册并登录</text>
+						</view>
+					</button>
+
+					<!-- 底部导航 -->
+					<view class="nav-tool-bar">
+						<view class="nav-login">
+							<navigator url="/pages/login/login" class="login-link">
+								<text class="login-text">已有账号？</text>
+								<text class="login-highlight">立即登录</text>
+							</navigator>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
-		<navigator class="nav-login" url="/pages/login/login">
-			返回登录页面
-		</navigator>
 	</view>
 </template>
 
 <script>
+import UNI_APP from '@/.env.js';
+
 export default {
 	data() {
 		return {
+			isShowPwd: false,
+			isShowConfirmPwd: false,
+			userNameFocused: false,
+			nickNameFocused: false,
+			passwordFocused: false,
+			confirmPasswordFocused: false,
 			dataForm: {
 				userName: '',
 				nickName: '',
 				password: '',
-				corfirmPassword: ''
-			},
-			rules: {
-				userName: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入用户名',
-					}]
-				},
-				nickName: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入昵称',
-					}]
-				},
-				password: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入密码',
-					}]
-				},
-				corfirmPassword: {
-					rules: [{
-						required: true,
-						errorMessage: '请输入确认密码',
-					}, {
-						validateFunction: (rule, value, data, callback) => {
-							if (data.password != value) {
-								callback('两次密码输入不一致')
-							}
-							return true;
-						}
-					}]
-				}
+				confirmPassword: ''
 			}
 		}
 	},
 	methods: {
+		onSwitchShowPwd() {
+			this.isShowPwd = !this.isShowPwd;
+		},
+		onSwitchShowConfirmPwd() {
+			this.isShowConfirmPwd = !this.isShowConfirmPwd;
+		},
 		submit() {
-			this.$refs.form.validate().then(() => {
-				this.$http({
-					url: '/register',
-					data: this.dataForm,
-					method: 'POST'
-				}).then(() => {
-					uni.showToast({
-						title: "注册成功,您已成为盒子IM的用户",
-						icon: 'none'
-					})
-					this.login();
+			if (!this.dataForm.userName) {
+				return uni.showToast({
+					title: '请输入用户名',
+					icon: 'none'
+				});
+			}
+			if (!this.dataForm.password) {
+				return uni.showToast({
+					title: '请输入密码',
+					icon: 'none'
+				});
+			}
+			if (!this.dataForm.confirmPassword) {
+				return uni.showToast({
+					title: '请输入确认密码',
+					icon: 'none'
+				});
+			}
+			if (this.dataForm.confirmPassword != this.dataForm.password) {
+				return uni.showToast({
+					title: '两次密码输入不一致',
+					icon: 'none'
+				});
+			}
+			this.$http({
+				url: '/register',
+				data: this.dataForm,
+				method: 'POST'
+			}).then(() => {
+				let appName = uni.getSystemInfoSync().appName
+				uni.showToast({
+					title: `注册成功,您已成为${appName}的用户`,
+					icon: 'none'
 				})
+				this.login();
 			})
 		},
 		login() {
@@ -107,6 +161,8 @@ export default {
 					url: "/pages/chat/chat"
 				})
 			})
+			// 清理数据，防止缓存未失效
+			getApp().$vm.unloadStore();
 		}
 	}
 }
@@ -114,31 +170,182 @@ export default {
 
 <style lang="scss" scoped>
 .register {
-	.title {
-		padding-top: 250rpx;
-		padding-bottom: 50rpx;
-		color: $im-color-primary;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	overflow: hidden;
+
+	// 主要内容区域
+	.content {
+		flex: 1;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		margin-top: 120rpx;
+		// #ifdef APP-PLUS
+		margin-top: calc(120rpx + var(--status-bar-height));
+		// #endif
+		padding: 0 60rpx;
+	}
+
+	// 头部区域
+	.header {
 		text-align: center;
-		font-size: 24px;
-		font-weight: 600;
+		padding: 80rpx 0;
+
+		.title {
+			color: $im-color-primary;
+			font-size: 48rpx;
+			font-weight: 700;
+			margin-bottom: 20rpx;
+			letter-spacing: 2rpx;
+		}
+
+		.subtitle {
+			color: $im-text-color-light;
+			font-size: 28rpx;
+			opacity: 0.8;
+		}
+	}
+
+	// 表单容器
+	.form-container {
+		display: flex;
+		flex-direction: column;
 	}
 
+	// 表单样式
 	.form {
-		padding: 50rpx;
+		height: 830rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		.form-item {
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding: 0 30rpx;
+			height: 100rpx;
+			margin: 14rpx 0;
+			border-radius: 25rpx;
+			background: rgba(255, 255, 255, 0.9);
+			border: 2rpx solid transparent;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+			transition: all 0.3s ease;
+
+			&.focused {
+				border-color: $im-color-primary;
+				box-shadow: 0 8rpx 32rpx rgba($im-color-primary, 0.15);
+				transform: translateY(-2rpx);
+			}
+
+			.icon-wrapper {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 60rpx;
+				height: 60rpx;
+				margin-right: 30rpx;
+				border-radius: 50%;
+				background: $im-bg-active;
+				transition: all 0.3s ease;
 
-		.btn-submit {
-			margin-top: 80rpx;
-			border-radius: 50rpx;
+				.icon {
+					font-size: 32rpx;
+					color: $im-color-primary;
+					font-weight: bold;
+				}
+			}
+
+			&.focused .icon-wrapper {
+				transform: scale(1.1);
+			}
+
+			.input {
+				flex: 1;
+				font-size: 32rpx;
+				color: #333;
+				background: transparent;
+				border: none;
+				outline: none;
+
+				&::placeholder {
+					color: $im-text-color-light;
+					font-size: 30rpx;
+				}
+			}
+
+			.icon-suffix {
+				font-size: 36rpx;
+				padding: 10rpx;
+			}
 		}
 	}
 
-	.nav-login {
-		position: fixed;
+	// 注册按钮
+	.submit-btn {
+		height: 100rpx;
+		border-radius: 50rpx;
+		border: none;
+		box-shadow: 0 8rpx 32rpx rgba($im-color-primary, 0.3);
+		transition: all 0.3s ease;
+		overflow: hidden;
+		position: relative;
 		width: 100%;
-		bottom: 100rpx;
-		color: $im-color-primary;
-		text-align: center;
-		font-size: 32rpx;
+		margin-top: 50rpx;
+
+		&:active {
+			transform: translateY(2rpx);
+			box-shadow: 0 4rpx 16rpx rgba($im-color-primary, 0.4);
+		}
+
+		.btn-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			color: white;
+			font-size: $im-font-size-large;
+			font-weight: 600;
+
+			.btn-text {
+				margin-right: 10rpx;
+			}
+		}
+	}
+
+	// 底部导航
+	.nav-tool-bar {
+		padding: 40rpx 0 60rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.nav-login {
+			.login-link {
+				display: flex;
+				align-items: center;
+				text-decoration: none;
+
+				.login-text {
+					color: $im-text-color-light;
+					font-size: $im-font-size-small;
+					margin-right: 8rpx;
+				}
+
+				.login-highlight {
+					color: $im-color-primary;
+					font-size: $im-font-size-small;
+					font-weight: 600;
+					transition: all 0.3s ease;
+
+					&:active {
+						opacity: 0.7;
+					}
+				}
+			}
+		}
 	}
 }
 </style>
\ No newline at end of file