新笔文学社官方网站产品系统

岳阳县第二中学"新笔"文学社（创建于1984年）
•
社团信息展示、活动宣传、作品征集
•
内部刊物《年轻的心》《心雨》的线上延伸
•
社员招募、投稿管理、互动交流

1.首页展示
•
社团简介、创建历史、荣誉展示
•
粒子动画背景（35个浮动粒子）
•
标题逐字出现动画
•
滚动揭示动画（页面元素随滚动渐入）
2.作品展示模块
•
按分类筛选：散文、诗歌、小说、随笔
•
分页加载：每次加载3篇，点击"加载更多"追加
•
搜索功能：输入关键词实时查询作品标题、作者、摘要
•
作品卡片：封面图、分类标签、标题、作者、摘要、点赞数、收藏数
•
点击卡片弹出详情弹窗（含评论区和互动按钮）
3.近期活动模块
•
活动列表展示（时间、地点、简介）
•
实时倒计时：每秒更新，显示剩余天、时、分、秒
4.社员风采模块
•
社员名片：头像（圆形）、姓名、职务、座右铭、简介
•
鼠标悬停动画（上浮 + 顶部彩色渐变条）
5.投稿系统
•
在线表单：姓名、邮箱、电话、年级、作品类型、作品标题、作品内容
•
提交后存储至 Supabase 数据库
6.文学网站导航
•
6个文学网站入口（中国作家网、中国诗歌网、收获、诗刊、人民文学、豆瓣阅读）
•
点击在新窗口打开
7.联系我们
•
地址、邮箱、电话、开放时间
•
微信公众号、QQ群二维码生成
•
加入申请表单
8.用户系统
•
登录/注册：基于 Supabase Auth，支持邮箱密码登录
•
个人主页：显示头像、昵称、邮箱、个人简介、点赞/收藏/评论统计
•
编辑资料：修改显示名称、个人简介
•
我的点赞：查看所有点赞过的作品列表
•
我的收藏：查看所有收藏过的作品列表
9.评论系统
•
文章详情弹窗内评论区
•
显示评论者自定义昵称（查询 profiles 表，而非显示原始 ID）
•
支持发表新评论
10.点赞/收藏功能
•
弹窗内点赞/收藏
•
作品列表页直接点赞/收藏（无需打开弹窗）
•
实时更新数量
11.深色模式
•
一键切换深色/浅色主题
•
偏好自动保存至 localStorage
12.进度条+回到顶部
•
页面顶部进度条（随滚动变化）
•
右下角回到顶部按钮（滚动超过500px后显示）

1.前端页面开发
•
响应式布局：适配 PC、平板、手机三种屏幕尺寸
•
CSS 动画：粒子浮动、标题逐字出现、滚动渐入、按钮悬停、卡片上浮
•
导航系统：固定顶部导航、移动端汉堡菜单、滚动高亮当前板块
•
弹窗系统：文章详情弹窗、二维码弹窗，支持点击外部关闭和 ESC 键关闭
•
深色模式：CSS 变量切换 + localStorage 持久化
2.后端对接
•
接入 Supabase 数据库（创建 works、comments、likes、bookmarks、profiles、submissions、member_applications 等表）
•
接入 Supabase Auth 用户认证系统
•
通过 REST API 实现数据增删改查
•
处理 Token 认证（Bearer Token）
•
处理 RLS 权限策略（行级安全）
3.核心功能实现
•
作品列表：按分类筛选、分页加载（每页3篇）、搜索
•
评论系统：批量查询 profiles 表获取昵称，显示用户自定义名称
•
点赞/收藏：支持弹窗内和列表页两种操作方式
•
用户主页：聚合展示个人数据和统计
•
活动倒计时：每秒更新，使用 setInterval
•
投稿和加入申请表单：提交至 Supabase
4.问题排查与修复
•
修复"Ript"乱码：清除文件末尾重复文档和截断残骸
•
修复登录按钮无反应：添加用户按钮事件绑定（addEventListener）
•
修复评论区显示"用户×××"：添加 profiles 表查询，显示用户自定义昵称
•
修复点赞收藏提示未登录：API 请求添加 Bearer Token
•
修复分页加载后新卡片不显示：IntersectionObserver 接管新加载的卡片
•
修复社员卡片不显示：修复 loadMembers 函数嵌套和括号错误
•
修复 showMyLikes 函数死循环：删除重复定义的函数，补全括号
•
修复筛选按钮切换后分页不重置：调用 loadWorks 时传 append=false
5.数据初始化
•
预设社员数据（侯琼、余燕、李军，带头像 URL）
•
预设活动数据（工作坊、读书会、招募会）
•
预设文学网站导航链接
八、亮点特色
1.
数据驱动
所有内容（作品、评论、点赞、收藏）从 Supabase 数据库动态加载，非静态展示，支持实时更新。
2.
分页加载优化性能
默认每次仅加载3篇作品，点击"加载更多"追加，减少首次加载时间和流量消耗。
3.
实时倒计时
活动剩余时间每秒更新，精确到秒，营造紧迫感和期待感。
4.
用户系统完整闭环
注册→登录→个人主页→点赞/收藏/评论→编辑资料，全流程覆盖，具备社区属性。
5.
评论区实名显示
通过 profiles 表关联查询，显示用户自定义昵称，而非原始 user_id，提升社交体验。
6.
零成本架构
前端为纯静态页面，可托管于各类免费平台；后端使用 Supabase 免费额度，零服务器费用。
7.
交互体验丰富
粒子动画、逐字效果、滚动渐入、悬停反馈、进度条、回到顶部，提升用户停留时长。
8.
全设备适配
一套代码适配手机、平板、电脑，移动端菜单自动切换为汉堡菜单。
9.
深色模式
一键切换暗色主题，降低夜间阅读视觉疲劳，记忆用户偏好。
10.
可扩展性强
功能模块化设计，便于后续增加排行榜、私信、文章讨论区等功能。