Files
hlae-site/.trae/documents/hlae_site_plan.md
purp1e 35d835f68c chore: 统一代码格式并配置开发工具
- 添加 ESLint 和 Prettier 配置以统一代码风格
- 配置项目级 TypeScript 设置
- 更新前后端依赖版本
- 修复代码格式问题(引号、分号、尾随逗号等)
- 优化文件结构和导入路径
2026-03-10 18:24:19 +08:00

2.8 KiB
Raw Permalink Blame History

HLAE 中文站开发计划 (Bun + Elysia + React + HeroUI)

本计划旨在构建 HLAE 中文站,基于 Bun Monorepo 架构,前端使用 Vite + React + HeroUI v3后端使用 Elysia.js + Prisma (SQLite)。

1. 项目初始化与依赖配置

  • 检查与安装依赖

    • Web 端安装 swr, zustand

    • 确认 backendweb 的 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.cssHeroUI 样式正确加载。

    • 配置全局 Theme (亮/暗色)。

  • 状态管理 & 数据请求

    • 封装 useClient 或类似 Hook结合 edenswr 进行数据请求。

    • 使用 zustand 管理全局状态 (如当前用户信息、UI状态)。

  • 路由配置

    • 使用 react-router 配置页面路由 (首页、登录、注册、资源页、帖子页、管理页)。

4. 功能模块实现

  • 认证模块 (Auth)

    • 实现登录页面 (Login Page)。

    • 实现注册页面 (Register Page)。

    • 实现受保护路由 (Protected Routes)。

  • 资源/传送门模块 (Resources/Teleport)

    • 展示: 使用 HeroUI Card 组件展示资源列表。

    • 编辑: 实现“在线编辑”功能 (管理员或特定用户权限),支持添加/修改/删除资源卡片。

  • 帖子模块 (Posts)

    • 列表: 展示帖子列表。

    • 详情: 展示帖子详情。

    • 发布: 实现发帖编辑器和发布功能。

5. 测试与优化

  • 功能测试

    • 测试完整的注册/登录流程。

    • 测试资源的增删改查。

    • 测试发帖功能。

  • UI/UX 优化

    • 响应式布局调整。

    • Loading 状态和错误处理。