基于 Preact + Vite 的轻量级中文后台管理系统,具备极小体积、Signals 响应式和高性能。
- 在线预览:https://halolight-preact.h7ml.cn
- GitHub:https://github.com/halolight/halolight-preact
- 文档:https://halolight.docs.h7ml.cn
- 极小体积:Preact 仅 3KB,远小于 React
- Signals:内置细粒度响应式状态管理
- React 兼容:可使用大部分 React 生态库
- TypeScript:完整类型安全支持
- Vite 构建:极速开发体验
- Tailwind CSS:原子化样式
- 完整测试:Vitest + Testing Library
src/
├── app.tsx # 应用入口
├── main.tsx # 渲染入口
├── components/ # 可复用组件
│ ├── ui/ # UI 基础组件
│ └── common/ # 通用组件
├── routes/ # 页面组件
├── layouts/ # 布局组件
├── stores/ # 状态管理
├── api/ # API 接口
├── mock/ # Mock 数据
├── lib/ # 工具函数
├── config/ # 配置文件
├── types/ # 类型定义
├── test/ # 测试配置
└── index.css # 全局样式
# 安装依赖
pnpm install
# 开发模式
pnpm dev
# 生产构建
pnpm build
# 预览构建产物
pnpm preview# 代码检查
pnpm lint # ESLint 检查
pnpm lint:fix # ESLint 自动修复
# 类型检查
pnpm type-check # TypeScript 类型检查
# 测试
pnpm test # 交互式测试
pnpm test:ci # CI 测试(含覆盖率)
pnpm test:ui # 测试 UI 界面| 类别 | 技术 |
|---|---|
| 核心框架 | Preact 10 + Signals |
| 类型系统 | TypeScript 5.9 |
| 构建工具 | Vite 7.2 |
| 样式 | Tailwind CSS 3.4 |
| 路由 | preact-router |
| 测试 | Vitest + Testing Library |
| 代码检查 | ESLint 9 + typescript-eslint |
- 极小体积:3KB gzipped,对比 React 40KB+
- Signals:细粒度响应式,性能更优
- React 兼容:preact/compat 提供完整兼容层
- 快速渲染:更轻量的虚拟 DOM 实现
| 变量名 | 说明 | 默认值 |
|---|---|---|
VITE_API_URL |
API 基础 URL | /api |
VITE_MOCK |
启用 Mock 数据 | true |
VITE_APP_TITLE |
应用标题 | Admin Pro |
项目使用 GitHub Actions 进行持续集成:
- Lint:ESLint 代码检查
- Type Check:TypeScript 类型检查
- Test:Vitest 单元测试 + 覆盖率报告
- Build:生产构建验证