📝 docs(mini-program): add UI design specification document

- create 16-mini-program-ui.md with comprehensive UI guidelines
- define design principles, visual规范, component styles and interaction rules
- specify color system, typography, spacing and responsive design standards

💄 style(mini-program): optimize index page styling according to UI specs

- refactor index.css with BEM naming convention
- update colors to match brand palette (#1890ff primary color)
- adjust spacing, borders and shadows following design guidelines
- implement responsive layouts for different screen sizes
- add touch feedback and transition animations

♻️ refactor(mini-program): update index page structure and components

- reorganize JSX structure to match UI specification
- implement card-based layout for user info and login sections
- add statistics cards for user metrics
- improve feature display with grid layout
- enhance responsive behavior across different devices

.roo/rules/16-mini-program-ui.md

@@ -0,0 +1,360 @@
+# 小程序 UI 设计规范
+
+## 1. 设计原则
+
+### 1.1 核心原则
+- **简洁直观**：界面简洁，操作路径短，减少用户认知负担
+- **一致性**：保持视觉和操作逻辑的一致性
+- **响应迅速**：页面加载和交互反馈及时
+- **易用性**：符合微信小程序设计规范，降低学习成本
+
+### 1.2 适配原则
+- 支持 iOS 和 Android 双平台
+- 适配不同屏幕尺寸（iPhone SE 到 iPad）
+- 考虑深色模式适配
+
+## 2. 视觉规范
+
+### 2.1 色彩系统
+
+#### 主色调
+- **品牌主色**：#1890ff（蓝色）
+- **辅助色**：
+  - 成功：#52c41a（绿色）
+  - 警告：#faad14（黄色）
+  - 错误：#ff4d4f（红色）
+  - 信息：#1890ff（蓝色）
+
+#### 中性色
+- **文字色**：
+  - 主要文字：#262626
+  - 次要文字：#595959
+  - 置灰文字：#8c8c8c
+  - 辅助文字：#bfbfbf
+- **背景色**：
+  - 页面背景：#f5f5f5
+  - 卡片背景：#ffffff
+  - 分割線：#e8e8e8
+
+### 2.2 字体规范
+
+#### 字体家族
+- iOS：-apple-system-font, Helvetica Neue
+- Android：Roboto, Helvetica Neue
+
+#### 字体大小
+- 标题：18px（`font-size: 36rpx`）
+- 正文：16px（`font-size: 32rpx`）
+- 辅助文字：14px（`font-size: 28rpx`）
+- 说明文字：12px（`font-size: 24rpx`）
+
+#### 字重
+- 标题：600（中等）
+- 正文：400（常规）
+- 强调：500（中等）
+
+### 2.3 间距规范
+
+#### 基础间距
+- 8rpx（4px）
+- 16rpx（8px）
+- 24rpx（12px）
+- 32rpx（16px）
+- 48rpx（24px）
+- 64rpx（32px）
+
+#### 组件间距
+- 卡片内边距：32rpx
+- 列表项间距：24rpx
+- 按钮间距：32rpx
+- 表单间距：48rpx
+
+## 3. 组件规范
+
+### 3.1 按钮规范
+
+#### 主要按钮
+```css
+.button-primary {
+  background-color: #1890ff;
+  color: #ffffff;
+  border-radius: 8rpx;
+  padding: 24rpx 48rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+```
+
+#### 次要按钮
+```css
+.button-secondary {
+  background-color: #ffffff;
+  color: #1890ff;
+  border: 2rpx solid #1890ff;
+  border-radius: 8rpx;
+  padding: 24rpx 48rpx;
+  font-size: 32rpx;
+}
+```
+
+#### 禁用状态
+```css
+.button-disabled {
+  background-color: #f5f5f5;
+  color: #bfbfbf;
+  border: none;
+}
+```
+
+### 3.2 输入框规范
+
+#### 基础样式
+```css
+.input-base {
+  background-color: #ffffff;
+  border: 2rpx solid #d9d9d9;
+  border-radius: 8rpx;
+  padding: 24rpx;
+  font-size: 32rpx;
+  color: #262626;
+}
+```
+
+#### 输入框状态
+- 默认：border-color: #d9d9d9
+- 聚焦：border-color: #1890ff
+- 错误：border-color: #ff4d4f
+- 禁用：background-color: #f5f5f5
+
+### 3.3 卡片规范
+
+#### 基础卡片
+```css
+.card-base {
+  background-color: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  padding: 32rpx;
+}
+```
+
+#### 卡片类型
+- 信息卡片：白色背景，16rpx圆角
+- 操作卡片：带边框，8rpx圆角
+- 统计卡片：带图标和数字展示
+
+### 3.4 列表规范
+
+#### 列表项样式
+```css
+.list-item {
+  background-color: #ffffff;
+  padding: 32rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+```
+
+#### 列表状态
+- 正常状态：白色背景
+- 点击状态：#f5f5f5背景
+- 加载状态：骨架屏占位
+
+## 4. 页面布局
+
+### 4.1 页面结构
+
+#### 导航栏
+- 高度：88rpx
+- 背景色：#ffffff
+- 标题：居中对齐，18px字体
+- 返回按钮：左侧44x44rpx
+
+#### 内容区域
+- 安全区域：左右各32rpx
+- 顶部间距：32rpx
+- 底部间距：32rpx
+
+### 4.2 栅格系统
+
+#### 响应式布局
+- 小屏幕（≤375px）：单列布局
+- 中屏幕（376-414px）：双列布局
+- 大屏幕（≥415px）：三列布局
+
+#### 间距规范
+- 组件间距：32rpx
+- 段落间距：48rpx
+- 页面间距：64rpx
+
+## 5. 交互规范
+
+### 5.1 触摸反馈
+
+#### 按钮反馈
+- 触摸时：透明度降低至0.7
+- 松开后：恢复透明度
+- 动画时长：200ms
+
+#### 列表反馈
+- 触摸时：背景色变为#f5f5f5
+- 松开后：恢复原色或跳转页面
+
+### 5.2 加载状态
+
+#### 骨架屏
+- 使用灰色占位块模拟内容
+- 动画：脉冲效果
+- 时长：1.5s循环
+
+#### 加载更多
+- 底部显示"加载中..."提示
+- 失败后显示"点击重试"
+- 无更多数据时显示"没有更多了"
+
+### 5.3 空状态
+
+#### 空数据
+- 居中显示图标和文字
+- 图标：系统默认空状态图标
+- 文字：14px，#8c8c8c颜色
+
+#### 错误状态
+- 显示错误图标
+- 提供重试按钮
+- 错误信息清晰易懂
+
+## 6. 图标规范
+
+### 6.1 图标尺寸
+
+#### 功能图标
+- 小图标：48rpx × 48rpx
+- 中图标：64rpx × 64rpx
+- 大图标：96rpx × 96rpx
+
+#### 头像图标
+- 小头像：96rpx × 96rpx
+- 中头像：128rpx × 128rpx
+- 大头像：160rpx × 160rpx
+
+### 6.2 图标风格
+
+#### 线性图标
+- 线条粗细：4rpx
+- 颜色：#262626（主要）、#8c8c8c（次要）
+
+#### 面性图标
+- 填充颜色：#1890ff（主色）
+- 背景色：rgba(24, 144, 255, 0.1)
+
+## 7. 动效规范
+
+### 7.1 过渡动画
+
+#### 页面切换
+- 类型：滑动过渡
+- 时长：300ms
+- 缓动函数：ease-out
+
+#### 元素出现
+- 类型：淡入+缩放
+- 时长：200ms
+- 延迟：50ms
+
+### 7.2 微交互
+
+#### 按钮点击
+- 缩放：0.95
+- 时长：150ms
+- 缓动函数：ease-in-out
+
+#### 列表滑动
+- 阻尼系数：0.8
+- 回弹距离：32rpx
+- 时长：400ms
+
+## 8. 适配规范
+
+### 8.1 屏幕适配
+
+#### 安全区域
+- iPhone X及以上：底部留空88rpx
+- Android全面屏：底部留空64rpx
+- 普通屏幕：底部留空48rpx
+
+#### 字体适配
+- 小屏幕：字体大小-2rpx
+- 大屏幕：字体大小+2rpx
+- 超大屏幕：字体大小+4rpx
+
+### 8.2 深色模式
+
+#### 色彩映射
+- 背景色：#ffffff → #1a1a1a
+- 文字色：#262626 → #e6e6e6
+- 卡片背景：#ffffff → #2a2a2a
+- 分割线：#e8e8e8 → #3a3a3a
+
+#### 图片适配
+- 图标：使用系统图标自动适配
+- 图片：提供深色模式专用版本
+
+## 9. 代码规范
+
+### 9.1 CSS命名规范
+
+#### BEM命名法
+```css
+.block__element--modifier
+```
+
+#### 示例
+```css
+.button--primary {}
+.card__header {}
+.list-item--active {}
+```
+
+### 9.2 样式组织
+
+#### 文件结构
+```
+styles/
+├── base/          # 基础样式
+├── components/    # 组件样式
+├── layouts/       # 布局样式
+├── themes/        # 主题样式
+└── utils/         # 工具样式
+```
+
+#### 样式优先级
+1. 内联样式（谨慎使用）
+2. 页面样式
+3. 组件样式
+4. 全局样式
+
+## 10. 最佳实践
+
+### 10.1 性能优化
+
+#### 图片优化
+- 使用webp格式
+- 按需加载
+- 压缩至合适尺寸
+
+#### 样式优化
+- 避免深层嵌套
+- 使用transform代替position
+- 减少重排重绘
+
+### 10.2 可访问性
+
+#### 文字可读性
+- 最小字号：24rpx
+- 行高：1.5倍
+- 对比度：WCAG 2.1 AA标准
+
+#### 触摸目标
+- 最小尺寸：88rpx × 88rpx
+- 间距：至少16rpx
+- 反馈：视觉+触觉

mini/src/pages/index/index.css

@@ -1,129 +1,290 @@
+/* 全局样式重置 */
+page {
+  background-color: #f5f5f5;
+}
+
 .index-container {
   min-height: 100vh;
-  background: #f5f5f5;
-  padding: 40rpx;
+  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+  padding: 32rpx;
+  box-sizing: border-box;
 }
 
+/* 用户已登录状态 */
 .user-welcome {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 60rpx 40rpx;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
-  text-align: center;
+  padding: 32rpx 0;
+}
+
+.user-card {
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  padding: 48rpx 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.user-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 48rpx;
 }
 
 .user-avatar {
-  margin-bottom: 40rpx;
+  margin-right: 32rpx;
 }
 
 .avatar-image {
-  width: 200rpx;
-  height: 200rpx;
+  width: 128rpx;
+  height: 128rpx;
   border-radius: 50%;
   border: 4rpx solid #1890ff;
+  background: #f0f0f0;
+}
+
+.user-greeting {
+  flex: 1;
 }
 
 .welcome-text {
   display: block;
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 40rpx;
+  font-size: 28rpx;
+  color: #8c8c8c;
+  margin-bottom: 8rpx;
+}
+
+.username {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #262626;
 }
 
 .user-info {
-  margin-bottom: 60rpx;
+  margin-bottom: 48rpx;
 }
 
 .info-item {
-  display: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-label {
   font-size: 28rpx;
-  color: #666;
-  margin-bottom: 20rpx;
+  color: #8c8c8c;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #262626;
+  font-weight: 500;
 }
 
 .action-buttons {
   display: flex;
   flex-direction: column;
-  gap: 30rpx;
+  gap: 24rpx;
 }
 
 .action-button {
   width: 100%;
-  height: 88rpx;
+  height: 80rpx;
   font-size: 32rpx;
   font-weight: 500;
-  border-radius: 12rpx;
+  border-radius: 8rpx;
+  transition: opacity 0.2s ease;
+}
+
+.action-button:active {
+  opacity: 0.7;
+}
+
+.action-button.primary {
+  background: #1890ff;
+  color: #ffffff;
+  border: none;
+}
+
+.action-button.secondary {
+  background: #ffffff;
+  color: #1890ff;
+  border: 2rpx solid #1890ff;
+}
+
+.stats-section {
+  display: flex;
+  gap: 16rpx;
+  justify-content: space-between;
+}
+
+.stat-card {
+  flex: 1;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  padding: 32rpx 24rpx;
+  text-align: center;
+}
+
+.stat-number {
+  display: block;
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 8rpx;
+}
+
+.stat-label {
+  display: block;
+  font-size: 24rpx;
+  color: #8c8c8c;
 }
 
+/* 用户未登录状态 */
 .login-prompt {
-  background: #fff;
-  border-radius: 20rpx;
-  padding: 80rpx 40rpx;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  padding: 32rpx 0;
+}
+
+.welcome-header {
   text-align: center;
+  margin-bottom: 64rpx;
 }
 
-.welcome-section {
-  margin-bottom: 60rpx;
+.welcome-icon {
+  width: 192rpx;
+  height: 192rpx;
+  margin-bottom: 32rpx;
+  border-radius: 16rpx;
 }
 
 .welcome-title {
   display: block;
-  font-size: 48rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 20rpx;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 16rpx;
 }
 
 .welcome-subtitle {
   display: block;
-  font-size: 32rpx;
-  color: #666;
-  margin-bottom: 40rpx;
+  font-size: 28rpx;
+  color: #8c8c8c;
+}
+
+.login-card {
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  padding: 48rpx 32rpx;
+  margin-bottom: 32rpx;
 }
 
 .login-buttons {
   display: flex;
   flex-direction: column;
-  gap: 30rpx;
-  margin-bottom: 80rpx;
+  gap: 24rpx;
 }
 
-.login-button,
-.register-button {
+.login-button {
   width: 100%;
-  height: 88rpx;
+  height: 80rpx;
   font-size: 32rpx;
   font-weight: 500;
-  border-radius: 12rpx;
+  border-radius: 8rpx;
+  transition: opacity 0.2s ease;
 }
 
-.register-button {
-  border: 2rpx solid #1890ff;
+.login-button:active {
+  opacity: 0.7;
+}
+
+.login-button.primary {
+  background: #1890ff;
+  color: #ffffff;
+  border: none;
+}
+
+.login-button.secondary {
+  background: #ffffff;
   color: #1890ff;
-  background: transparent;
+  border: 2rpx solid #1890ff;
 }
 
 .features-section {
-  margin-top: 60rpx;
+  margin-top: 32rpx;
 }
 
 .features-title {
   display: block;
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 30rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 32rpx;
+  text-align: center;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16rpx;
+}
+
+.feature-card {
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  padding: 32rpx 24rpx;
+  text-align: center;
 }
 
-.features-list {
-  text-align: left;
+.feature-icon {
+  font-size: 48rpx;
+  margin-bottom: 16rpx;
 }
 
-.feature-item {
+.feature-title {
   display: block;
   font-size: 28rpx;
-  color: #666;
-  margin-bottom: 16rpx;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 8rpx;
+}
+
+.feature-desc {
+  display: block;
+  font-size: 24rpx;
+  color: #8c8c8c;
+  line-height: 1.4;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 375rpx) {
+  .index-container {
+    padding: 24rpx;
+  }
+  
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (min-width: 768rpx) {
+  .index-container {
+    padding: 48rpx;
+  }
+  
+  .stats-section {
+    gap: 24rpx;
+  }
+  
+  .features-grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24rpx;
+  }
 }

mini/src/pages/index/index.tsx

@@ -59,65 +59,121 @@ export default function Index() {
     <View className="index-container">
       {user ? (
         <View className="user-welcome">
-          <View className="user-avatar">
-            <Image
-              className="avatar-image"
-              src={user.avatar || 'https://via.placeholder.com/100x100'}
-              mode="aspectFill"
-            />
-          </View>
-          
-          <Text className="welcome-text">欢迎回来，{user.username}！</Text>
-          
-          <View className="user-info">
-            <Text className="info-item">ID: {user.id}</Text>
-            {user.email && <Text className="info-item">邮箱: {user.email}</Text>}
-            <Text className="info-item">注册时间: {new Date(user.createdAt).toLocaleDateString()}</Text>
+          <View className="user-card">
+            <View className="user-header">
+              <View className="user-avatar">
+                <Image
+                  className="avatar-image"
+                  src={user.avatar || 'https://via.placeholder.com/160x160'}
+                  mode="aspectFill"
+                />
+              </View>
+              <View className="user-greeting">
+                <Text className="welcome-text">欢迎回来</Text>
+                <Text className="username">{user.username}</Text>
+              </View>
+            </View>
+            
+            <View className="user-info">
+              <View className="info-item">
+                <Text className="info-label">用户ID</Text>
+                <Text className="info-value">{user.id}</Text>
+              </View>
+              {user.email && (
+                <View className="info-item">
+                  <Text className="info-label">邮箱</Text>
+                  <Text className="info-value">{user.email}</Text>
+                </View>
+              )}
+              <View className="info-item">
+                <Text className="info-label">注册时间</Text>
+                <Text className="info-value">{new Date(user.createdAt).toLocaleDateString()}</Text>
+              </View>
+            </View>
+            
+            <View className="action-buttons">
+              <Button className="action-button primary" type="primary" onClick={handleProfile}>
+                查看资料
+              </Button>
+              <Button
+                className="action-button secondary"
+                loading={loading}
+                onClick={handleLogout}
+              >
+                退出登录
+              </Button>
+            </View>
           </View>
           
-          <View className="action-buttons">
-            <Button className="action-button" type="primary" onClick={handleProfile}>
-              查看资料
-            </Button>
-            <Button 
-              className="action-button" 
-              loading={loading}
-              onClick={handleLogout}
-            >
-              退出登录
-            </Button>
+          <View className="stats-section">
+            <View className="stat-card">
+              <Text className="stat-number">1</Text>
+              <Text className="stat-label">今日访问</Text>
+            </View>
+            <View className="stat-card">
+              <Text className="stat-number">7</Text>
+              <Text className="stat-label">本周活跃</Text>
+            </View>
+            <View className="stat-card">
+              <Text className="stat-number">30</Text>
+              <Text className="stat-label">本月使用</Text>
+            </View>
           </View>
         </View>
       ) : (
         <View className="login-prompt">
-          <View className="welcome-section">
+          <View className="welcome-header">
+            <Image
+              className="welcome-icon"
+              src="https://via.placeholder.com/192x192/1890ff/ffffff?text=LOGO"
+              mode="aspectFit"
+            />
             <Text className="welcome-title">欢迎使用小程序</Text>
             <Text className="welcome-subtitle">请先登录以使用完整功能</Text>
           </View>
           
-          <View className="login-buttons">
-            <Button 
-              className="login-button" 
-              onClick={handleLogin}
-            >
-              立即登录
-            </Button>
-            <Button 
-              className="register-button" 
-              plain
-              onClick={goToRegister}
-            >
-              注册新账号
-            </Button>
+          <View className="login-card">
+            <View className="login-buttons">
+              <Button
+                className="login-button primary"
+                type="primary"
+                onClick={handleLogin}
+              >
+                立即登录
+              </Button>
+              <Button
+                className="login-button secondary"
+                plain
+                onClick={goToRegister}
+              >
+                注册新账号
+              </Button>
+            </View>
           </View>
           
           <View className="features-section">
             <Text className="features-title">功能特色</Text>
-            <View className="features-list">
-              <Text className="feature-item">✅ 安全的用户认证</Text>
-              <Text className="feature-item">✅ 完整的用户管理</Text>
-              <Text className="feature-item">✅ 响应式界面设计</Text>
-              <Text className="feature-item">✅ 实时数据同步</Text>
+            <View className="features-grid">
+              <View className="feature-card">
+                <View className="feature-icon">🔒</View>
+                <Text className="feature-title">安全认证</Text>
+                <Text className="feature-desc">多重加密保护账户安全</Text>
+              </View>
+              <View className="feature-card">
+                <View className="feature-icon">👤</View>
+                <Text className="feature-title">用户管理</Text>
+                <Text className="feature-desc">完整的用户信息管理</Text>
+              </View>
+              <View className="feature-card">
+                <View className="feature-icon">📱</View>
+                <Text className="feature-title">响应式设计</Text>
+                <Text className="feature-desc">完美适配各种设备</Text>
+              </View>
+              <View className="feature-card">
+                <View className="feature-icon">⚡</View>
+                <Text className="feature-title">实时同步</Text>
+                <Text className="feature-desc">数据实时更新同步</Text>
+              </View>
             </View>
           </View>
         </View>