geminiWX/wechat-mini-program/TRANSFORMATION_PLAN.md

微信小程序首页消息通知按钮改造方案

1. 改造目标

将首页顶部导航栏右侧的按钮（现为Emoji或红圈按钮）改造为标准的消息通知入口。该按钮将具备以下功能：

• 展示消息通知图标（铃铛）。
• 显示未读消息红点或数字角标。
• 点击跳转至“消息通知”列表页。

2. UI 设计改造

2.1 图标替换

• 现状：目前使用 🔔 Emoji 或简单的 CSS 样式。
• 方案：替换为高清 SVG 或 PNG 图标，确保在不同分辨率下清晰显示。
• 资源：建议添加 assets/icons/notification.png 或使用 Base64 SVG。

2.2 未读消息角标 (Badge)

• 在图标右上角增加红色圆点（Red Dot）或数字徽标（Badge）。
• 逻辑：
  • 当 unreadCount > 0 时显示。
  • 当 unreadCount > 99 时显示 99+。

2.3 样式调整

保持原有半透明磨砂玻璃效果（Frosted Glass），优化布局适配图标和角标。

/* 示例样式 */
.bell-btn {
  position: relative; /* 为角标定位 */
  /* 保持原有背景和边框样式 */
}

.notification-icon {
  width: 40rpx;
  height: 40rpx;
}

.badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: #ff4d4f;
  border-radius: 10rpx; /* 圆点或数字形状 */
  /* ... */
}

3. 交互逻辑

3.1 点击事件

• 绑定 bindtap="handleNotificationClick" 事件。
• 点击时提供按压态反馈（hover-class）。

3.2 页面跳转

• 点击后跳转至新页面 pages/message/index。
• 该页面用于展示系统通知、互动消息等。

4. 数据逻辑

4.1 状态管理

• 在 index.js 的 data 中增加 unreadCount 字段。

4.2 数据获取

• 在 onShow 生命周期中调用获取未读消息数量的接口（如 getUnreadMessageCount）。
• 暂时可以使用 Mock 数据模拟。

5. 实施步骤

1. 资源准备：添加铃铛图标文件到 assets 目录。
2. 页面创建：新建 pages/message/index 页面（含 .js, .json, .wxml, .wxss）。
3. WXML 修改：
   • 将 index.wxml 中的 🔔 替换为 <image> 组件。
   • 添加角标 View，使用 wx:if 控制显示。
4. WXSS 修改：调整图标大小和角标位置。
5. JS 逻辑：
   • 实现 handleNotificationClick 跳转逻辑。
   • 实现 onShow 获取未读数逻辑。
6. 配置更新：在 app.json 中注册新页面。

6. 后续扩展

• 支持 WebSocket 实时推送消息通知。
• 消息页面的分类展示（如：系统通知、活动提醒）。

7. 后台服务端 Web 方案

7.1 数据库设计 (Django Models)

在 admin/server/apps/crm/models.py 中新增 Notification 模型，用于存储消息通知。

class Notification(models.Model):
    TYPE_CHOICES = (
        ('system', '系统通知'),
        ('activity', '活动提醒'),
        ('course', '课程通知'),
    )
    
    student = models.ForeignKey('Student', on_delete=models.CASCADE, related_name='notifications', verbose_name="接收学员")
    title = models.CharField(max_length=100, verbose_name="标题")
    content = models.TextField(verbose_name="内容")
    notification_type = models.CharField(max_length=20, choices=TYPE_CHOICES, default='system', verbose_name="通知类型")
    is_read = models.BooleanField(default=False, verbose_name="是否已读")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="发送时间")

    class Meta:
        verbose_name = "消息通知"
        verbose_name_plural = verbose_name
        ordering = ['-created_at']

    def __str__(self):
        return f"{self.title} - {self.student.name}"

7.2 API 接口设计 (Django Rest Framework)

在 admin/server/apps/crm/views.py 中新增 NotificationViewSet，并在 urls.py 中注册。

7.2.1 新增 API Endpoints

• GET /api/crm/notifications/: 获取当前登录用户的通知列表（支持分页）。
• GET /api/crm/notifications/unread_count/: 获取当前登录用户的未读消息数量。
• POST /api/crm/notifications/{id}/read/: 将指定消息标记为已读。
• POST /api/crm/notifications/read_all/: 将所有消息标记为已读。

7.2.2 视图实现逻辑

class NotificationViewSet(viewsets.ReadOnlyModelViewSet):
    serializer_class = NotificationSerializer
    permission_classes = [IsAuthenticated]

    def get_queryset(self):
        # 仅返回当前登录用户的通知
        # 需结合认证系统，假设 request.user.student 存在，或通过 openid 关联
        user = self.request.user
        # 实际逻辑需根据 User 与 Student 的关联方式调整
        # 若 User 是 Admin 用户，可能需要调整；若是小程序用户，通常通过 Token 认证
        return Notification.objects.filter(student__openid=user.username) 

    @action(detail=False, methods=['get'])
    def unread_count(self, request):
        count = self.get_queryset().filter(is_read=False).count()
        return Response({'count': count})

    @action(detail=True, methods=['post'])
    def read(self, request, pk=None):
        notification = self.get_object()
        notification.is_read = True
        notification.save()
        return Response({'status': 'marked as read'})

7.3 管理后台集成 (Django Admin)

在 admin/server/apps/crm/admin.py 中注册 Notification 模型，以便管理员手动发送通知。

• 功能：
  • 查看所有发送的通知记录。
  • 创建新通知（选择学员、填写标题和内容）。
  • 支持筛选（按类型、是否已读、发送时间）。

7.4 批量发送功能 (可选扩展)

未来可在管理后台增加“批量发送”功能，例如：

• 向所有“在读”学员发送通知。
• 向所有领取了特定优惠券的学员发送提醒。
• 向所有已完成课程的学员发送课程完成通知。
• 向指定项目/活动参与学员发送通知。
• 向所有学员发送系统通知（如：课程更新、系统维护等）。

---

确认方案后，我们将按此步骤进行开发。