- 添加 ESLint 和 Prettier 配置以统一代码风格 - 配置项目级 TypeScript 设置 - 更新前后端依赖版本 - 修复代码格式问题(引号、分号、尾随逗号等) - 优化文件结构和导入路径
2.8 KiB
HLAE 中文站开发计划 (Bun + Elysia + React + HeroUI)
本计划旨在构建 HLAE 中文站,基于 Bun Monorepo 架构,前端使用 Vite + React + HeroUI v3,后端使用 Elysia.js + Prisma (SQLite)。
1. 项目初始化与依赖配置
-
检查与安装依赖
-
Web 端安装
swr,zustand。 -
确认
backend和web的 workspace 关联,确保类型共享。
-
-
类型安全配置 (Eden)
-
在 Backend 导出
App类型。 -
在 Web 端正确引入
App类型以实现端到端类型安全。
-
-
环境变量配置
-
配置 Backend
.env(数据库路径, Auth Secret 等)。 -
配置 Web
.env(API 地址等)。
-
2. 数据库与后端基础
-
Prisma Schema 设计
-
完善
User模型 (适配 better-auth)。 -
设计
Resource(资源/传送门) 模型:包含标题、描述、链接、图标/图片、分类等字段。 -
设计
Post(帖子) 模型:包含标题、内容、作者、发布时间等。 -
执行
bun prisma migrate dev生成数据库表。
-
-
后端核心功能
-
Auth: 集成
better-auth,实现注册、登录、注销、获取当前用户接口。 -
Resources: 实现资源的增删改查 (CRUD) 接口。
-
Posts: 实现帖子的增删改查接口。
-
API 导出: 确保所有路由都挂载到主 App 实例。
-
3. 前端基础架构 (Web)
-
HeroUI v3 配置
-
确保
tailwind.css和HeroUI样式正确加载。 -
配置全局 Theme (亮/暗色)。
-
-
状态管理 & 数据请求
-
封装
useClient或类似 Hook,结合eden和swr进行数据请求。 -
使用
zustand管理全局状态 (如当前用户信息、UI状态)。
-
-
路由配置
- 使用
react-router配置页面路由 (首页、登录、注册、资源页、帖子页、管理页)。
- 使用
4. 功能模块实现
-
认证模块 (Auth)
-
实现登录页面 (Login Page)。
-
实现注册页面 (Register Page)。
-
实现受保护路由 (Protected Routes)。
-
-
资源/传送门模块 (Resources/Teleport)
-
展示: 使用 HeroUI
Card组件展示资源列表。 -
编辑: 实现“在线编辑”功能 (管理员或特定用户权限),支持添加/修改/删除资源卡片。
-
-
帖子模块 (Posts)
-
列表: 展示帖子列表。
-
详情: 展示帖子详情。
-
发布: 实现发帖编辑器和发布功能。
-
5. 测试与优化
-
功能测试
-
测试完整的注册/登录流程。
-
测试资源的增删改查。
-
测试发帖功能。
-
-
UI/UX 优化
-
响应式布局调整。
-
Loading 状态和错误处理。
-