1

pages/my/my.js

@@ -0,0 +1,726 @@
+// pages/my/my.js
+const userManager = require('../../utils/userManager.js')
+const learningTracker = require('../../utils/learningTracker.js')
+
+Page({
+  data: {
+    userInfo: null,
+    stats: {
+      favoriteCourses: 0,
+      myPosts: 0,
+      myComments: 0
+    },
+    menuList: [
+      {
+        id: 1,
+        icon: '✏️',
+        title: '编辑资料',
+        desc: '修改昵称和头像',
+        arrow: true,
+        type: 'edit'
+      },
+      {
+        id: 2,
+        icon: '❤️',
+        title: '我的收藏',
+        desc: '收藏的课程和帖子',
+        arrow: true,
+        type: 'favorite'
+      },
+      {
+        id: 3,
+        icon: '📝',
+        title: '我的帖子',
+        desc: '查看发布的帖子',
+        arrow: true,
+        type: 'posts'
+      },
+      {
+        id: 4,
+        icon: '🔔',
+        title: '消息通知',
+        desc: '系统消息和互动提醒',
+        arrow: true,
+        type: 'notification'
+      },
+      {
+        id: 5,
+        icon: '⚙️',
+        title: '通用设置',
+        desc: '隐私、通知等设置',
+        arrow: true,
+        type: 'settings'
+      },
+      {
+        id: 6,
+        icon: '❓',
+        title: '帮助与反馈',
+        desc: '使用指南和问题反馈',
+        arrow: true,
+        type: 'help'
+      },
+      {
+        id: 7,
+        icon: '📊',
+        title: '数据统计',
+        desc: '学习数据和使用记录',
+        arrow: true,
+        type: 'statistics'
+      },
+      {
+        id: 8,
+        icon: '🚪',
+        title: '退出登录',
+        desc: '退出当前账号',
+        arrow: false,
+        type: 'logout',
+        danger: true
+      }
+    ],
+    showEditDialog: false,
+    editNickname: ''
+  },
+
+  onLoad() {
+    this.loadUserInfo()
+    this.loadStats()
+  },
+
+  onShow() {
+    // 开始跟踪学习时间
+    learningTracker.onPageShow('tools')
+    
+    this.loadUserInfo()
+    this.loadStats()
+    
+    // 更新自定义TabBar选中状态
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().setData({
+        selected: 4
+      })
+    }
+  },
+
+  onHide() {
+    // 停止跟踪学习时间
+    learningTracker.onPageHide()
+  },
+
+  onUnload() {
+    // 记录学习时长
+    learningTracker.onPageUnload()
+  },
+
+  // 获取用户信息
+  loadUserInfo() {
+    const userInfo = userManager.getUserInfo()
+    this.setData({ 
+      userInfo: userInfo
+    })
+    console.log('加载用户信息：', userInfo)
+  },
+
+  // 点击头像上传
+  onChooseAvatar() {
+    const that = this
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success(res) {
+        const tempFilePath = res.tempFilePaths[0]
+        
+        // 更新头像
+        userManager.updateAvatar(tempFilePath)
+        
+        // 更新页面显示
+        const updatedUserInfo = userManager.getUserInfo()
+        that.setData({ 
+          userInfo: updatedUserInfo
+        })
+        
+        console.log('头像更新成功，保存的数据：', updatedUserInfo)
+        
+        wx.showToast({
+          title: '头像更新成功',
+          icon: 'success'
+        })
+      },
+      fail() {
+        wx.showToast({
+          title: '取消选择',
+          icon: 'none'
+        })
+      }
+    })
+  },
+
+  // 显示编辑昵称对话框
+  showEditNicknameDialog() {
+    const { userInfo } = this.data
+    this.setData({
+      showEditDialog: true,
+      editNickname: userInfo.nickname || ''
+    })
+  },
+
+  // 关闭编辑对话框
+  closeEditDialog() {
+    this.setData({
+      showEditDialog: false,
+      editNickname: ''
+    })
+  },
+
+  // 昵称输入
+  onNicknameInput(e) {
+    this.setData({
+      editNickname: e.detail.value
+    })
+  },
+
+  // 保存昵称
+  saveNickname() {
+    const { editNickname } = this.data
+    
+    if (!editNickname.trim()) {
+      wx.showToast({
+        title: '请输入昵称',
+        icon: 'none'
+      })
+      return
+    }
+    
+    if (editNickname.length > 10) {
+      wx.showToast({
+        title: '昵称最多10个字',
+        icon: 'none'
+      })
+      return
+    }
+    
+    // 更新昵称
+    userManager.updateNickname(editNickname.trim())
+    
+    // 更新页面显示
+    const updatedUserInfo = userManager.getUserInfo()
+    this.setData({
+      userInfo: updatedUserInfo,
+      showEditDialog: false,
+      editNickname: ''
+    })
+    
+    console.log('昵称更新成功，保存的数据：', updatedUserInfo)
+    
+    wx.showToast({
+      title: '昵称修改成功',
+      icon: 'success'
+    })
+  },
+
+  // 加载统计数据
+  loadStats() {
+    const userInfo = userManager.getUserInfo()
+    const favoriteCourses = wx.getStorageSync('favoriteCourses') || []
+    const forumPosts = wx.getStorageSync('forumPosts') || []
+    
+    // 获取当前用户的昵称
+    const currentUserName = userInfo.nickname || '同学'
+    
+    // 统计我的帖子
+    const myPosts = forumPosts.filter(post => {
+      return post.author === currentUserName || post.author === '我'
+    })
+    
+    // 统计我的评论（从帖子详情中统计）
+    let totalComments = 0
+    forumPosts.forEach(post => {
+      if (post.commentList && Array.isArray(post.commentList)) {
+        const myComments = post.commentList.filter(comment => {
+          return comment.author === currentUserName || comment.author === '我'
+        })
+        totalComments += myComments.length
+      }
+    })
+    
+    this.setData({
+      stats: {
+        favoriteCourses: favoriteCourses.length,
+        myPosts: myPosts.length,
+        myComments: totalComments
+      }
+    })
+    
+    console.log('统计数据更新：', {
+      用户名: currentUserName,
+      收藏课程: favoriteCourses.length,
+      发布帖子: myPosts.length,
+      评论数: totalComments
+    })
+  },
+
+  // 菜单点击
+  onMenuClick(e) {
+    const { id } = e.currentTarget.dataset
+    const menuItem = this.data.menuList.find(item => item.id === id)
+    
+    if (!menuItem) return
+    
+    switch(menuItem.type) {
+      case 'edit':
+        // 编辑资料
+        this.showEditNicknameDialog()
+        break
+        
+      case 'favorite':
+        // 我的收藏
+        this.showMyFavorites()
+        break
+        
+      case 'posts':
+        // 我的帖子
+        this.showMyPosts()
+        break
+        
+      case 'notification':
+        // 消息通知
+        this.showNotifications()
+        break
+        
+      case 'settings':
+        // 通用设置
+        this.showSettings()
+        break
+        
+      case 'help':
+        // 帮助与反馈
+        this.showHelp()
+        break
+        
+      case 'statistics':
+        // 数据统计
+        this.showStatistics()
+        break
+        
+      case 'logout':
+        // 退出登录
+        this.handleLogout()
+        break
+        
+      default:
+        wx.showToast({
+          title: '功能开发中',
+          icon: 'none'
+        })
+    }
+  },
+  
+  // 我的收藏
+  showMyFavorites() {
+    const favoriteCourseIds = wx.getStorageSync('favoriteCourses') || []
+    const favoritePosts = wx.getStorageSync('favoritePosts') || []
+    
+    // 从课程数据中获取收藏的课程详细信息
+    const { coursesData } = require('../../utils/data.js')
+    const favoriteCourses = coursesData.filter(course => 
+      favoriteCourseIds.includes(course.id)
+    )
+    
+    const totalFavorites = favoriteCourses.length + favoritePosts.length
+    
+    if (totalFavorites === 0) {
+      wx.showModal({
+        title: '我的收藏',
+        content: '暂无收藏内容\n\n可以收藏：\n• 喜欢的课程\n• 有用的论坛帖子',
+        showCancel: false,
+        confirmText: '去看看',
+        confirmColor: '#667eea',
+        success: (res) => {
+          if (res.confirm) {
+            wx.switchTab({ url: '/pages/courses/courses' })
+          }
+        }
+      })
+    } else {
+      wx.showActionSheet({
+        itemList: ['查看收藏的课程', '查看收藏的帖子', '查看所有收藏', '取消'],
+        success: (res) => {
+          if (res.tapIndex === 0) {
+            // 查看课程收藏
+            this.showFavoriteCoursesList(favoriteCourses)
+          } else if (res.tapIndex === 1) {
+            // 查看帖子收藏
+            this.showFavoritePostsList(favoritePosts)
+          } else if (res.tapIndex === 2) {
+            // 查看所有收藏
+            this.showAllFavorites(favoriteCourses, favoritePosts)
+          }
+        }
+      })
+    }
+  },
+
+  // 显示所有收藏概览
+  showAllFavorites(favoriteCourses, favoritePosts) {
+    let contentLines = []
+    
+    // 课程收藏
+    if (favoriteCourses.length > 0) {
+      contentLines.push(`📚 收藏课程 (${favoriteCourses.length}门)`)
+      favoriteCourses.slice(0, 5).forEach((course, index) => {
+        contentLines.push(`${index + 1}. ${course.name} - ${course.teacher}`)
+      })
+      if (favoriteCourses.length > 5) {
+        contentLines.push(`   ...还有${favoriteCourses.length - 5}门课程`)
+      }
+      contentLines.push('')
+    }
+    
+    // 帖子收藏 - 过滤有效数据
+    const validPosts = favoritePosts.filter(post => post && post.title)
+    if (validPosts.length > 0) {
+      contentLines.push(`📝 收藏帖子 (${validPosts.length}条)`)
+      validPosts.slice(0, 5).forEach((post, index) => {
+        contentLines.push(`${index + 1}. ${post.title}`)
+      })
+      if (validPosts.length > 5) {
+        contentLines.push(`   ...还有${validPosts.length - 5}条帖子`)
+      }
+    }
+    
+    wx.showModal({
+      title: `⭐ 我的收藏`,
+      content: contentLines.join('\n'),
+      showCancel: false,
+      confirmText: '知道了',
+      confirmColor: '#667eea'
+    })
+  },
+
+  // 显示收藏课程列表
+  showFavoriteCoursesList(favoriteCourses) {
+    if (favoriteCourses.length === 0) {
+      wx.showModal({
+        title: '收藏的课程',
+        content: '还没有收藏任何课程\n去课程中心看看吧！',
+        showCancel: false,
+        confirmText: '去看看',
+        confirmColor: '#667eea',
+        success: (res) => {
+          if (res.confirm) {
+            wx.switchTab({ url: '/pages/courses/courses' })
+          }
+        }
+      })
+      return
+    }
+    
+    const courseTitles = favoriteCourses.map(course => 
+      `${course.name} - ${course.teacher}`
+    )
+    
+    wx.showActionSheet({
+      itemList: courseTitles,
+      success: (res) => {
+        const selectedCourse = favoriteCourses[res.tapIndex]
+        // 跳转到课程详情
+        wx.navigateTo({
+          url: `/pages/course-detail/course-detail?id=${selectedCourse.id}`
+        })
+      }
+    })
+  },
+  
+  // 显示收藏帖子列表
+  showFavoritePostsList(favoritePosts) {
+    console.log('收藏的帖子数据:', favoritePosts)
+    console.log('收藏的帖子数量:', favoritePosts.length)
+    
+    if (favoritePosts.length === 0) {
+      wx.showModal({
+        title: '收藏的帖子',
+        content: '还没有收藏任何帖子\n去论坛看看吧！',
+        showCancel: false,
+        confirmText: '去看看',
+        confirmColor: '#667eea',
+        success: (res) => {
+          if (res.confirm) {
+            wx.switchTab({ url: '/pages/forum/forum' })
+          }
+        }
+      })
+      return
+    }
+    
+    // 确保每个帖子都有title和id
+    const validPosts = favoritePosts.filter(post => post && post.title && post.id)
+    
+    if (validPosts.length === 0) {
+      wx.showModal({
+        title: '收藏的帖子',
+        content: '收藏数据异常\n请重新收藏帖子',
+        showCancel: false,
+        confirmText: '知道了',
+        confirmColor: '#667eea'
+      })
+      return
+    }
+    
+    const postTitles = validPosts.map(post => post.title)
+    
+    wx.showActionSheet({
+      itemList: postTitles,
+      success: (res) => {
+        const selectedPost = validPosts[res.tapIndex]
+        console.log('选中的帖子:', selectedPost)
+        // 跳转到帖子详情
+        wx.navigateTo({
+          url: `/pages/forum-detail/forum-detail?id=${selectedPost.id}`
+        })
+      }
+    })
+  },
+  
+  // 我的帖子
+  showMyPosts() {
+    const userInfo = userManager.getUserInfo()
+    const currentUserName = userInfo.nickname || '同学'
+    const forumPosts = wx.getStorageSync('forumPosts') || []
+    
+    const myPosts = forumPosts.filter(post => {
+      return post.author === currentUserName || post.author === '我'
+    })
+    
+    console.log('我的帖子查询', {
+      当前用户名: currentUserName,
+      总帖子数: forumPosts.length,
+      我的帖子数: myPosts.length,
+      我的帖子: myPosts.map(p => ({ 标题: p.title, 作者: p.author }))
+    })
+    
+    if (myPosts.length === 0) {
+      wx.showModal({
+        title: '我的帖子',
+        content: '还没有发布过帖子\n去论坛分享你的想法吧！',
+        showCancel: false,
+        confirmText: '去发帖',
+        confirmColor: '#667eea',
+        success: (res) => {
+          if (res.confirm) {
+            wx.switchTab({
+              url: '/pages/forum/forum'
+            })
+          }
+        }
+      })
+    } else {
+      // 显示帖子列表供用户选择
+      const postTitles = myPosts.map(post => {
+        const commentCount = post.comments || 0
+        const likeCount = post.likes || 0
+        return `${post.title} (💬${commentCount} ❤️${likeCount})`
+      })
+      
+      wx.showActionSheet({
+        itemList: postTitles,
+        success: (res) => {
+          const selectedPost = myPosts[res.tapIndex]
+          // 跳转到帖子详情
+          wx.navigateTo({
+            url: `/pages/forum-detail/forum-detail?id=${selectedPost.id}`
+          })
+        }
+      })
+    }
+  },
+  
+  // 消息通知
+  showNotifications() {
+    wx.showModal({
+      title: '💌 消息通知',
+      content: '暂无新消息\n\n系统会在这里提醒您：\n• 帖子的点赞和评论\n• 课程更新通知\n• 系统公告',
+      showCancel: false,
+      confirmText: '我知道了',
+      confirmColor: '#667eea'
+    })
+  },
+  
+  // 通用设置
+  showSettings() {
+    const settingsContent = [
+      '⚙️ 通用设置',
+      '',
+      '✓ 消息推送：已开启',
+      '✓ 隐私保护：已开启',
+      '✓ 缓存管理：自动清理',
+      '✓ 深色模式：跟随系统',
+      '',
+      '点击确定返回'
+    ].join('\n')
+    
+    wx.showModal({
+      title: '设置中心',
+      content: settingsContent,
+      showCancel: false,
+      confirmText: '确定',
+      confirmColor: '#667eea'
+    })
+  },
+  
+  // 帮助与反馈
+  showHelp() {
+    wx.showModal({
+      title: '📖 帮助中心',
+      content: '使用指南：\n\n1. 课程中心：浏览和收藏课程\n2. 学科论坛：发帖交流学习\n3. 学习工具：GPA计算等工具\n4. 个人中心：管理个人信息\n\n遇到问题？请联系管理员',
+      showCancel: true,
+      cancelText: '返回',
+      confirmText: '联系我们',
+      confirmColor: '#667eea',
+      success: (res) => {
+        if (res.confirm) {
+          this.showContactInfo()
+        }
+      }
+    })
+  },
+
+  // 显示联系方式
+  showContactInfo() {
+    wx.showModal({
+      title: '📞 联系我们',
+      content: '客服邮箱：\n19354618812@163.com\n\n客服电话：\n19354618812\n\n工作时间：\n周一至周五 9:00-18:00\n\n欢迎您的咨询和建议！',
+      showCancel: true,
+      cancelText: '关闭',
+      confirmText: '复制邮箱',
+      confirmColor: '#667eea',
+      success: (res) => {
+        if (res.confirm) {
+          wx.setClipboardData({
+            data: '19354618812@163.com',
+            success: () => {
+              wx.showToast({
+                title: '邮箱已复制',
+                icon: 'success'
+              })
+            }
+          })
+        }
+      }
+    })
+  },
+  
+  // 数据统计
+  showStatistics() {
+    const { stats } = this.data
+    const userInfo = userManager.getUserInfo()
+    const currentUserName = userInfo.nickname || '同学'
+    const forumPosts = wx.getStorageSync('forumPosts') || []
+    
+    // 获取我的评论详情
+    let myCommentsList = []
+    forumPosts.forEach(post => {
+      if (post.commentList && Array.isArray(post.commentList)) {
+        post.commentList.forEach(comment => {
+          if (comment.author === currentUserName || comment.author === '我') {
+            myCommentsList.push({
+              postTitle: post.title,
+              content: comment.content,
+              time: comment.time
+            })
+          }
+        })
+      }
+    })
+    
+    // 构建详细内容
+    let contentLines = [
+      '📊 我的数据',
+      '',
+      `📚 收藏课程：${stats.favoriteCourses} 门`,
+      `📝 发布帖子：${stats.myPosts} 条`,
+      `💬 评论数量：${stats.myComments} 次`,
+      ''
+    ]
+    
+    // 显示最近的评论（最多3条）
+    if (myCommentsList.length > 0) {
+      contentLines.push('最近评论：')
+      myCommentsList.slice(0, 3).forEach((comment, index) => {
+        const shortContent = comment.content.length > 20 
+          ? comment.content.substring(0, 20) + '...' 
+          : comment.content
+        contentLines.push(`${index + 1}. 在《${comment.postTitle}》中评论`)
+        contentLines.push(`   "${shortContent}"`)
+      })
+      if (myCommentsList.length > 3) {
+        contentLines.push(`   ...还有${myCommentsList.length - 3}条评论`)
+      }
+    } else {
+      contentLines.push('暂无评论记录')
+    }
+    
+    contentLines.push('')
+    contentLines.push('持续学习，不断进步！')
+    
+    wx.showModal({
+      title: '数据统计',
+      content: contentLines.join('\n'),
+      showCancel: false,
+      confirmText: '继续加油',
+      confirmColor: '#667eea'
+    })
+  },
+  
+  // 退出登录
+  handleLogout() {
+    if (!userManager.isUserLogin()) {
+      wx.showToast({
+        title: '您还未登录',
+        icon: 'none'
+      })
+      return
+    }
+    
+    wx.showModal({
+      title: '退出登录',
+      content: '确定要退出登录吗？\n退出后部分功能将无法使用',
+      confirmText: '退出',
+      cancelText: '取消',
+      confirmColor: '#FF5252',
+      success: (res) => {
+        if (res.confirm) {
+          // 清除登录状态
+          userManager.clearUserInfo()
+          
+          // 更新页面数据
+          this.setData({
+            userInfo: userManager.getUserInfo()
+          })
+          
+          wx.showToast({
+            title: '已退出登录',
+            icon: 'success',
+            duration: 2000
+          })
+          
+          // 震动反馈
+          wx.vibrateShort({
+            type: 'light'
+          })
+          
+          // 1秒后跳转到首页
+          setTimeout(() => {
+            wx.switchTab({
+              url: '/pages/index/index'
+            })
+          }, 1500)
+        }
+      }
+    })
+  },
+
+  // 阻止事件冒泡
+  doNothing() {
+    // 空函数，防止点击对话框内容时关闭对话框
+  }
+})

pages/my/my.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "我的"
+}

pages/my/my.wxml

@@ -0,0 +1,90 @@
+<!--pages/my/my.wxml-->
+<view class="container">
+  <!-- 用户信息卡片 -->
+  <view class="user-card">
+    <view class="user-header">
+      <view class="avatar-wrap" bindtap="onChooseAvatar">
+        <image class="avatar" src="{{userInfo ? userInfo.avatar : '/images/avatar-default.png'}}" mode="aspectFill"></image>
+        <view class="avatar-mask">
+          <text class="avatar-tip">📷</text>
+        </view>
+      </view>
+      <view class="user-info">
+        <view class="nickname">{{userInfo ? userInfo.nickname : '同学'}}</view>
+        <view class="user-desc">东北大学在校生</view>
+      </view>
+      <view class="edit-btn" bindtap="showEditNicknameDialog">
+        <text class="edit-icon">✏️</text>
+      </view>
+    </view>
+    
+    <!-- 统计数据 -->
+    <view class="stats-row">
+      <view class="stat-item">
+        <view class="stat-value">{{stats.favoriteCourses}}</view>
+        <view class="stat-label">收藏课程</view>
+      </view>
+      <view class="stat-divider"></view>
+      <view class="stat-item">
+        <view class="stat-value">{{stats.myPosts}}</view>
+        <view class="stat-label">发布帖子</view>
+      </view>
+      <view class="stat-divider"></view>
+      <view class="stat-item">
+        <view class="stat-value">{{stats.myComments}}</view>
+        <view class="stat-label">评论数</view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 菜单列表 -->
+  <view class="menu-section">
+    <view 
+      class="menu-item"
+      wx:for="{{menuList}}"
+      wx:key="id"
+      data-id="{{item.id}}"
+      bindtap="onMenuClick"
+    >
+      <view class="menu-icon">{{item.icon}}</view>
+      <view class="menu-content">
+        <view class="menu-title" style="{{item.danger ? 'color: #FF5252;' : ''}}">{{item.title}}</view>
+        <view class="menu-desc">{{item.desc}}</view>
+      </view>
+      <view class="menu-arrow" wx:if="{{item.arrow}}">›</view>
+    </view>
+  </view>
+
+  <!-- 关于信息 -->
+  <view class="about-section">
+    <view class="about-title">关于小程序</view>
+    <view class="about-content">
+      <view class="about-item">版本号：v2.0.0</view>
+      <view class="about-item">开发团队：知芽小筑工作组</view>
+      <view class="about-item">主题：知芽小筑，智启未来</view>
+    </view>
+  </view>
+
+  <!-- 编辑昵称对话框 -->
+  <view class="modal-mask" wx:if="{{showEditDialog}}" bindtap="closeEditDialog">
+    <view class="modal-dialog" catchtap="doNothing">
+      <view class="modal-header">
+        <text class="modal-title">修改昵称</text>
+        <view class="modal-close" bindtap="closeEditDialog">✕</view>
+      </view>
+      <view class="modal-content">
+        <input 
+          class="modal-input"
+          placeholder="请输入昵称（最多10个字）"
+          value="{{editNickname}}"
+          bindinput="onNicknameInput"
+          maxlength="10"
+        />
+      </view>
+      <view class="modal-footer">
+        <button class="modal-btn cancel-btn" bindtap="closeEditDialog">取消</button>
+        <button class="modal-btn confirm-btn" bindtap="saveNickname">确定</button>
+      </view>
+    </view>
+  </view>
+</view>

pages/my/my.wxss

@@ -0,0 +1,421 @@
+/* pages/my/my.wxss */
+.container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  animation: fadeIn 0.5s ease-out;
+  /* 底部留出TabBar的空间 */
+  padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
+}
+
+/* 用户卡片 */
+.user-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 65rpx 30rpx 45rpx;
+  margin-bottom: 30rpx;
+  position: relative;
+  overflow: hidden;
+  animation: slideInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -25%;
+  width: 400rpx;
+  height: 400rpx;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: float 8s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-30rpx, 30rpx) scale(1.1); }
+}
+
+.user-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 45rpx;
+  position: relative;
+}
+
+.avatar-wrap {
+  position: relative;
+  margin-right: 28rpx;
+}
+
+.avatar {
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 5rpx solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.avatar-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.avatar-wrap:active .avatar-mask {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.avatar-tip {
+  font-size: 48rpx;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.avatar-wrap:active .avatar-tip {
+  opacity: 1;
+}
+
+.user-info {
+  flex: 1;
+  color: #ffffff;
+  position: relative;
+}
+
+.nickname {
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-bottom: 12rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+.user-desc {
+  font-size: 26rpx;
+  opacity: 0.95;
+  letter-spacing: 1rpx;
+}
+
+.edit-btn {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10rpx);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.edit-btn:active {
+  transform: scale(1.1) rotate(15deg);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.edit-icon {
+  font-size: 36rpx;
+}
+
+/* 统计数据 */
+.stats-row {
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 20rpx;
+  padding: 35rpx 0;
+  backdrop-filter: blur(15rpx);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.stat-item {
+  flex: 1;
+  text-align: center;
+  color: #ffffff;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.stat-item:active {
+  transform: scale(1.1);
+}
+
+.stat-value {
+  font-size: 48rpx;
+  font-weight: bold;
+  margin-bottom: 12rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.stat-label {
+  font-size: 24rpx;
+  opacity: 0.95;
+  letter-spacing: 1rpx;
+}
+
+.stat-divider {
+  width: 2rpx;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);
+}
+
+/* 菜单区域 */
+.menu-section {
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  border-radius: 20rpx;
+  margin: 0 30rpx 30rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+  animation: slideInUp 0.6s ease-out 0.2s both;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 35rpx;
+  border-bottom: 2rpx solid rgba(0, 0, 0, 0.03);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.menu-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6rpx;
+  background: linear-gradient(to bottom, #667eea, #764ba2);
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.menu-item:active {
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  transform: translateX(8rpx);
+}
+
+.menu-item:active::before {
+  transform: scaleY(1);
+}
+
+.menu-icon {
+  font-size: 48rpx;
+  margin-right: 28rpx;
+  transition: all 0.3s ease;
+}
+
+.menu-item:active .menu-icon {
+  transform: scale(1.2) rotate(10deg);
+}
+
+.menu-content {
+  flex: 1;
+}
+
+.menu-title {
+  font-size: 32rpx;
+  color: #333333;
+  font-weight: 600;
+  margin-bottom: 10rpx;
+}
+
+.menu-desc {
+  font-size: 24rpx;
+  color: #999999;
+  opacity: 0.8;
+}
+
+.menu-arrow {
+  font-size: 32rpx;
+  color: #CCCCCC;
+  font-weight: 300;
+  transition: all 0.3s ease;
+}
+
+.menu-item:active .menu-arrow {
+  transform: translateX(8rpx);
+  color: #667eea;
+}
+
+/* 关于信息 */
+.about-section {
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  border-radius: 20rpx;
+  margin: 0 30rpx;
+  padding: 35rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
+  animation: slideInUp 0.6s ease-out 0.3s both;
+}
+
+.about-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 24rpx;
+  position: relative;
+  padding-left: 20rpx;
+}
+
+.about-title::before {
+  content: '📚';
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-size: 32rpx;
+}
+
+.about-content {
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 2.2;
+  padding-left: 20rpx;
+}
+
+.about-item {
+  margin-bottom: 14rpx;
+  position: relative;
+  padding-left: 24rpx;
+  animation: fadeIn 0.8s ease-out;
+}
+
+.about-item::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: #667eea;
+  font-weight: bold;
+  font-size: 32rpx;
+  line-height: 1.5;
+}
+
+.about-item:nth-child(1) { animation-delay: 0.4s; }
+.about-item:nth-child(2) { animation-delay: 0.5s; }
+.about-item:nth-child(3) { animation-delay: 0.6s; }
+
+/* 编辑对话框 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.modal-dialog {
+  width: 600rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
+  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 35rpx 35rpx 25rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.modal-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+}
+
+.modal-close {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #999999;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.modal-close:active {
+  background-color: #f5f5f5;
+  transform: rotate(90deg);
+}
+
+.modal-content {
+  padding: 35rpx;
+}
+
+.modal-input {
+  width: 100%;
+  height: 88rpx;
+  padding: 0 28rpx;
+  background-color: #f8f9fa;
+  border: 2rpx solid #e9ecef;
+  border-radius: 16rpx;
+  font-size: 30rpx;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.modal-input:focus {
+  background-color: #ffffff;
+  border-color: #667eea;
+  box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
+}
+
+.modal-footer {
+  display: flex;
+  gap: 20rpx;
+  padding: 25rpx 35rpx 35rpx;
+}
+
+.modal-btn {
+  flex: 1;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 44rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.cancel-btn {
+  background-color: #f5f5f5;
+  color: #666666;
+}
+
+.cancel-btn:active {
+  background-color: #e8e8e8;
+  transform: scale(0.98);
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
+}
+
+.confirm-btn:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+}