💄 style(login): 优化登录和注册页面UI设计

- 调整页面布局和间距，增加logo显示
- 更新表单样式，优化输入框和按钮视觉效果
- 修改颜色方案，采用更现代的配色
- 增加响应式设计，适配不同屏幕尺寸
- 添加深色模式支持

✨ feat(login): 增强表单功能和用户体验

- 为输入框添加最大长度限制
- 优化按钮状态显示，添加加载中提示
- 改进链接交互效果
- 添加用户协议和隐私政策链接
- 优化表单标签和占位符文本

mini/src/pages/login/index.css

@@ -1,88 +1,229 @@
+/* 页面容器 */
 .login-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 40rpx;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 64rpx 32rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
 }
 
+/* 页面头部 */
 .login-header {
   text-align: center;
-  margin-bottom: 80rpx;
+  margin-bottom: 96rpx;
+}
+
+.login-logo {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  margin-bottom: 48rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+}
+
+.login-title-container {
+  margin-top: 32rpx;
 }
 
 .login-title {
   display: block;
   font-size: 48rpx;
-  font-weight: bold;
-  color: #fff;
-  margin-bottom: 20rpx;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 16rpx;
+  letter-spacing: 2rpx;
 }
 
 .login-subtitle {
   display: block;
   font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
+  color: #8c8c8c;
+  line-height: 1.5;
 }
 
+/* 表单区域 */
 .login-form {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 60rpx 40rpx;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 600rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 64rpx 48rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
 }
 
 .form-item {
-  margin-bottom: 40rpx;
+  margin-bottom: 48rpx;
 }
 
 .form-label {
   display: block;
   font-size: 28rpx;
-  color: #333;
+  color: #262626;
   margin-bottom: 16rpx;
   font-weight: 500;
 }
 
+.input-wrapper {
+  position: relative;
+}
+
 .form-input {
   width: 100%;
-  height: 88rpx;
-  border: 2rpx solid #e8e8e8;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
-  font-size: 28rpx;
+  height: 96rpx;
+  border: 2rpx solid #d9d9d9;
+  border-radius: 16rpx;
+  padding: 0 32rpx;
+  font-size: 32rpx;
+  color: #262626;
   box-sizing: border-box;
-  background: #f8f8f8;
+  background: #fafafa;
+  transition: all 0.2s ease-in-out;
 }
 
 .form-input:focus {
   border-color: #1890ff;
-  background: #fff;
+  background: #ffffff;
+  box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.2);
 }
 
+.form-input::placeholder {
+  color: #bfbfbf;
+  font-size: 28rpx;
+}
+
+/* 登录按钮 */
 .login-button {
   width: 100%;
-  height: 88rpx;
-  background: #1890ff;
-  color: #fff;
-  border-radius: 12rpx;
+  height: 96rpx;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: #ffffff;
+  border-radius: 16rpx;
   font-size: 32rpx;
   font-weight: 500;
-  margin-top: 40rpx;
+  margin-top: 32rpx;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
 }
 
 .login-button:active {
-  background: #096dd9;
+  transform: translateY(2rpx);
+  box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
+}
+
+.login-button.loading {
+  opacity: 0.8;
 }
 
+/* 页脚区域 */
 .login-footer {
   text-align: center;
-  margin-top: 40rpx;
+  margin-top: 48rpx;
 }
 
-.register-link {
+.footer-text {
+  font-size: 28rpx;
+  color: #595959;
+}
+
+.link-text {
   color: #1890ff;
   font-size: 28rpx;
-  text-decoration: underline;
+  text-decoration: none;
+}
+
+.link-text:active {
+  opacity: 0.7;
+}
+
+.login-footer-info {
+  position: absolute;
+  bottom: 64rpx;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.footer-tip {
+  font-size: 24rpx;
+  color: #8c8c8c;
+  margin-bottom: 16rpx;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.link-separator {
+  color: #8c8c8c;
+  font-size: 24rpx;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 375px) {
+  .login-container {
+    padding: 48rpx 24rpx;
+  }
+  
+  .login-form {
+    padding: 48rpx 32rpx;
+  }
+  
+  .login-title {
+    font-size: 44rpx;
+  }
+  
+  .login-subtitle {
+    font-size: 26rpx;
+  }
+}
+
+@media screen and (min-width: 415px) {
+  .login-container {
+    padding: 96rpx 48rpx;
+  }
+  
+  .login-form {
+    padding: 80rpx 64rpx;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .login-container {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  }
+  
+  .login-title {
+    color: #e6e6e6;
+  }
+  
+  .login-subtitle {
+    color: #8c8c8c;
+  }
+  
+  .login-form {
+    background: #2a2a2a;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
+  }
+  
+  .form-label {
+    color: #e6e6e6;
+  }
+  
+  .form-input {
+    background: #3a3a3a;
+    border-color: #4a4a4a;
+    color: #e6e6e6;
+  }
+  
+  .form-input:focus {
+    background: #3a3a3a;
+    border-color: #1890ff;
+  }
 }

mini/src/pages/login/index.tsx

@@ -1,4 +1,4 @@
-import { View, Input, Button, Text } from '@tarojs/components'
+import { View, Input, Button, Text, Image } from '@tarojs/components'
 import { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { authManager } from '../../utils/auth'
@@ -47,46 +47,72 @@ export default function Login() {
   return (
     <View className="login-container">
       <View className="login-header">
-        <Text className="login-title">欢迎登录</Text>
-        <Text className="login-subtitle">请使用您的账号登录</Text>
+        <Image 
+          className="login-logo"
+          src="https://source.unsplash.com/200x200/?logo"
+          mode="aspectFit"
+        />
+        <View className="login-title-container">
+          <Text className="login-title">欢迎回来</Text>
+          <Text className="login-subtitle">请使用您的账号登录</Text>
+        </View>
       </View>
       
       <View className="login-form">
         <View className="form-item">
           <Text className="form-label">用户名</Text>
-          <Input
-            className="form-input"
-            placeholder="请输入用户名"
-            value={username}
-            onInput={(e) => setUsername(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请输入用户名"
+              value={username}
+              onInput={(e) => setUsername(e.detail.value)}
+              maxlength={20}
+            />
+          </View>
         </View>
         
         <View className="form-item">
           <Text className="form-label">密码</Text>
-          <Input
-            className="form-input"
-            placeholder="请输入密码"
-            password
-            value={password}
-            onInput={(e) => setPassword(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请输入密码"
+              password
+              value={password}
+              onInput={(e) => setPassword(e.detail.value)}
+              maxlength={20}
+            />
+          </View>
         </View>
         
         <Button
-          className="login-button"
+          className={`login-button ${loading ? 'loading' : ''}`}
           loading={loading}
           onClick={handleLogin}
+          disabled={loading}
         >
-          登录222
+          {loading ? '登录中...' : '登录'}
         </Button>
         
         <View className="login-footer">
-          <Text className="register-link" onClick={goToRegister}>
-            还没有账号？立即注册
+          <Text className="footer-text">
+            还没有账号？ 
+            <Text className="link-text" onClick={goToRegister}>
+              立即注册
+            </Text>
           </Text>
         </View>
       </View>
+      
+      <View className="login-footer-info">
+        <Text className="footer-tip">登录即表示您同意我们的</Text>
+        <View className="footer-links">
+          <Text className="link-text">用户协议</Text>
+          <Text className="link-separator">和</Text>
+          <Text className="link-text">隐私政策</Text>
+        </View>
+      </View>
     </View>
   )
 }

mini/src/pages/register/index.css

@@ -1,88 +1,229 @@
+/* 页面容器 */
 .register-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 40rpx;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 64rpx 32rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
 }
 
+/* 页面头部 */
 .register-header {
   text-align: center;
-  margin-bottom: 80rpx;
+  margin-bottom: 96rpx;
+}
+
+.register-logo {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  margin-bottom: 48rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+}
+
+.register-title-container {
+  margin-top: 32rpx;
 }
 
 .register-title {
   display: block;
   font-size: 48rpx;
-  font-weight: bold;
-  color: #fff;
-  margin-bottom: 20rpx;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 16rpx;
+  letter-spacing: 2rpx;
 }
 
 .register-subtitle {
   display: block;
   font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
+  color: #8c8c8c;
+  line-height: 1.5;
 }
 
+/* 表单区域 */
 .register-form {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 60rpx 40rpx;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 600rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 64rpx 48rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
 }
 
 .form-item {
-  margin-bottom: 40rpx;
+  margin-bottom: 48rpx;
 }
 
 .form-label {
   display: block;
   font-size: 28rpx;
-  color: #333;
+  color: #262626;
   margin-bottom: 16rpx;
   font-weight: 500;
 }
 
+.input-wrapper {
+  position: relative;
+}
+
 .form-input {
   width: 100%;
-  height: 88rpx;
-  border: 2rpx solid #e8e8e8;
-  border-radius: 12rpx;
-  padding: 0 24rpx;
-  font-size: 28rpx;
+  height: 96rpx;
+  border: 2rpx solid #d9d9d9;
+  border-radius: 16rpx;
+  padding: 0 32rpx;
+  font-size: 32rpx;
+  color: #262626;
   box-sizing: border-box;
-  background: #f8f8f8;
+  background: #fafafa;
+  transition: all 0.2s ease-in-out;
 }
 
 .form-input:focus {
   border-color: #1890ff;
-  background: #fff;
+  background: #ffffff;
+  box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.2);
 }
 
+.form-input::placeholder {
+  color: #bfbfbf;
+  font-size: 28rpx;
+}
+
+/* 注册按钮 */
 .register-button {
   width: 100%;
-  height: 88rpx;
-  background: #1890ff;
-  color: #fff;
-  border-radius: 12rpx;
+  height: 96rpx;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: #ffffff;
+  border-radius: 16rpx;
   font-size: 32rpx;
   font-weight: 500;
-  margin-top: 40rpx;
+  margin-top: 32rpx;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
 }
 
 .register-button:active {
-  background: #096dd9;
+  transform: translateY(2rpx);
+  box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.3);
+}
+
+.register-button.loading {
+  opacity: 0.8;
 }
 
+/* 页脚区域 */
 .register-footer {
   text-align: center;
-  margin-top: 40rpx;
+  margin-top: 48rpx;
 }
 
-.login-link {
+.footer-text {
+  font-size: 28rpx;
+  color: #595959;
+}
+
+.link-text {
   color: #1890ff;
   font-size: 28rpx;
-  text-decoration: underline;
+  text-decoration: none;
+}
+
+.link-text:active {
+  opacity: 0.7;
+}
+
+.register-footer-info {
+  position: absolute;
+  bottom: 64rpx;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+
+.footer-tip {
+  font-size: 24rpx;
+  color: #8c8c8c;
+  margin-bottom: 16rpx;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.link-separator {
+  color: #8c8c8c;
+  font-size: 24rpx;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 375px) {
+  .register-container {
+    padding: 48rpx 24rpx;
+  }
+  
+  .register-form {
+    padding: 48rpx 32rpx;
+  }
+  
+  .register-title {
+    font-size: 44rpx;
+  }
+  
+  .register-subtitle {
+    font-size: 26rpx;
+  }
+}
+
+@media screen and (min-width: 415px) {
+  .register-container {
+    padding: 96rpx 48rpx;
+  }
+  
+  .register-form {
+    padding: 80rpx 64rpx;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .register-container {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  }
+  
+  .register-title {
+    color: #e6e6e6;
+  }
+  
+  .register-subtitle {
+    color: #8c8c8c;
+  }
+  
+  .register-form {
+    background: #2a2a2a;
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
+  }
+  
+  .form-label {
+    color: #e6e6e6;
+  }
+  
+  .form-input {
+    background: #3a3a3a;
+    border-color: #4a4a4a;
+    color: #e6e6e6;
+  }
+  
+  .form-input:focus {
+    background: #3a3a3a;
+    border-color: #1890ff;
+  }
 }

mini/src/pages/register/index.tsx

@@ -1,4 +1,4 @@
-import { View, Input, Button, Text } from '@tarojs/components'
+import { View, Input, Button, Text, Image } from '@tarojs/components'
 import { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { authManager } from '../../utils/auth'
@@ -70,68 +70,100 @@ export default function Register() {
   return (
     <View className="register-container">
       <View className="register-header">
-        <Text className="register-title">创建账号</Text>
-        <Text className="register-subtitle">欢迎来到我们的小程序</Text>
+        <Image 
+          className="register-logo"
+          src="https://source.unsplash.com/200x200/?avatar"
+          mode="aspectFit"
+        />
+        <View className="register-title-container">
+          <Text className="register-title">创建账号</Text>
+          <Text className="register-subtitle">欢迎加入我们的小程序</Text>
+        </View>
       </View>
       
       <View className="register-form">
         <View className="form-item">
           <Text className="form-label">用户名</Text>
-          <Input
-            className="form-input"
-            placeholder="请输入用户名"
-            value={username}
-            onInput={(e) => setUsername(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请输入用户名（3-20个字符）"
+              value={username}
+              onInput={(e) => setUsername(e.detail.value)}
+              maxlength={20}
+            />
+          </View>
         </View>
         
         <View className="form-item">
           <Text className="form-label">邮箱（可选）</Text>
-          <Input
-            className="form-input"
-            placeholder="请输入邮箱地址"
-            type="text"
-            value={email}
-            onInput={(e) => setEmail(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请输入邮箱地址"
+              type="text"
+              value={email}
+              onInput={(e) => setEmail(e.detail.value)}
+              maxlength={50}
+            />
+          </View>
         </View>
         
         <View className="form-item">
           <Text className="form-label">密码</Text>
-          <Input
-            className="form-input"
-            placeholder="请输入密码（至少6位）"
-            password
-            value={password}
-            onInput={(e) => setPassword(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请输入密码（至少6位）"
+              password
+              value={password}
+              onInput={(e) => setPassword(e.detail.value)}
+              maxlength={20}
+            />
+          </View>
         </View>
         
         <View className="form-item">
           <Text className="form-label">确认密码</Text>
-          <Input
-            className="form-input"
-            placeholder="请再次输入密码"
-            password
-            value={confirmPassword}
-            onInput={(e) => setConfirmPassword(e.detail.value)}
-          />
+          <View className="input-wrapper">
+            <Input
+              className="form-input"
+              placeholder="请再次输入密码"
+              password
+              value={confirmPassword}
+              onInput={(e) => setConfirmPassword(e.detail.value)}
+              maxlength={20}
+            />
+          </View>
         </View>
         
         <Button
-          className="register-button"
+          className={`register-button ${loading ? 'loading' : ''}`}
           loading={loading}
           onClick={handleRegister}
+          disabled={loading}
         >
-          注册
+          {loading ? '注册中...' : '立即注册'}
         </Button>
         
         <View className="register-footer">
-          <Text className="login-link" onClick={goToLogin}>
-            已有账号？立即登录
+          <Text className="footer-text">
+            已有账号？ 
+            <Text className="link-text" onClick={goToLogin}>
+              立即登录
+            </Text>
           </Text>
         </View>
       </View>
+      
+      <View className="register-footer-info">
+        <Text className="footer-tip">注册即表示您同意我们的</Text>
+        <View className="footer-links">
+          <Text className="link-text">用户协议</Text>
+          <Text className="link-separator">和</Text>
+          <Text className="link-text">隐私政策</Text>
+        </View>
+      </View>
     </View>
   )
 }