前端框架
- Next.js 14 App Router 负责页面路由、API Route 和生产构建。
- React 18 编写交互界面，首页轮播、公告、报名弹窗、后台表单都使用客户端组件处理状态。
- TypeScript 提供类型约束，业务类型集中在 src/lib/app-types.ts 和 src/database.types.ts。
ANEKO Anime Club
关于 ANEKO 动漫社
这是一个面向动漫社运营的全栈网站。前台用于展示活动、公告、作品和报名入口，后台用于管理成员、公告、活动、轮播图、站点设置和作品审核。
Next.js
全栈开发
Supabase
认证和数据库
Cloudflare R2
图片存储
Tailwind CSS
界面样式
社团定位
网站不只是展示页，它已经接入真实数据库、登录权限、后台管理和图片上传，适合社团长期维护内容。
热爱
这里聚集喜欢动画、漫画、游戏、绘画、摄影和 Cosplay 的同好，用稳定的活动把兴趣变成日常。
创作
网站支持成员上传作品，后台审核通过后会展示到作品墙，让优秀作品真正出现在首页和图库里。
协作
活动报名、公告发布、成员管理、作品审核都接入后台，方便社团持续运营，而不是只做静态展示。
技术栈说明
当前项目是 Next.js + Supabase + Cloudflare R2 的全栈实现，核心能力都在这个仓库内完成。
界面和动效
- Tailwind CSS 负责响应式布局、色彩、间距和组件样式。
- Framer Motion 用在页面进入、后台侧边栏折叠等动效。
- Lucide React 提供图标，按钮、菜单和状态操作保持统一视觉语言。
后端 API
- Next.js Route Handlers 提供 /api/auth、/api/posts、/api/events、/api/works、/api/upload 等接口。
- 前后台都通过同一个 Next.js 项目开发，不额外拆分后端服务。
- 后台操作统一走管理员校验，普通成员只能访问允许的投稿和报名功能。
数据库和权限
- Supabase PostgreSQL 存储 profiles、posts、events、works、site_settings、hero_slides 等业务数据。
- Row Level Security 按角色控制读写权限，管理员可以管理数据，访客只能读取公开内容。
- database.types.ts 可通过 npm run supabase:types 从 Supabase 自动生成，减少字段不一致问题。
登录认证
- Supabase Auth 负责注册、登录、会话和用户身份。
- @supabase/ssr 使用 Cookie 方案在服务端 API 中读取当前用户。
- 管理员权限由 profiles.role 和 profiles.status 控制。
图片存储
- Cloudflare R2 作为对象存储，用兼容 S3 的 API 上传图片。
- @aws-sdk/client-s3 负责把轮播图、公告图、Logo 和作品图片上传到 R2。
- 数据库只保存图片公网 URL，前台页面直接按 URL 展示图片。
已接入的功能链路
这些功能已经不是静态文案，后台保存的数据会回到前台页面展示。
首页轮播
后台添加图片，前台自动展示
最新公告
支持公告图片，按发布状态显示
活动报名
前台填写信息，后台查看和审核
作品审核
成员上传作品，管理员审核后进入图库
SSR 会话
Cookie 读取 Supabase 登录状态