一、项目核心定位
-
功能定位：复现探探「左滑无感、右滑喜欢」的滑卡匹配机制，以及陌陌的同城社交、实时通讯核心功能，同时整合双重实名认证、兴趣标签匹配等婚恋场景必备模块。
-
技术定位：面向前端开发者提供可直接复用的婚恋系统前端解决方案，涵盖手势交互、视图堆栈管理、实时通讯等关键技术实现方案，代码结构清晰、注释完善，支持二次开发。
-
适用场景：个人技术学习、婚恋产品原型开发、社交类项目二次定制开发。
二、核心功能模块
- 滑卡匹配模块（仿探探核心）
-
核心交互：实现左滑拒绝、右滑喜欢的手势交互，支持滑动距离阈值控制，滑动过程伴随平滑动画效果，滑动结束后自动加载下一张用户卡片。
-
卡片展示：采用堆栈式卡片布局，展示用户头像、昵称、年龄、兴趣标签、距离等核心信息，支持卡片点击查看详情功能。
-
匹配逻辑：双向喜欢后触发匹配成功提示，支持跳转至聊天界面直接沟通。
- 同城社交模块（仿陌陌核心）
-
地理位置推荐：基于LBS定位功能，推荐同城范围内的用户，支持距离筛选（1km-10km可选）。
-
附近动态：展示同城用户发布的婚恋需求动态，支持点赞、评论互动，增强用户粘性。
-
兴趣标签匹配：支持根据用户设置的兴趣爱好、职业、学历等标签，精准推荐同频用户，提升匹配效率。
- 实时通讯模块
-
即时聊天：匹配成功后解锁一对一聊天功能，支持文字、表情、图片发送，实时展示消息送达状态。
-
消息通知：新消息实时推送，支持桌面通知与应用内红点提示，未读消息数量统计。
-
语音/视频通话入口：预留语音、视频通话功能入口，支持快速跳转发起通话（需配合后端服务实现完整功能）。
- 用户认证与个人中心
-
多重认证：支持身份证实名认证、人脸识别认证双重校验，认证通过后点亮「真人认证」徽章，提升用户可信度。
-
个人资料管理：支持上传多张头像、编辑个人简介、设置兴趣标签、择偶偏好等信息，资料完成度实时展示。
-
隐私设置：支持设置资料可见范围、消息接收权限、地理位置隐藏等功能，保障用户隐私安全。
三、技术栈选型
-
基础框架：React（推荐）/ Vue3（可选分支），采用组件化开发模式，提升代码复用性与维护性。
-
状态管理：Zustand（轻量高效，适合中小型项目）/ Pinia（Vue3生态首选）。
-
路由管理：React Router / Vue Router，实现页面无刷新跳转，支持路由守卫控制页面访问权限。
-
UI组件库：Material UI / Vant，快速构建美观、响应式的界面，适配移动端与PC端。
-
手势与动画：react-tinder-card（React生态）/ vue-touch（Vue生态），实现滑卡手势交互；Framer Motion / CSS3动画，优化页面过渡与交互反馈。
-
实时通讯：Socket.IO，实现客户端与服务端的实时数据交互，保障聊天消息实时性。
-
数据请求：Axios，封装统一的请求拦截器与响应拦截器，处理接口请求与错误反馈。
-
存储方案：LocalStorage（本地缓存用户信息）、IndexedDB（缓存聊天记录）。
四、关键技术实现亮点
- 滑卡交互优化
基于DragGesture手势识别技术，精准捕捉用户滑动方向与距离，通过设置合理的滑动阈值（默认50px），避免误操作；结合ObjectAnimator实现卡片滑动、旋转、缩放联动动画，提升交互流畅度。采用视图堆栈管理模式（LIFO），通过push/pop操作维护卡片队列，确保卡片切换高效无卡顿。
- 响应式适配
采用Mobile First开发策略，通过媒体查询与弹性布局，实现从手机端到平板、PC端的全尺寸适配，卡片大小、布局结构随屏幕尺寸智能调整，保障多设备用户体验一致性。
- 性能优化方案
-
图片懒加载：用户头像与动态图片采用懒加载机制，优先加载可视区域内容，减少初始加载时间。
-
接口请求优化：实现请求防抖、节流，避免重复请求；缓存常用接口数据（如用户标签列表），减少网络请求次数。
-
内存管理：及时销毁不可见的卡片组件与事件监听器，避免内存泄漏。
-
安装依赖：进入项目根目录，执行npm install（React版本）或yarn install（Vue3版本）
-
配置环境变量：复制.env.example为.env，填写后端接口地址、Socket.IO服务地址等配置信息。
-
后端对接说明
本项目为前端单独实现，需配合后端服务完成完整功能。项目内置统一的接口请求封装，支持对接基于Node.js（Express/Koa）、Java、Python等任意语言开发的后端服务，后端需提供用户管理、匹配逻辑、实时通讯、地理位置等相关接口，具体接口文档见仓库api-docs.md文件。
六、开源协议与贡献指南
-
开源协议：采用MIT开源协议，允许个人与商业项目自由使用、修改、分发，无需支付任何费用，但需保留原项目版权声明。
-
贡献指南：欢迎开发者通过Issue提交bug反馈或功能需求，通过Pull Request提交代码贡献。提交PR前请确保代码风格与项目一致，并经过本地测试验证。
