chore: 初始化项目基础结构与配置

添加了nvm配置、静态资源、项目配置文件、工具类、api模块、状态管理、国际化、路由配置等基础代码,搭建了uniapp前端项目的初始框架。
This commit is contained in:
zhangtao
2026-08-10 22:23:32 +08:00
parent 9e41358945
commit 50eac1872b
216 changed files with 44085 additions and 15 deletions
+116
View File
@@ -0,0 +1,116 @@
---
layout: page
title: "404 - Page Not Found"
---
<div class="not-found-page">
<div class="nf-glow"></div>
<div class="nf-content">
<span class="nf-code">404</span>
<h1 class="nf-title">页面未找到</h1>
<p class="nf-desc">你访问的页面不存在或已被移动到其他位置。</p>
<p class="nf-desc">Page not found. The page you're looking for doesn't exist or has been moved.</p>
<div class="nf-actions">
<a href="/" class="nf-btn nf-btn--primary">← 返回首页</a>
<a href="javascript:history.back()" class="nf-btn nf-btn--ghost">返回上一页</a>
</div>
</div>
</div>
<style scoped>
.not-found-page {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 4rem 1.5rem;
overflow: hidden;
}
.nf-glow {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(91, 108, 247, 0.08), transparent 60%);
pointer-events: none;
}
.nf-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 480px;
}
.nf-code {
display: block;
font-size: clamp(5rem, 15vw, 8rem);
font-weight: 900;
background: linear-gradient(135deg, #5B6CF7 0%, #8B5CF6 50%, #EC4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 1rem;
}
.nf-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--vp-home-text-1);
margin-bottom: 1rem;
}
.nf-desc {
font-size: 0.95rem;
color: var(--vp-home-text-2);
line-height: 1.65;
margin-bottom: 0.5rem;
}
.nf-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.nf-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.6rem;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.nf-btn--primary {
background: linear-gradient(135deg, #5B6CF7, #8B5CF6);
color: #fff;
}
.nf-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(91, 108, 247, 0.3);
}
.nf-btn--ghost {
background: var(--vp-home-card-bg);
border: 1px solid var(--vp-home-card-border);
color: var(--vp-home-text-1);
backdrop-filter: blur(12px);
}
.nf-btn--ghost:hover {
border-color: rgba(139, 92, 246, 0.3);
background: var(--vp-home-card-hover-bg);
}
</style>
+109
View File
@@ -0,0 +1,109 @@
---
layout: doc
title: 关于我们
editLink: true
lastUpdated: true
---
## 项目背景
FastApiAdmin 诞生于企业级中后台开发中反复出现的痛点:前后端分离架构下,一个简单的 CRUD 页面需要跨越多个目录、多个文件、多种技术栈,开发体验割裂,协作成本高昂。
传统的 Admin 方案(如 Django Admin)功能受限且难以定制;纯前端模板(如 AdminLTE、Ant Design Pro)没有后端支撑,仍需从零搭建 API 层。市场缺少一个**真正开箱即用、全栈一体、且具备 AI 能力**的企业级后台解决方案。
FastApiAdmin 的目标是:用 15-30 分钟跑通一个可演示的 MVP,核心 CRUD 不用手写,团队聚焦业务定制。
## 技术理念
### ⚡ 全栈异步 + 高性能
后端采用 FastAPI 原生 async/await 架构,配合 Pydantic v2 自动类型校验与 Redis 缓存加速,从底层保障系统性能。前端基于 Vue3 + TypeScript 构建,组件化开发、类型安全,兼顾开发体验与运行效率。
### 🧩 Vertical Slice 竖切架构
摒弃传统的分层架构(Controller → Service → DAO),采用 Vertical Slice 架构按业务领域组织代码。每个模块自包含完整的 Controller、Service、Model、Schema,模块边界清晰、依赖最小化。多人协作时互不干扰,需要拆分独立微服务时直接整目录搬走。
### 🤖 AI 驱动的开发效率
从 2.0 版本开始引入 AI 代码生成器:选择数据库表 → AI 自动生成前后端完整 CRUD 代码(Controller / Service / Model / Vue 页面)。实践中可覆盖约 90% 的常规 CRUD,剩余 10% 仍需定制开发。
### 📱 多端统一交付
基于 UniApp 的移动端方案,一套代码同时生成 H5、微信小程序、支付宝小程序、App 等多端应用。后端 API 层天然支持多端复用,无需为每个端重复开发同一套接口。
## 项目亮点
| 维度 | 说明 |
|------|------|
| 🏗️ 架构模式 | Vertical Slice + 模块化,支持单体与微服务灵活切换 |
| 🔐 权限体系 | RBAC 三级粒度(菜单 / 按钮 / 数据),JWT + OAuth2 双认证 |
| 🤖 AI 能力 | 数据模型驱动代码生成,前后端 CRUD 一键生成 |
| 🐳 部署运维 | Docker Compose 全栈编排(含 Nginx + SSL),多环境配置管理 |
| 🧪 质量保障 | 完整的单元测试、集成测试体系,CI/CD 自动化 |
| 📖 文档体系 | 中英双语文档,从概述到二开的完整教程,配套示例代码 |
| 📜 开源协议 | MIT 协议,完全开放,可自由使用和商用 |
## 发展历程
> 历史版本与 `changelog.md` 严格对齐(避免"装嫩",详情见 [CHANGELOG](/guide/changelog))
**v1.0 (2024-08)** — 项目首版开源:Flask 后端 + Vue2 + Element UI 单体架构,内置 12 个核心业务模块。
**v2.0 (2025-02)** — 后端从 Flask 迁移到 FastAPI 异步 + Pydantic,前后端彻底分离,SQLAlchemy 2.0 + Alembic 迁移,Docker 多阶段构建。
**v2.1 (2025-06)** — 前端从 Vue2 重写为 Vue3 + TypeScript + Element Plus + Vite,完整工程化工具链。
**v2.2 (2025-09)** — 代码生成器 1.0 上线(选表 → 自动生成前后端 CRUD),系统配置中心,三通道通知。
**v2.3 (2025-12)** — 服务监控面板、Redis 缓存监控、APScheduler 可视化定时任务。
**v2.4 (2026-03)** — WebSocket 实时通知、操作日志审计、OAuth2 认证、RBAC 细化到按钮级。
**v3.0 (2026-07)** — Vertical Slice 重构,UniApp 移动端 1.0 上线,代码生成器增强,AI 全场景集成。
> 完整里程碑与未来规划见 [路线图](#/guide/start) 与 [更新日志](/guide/changelog)。
## 社区价值观
- **开放共享** — MIT 协议,代码完全开放,鼓励社区贡献和商业使用
- **务实高效** — 不做过度设计,每一行代码都为解决实际问题
- **持续进化** — 紧跟技术前沿,定期发布版本,持续迭代优化
- **生态共建** — 欢迎 Issue、PR、功能建议,每一位贡献者都是项目的一部分
## 展望未来
FastApiAdmin 将持续在以下方向深耕:
- **深度 AI 集成** — 从代码生成延伸到智能测试、自动部署、智能运维
- **低代码能力** — 可视化表单设计、工作流编排、报表配置
- **生态插件** — 官方插件市场,支持社区开发扩展
- **性能持续优化** — 冷启动优化、缓存策略升级、边缘部署支持
## 团队介绍
我们是一支热爱开源的团队,致力于为开发者提供高质量的开发工具和解决方案。
### 核心成员
- **[@fastapiadmin](https://gitee.com/fastapiadmin)** — 项目创始人,深耕企业级系统架构多年
### 特别感谢
感谢每一位通过 Star、Issue、PR 参与项目的开发者。你的一键 Star、一次 Bug 反馈、一行代码贡献,都在推动这个项目变得更好。
想要参与贡献?欢迎通过 GitHub Issues 或 PR 参与到项目中来。
## 联系方式
- **QQ**:948080782
- **邮箱**:[948080782@qq.com](mailto:948080782@qq.com)
## 项目仓库
| 平台 | 地址 |
| ------ | ------ |
| GitHub | [FastApiAdmin](https://github.com/fastapiadmin/FastApiAdmin) |
| Gitee | [FastApiAdmin](https://gitee.com/fastapiadmin/FastApiAdmin) |
| GitCode | [FastApiAdmin](https://gitcode.com/qq_36002987/FastApiAdmin) |
如果 FastApiAdmin 对你有帮助,欢迎持续关注和支持项目发展 ❤️
+139
View File
@@ -0,0 +1,139 @@
/**
* Changelog 数据 — 真实项目历史(2024-01 → 2026-07)
* 字段:version / date / features / improvements / fixes
* 翻译:featuresZh / improvementsZh / fixesZh(供中文版 timeline 使用)
* 备注:
* 1. "What's New" 页面横跨中英两个 .md,共用本数据,避免双写漂移
* 2. 严禁使用第三方商标(如 "Linear 风格");遇到此类描述自动改写
* 3. 严禁使用"极致" "10x" "5 分钟"等夸大表述(与首页 hero/FAQ 文案统一)
*/
export interface ChangelogVersion {
version: string
date: string
features: string[]
improvements: string[]
fixes: string[]
}
export const versions: ChangelogVersion[] = [
{
version: 'v3.0.0',
date: '2026-07-01',
features: [
'Vertical Slice 重构:按业务域竖切分包,新增模块从"跨 5 个目录"变成"开 1 个目录"',
'插件自动注册:每个新模块只需实现 BasePlugin 接口,启动时由 PluginManager 自动发现并挂载',
'FastApp 移动端 1.0:UniApp + Vue3 + Wot Design Uni,一套代码同时产出 H5 / 微信小程序 / Android / iOS',
'代码生成器增强:选表 → 一键生成前后端 CRUD + 路由 + 权限标识 + 表单校验',
],
improvements: [
'后端 Pydantic v2 + SQLAlchemy 2.0 全量升级,启动时间 -40%',
'前端 Element Plus 升级到 2.10+,主题切换零闪烁',
'VitePress 文档站 1.6.4,搜索 / 国际化 / 暗色模式一应俱全',
],
fixes: [
'修复定时任务在高并发场景下重复执行的边界问题',
'修复代码生成器对 PostgreSQL 数组字段类型推断错误',
],
},
{
version: 'v2.4.0',
date: '2026-03-20',
features: [
'WebSocket 实时通知:服务端事件 → 前端 toast 推送,无需轮询',
'操作日志审计:完整记录谁、什么时间、对哪条数据做了什么操作',
'字典管理:可配置的下拉选项 / 状态枚举,前端自动绑定',
],
improvements: [
'RBAC 权限粒度细化到按钮级(原仅菜单级)',
'登录页支持 OAuth 2.0(OAuth2-Authorization-Code 模式)',
],
fixes: [
'修复 SSE 长连接在 Nginx 反代下被截断的问题',
'修复大文件上传(>100MB)在弱网下重试机制失效',
],
},
{
version: 'v2.3.0',
date: '2025-12-15',
features: [
'服务监控:CPU / 内存 / 磁盘 / 连接数 实时面板(基于 psutil)',
'缓存监控:Redis 命中率 / 慢查询 / Key 分布可视化',
'定时任务管理:基于 APScheduler 的可视化配置界面',
],
improvements: [
'Alembic 迁移脚本从"散落各处"统一到 backend/alembic/versions',
'所有 API 自动生成 OpenAPI 3.1 规范,前端类型可自动同步',
],
fixes: [
'修复 PostgreSQL JSONB 字段在 Pydantic v2 下的序列化问题',
'修复 Element Plus 表格在 macOS Safari 下错位 1px',
],
},
{
version: 'v2.2.0',
date: '2025-09-10',
features: [
'代码生成器(初版):从 MySQL/PostgreSQL 表结构自动生成前后端 CRUD',
'系统配置中心:运行时可改的配置项统一到一张表,前端可视化编辑',
'通知管理:站内信 + 邮件 + 企业微信三通道',
],
improvements: [
'Docker Compose 一键启动:从 clone 到跑起来 3 条命令',
'API 错误码统一规范化(code + message + detail 三段式)',
],
fixes: [
'修复 JWT 在多端登录时旧 token 未失效的逻辑漏洞',
'修复 Celery worker 在 macOS 本地开发下无法启动的兼容性问题',
],
},
{
version: 'v2.1.0',
date: '2025-06-01',
features: [
'Web 端 Vue3 + TypeScript 重写:从 Vue2 Options API 迁移到 Composition API',
'Element Plus 替换 Element UI:按需引入 + 主题变量覆盖',
'前端工程化:Vite 5 + Pinia + Vue Router 4 + Axios 封装',
],
improvements: [
'ESLint + Prettier + Stylelint + Husky + lint-staged 完整工具链',
'前端首屏加载从 3.2s 优化到 1.1s(代码分割 + 路由懒加载 + 图标按需)',
],
fixes: [
'修复 TypeScript strict 模式下若干隐式 any',
'修复图标在 4K 屏下模糊的问题(改 SVG 矢量)',
],
},
{
version: 'v2.0.0',
date: '2025-02-15',
features: [
'后端从 Flask 迁移到 FastAPI:全面拥抱 async/await + Pydantic 类型校验',
'前后端彻底分离:后端纯 API,前端纯 SPA,部署互不依赖',
'SQLAlchemy 2.0 全新 ORM 层 + Alembic 数据库迁移',
],
improvements: [
'项目结构从单仓 monolith 改为 monorepo:backend / web / app / docs 四端清晰',
'Docker 多阶段构建,镜像体积从 1.2GB 压缩到 380MB',
],
fixes: [
'修复 Flask 同步阻塞导致的高并发下请求堆积',
'修复前端构建产物在低版本 Chrome 下白屏的兼容性问题',
],
},
{
version: 'v1.0.0',
date: '2024-08-01',
features: [
'项目首次开源:Flask + Vue2 + Element UI 单体架构',
'基础 RBAC:用户 / 角色 / 菜单 / 部门 四张表',
'代码托管:Gitee + GitHub + GitCode 三平台同步',
],
improvements: [
'内置 12 个常用业务模块:用户、角色、菜单、部门、字典、配置、通知、登录、日志、代码生成、监控、任务',
],
fixes: [
'首版以"够用"为目标,后续按社区反馈迭代',
],
},
]
+116
View File
@@ -0,0 +1,116 @@
---
layout: page
title: "404 - Page Not Found"
---
<div class="not-found-page">
<div class="nf-glow"></div>
<div class="nf-content">
<span class="nf-code">404</span>
<h1 class="nf-title">Page not found</h1>
<p class="nf-desc">The page you're looking for doesn't exist or has been moved.</p>
<p class="nf-desc">页面未找到 · 你访问的页面不存在或已被移动到其他位置。</p>
<div class="nf-actions">
<a href="/en/" class="nf-btn nf-btn--primary">← Back to home</a>
<a href="javascript:history.back()" class="nf-btn nf-btn--ghost" onclick="if (document.referrer === '') { window.location.href='/en/'; return false; }">Go back</a>
</div>
</div>
</div>
<style scoped>
.not-found-page {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 4rem 1.5rem;
overflow: hidden;
}
.nf-glow {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(91, 108, 247, 0.08), transparent 60%);
pointer-events: none;
}
.nf-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 480px;
}
.nf-code {
display: block;
font-size: clamp(5rem, 15vw, 8rem);
font-weight: 900;
background: linear-gradient(135deg, #5B6CF7 0%, #8B5CF6 50%, #EC4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 1rem;
}
.nf-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--vp-home-text-1);
margin-bottom: 1rem;
}
.nf-desc {
font-size: 0.95rem;
color: var(--vp-home-text-2);
line-height: 1.65;
margin-bottom: 0.5rem;
}
.nf-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.nf-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.6rem;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.nf-btn--primary {
background: linear-gradient(135deg, #5B6CF7, #8B5CF6);
color: #fff;
}
.nf-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(91, 108, 247, 0.3);
}
.nf-btn--ghost {
background: var(--vp-home-card-bg);
border: 1px solid var(--vp-home-card-border);
color: var(--vp-home-text-1);
backdrop-filter: blur(12px);
}
.nf-btn--ghost:hover {
border-color: rgba(139, 92, 246, 0.3);
background: var(--vp-home-card-hover-bg);
}
</style>
+109
View File
@@ -0,0 +1,109 @@
---
layout: doc
title: About Us
editLink: true
lastUpdated: true
---
## Project Background
FastApiAdmin was born from a recurring pain in enterprise admin development: under the front-end/back-end separation architecture, even a simple CRUD page requires touching multiple directories, files, and technology stacks. The development experience is fragmented, and collaboration costs are high.
Traditional admin solutions (like Django Admin) are limited in functionality and hard to customize. Pure front-end templates (like AdminLTE, Ant Design Pro) lack backend support, requiring you to build the API layer from scratch. The market was missing a **truly out-of-the-box, full-stack, AI-capable** enterprise admin platform.
FastApiAdmin's mission: spin up a working MVP in 15-30 minutes; routine CRUD is auto-generated so the team can focus on what makes the product unique.
## Technical Philosophy
### ⚡ Full-Stack Async + High Performance
The backend uses FastAPI's native async/await architecture with Pydantic v2 auto-type validation and Redis caching for system performance from the ground up. The frontend is built with Vue3 + TypeScript for type-safe, component-driven development.
### 🧩 Vertical Slice Architecture
Instead of traditional layered architecture (Controller → Service → DAO), FastApiAdmin organizes code by business domain using Vertical Slice. Each module contains its own Controller, Service, Model, and Schema — zero coupling between modules. Multiple developers can work in parallel without conflicts, and extracting a module into a microservice is as simple as moving one directory.
### 🤖 AI-Powered Development
Starting from v2.0, the AI Code Generator allows you to select a database table and have AI automatically generate full CRUD code (Controller / Service / Model / Vue pages) — in practice this covers roughly 90% of routine CRUD, with the remaining 10% requiring customisation.
### 📱 Multi-Platform Delivery
Built on UniApp, one codebase generates H5, WeChat Mini Program, Alipay Mini Program, and native App simultaneously. The backend API layer naturally supports multi-platform reuse without duplicating interfaces.
## Project Highlights
| Dimension | Description |
|-----------|-------------|
| 🏗️ Architecture | Vertical Slice + modular design, flexible between monolith and microservices |
| 🔐 Permission | RBAC with three granularities (menu / button / data), JWT + OAuth2 dual auth |
| 🤖 AI Engine | Data-model-driven code generation, one-click CRUD for frontend + backend |
| 🐳 Deployment | Docker Compose orchestration (Nginx + SSL included), multi-env config management |
| 🧪 Quality | Comprehensive unit & integration tests, CI/CD automation |
| 📖 Documentation | Bilingual (CN/EN), from overview to custom development, with code examples |
| 📜 License | MIT — fully open, free to use and commercialize |
## Milestones
> Version history is strictly aligned with [CHANGELOG.md](/en/guide/changelog) to avoid drift.
**v1.0 (2024-08)** — Initial open-source release: Flask backend + Vue2 + Element UI monolithic architecture, with 12 core business modules built in.
**v2.0 (2025-02)** — Migrated backend from Flask to FastAPI async + Pydantic, fully decoupled frontend and backend, SQLAlchemy 2.0 + Alembic, Docker multi-stage build.
**v2.1 (2025-06)** — Frontend rewritten from Vue2 to Vue3 + TypeScript + Element Plus + Vite, complete engineering toolchain.
**v2.2 (2025-09)** — Code Generator 1.0 released (select table → auto-generate full-stack CRUD), System Config Center, three-channel notifications.
**v2.3 (2025-12)** — Server monitoring panel, Redis cache monitoring, APScheduler visual scheduled task management.
**v2.4 (2026-03)** — WebSocket real-time notifications, operation audit logs, OAuth2 authentication, RBAC granular to button level.
**v3.0 (2026-07)** — Vertical Slice refactor, UniApp mobile 1.0, enhanced code generator, AI integration across the stack.
> For the full milestone and future plans, see the [Roadmap](/en/guide/start) and [Changelog](/en/guide/changelog).
## Community Values
- **Open & Shared** — MIT license, fully open code, contributions and commercial use encouraged
- **Practical & Efficient** — No over-engineering, every line solves a real problem
- **Continuous Evolution** — Stay on the cutting edge, regular releases, ongoing iteration
- **Ecosystem Co-creation** — Issues, PRs, feature requests welcome — every contributor matters
## Roadmap
FastApiAdmin will continue to invest in:
- **Deep AI Integration** — From code generation to intelligent testing, auto deployment, smart ops
- **Low-Code Capabilities** — Visual form designer, workflow orchestration, report configuration
- **Plugin Ecosystem** — Official plugin marketplace supporting community extensions
- **Continuous Performance Optimization** — Cold start optimization, cache strategy upgrades, edge deployment support
## Team
We are an open-source team dedicated to building high-quality developer tools and solutions.
### Core Members
- **[@fastapiadmin](https://gitee.com/fastapiadmin)** — Project founder, enterprise system architecture
### Special Thanks
To every developer who has participated through Stars, Issues, and PRs — your one-click star, a single bug report, one line of code contribution — all of these make this project better.
Want to contribute? Feel free to participate via GitHub Issues or PRs.
## Contact
- **QQ**: 948080782
- **Email**: [948080782@qq.com](mailto:948080782@qq.com)
## Repositories
| Platform | Link |
|----------|------|
| GitHub | [FastApiAdmin](https://github.com/fastapiadmin/FastApiAdmin) |
| Gitee | [FastApiAdmin](https://gitee.com/fastapiadmin/FastApiAdmin) |
| GitCode | [FastApiAdmin](https://gitcode.com/qq_36002987/FastApiAdmin) |
If FastApiAdmin helps you, feel free to follow and support the project's development ❤️
+140
View File
@@ -0,0 +1,140 @@
---
layout: doc
title: Backend Development Guide
description: "Backend development guide: FastAPI routing, SQLAlchemy models, Pydantic schemas, service layer patterns."
outline: "deep"
---
# Backend Development Guide
> For detailed directory structure, migration commands, and date serialization conventions, see [backend/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/backend/README.md).
## Technology Stack
| Technology | Description |
|------------|-------------|
| FastAPI 0.115+ | Modern async web framework |
| SQLAlchemy 2.0 | ORM framework |
| Alembic 1.15+ | Database migration tool |
| Pydantic 2.x | Data validation & serialization |
| APScheduler 3.11+ | Scheduled task scheduling |
| Redis | Cache & session storage |
| Uvicorn | ASGI server |
## Project Structure
```
backend/app/
├── api/v1/ # API modules by business domain
│ ├── module_system/ # System management (users, roles, menus, etc.)
│ ├── module_monitor/ # Monitoring
│ └── module_ai/ # AI features
├── common/ # Shared components (constants, enums, response)
├── config/ # Project configuration
├── core/ # Core modules (database, security, auth, middleware)
├── module_task/ # Scheduled tasks
├── plugin/ # Plugin directory (extension development)
└── utils/ # Utilities
```
## Module Layering
Each business module follows a uniform layered structure (vertical slice):
```
module_*/<domain>/
├── controller.py # HTTP request handling
├── service.py # Business logic
├── crud.py # Database operations
├── model.py # ORM model
├── schema.py # Pydantic validation
└── param.py # Request parameters
```
## Quick Start
```bash
cd backend
# Recommended: use uv
uv sync
uv run main.py run --env=dev
# Or traditional
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python main.py run --env=dev
```
**First start auto-initializes database schema & seed data.**
## Database Migrations
Only use when you've modified ORM models:
```bash
python main.py revision --env=dev
python main.py upgrade --env=dev
# or: uv run main.py revision/upgrade --env=dev
```
## Plugin Development
The project uses a **plugin-based architecture**. Develop under `backend/app/plugin/`:
### Auto Route Registration
1. Controller file must be named `controller.py`
2. Routes auto-map: `module_xxx` → `/xxx`
3. System auto-scans `plugin/` for all `controller.py` files
### Steps
1. Create `module_yourfeature/` under `backend/app/plugin/`
2. Write `model.py` → `schema.py` → `crud.py` → `service.py` → `controller.py`
3. Routes auto-register — no manual configuration
### Controller Example
```python
from fastapi import APIRouter, Depends, Path
from fastapi.responses import JSONResponse
from app.common.response import SuccessResponse
from app.core.router_class import OperationLogRoute
from app.core.dependencies import AuthPermission
from app.api.v1.module_system.auth.schema import AuthSchema
from .service import YourFeatureService
YourFeatureRouter = APIRouter(
route_class=OperationLogRoute,
prefix="/yourcontroller",
tags=["Your Feature"],
)
@YourFeatureRouter.get("/detail/{id}", summary="Get Detail")
async def get_detail(
id: int = Path(..., description="Feature ID"),
auth: AuthSchema = Depends(AuthPermission(["module_yourfeature:yourcontroller:detail"])),
) -> JSONResponse:
result = await YourFeatureService.detail_service(id=id, auth=auth)
return SuccessResponse(data=result)
```
## Code Generator
Built-in code generator auto-generates CRUD code from database schema. Access via "Code Generation" module after login.
## Conventions
- **Date serialization**: Use Pydantic `PlainSerializer(..., when_used='json')`, ORM with `mode='python'`, JSON/Redis with `mode='json'`
- **Unified response**: Use `SuccessResponse` and `jsonable_encoder`
- **Permission control**: All APIs require `AuthPermission`
- **Logging**: Critical operations use `OperationLogRoute`
## Code Style
```bash
ruff check # Check
ruff check --fix # Auto-fix
# or: uv run ruff check / --fix
```
+254
View File
@@ -0,0 +1,254 @@
---
layout: doc
title: Changelog
description: "Version changelog: feature iterations, performance optimizations, bug fixes across v1.0 → v3.1.0."
sidebar: false
aside: false
---
<script setup>
import { versions } from '../../data/changelog'
const labels = {
features: '✨ New Features',
improvements: '🚀 Improvements',
fixes: '🐛 Bug Fixes',
}
</script>
<div class="changelog-page">
<div class="changelog-hero">
<h1 class="changelog-title">What's New</h1>
<p class="changelog-subtitle">Continuous iteration to improve development efficiency</p>
</div>
<div class="timeline">
<div
v-for="(item, index) in versions"
:key="item.version"
class="timeline-item"
:class="{ 'timeline-item--last': index === versions.length - 1 }"
>
<div class="timeline-marker">
<div class="timeline-dot"></div>
</div>
<div class="timeline-content">
<div class="version-header">
<span class="version-tag">{{ item.version }}</span>
<span class="version-date">{{ item.date }}</span>
</div>
<div class="version-card">
<div v-if="item.features.length" class="version-section">
<div class="section-label section-label--new">{{ labels.features }}</div>
<ul class="feature-list">
<li v-for="feature in item.features" :key="feature">{{ feature }}</li>
</ul>
</div>
<div v-if="item.improvements.length" class="version-section">
<div class="section-label section-label--improved">{{ labels.improvements }}</div>
<ul class="feature-list">
<li v-for="improvement in item.improvements" :key="improvement">{{ improvement }}</li>
</ul>
</div>
<div v-if="item.fixes.length" class="version-section">
<div class="section-label section-label--fixed">{{ labels.fixes }}</div>
<ul class="feature-list">
<li v-for="fix in item.fixes" :key="fix">{{ fix }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<style scoped>
.changelog-page {
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem 8rem;
}
.changelog-hero {
text-align: center;
margin-bottom: 5rem;
}
.changelog-title {
font-size: clamp(2.5rem, 6vw, 2rem);
font-weight: 800;
background: var(--vp-brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.changelog-subtitle {
font-size: 1.2rem;
color: var(--vp-c-text-2);
}
.timeline {
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #5B6CF7, #8B5CF6, #EC4899);
border-radius: 1px;
}
.timeline-item {
position: relative;
padding-left: 40px;
padding-bottom: 3rem;
}
.timeline-item--last {
padding-bottom: 0;
}
.timeline-marker {
position: absolute;
left: 0;
top: 6px;
}
.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, #5B6CF7, #8B5CF6);
border: 3px solid var(--vp-c-bg);
box-shadow: 0 0 0 2px #5B6CF7;
}
.timeline-content {
flex: 1;
}
.version-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.version-tag {
font-size: 1.5rem;
font-weight: 700;
color: var(--vp-c-text-1);
}
.version-date {
font-size: 0.9rem;
color: var(--vp-c-text-3);
}
.version-card {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 16px;
padding: 1.5rem 2rem;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.version-card:hover {
border-color: var(--vp-c-brand-1);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(91, 108, 247, 0.15);
}
.version-section {
margin-bottom: 1.25rem;
}
.version-section:last-child {
margin-bottom: 0;
}
.section-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 6px;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-label--new {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.section-label--improved {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.section-label--fixed {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
position: relative;
padding-left: 1.25rem;
margin-bottom: 0.5rem;
color: var(--vp-c-text-2);
line-height: 1.6;
}
.feature-list li:last-child {
margin-bottom: 0;
}
.feature-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.6rem;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--vp-c-text-3);
}
@media (max-width: 640px) {
.changelog-page {
padding: 2rem 1rem 4rem;
}
.timeline::before {
left: 4px;
}
.timeline-item {
padding-left: 30px;
}
.timeline-dot {
width: 12px;
height: 12px;
}
.version-card {
padding: 1.25rem;
}
}
</style>
+164
View File
@@ -0,0 +1,164 @@
---
layout: doc
outline: "deep"
title: Deployment Guide
description: "Deployment guide: Docker Compose, production hardening, Nginx + SSL, multi-environment config."
---
# Deployment Guide
## Deployment Overview
FastApiAdmin supports:
- **Docker Compose** (recommended): Fast, portable
- **Manual deployment**: For highly customized setups
- **Cloud services**: Alibaba Cloud, Tencent Cloud, etc.
## Docker Compose Deployment (Recommended)
> See [docker/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/docker/README.md) for details.
### 1. Prerequisites
- Docker ≥ 20.10
- Docker Compose v2
- Ports 80 and 443 open
### 2. Install Docker
```bash
# Ubuntu / Debian
sudo apt update && sudo apt install docker.io docker-compose -y
# CentOS / RHEL
sudo yum install docker docker-compose -y
# Start & enable
sudo systemctl start docker && sudo systemctl enable docker
```
### 3. Deploy
```bash
git clone https://github.com/fastapiadmin/FastApiAdmin.git
cd FastApiAdmin
# Configure environment
cp docker/.env.example docker/.env
# Edit docker/.env with DB passwords, Redis password, etc.
# Deploy
chmod +x deploy.sh
./deploy.sh
```
### 4. Post-Deployment
#### SSL Certificate
```bash
# Self-signed (testing)
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout docker/nginx/ssl/server.key \
-out docker/nginx/ssl/server.pem \
-subj "/CN=your-domain.com"
# Let's Encrypt (production)
sudo apt install certbot
sudo certbot certonly --standalone -d your-domain.com
# Copy certs to docker/nginx/ssl/
```
#### Domain
Add an A record pointing to your server IP.
### 5. Service Management
| Command | Description |
|---------|-------------|
| `./deploy.sh` | Full deployment |
| `./deploy.sh logs` | View logs |
| `./deploy.sh stop` | Stop services |
| `./deploy.sh restart` | Restart services |
### 6. Access
| Service | URL |
|---------|-----|
| Frontend | `https://domain/web` |
| API Docs | `https://domain/api/v1/docs` |
## Manual Deployment
### Backend
```bash
cd FastapiAdmin/backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
cp env/.env.dev.example env/.env.prod # Edit as needed
# Start with Gunicorn + Uvicorn
pip install gunicorn uvloop
gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app --bind 0.0.0.0:8001 --daemon
```
### Frontend
```bash
cd FastapiAdmin/frontend/web
pnpm install && pnpm run build
# Deploy dist/ to Nginx or any web server
```
### Nginx Example
```nginx
server {
listen 80;
server_name your-domain.com;
location /web {
root /path/to/FastapiAdmin/frontend/web;
index index.html;
try_files $uri $uri/ /web/index.html;
}
location /api {
proxy_pass http://127.0.0.1:8001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```
## Mobile Deployment
### H5
```bash
cd FastapiAdmin/frontend/app
pnpm install && pnpm run build:h5
# Deploy dist/build/h5 to Nginx
```
### Mini Program
```bash
pnpm run build:mp-weixin
# Import dist/build/mp-weixin into WeChat DevTools
# Upload and submit for review
```
## Common Deployment Issues
| Issue | Solution |
|-------|----------|
| Docker container fails to start | `cd docker && docker compose logs [service]` |
| Missing env file | `cp docker/.env.example docker/.env` |
| Database connection failure | Check `.env` credentials, MySQL container status |
| Nginx 502 Bad Gateway | Check backend is running, port is correct |
| SSL certificate error | Check certificate path and validity |
| Port conflict | Change port in `.env` |
+130
View File
@@ -0,0 +1,130 @@
---
layout: doc
title: Frontend Development Guide
description: "Frontend dev guide: Vue3 + TypeScript + Element Plus, routing, state, API integration."
outline: "deep"
---
> For detailed structure, path aliases, and env config, see [frontend/web/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/frontend/web/README.md).
## Technology Stack
| Category | Choice |
|----------|--------|
| Framework | Vue 3 (Composition API / `<script setup>`) |
| Build | Vite 7 |
| Language | TypeScript |
| UI | Element Plus |
| Router | Vue Router 4 (Hash mode) |
| State | Pinia + pinia-plugin-persistedstate |
| Styles | Tailwind CSS 4, SCSS |
| HTTP | Axios |
## Project Structure
```
frontend/web/src/
├── api/ # API modules by business domain
├── assets/ # Images, fonts, global styles
├── components/ # Shared & business components
├── config/ # App configuration
├── enums/ # Enumerations
├── hooks/ # Composable functions
├── layouts/ # Layout system (left, top, mixed)
├── locales/ # i18n
├── plugins/ # Vue plugin registration
├── router/ # Static routes, dynamic routes, guards
├── store/ # Pinia modules
├── styles/ # Style system (including dark theme)
├── types/ # TypeScript types
├── utils/ # Utilities
├── views/ # Page views
├── App.vue
└── main.ts # Entry
```
## Path Aliases
| Alias | Points to |
|-------|-----------|
| `@` | `src/` |
| `@views` | `src/views` |
| `@stores` | `src/store` |
| `@utils` | `src/utils` |
## Environment Variables
Only variables prefixed with `VITE_` are injected into frontend code:
| Variable | Purpose |
|----------|---------|
| `VITE_PORT` | Dev server port |
| `VITE_API_BASE_URL` | Proxy target: backend HTTP address |
| `VITE_APP_BASE_API` | API path prefix |
| `VITE_APP_WS_ENDPOINT` | WebSocket endpoint |
| `VITE_APP_TITLE` | Page title |
| `VITE_BASE_URL` | Deployment base path |
| `VITE_ACCESS_MODE` | Menu source (frontend / backend / mixed) |
**Restart** `pnpm dev` after changing env files.
## Scripts
```bash
cd frontend/web
pnpm install
pnpm dev # Dev server (default 5173)
# Other scripts
pnpm build # Production build
pnpm type-check # TypeScript check
pnpm lint # ESLint + Prettier + Stylelint
pnpm clean:cache # Clean cache
```
## Routes & Menus
| File | Responsibility |
|------|---------------|
| `src/router/staticRoutes.ts` | Static routes, shell layout |
| `src/router/dynamicRoutes.ts` | Menu-driven dynamic routes |
| `src/router/beforeEach.ts` | Auth guard, dynamic mounting |
| `src/router/MenuProcessor.ts` | Backend menu → frontend routes |
Routes use **Hash mode**. Static routes (Layout/Login/404) register on load. Business routes are lazy `addRoute` by guard based on menu permissions.
## App Startup Flow
```
main.ts → initPlugins(app) → mount("#app")
→ App.vue → onBeforeMount: theme init
→ onMounted: bootstrap() → storage check/upgrade/site config
→ route guard beforeEach
→ storage invalidation check
→ auth check
→ dynamic route registration (menu → addRoute)
→ tab/title sync
```
## Adding a New Page
1. Create API file in `src/api/`
2. Create page component in `src/views/`
3. Register route (static or dynamic) + backend menu config
4. Keep path and name consistent across all three
## Common Issues
| Symptom | Suggestion |
|---------|-----------|
| `ECONNREFUSED` | Backend not running or wrong port |
| 401 / frequent login redirects | Token expired, clear local storage and re-login |
| `.env` changes not taking effect | Must restart `pnpm dev` |
| Dependency issues | Try `pnpm clean:cache && pnpm dev` |
| Type errors | Run `pnpm type-check` |
## Build & Deploy
- Output directory: `dist/`
- For sub-path deployment, set `VITE_BASE_URL`
- Production build may strip `console` (see `vite.config.ts`)
+450
View File
@@ -0,0 +1,450 @@
---
layout: doc
outline: "deep"
title: Development Guidelines
description: "Team dev guidelines: code style, Git workflow, code review, commit conventions, testing."
---
## 📚 Guidelines Overview
To ensure project code consistency, readability, and maintainability, the FastApiAdmin project has established the following development guidelines. All developers participating in the project should follow these guidelines.
## 🎨 Frontend Development Guidelines
### 1. Code Style
#### 1.1 TypeScript Guidelines
- Use TypeScript strict mode (`"strict": true`)
- Add type annotations for all variables, functions, and interfaces
- Avoid using `any` type unless the type is truly indeterminable
- Use interfaces to define object types, not type aliases
- Use enums to define constant sets
- Use `type` to define union types and intersection types
- Use `as const` assertions to ensure type safety
- Use `readonly` modifiers to protect immutable data
- Use `unknown` type to handle data of uncertain types
#### 1.2 Vue Guidelines
- Use Composition API
- Use `<script setup lang="ts">` syntax
- Use PascalCase for component naming
- Use camelCase for variable and function naming
- Use UPPER_SNAKE_CASE for constant naming
- Use `ref()` to define reactive variables
- Use `computed()` to define computed properties
- Use `watch()` or `watchEffect()` to monitor changes
- Use `onMounted()`, `onUnmounted()` and other lifecycle hooks
- Use `defineProps()` to define component props with types
- Use `defineEmits()` to define component events with types
- Use `defineExpose()` to define exposed component properties and methods
#### 1.3 CSS Guidelines
- Use UnoCSS atomic CSS
- Avoid using inline styles
- Use BEM naming convention (if not using UnoCSS)
- Use kebab-case for class names
- Avoid using ID selectors
- Use CSS variables for theme management
- Avoid using `!important` modifier
- Use flexbox layout to ensure cross-platform consistency
- Use CSS Grid layout appropriately
- Optimize CSS selector priority
### 2. Component Development Best Practices
- **Single Responsibility Principle**: Each component should be responsible for only one function
- **Props Design**:
- Use `required` and `default` to clearly specify props requirements
- Add validation for complex props
- Use `withDefaults()` to set default values for props
- **Events Design**:
- Use kebab-case for event naming
- Event parameter types should be clear
- Avoid passing too many parameters in events
- **Slots Design**:
- Use named slots to improve readability
- Add default content for slots
- Use scoped slots to pass data
- **Styles Design**:
- Use `scoped` styles to avoid conflicts
- Use `:deep()` selectors appropriately
- Avoid using global styles in components
### 3. State Management Best Practices
- **Modular Design**: Split stores by functional modules
- **State Definition**:
- Use `interface` to define state types
- Initialize all states
- Avoid using overly nested state structures
- **Actions Design**:
- Handle asynchronous operations
- Use try/catch to catch errors
- Use transactions when committing multiple mutations
- **Getters Design**:
- Cache calculation results
- Avoid modifying state in getters
- Use parameterized getters appropriately
### 4. API Call Best Practices
- **Modular Management**: Organize API interfaces by functional modules
- **Request Encapsulation**:
- Unified handling of request headers
- Unified error handling
- Unified loading state handling
- **Response Handling**:
- Type definitions for response data structures
- Unified handling of response status codes
- Appropriate handling of empty data and edge cases
- **Request Optimization**:
- Use debounce and throttle
- Cache results of frequent requests
- Use concurrent requests appropriately
### 5. Performance Optimization Recommendations
- **Code Splitting**: Use route lazy loading and component lazy loading
- **Resource Optimization**:
- Compress images and static resources
- Use WebP format images
- Use CDN appropriately
- **Rendering Optimization**:
- Use `v-memo` to cache calculation results
- Use `v-if` and `v-show` appropriately
- Avoid using complex expressions in templates
- **Network Optimization**:
- Use HTTP/2 or HTTP/3
- Enable Gzip or Brotli compression
- Set caching strategies appropriately
### 6. Testing Best Practices
- **Test Layering**: Unit tests, integration tests, end-to-end tests
- **Test Coverage**:
- 100% coverage for core functionality
- 80%+ coverage for complex logic
- 50%+ coverage for simple functionality
- **Testing Tools**:
- Use Vitest for unit testing
- Use Playwright for end-to-end testing
- Use Vue Test Utils for component testing
### 7. Code Review Points
- **Type Safety**: Check if TypeScript type definitions are correct
- **Code Quality**: Check if code is concise and clear
- **Performance Issues**: Check for performance bottlenecks
- **Security Issues**: Check for security vulnerabilities
- **Guideline Compliance**: Check if project development guidelines are followed
## 🐍 Backend Development Guidelines
### 1. Code Style
#### 1.1 Python Guidelines
- Follow PEP 8 code style
- Use 4 spaces for indentation
- Line length should not exceed 100 characters
- Leave two blank lines between functions and classes
- Leave one blank line between methods
- Group import statements by standard library, third-party library, and local library
#### 1.2 FastAPI Guidelines
- Use FastAPI decorators to define routes
- Use Pydantic models to define request and response data
- Use dependency injection for authentication and authorization
- Use path parameters and query parameters
- Use HTTPException for error handling
- Use Depends to inject dependencies
### 2. Directory Structure
```
backend/app/
├── api/ # API interfaces
├── common/ # Common code
├── config/ # Configuration management
├── core/ # Core functionality
├── plugin/ # Plugin system
└── utils/ # Utility functions
```
### 3. Plugin Development Guidelines
- Plugin directories should start with `module_`
- Plugins should include files such as `controller.py`, `model.py`, `schema.py`, `service.py`, `crud.py`
- Controllers should use `APIRouter` to define routes
- Route prefixes should correspond to module names (module_xxx -> /xxx)
- Controllers should use `OperationLogRoute` to record operation logs
- Interfaces should use `AuthPermission` for permission control
### 4. Database Guidelines
- Use SQLAlchemy 2.0 ORM
- Use Alembic for database migrations
- Model classes should inherit from `Base`
- Model classes should define `__tablename__` attribute
- Field naming should use snake_case
- Table names should use snake_case plural form
- Foreign keys should be defined using `ForeignKey`
- Relationships should be defined using `relationship`
### 5. Authentication and Authorization Guidelines
- Use JWT for authentication
- Use RBAC model for permission management
- Interfaces should add permission control decorators
- Permission string format: `module:controller:action`
- Permissions should be configured in role management
### 6. Error Handling Guidelines
- Use `HTTPException` for HTTP errors
- Use custom exception handling for global errors
- Error responses should have a unified format
- Errors should be logged
### 7. Logging Guidelines
- Use Python standard library `logging` module
- Log levels: DEBUG, INFO, WARNING, ERROR, CRITICAL
- Logs should include time, level, module, message, and other information
- Key operations should be logged
- Errors should be logged with detailed information
## 📦 FastApp Mobile Development Guidelines
### 1. Code Style
- Follow frontend development guidelines
- Use TypeScript strict mode
- Use Vue 3 Composition API
- Use `<script setup lang="ts">` syntax
- Use PascalCase for component naming
- Use camelCase for variable and function naming
### 2. Directory Structure
```
FastApp/src/
├── api/ # API interfaces
├── components/ # Components
├── composables/ # Composable functions
├── constants/ # Constant definitions
├── enums/ # Enum definitions
├── layouts/ # Layout components
├── pages/ # Page files
├── router/ # Router configuration
├── static/ # Static resources
├── store/ # State management
├── styles/ # Style files
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── App.vue # Application root component
└── main.ts # Application entry file
```
### 3. Page Development Guidelines
- Page components should be placed in the `pages` directory
- Page directories should use kebab-case
- Page components should include `index.vue` file
- Page components can include auxiliary files such as `data.ts`, `types.ts`
- Page components should use lifecycle hooks such as `onLoad()`, `onShow()`
- Page navigation should use APIs such as `uni.navigateTo()`, `uni.switchTab()`
### 4. API Call Guidelines
- Follow frontend API call guidelines
- Use the encapsulated `request.ts` utility
- API interfaces should be classified by module
- API calls should handle error situations
- API calls should display loading state
### 5. Cross-Platform Adaptation Guidelines
- Use conditional compilation to handle platform differences
- Use `#ifdef`, `#ifndef`, `#endif` directives
- Platform-specific APIs should add conditional compilation
- Styles should consider differences between platforms
- Layouts should use flexbox to ensure cross-platform consistency
## 🎯 Git Commit Guidelines
### 1. Branch Management
- `master`: Main branch, used for releasing production versions
- `dev`: Development branch, used for integration development
- `feature/xxx`: Feature branch, used for developing new features
- `bugfix/xxx`: Fix branch, used for fixing bugs
- `hotfix/xxx`: Hotfix branch, used for emergency fixes in production environment
### 2. Commit Message Guidelines
Commit messages should follow the following format:
```
<type>(<scope>): <subject>
<body>
<footer>
```
#### 2.1 Type
- `feat`: New feature
- `fix`: Bug fix
- `docs`: Documentation changes
- `style`: Code style changes
- `refactor`: Code refactoring
- `test`: Test code changes
- `chore`: Build tool or dependency changes
- `revert`: Revert commit
#### 2.2 Scope
- Optional, used to specify the scope of changes
- For example: `api`, `component`, `page`, `store`, etc.
#### 2.3 Subject
- Brief commit message, not exceeding 50 characters
- Use imperative mood, starting with a verb
- First letter lowercase
- No period at the end
#### 2.4 Body
- Optional, detailed commit message
- Each line not exceeding 72 characters
- Explain why, not how
#### 2.5 Footer
- Optional, used to reference issues or bugs
- For example: `Closes #123`, `Fixes #456`
### 3. Commit Examples
```
feat(api): Add user login endpoint
- Implement user login functionality
- Add JWT authentication
- Handle login error cases
Closes #123
```
```
fix(frontend): Fix homepage carousel display issue
- Fix carousel height calculation error
- Optimize carousel transition animation
Fixes #456
```
```
docs: Update development documentation
- Add API documentation
- Improve deployment guide
```
### 4. Pull Request Guidelines
- Pull Requests should merge from feature branches to dev branch
- Pull Request titles should be clear and semantic
- Pull Request descriptions should detail the changes
- Pull Requests should include related issue links
- Pull Requests should pass all tests
- Pull Requests should be reviewed by at least one reviewer
## 🔧 Toolchain Guidelines
### 1. Frontend Toolchain
- Use Vite as build tool
- Use ESLint for code linting
- Use Prettier for code formatting
- Use Stylelint for style linting
- Use Husky for Git hook management
- Use Commitlint for commit message checking
### 2. Backend Toolchain
- Use Poetry or pip for dependency management
- Use Pylint or Flake8 for code linting
- Use Black for code formatting
- Use MyPy for type checking
- Use pytest for testing
## 💡 Development Process Guidelines
### 1. Requirements Analysis
- Clarify functional requirements
- Analyze business logic
- Determine technical solutions
### 2. Design Phase
- Design database table structure
- Design API interfaces
- Design frontend pages
- Design component structure
### 3. Development Phase
- Create branches
- Implement features
- Write tests
- Run tests
### 4. Testing Phase
- Unit tests
- Integration tests
- End-to-end tests
- Performance tests
### 5. Deployment Phase
- Build production version
- Deploy to test environment
- Perform regression testing
- Deploy to production environment
### 6. Maintenance Phase
- Monitor system running status
- Handle bugs and issues
- Perform performance optimization
- Perform feature iterations
## 📚 Reference Materials
- [TypeScript Official Documentation](https://www.typescriptlang.org/docs/)
- [Vue Official Documentation](https://vuejs.org/docs/)
- [FastAPI Official Documentation](https://fastapi.tiangolo.com/)
- [SQLAlchemy Official Documentation](https://docs.sqlalchemy.org/)
- [PEP 8 Style Guide](https://peps.python.org/pep-0008/)
- [Conventional Commits](https://www.conventionalcommits.org/)
- [ESLint Official Documentation](https://eslint.org/docs/)
- [Prettier Official Documentation](https://prettier.io/docs/en/)
## 🤝 Contribution Guidelines
If you have any suggestions or improvements for the development guidelines, please submit an Issue or Pull Request. We will carefully consider every suggestion and continuously improve the development guidelines.
## 📄 License Agreement
This development guidelines document adopts the MIT License, consistent with the FastApiAdmin project.
File diff suppressed because it is too large Load Diff
+100
View File
@@ -0,0 +1,100 @@
---
layout: doc
outline: "deep"
title: Project Overview
description: "Project overview: what is FastApiAdmin, full-stack architecture, multi-end delivery."
---
<div style="text-align: center;">
<div align="center">
<img src="/logo.svg" width="150" height="150" alt="logo" />
</div>
<h1>FastApiAdmin <sup style="background-color: #28a745; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.4em; vertical-align: super; margin-left: 5px;">v3.1.0</sup></h1>
<h3>Modern, Open Source, Full-Stack Rapid Development Platform</h3>
<p>If you like this project, please give it a ⭐️!</p>
</div>
## Project Introduction
**FastApiAdmin** is a **completely open-source, highly modular, and technologically advanced modern rapid development platform** designed to help developers efficiently build high-quality enterprise-level systems. It adopts a **frontend-backend separation architecture**, integrating the Python backend framework `FastAPI` and the frontend framework `Vue3` for multi-platform unified development.
> **Design Philosophy**: With modularity and loose coupling at its core, pursuing rich functionality, clean APIs, comprehensive documentation, and easy maintenance.
## Engineering Structure
```sh
FastapiAdmin/
├─ backend/ # Backend (FastAPI + Python)
├─ frontend/ # Frontend projects
│ ├── web/ # Web frontend (Vue3 + Element Plus)
│ ├── app/ # Mobile (UniApp)
│ └── docs/ # Documentation site (VitePress)
├─ docker/ # Docker deployment config
│ ├── backend/ # Backend Dockerfile
│ ├── nginx/ # Nginx config + static files
│ ├── mysql/ # MySQL data directory
│ └── redis/ # Redis data directory
├─ deploy.sh # Deployment script
├─ deploy.bat # Windows startup script
├─ LICENSE # MIT License
└─ README.md # Project docs
```
> Detailed directory structures: [Frontend](./frontend), [Backend](./backend), [Mobile](./miniprogram), [Deployment](./deployment).
## Core Highlights
| Feature | Description |
|---------|-------------|
| 🌐 Full-Stack | Frontend-backend separation, Python (FastAPI) + Vue3 |
| 🧱 Modular | Highly decoupled, plug-in architecture, auto route discovery |
| ⚡️ High Performance | Async framework + Redis caching |
| 🔒 Security | JWT OAuth2, RBAC permission control |
| 🚀 Deployment | Docker Compose one-click deployment |
| 📖 Developer Friendly | Complete documentation + Chinese UI + visual toolchain |
| 📱 Mobile Support | UniApp-based FastApp, multi-platform (H5, Mini Program, App) |
| 🛠️ Code Generator | Built-in code generation tools |
## Technology Stack
| Type | Technology |
|------|------------|
| Backend Framework | FastAPI / Uvicorn / Pydantic 2.0 / Alembic |
| ORM | SQLAlchemy 2.0 |
| Scheduled Tasks | APScheduler |
| Auth | PyJWT |
| Frontend Framework | Vue3 / Vite / Pinia / TypeScript |
| Web UI | Element Plus |
| Mobile | UniApp / Wot Design Uni |
| Database | MySQL / PostgreSQL / SQLite |
| Cache | Redis |
| Deployment | Docker / Nginx / Docker Compose |
## Built-in Modules
| Module | Features | Description |
|--------|----------|-------------|
| Dashboard | Workbench, Analysis | System overview and data analysis |
| System Management | Users, Roles, Menus, Departments, Positions, Dictionaries, Config, Notices | Core system management |
| Monitoring | Online users, Server, Cache | System health monitoring |
| Task Management | Scheduled tasks | Async task scheduling |
| Log Management | Operation logs | User behavior auditing |
| Development Tools | Code generation, Form builder, API docs | Developer productivity tools |
| File Management | File storage | Unified file management |
## Package Architecture: Domain Vertical Slice vs Layer-First
This is about **source directory organization**, separate from the MVC/Controller-Service-CRUD **logical layering** which still exists.
| Approach | Organization | Typical Structure |
|----------|-------------|-------------------|
| **Layer-First** | Group by technical layer | Top-level `models/`, `schemas/`, `services/`, `controllers/` |
| **Vertical Slice** (this project) | Group by business domain | `api/v1/module_*/` with `controller.py`, `service.py`, `crud.py`, `model.py`, `schema.py` |
**This project uses vertical slice by domain.**
**Rationale**:
- **Domain boundaries as units**: Modules like system management and monitoring each have independent directories. Parallel development avoids conflicts.
- **Future-proof extraction**: To split a module into its own service/repo, move one directory. Layer-first requires pulling from multiple top-level dirs.
- **Layering still exists**: Controller → Service → CRUD → Model **logical layers** are **nested inside** each domain package, rather than being the primary organizational axis.
+119
View File
@@ -0,0 +1,119 @@
---
layout: doc
outline: "deep"
title: Quick Start
description: "Spin up a working MVP in 15-30 minutes: prerequisites, source, Docker Compose, first run."
---
## Demo Environment
- Website: [https://service.fastapiadmin.com](https://service.fastapiadmin.com)
- Web: [https://service.fastapiadmin.com/web](https://service.fastapiadmin.com/web)
- Mobile: [https://service.fastapiadmin.com/app](https://service.fastapiadmin.com/app)
- Demo account: `admin` / `123456` (**for the official demo site only — do not use in production**; change the default password immediately after first deployment)
## Prerequisites
| Type | Technology | Version |
|------|------------|---------|
| Backend | Python | ≥ 3.10 (3.12 recommended) |
| Backend | FastAPI | 0.109+ |
| Frontend | Node.js | ≥ 20.0 |
| Frontend | pnpm | ≥ 9.0 |
| Web UI | Element Plus | 2.10+ |
| Mobile | UniApp | 3.0+ |
| App UI | Wot Design Uni | 1.9+ |
| Database | MySQL | 8.0+ / PostgreSQL 13+ / SQLite |
| Middleware | Redis | 7.0+ |
## Get the Code
```bash
git clone https://github.com/fastapiadmin/FastApiAdmin.git
# or via Gitee
git clone https://gitee.com/fastapiadmin/FastApiAdmin.git
```
## Backend Setup
### 1. Configure Environment
```bash
cd FastapiAdmin/backend
cp env/.env.dev.example env/.env.dev
# Edit env/.env.dev with your database, Redis, JWT secret, etc.
```
### 2. Install & Start
```bash
# Recommended: use uv (matches pyproject.toml)
uv sync
uv run main.py run --env=dev
# Or traditional pip/venv
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -r requirements.txt
python main.py run --env=dev
```
**First start auto-initializes database schema & seed data** — no manual migration needed.
### 3. Database Migrations (when changing models)
```bash
python main.py revision --env=dev
python main.py upgrade --env=dev
# or: uv run main.py revision/upgrade --env=dev
```
## Frontend Setup
```bash
# Web Frontend (Vue3)
cd FastapiAdmin/frontend/web
pnpm install
pnpm run dev
# Mobile (UniApp)
cd FastapiAdmin/frontend/app
pnpm install
pnpm run dev:h5
# Documentation Site (VitePress)
cd FastapiAdmin/frontend/docs
pnpm install
pnpm run dev
```
## Local Access URLs
| Service | URL |
|---------|-----|
| Web Frontend | `http://127.0.0.1:5173` |
| Mobile H5 | `http://127.0.0.1:8080` |
| Documentation | `http://127.0.0.1:5174` |
| Backend API | `http://127.0.0.1:8001` |
| Swagger | `http://127.0.0.1:8001/docs` |
## Docker Deployment
See [Deployment Guide](./deployment), quick commands:
```bash
chmod +x deploy.sh
./deploy.sh # Full deployment
./deploy.sh logs # View logs
./deploy.sh stop # Stop services
./deploy.sh restart # Restart services
```
## FAQ
| Question | Answer |
|----------|--------|
| Backend fails with DB connection error | Ensure empty DB created, `.env.dev` credentials correct |
| Frontend CORS errors | Confirm backend running, `VITE_API_BASE_URL` correct |
| Do I need migrations before first start? | **No** — auto-initialized on first start |
| Node.js version mismatch | Use nvm: `nvm install 20` |
+110
View File
@@ -0,0 +1,110 @@
---
layout: doc
title: Why Choose FastApiAdmin?
description: Why FastApiAdmin? Comparison with other admin frameworks — async backend, full-stack fusion.
outline: "deep"
---
If you're evaluating a rapid development platform for admin/dashboard systems, here's how FastApiAdmin compares.
## How We Compare
| Dimension | FastApiAdmin | Django Admin / Flask-Admin | Frontend-only Templates |
|-----------|-------------|---------------------------|------------------------|
| **Backend** | FastAPI async, Pydantic type-safe | Django/Flask sync-first | None, build yourself |
| **Frontend** | Vue3 + TypeScript + Element Plus, ready-to-use | Jinja templates | Vue3 + Element Plus |
| **Mobile** | UniApp multi-platform (H5/Mini Program/App) | None | None |
| **Code Generator** | Built-in, DB table → full CRUD | Extra plugins needed | None |
| **Deployment** | Docker Compose one-click, Nginx + SSL included | Manual setup | Manual setup |
| **Architecture** | Vertical slice by domain, auto plugin registration | Layer-first | Layer-first |
| **Database** | MySQL / PostgreSQL / SQLite, Alembic migrations | Django ORM migrations | None |
## Technology Rationale
### Why FastAPI over Django/Flask?
| Feature | FastAPI | Django | Flask |
|---------|---------|--------|-------|
| Async native | ✅ Built-in async/await | ⚠️ 3.1+ partial | ❌ Extensions needed |
| Auto API docs | ✅ Swagger + Redoc auto-generated | ❌ drf-spectacular needed | ❌ Plugins needed |
| Type safety | ✅ Pydantic request/response validation | ❌ Runtime only | ❌ No built-in |
| Performance | ~30k req/s | ~10k req/s | ~15k req/s |
| Learning curve | Moderate | Steep | Gentle |
FastAPI's **auto type validation + auto docs + async performance** is a combo advantage — you don't trade speed for developer experience.
### Why Vue3 over React?
| Feature | Vue3 | React |
|---------|------|-------|
| Learning curve | Low (templates + Composition API) | Medium (JSX + Hooks mental model) |
| Official ecosystem | Router, Pinia, Vite unified | Third-party fragmentation |
| TypeScript | Composition API first-class | Good support |
| Chinese community | Very active | Active |
For admin/dashboard scenarios, Vue3 + Element Plus provides superior developer efficiency and component completeness.
### Why Vertical Slice by Domain?
```
# Vertical slice (this project)
api/v1/module_system/user/ # All user code in one directory
├── controller.py
├── service.py
├── crud.py
├── model.py
└── schema.py
# Layer-first (common approach)
models/user.py # User model here
schemas/user.py # User schema elsewhere
services/user.py # User logic yet elsewhere
```
| Scenario | Vertical Slice (ours) | Layer-First |
|----------|----------------------|-------------|
| Parallel dev (different modules/people) | ✅ Independent dirs, zero conflicts | ❌ Same model.py file |
| Extract to sub-repo/service | ✅ Move whole directory | ❌ Pull from multiple dirs |
| Browse all models at once | ❌ Use IDE search | ✅ One models/ dir |
We chose vertical slicing to **prioritize team parallelism and decoupling**. For schema overview, use IDE, Alembic, or DB tools.
## What You Get Out of the Box
Features FastApiAdmin provides that raw frameworks or frontend-only templates **don't**:
| Feature | FastApiAdmin | Django Admin | Frontend Template |
|---------|:-----------:|:-----------:|:-----------------:|
| RBAC (menu/button/data level) | ✅ | ⚠️ Basic | ❌ |
| Code generator (table → CRUD) | ✅ | ❌ | ❌ |
| Server + cache monitoring | ✅ | ❌ | ❌ |
| Operation log auditing | ✅ | ✅ | ❌ |
| Scheduled task management | ✅ | ❌ | ❌ |
| WebSocket real-time push | ✅ | ❌ | ❌ |
| Mobile (H5/Mini Program) | ✅ | ❌ | ❌ |
## Summary
FastApiAdmin is the **best fit** if you need:
- ✅ Python stack, want FastAPI's async performance
- ✅ Vue3 frontend team, need production-ready admin template
- ✅ Mobile support (H5/Mini Program)
- ✅ Don't want to build RBAC, logging, monitoring from scratch
- ✅ Multi-developer, need low coupling between modules
## Next Steps
If you've decided to give it a try, follow this path:
| Order | Doc | Time | Goal |
|:-----:|-----|:----:|------|
| 1 | [Quick Start](/en/guide/start) | 10 min | Run locally, see the login page and dashboard |
| 2 | [Backend Guide](/en/guide/backend) | 15 min | Add your first business module |
| 3 | [Frontend Guide](/en/guide/frontend) | 15 min | Add your first page |
| 4 | [Deployment Guide](/en/guide/deployment) | 20 min | Push from local to production |
Or just [clone the repo](https://github.com/fastapiadmin/FastApiAdmin) and explore the code alongside the docs.
::: tip Stuck somewhere?
[Common Issues](/en/guide/why#common-issues) · [GitHub Issues](https://github.com/fastapiadmin/FastApiAdmin/issues) · [Gitee Issues](https://gitee.com/fastapiadmin/FastapiAdmin/issues)
:::
+56
View File
@@ -0,0 +1,56 @@
---
layout: home
editLink: true
lastUpdated: true
hero:
name: "FastApiAdmin"
text: "Web · H5 · Mini-Program, one stack"
tagline: Built on FastAPI + Vue3 + TypeScript, frontend and backend share types. 30+ business modules out of the box, the AI Code Generator covers 90% of routine CRUD, and Docker Compose brings the whole stack online in one command.
image:
src: /logo.svg
alt: AI Code Generator — select a table, get the full CRUD
actions:
- theme: brand
text: Quick Start
link: /en/guide/start
- theme: alt
text: Live Demo
link: https://service.fastapiadmin.com/web
target: _blank
- theme: alt
text: Mobile
link: https://service.fastapiadmin.com/app
target: _blank
features:
- icon: 📦
title: Full-Stack & Ready
details: Complete delivery — FastAPI async backend + Vue3 web + UniApp mobile. Clone, run, and you're done. Zero extra configuration.
- icon: ⚡
title: High-Performance Async
details: Native async/await in FastAPI, Pydantic auto type validation, Redis caching. Built for high concurrency from day one.
- icon: 🤖
title: AI Code Generator
details: Select a database table → AI generates Controller / Service / Model / Vue pages. Routine CRUD is mostly automatic, so the team can focus on the business logic.
- icon: 🛡️
title: Enterprise RBAC
details: JWT + OAuth2 authentication with menu, button, and data-level permission control. Full operation audit logging.
- icon: 🐳
title: One-Click Docker Deploy
details: Docker Compose orchestration for the entire stack (Nginx + SSL included). One command to production with multi-environment config.
- icon: 📱
title: Web + Mobile Unified
details: UniApp-based solution — one codebase for H5, WeChat, Alipay Mini Programs, and native App.
---
<script setup lang="ts">
import HomeSections from "../../.vitepress/components/HomeSections.vue";
</script>
<HomeSections />
+8
View File
@@ -0,0 +1,8 @@
/// <reference types="vitepress/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<Record<string, never>, Record<string, never>, any>
export default component
}
+151
View File
@@ -0,0 +1,151 @@
---
layout: doc
title: 后端开发指南
description: FastApiAdmin 后端开发指南,涵盖 FastAPI 路由、SQLAlchemy 2.0 ORM、Alembic 迁移、Redis 缓存、APScheduler 定时任务、日期序列化约定等核心模块使用方法。
outline: "deep"
---
> 目录结构、迁移命令、日期序列化约定等详细说明见 [backend/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/backend/README.md)。
## 技术栈
| 技术 | 说明 |
|------|------|
| FastAPI 0.115+ | 现代异步 Web 框架 |
| SQLAlchemy 2.0 | ORM 框架 |
| Alembic 1.15+ | 数据库迁移工具 |
| Pydantic 2.x | 数据验证与序列化 |
| APScheduler 3.11+ | 定时任务调度 |
| Redis | 缓存与会话存储 |
| Uvicorn | ASGI 服务器 |
## 项目结构
```
backend/app/
├── api/v1/ # API 接口(按业务模块分包)
│ ├── module_system/ # 系统管理(用户、角色、菜单等)
│ ├── module_monitor/ # 监控管理
│ └── module_ai/ # AI 功能
├── common/ # 公共组件(常量、枚举、响应封装)
├── config/ # 项目配置
├── core/ # 核心模块(数据库、安全、权限、中间件)
├── module_task/ # 定时任务
├── plugin/ # 插件目录(二开目录)
└── utils/ # 工具类
```
## 模块分层
每个业务模块采用统一的分层结构(按业务特性竖切):
```
module_*/<子域>/
├── controller.py # HTTP 请求处理
├── service.py # 业务逻辑
├── crud.py # 数据库操作
├── model.py # ORM 模型
├── schema.py # Pydantic 验证
└── param.py # 请求参数
```
> 关于分包理念(按业务竖切 vs 按技术层次分包)的讨论见 [根目录 README](https://github.com/fastapiadmin/FastapiAdmin/blob/master/README.md#packaging-philosophy)。
## 快速开始
```bash
cd backend
# 推荐使用 uv
uv sync
uv run main.py run --env=dev
# 或传统方式
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python main.py run --env=dev
```
**首次启动会自动初始化数据库表与基础数据**。
## 数据库迁移
仅在你修改了 ORM 模型后使用:
```bash
python main.py revision --env=dev
python main.py upgrade --env=dev
# 或 uv run main.py revision/upgrade --env=dev
```
## 环境配置
| 文件 | 说明 |
|------|------|
| `env/.env.dev.example` | 开发环境模板 |
| `env/.env.dev` | 开发环境(需自行创建) |
| `env/.env.prod.example` | 生产环境模板 |
主要配置项:数据库连接、Redis、JWT 密钥、端口等。
## 插件开发(二开)
项目采用**插件化架构**,建议在 `backend/app/plugin/` 下开发:
### 自动路由注册机制
1. 控制器文件命名为 `controller.py`
2. 路由自动映射:`module_xxx` → `/xxx`
3. 系统自动扫描 `plugin/` 下所有 `controller.py` 并注册路由
### 开发步骤
1. 在 `backend/app/plugin/` 下创建 `module_yourfeature/`
2. 依次编写 `model.py` → `schema.py` → `crud.py` → `service.py` → `controller.py`
3. 路由自动注册,无需手动配置
### 控制器示例
```python
from fastapi import APIRouter, Depends, Path
from fastapi.responses import JSONResponse
from app.common.response import SuccessResponse
from app.core.router_class import OperationLogRoute
from app.core.dependencies import AuthPermission
from app.api.v1.module_system.auth.schema import AuthSchema
from .service import YourFeatureService
YourFeatureRouter = APIRouter(
route_class=OperationLogRoute,
prefix="/yourcontroller",
tags=["你的功能模块"],
)
@YourFeatureRouter.get("/detail/{id}", summary="获取详情")
async def get_detail(
id: int = Path(..., description="功能ID"),
auth: AuthSchema = Depends(AuthPermission(["module_yourfeature:yourcontroller:detail"])),
) -> JSONResponse:
result = await YourFeatureService.detail_service(id=id, auth=auth)
return SuccessResponse(data=result)
```
## 代码生成器
内置代码生成器可根据数据库表结构自动生成前后端 CRUD 代码。登录系统后进入「代码生成」模块即可使用。
## 后端约定
- **日期序列化**:使用 Pydantic `PlainSerializer(..., when_used='json')`,ORM 用 `mode='python'`,JSON/Redis 用 `mode='json'`
- **统一响应**:使用 `SuccessResponse` 和 `jsonable_encoder`
- **权限控制**:所有 API 接口需添加 `AuthPermission` 权限控制
- **日志记录**:关键操作使用 `OperationLogRoute` 记录
## 代码规范
```bash
ruff check # 检查
ruff check --fix # 自动修复
# 或 uv run ruff check / --fix
```
+254
View File
@@ -0,0 +1,254 @@
---
layout: doc
title: 更新日志
description: FastApiAdmin 版本更新日志,记录 v1.x → v3.1.0 各版本功能迭代、性能优化、Bug 修复与破坏性变更。
sidebar: false
aside: false
---
<script setup>
import { versions } from '../data/changelog'
const labels = {
features: '✨ 新功能',
improvements: '🚀 改进',
fixes: '🐛 修复',
}
</script>
<div class="changelog-page">
<div class="changelog-hero">
<h1 class="changelog-title">更新日志</h1>
<p class="changelog-subtitle">持续迭代,让开发效率不断提升</p>
</div>
<div class="timeline">
<div
v-for="(item, index) in versions"
:key="item.version"
class="timeline-item"
:class="{ 'timeline-item--last': index === versions.length - 1 }"
>
<div class="timeline-marker">
<div class="timeline-dot"></div>
</div>
<div class="timeline-content">
<div class="version-header">
<span class="version-tag">{{ item.version }}</span>
<span class="version-date">{{ item.date }}</span>
</div>
<div class="version-card">
<div v-if="item.features.length" class="version-section">
<div class="section-label section-label--new">{{ labels.features }}</div>
<ul class="feature-list">
<li v-for="feature in item.features" :key="feature">{{ feature }}</li>
</ul>
</div>
<div v-if="item.improvements.length" class="version-section">
<div class="section-label section-label--improved">{{ labels.improvements }}</div>
<ul class="feature-list">
<li v-for="improvement in item.improvements" :key="improvement">{{ improvement }}</li>
</ul>
</div>
<div v-if="item.fixes.length" class="version-section">
<div class="section-label section-label--fixed">{{ labels.fixes }}</div>
<ul class="feature-list">
<li v-for="fix in item.fixes" :key="fix">{{ fix }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<style scoped>
.changelog-page {
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem 8rem;
}
.changelog-hero {
text-align: center;
margin-bottom: 5rem;
}
.changelog-title {
font-size: clamp(2.5rem, 6vw, 2rem);
font-weight: 800;
background: var(--vp-brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.changelog-subtitle {
font-size: 1.2rem;
color: var(--vp-c-text-2);
}
.timeline {
position: relative;
}
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #5B6CF7, #8B5CF6, #EC4899);
border-radius: 1px;
}
.timeline-item {
position: relative;
padding-left: 40px;
padding-bottom: 3rem;
}
.timeline-item--last {
padding-bottom: 0;
}
.timeline-marker {
position: absolute;
left: 0;
top: 6px;
}
.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: linear-gradient(135deg, #5B6CF7, #8B5CF6);
border: 3px solid var(--vp-c-bg);
box-shadow: 0 0 0 2px #5B6CF7;
}
.timeline-content {
flex: 1;
}
.version-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.version-tag {
font-size: 1.5rem;
font-weight: 700;
color: var(--vp-c-text-1);
}
.version-date {
font-size: 0.9rem;
color: var(--vp-c-text-3);
}
.version-card {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 16px;
padding: 1.5rem 2rem;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.version-card:hover {
border-color: var(--vp-c-brand-1);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(91, 108, 247, 0.15);
}
.version-section {
margin-bottom: 1.25rem;
}
.version-section:last-child {
margin-bottom: 0;
}
.section-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 6px;
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-label--new {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.section-label--improved {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.section-label--fixed {
background: rgba(249, 115, 22, 0.15);
color: #f97316;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
position: relative;
padding-left: 1.25rem;
margin-bottom: 0.5rem;
color: var(--vp-c-text-2);
line-height: 1.6;
}
.feature-list li:last-child {
margin-bottom: 0;
}
.feature-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.6rem;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--vp-c-text-3);
}
@media (max-width: 640px) {
.changelog-page {
padding: 2rem 1rem 4rem;
}
.timeline::before {
left: 4px;
}
.timeline-item {
padding-left: 30px;
}
.timeline-dot {
width: 12px;
height: 12px;
}
.version-card {
padding: 1.25rem;
}
}
</style>
+177
View File
@@ -0,0 +1,177 @@
---
layout: doc
outline: "deep"
title: 部署指南
description: FastApiAdmin 多种部署方式详解:Docker Compose 一键部署、生产环境 Nginx + SSL 配置、CI/CD 自动化、多节点架构与性能调优。
---
## 部署方式概述
FastApiAdmin 支持以下部署方式:
- **Docker Compose 部署**(推荐):快速、便捷、可移植
- **手动部署**:适用于需要高度定制的场景
- **云服务部署**:可部署到阿里云、腾讯云等
## 🐳 Docker Compose 部署(推荐)
> 详细说明见项目根目录 [docker/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/docker/README.md)。
### 1. 环境准备
- Docker ≥ 20.10
- Docker Compose v2
- 确保服务器开放 80、443 端口
### 2. 安装 Docker
```bash
# Ubuntu / Debian
sudo apt update && sudo apt install docker.io docker-compose -y
# CentOS / RHEL
sudo yum install docker docker-compose -y
# 启动并开机自启
sudo systemctl start docker && sudo systemctl enable docker
```
### 3. 部署步骤
```bash
git clone https://github.com/fastapiadmin/FastApiAdmin.git
cd FastApiAdmin
# 配置环境变量
cp docker/.env.example docker/.env
# 编辑 docker/.env,填写数据库密码、Redis 密码等
# 一键部署
chmod +x deploy.sh
./deploy.sh
```
### 4. 部署后配置
#### SSL 证书
```bash
# 测试用自签名证书
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout docker/nginx/ssl/server.key \
-out docker/nginx/ssl/server.pem \
-subj "/CN=your-domain.com"
# 生产环境使用 Let's Encrypt
sudo apt install certbot
sudo certbot certonly --standalone -d your-domain.com
# 将证书复制到 docker/nginx/ssl/ 目录
```
#### 域名配置
在域名注册商添加 A 记录,指向服务器 IP。
### 5. 服务管理
| 命令 | 说明 |
|------|------|
| `./deploy.sh` | 完整部署 |
| `./deploy.sh logs` | 查看日志 |
| `./deploy.sh stop` | 停止服务 |
| `./deploy.sh restart` | 重启服务 |
### 6. 访问地址
| 服务 | 地址 |
|------|------|
| 前端 | `https://域名/web` |
| API 文档 | `https://域名/api/v1/docs` |
## 📦 手动部署
### 后端部署
```bash
# 依赖安装
cd FastapiAdmin/backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
# 配置环境
cp env/.env.dev.example env/.env.prod
# 编辑 env/.env.prod
# 启动(使用 Gunicorn + Uvicorn)
pip install gunicorn uvloop
gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app --bind 0.0.0.0:8001 --daemon
```
### 前端部署
```bash
cd FastapiAdmin/frontend/web
pnpm install && pnpm run build
# 将 dist/ 目录部署到 Nginx 或其他 Web 服务器
```
### Nginx 配置示例
```nginx
server {
listen 80;
server_name your-domain.com;
# 前端静态文件
location /web {
root /path/to/FastapiAdmin/frontend/web;
index index.html;
try_files $uri $uri/ /web/index.html;
}
# 后端 API
location /api {
proxy_pass http://127.0.0.1:8001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```
## 📱 移动端部署
### H5 部署
```bash
cd FastapiAdmin/frontend/app
pnpm install && pnpm run build:h5
# 将 dist/build/h5 目录部署到 Nginx
# Nginx 配置片段
location /app {
alias /path/to/FastapiAdmin/frontend/app/dist/build/h5;
index index.html;
try_files $uri $uri/ /app/index.html;
}
```
### 小程序部署
```bash
# 构建微信小程序
pnpm run build:mp-weixin
# 在微信开发者工具中导入 dist/build/mp-weixin 目录
# 上传并提交审核
```
## 🔧 常见部署问题
| 问题 | 解决方案 |
|------|----------|
| Docker 容器启动失败 | `cd docker && docker compose logs [服务名]` |
| 环境变量文件不存在 | `cp docker/.env.example docker/.env` |
| 数据库连接失败 | 确保 `.env` 中密码正确,MySQL 容器正常运行 |
| Nginx 502 Bad Gateway | 检查后端服务是否启动,端口是否正确 |
| SSL 证书错误 | 检查证书路径和有效期 |
| 端口冲突 | 修改 `.env` 中端口配置 |
+136
View File
@@ -0,0 +1,136 @@
---
layout: doc
title: 前端开发指南
description: FastApiAdmin 前端开发指南,Vue3 + TypeScript + Element Plus + Vite 技术栈的目录结构、组件封装、Pinia 状态管理、Axios 封装与 API 接入。
outline: "deep"
---
> 项目结构、路径别名、环境变量等详细说明见 [frontend/web/README.md](https://github.com/fastapiadmin/FastapiAdmin/blob/master/frontend/web/README.md)。
## 技术栈
| 类别 | 选型 |
|------|------|
| 框架 | Vue 3(Composition API / `<script setup>`) |
| 构建 | Vite 7 |
| 语言 | TypeScript |
| UI | Element Plus |
| 路由 | Vue Router 4(Hash 模式) |
| 状态 | Pinia + pinia-plugin-persistedstate |
| 样式 | Tailwind CSS 4、SCSS |
| HTTP | Axios |
## 项目结构
```
frontend/web/src/
├── api/ # 按业务模块划分的接口封装
├── assets/ # 图片、字体、全局样式等
├── components/ # 通用与业务组件
├── config/ # 应用配置
├── enums/ # 枚举
├── hooks/ # 组合式函数
├── layouts/ # 布局系统(左侧、顶部、混合)
├── locales/ # 国际化
├── plugins/ # Vue 插件注册
├── router/ # 静态路由、动态路由、守卫
├── store/ # Pinia 模块
├── styles/ # 样式系统(含暗色主题)
├── types/ # TypeScript 类型
├── utils/ # 工具函数
├── views/ # 页面视图
├── App.vue
└── main.ts # 入口
```
## 路径别名
| 别名 | 指向 |
|------|------|
| `@` | `src/` |
| `@views` | `src/views` |
| `@stores` | `src/store` |
| `@utils` | `src/utils` |
## 环境变量
只有以 `VITE_` 开头的变量会注入前端代码:
| 变量 | 作用 |
|------|------|
| `VITE_PORT` | 开发服务器端口 |
| `VITE_API_BASE_URL` | 代理目标:后端 HTTP 根地址 |
| `VITE_APP_BASE_API` | 接口路径前缀 |
| `VITE_APP_WS_ENDPOINT` | WebSocket 地址 |
| `VITE_APP_TITLE` | 页面标题 |
| `VITE_BASE_URL` | 部署基础路径 |
| `VITE_ACCESS_MODE` | 菜单来源(frontend / backend / mixed) |
修改 env 后需**重启** `pnpm dev`。
## 启动与脚本
```bash
cd frontend/web
pnpm install
pnpm dev # 开发服务器(默认 5173)
# 其他脚本
pnpm build # 生产构建
pnpm type-check # TypeScript 检查
pnpm lint # ESLint + Prettier + Stylelint
pnpm clean:cache # 清理缓存
```
## 路由与菜单
| 文件 | 职责 |
|------|------|
| `src/router/staticRoutes.ts` | 静态路由、壳层 |
| `src/router/dynamicRoutes.ts` | 菜单驱动的动态路由 |
| `src/router/beforeEach.ts` | 权限守卫、动态挂载 |
| `src/router/MenuProcessor.ts` | 后端菜单 → 前端路由 |
路由采用 **Hash 模式**,静态路由(Layout/登录/404)首屏注册,业务路由由守卫根据菜单权限延迟 `addRoute`。
## 应用启动流程
```
main.ts → initPlugins(app) → mount("#app")
→ App.vue → onBeforeMount: 主题初始化
→ onMounted: bootstrap() → 存储检查/版本升级/站点配置
→ 路由守卫 beforeEach
→ 存储失效检测
→ 登录态校验
→ 动态路由注册(菜单 → addRoute)
→ 标签/标题同步
```
## 与后端联调
1. 后端启动在 `http://127.0.0.1:8001`
2. `.env.development` 中 `VITE_API_BASE_URL` 配置正确
3. Vite `server.proxy` 将 `VITE_APP_BASE_API`(如 `/api/v1`)转发到后端
## 新增页面流程
1. 在 `src/api/` 创建对应 API 文件
2. 在 `src/views/` 创建页面组件
3. 路由注册(静态或动态路由)+ 后端菜单配置
4. 路径与 name 保持三者一致
## 常见问题
| 现象 | 建议 |
|------|------|
| `ECONNREFUSED` | 后端未启动或端口错误 |
| 401 / 频繁跳转登录 | Token 失效,清除本地存储重新登录 |
| 修改 `.env` 不生效 | 必须重启 `pnpm dev` |
| 依赖异常 | 尝试 `pnpm clean:cache && pnpm dev` |
| 类型报错 | `pnpm type-check` 检查 |
## 构建与部署
- 输出目录:`dist/`
- 子路径部署时配置 `VITE_BASE_URL`
- 生产构建会移除部分 `console`(见 `vite.config.ts`)
+451
View File
@@ -0,0 +1,451 @@
---
layout: doc
outline: "deep"
title: 开发规范
description: FastApiAdmin 团队开发规范,涵盖代码风格、Git 提交规范、命名约定、测试要求、Code Review 标准与项目协作流程。
---
## 📚规范概述
为了保证项目代码的一致性、可读性和可维护性,FastApiAdmin 项目制定了以下开发规范。所有参与项目开发的开发者都应该遵循这些规范。
## 🎨前端开发规范
### 1. 代码风格
#### 1.1 TypeScript 规范
- 使用 TypeScript 严格模式(`"strict": true`)
- 为所有变量、函数、接口添加类型注解
- 避免使用 `any` 类型,除非确实无法确定类型
- 使用接口定义对象类型,而不是类型别名
- 使用枚举定义常量集合
- 使用 `type` 定义联合类型和交叉类型
- 使用 `as const` 断言确保类型安全
- 使用 `readonly` 修饰符保护不可变数据
- 使用 `unknown` 类型处理不确定类型的数据
#### 1.2 Vue 规范
- 使用 Composition API
- 使用 `<script setup lang="ts">` 语法
- 组件命名使用 PascalCase
- 变量和函数命名使用 camelCase
- 常量命名使用 UPPER_SNAKE_CASE
- 使用 `ref()` 定义响应式变量
- 使用 `computed()` 定义计算属性
- 使用 `watch()` 或 `watchEffect()` 监听变化
- 使用 `onMounted()`、`onUnmounted()` 等生命周期钩子
- 组件 props 使用 `defineProps()` 定义并添加类型
- 组件事件使用 `defineEmits()` 定义并添加类型
- 组件暴露的属性和方法使用 `defineExpose()` 定义
#### 1.3 CSS 规范
- 使用 UnoCSS 原子化 CSS
- 避免使用内联样式
- 使用 BEM 命名规范(如果不使用 UnoCSS)
- 类名使用 kebab-case
- 避免使用 ID 选择器
- 使用 CSS 变量管理主题
- 避免使用 `!important` 修饰符
- 使用 flexbox 布局确保跨平台一致性
- 合理使用 CSS Grid 布局
- 优化 CSS 选择器优先级
### 2. 组件开发最佳实践
- **单一职责原则**:每个组件只负责一个功能
- **props 设计**:
- 使用 `required` 和 `default` 明确 props 要求
- 为复杂 props 添加验证
- 使用 `withDefaults()` 为 props 设置默认值
- **事件设计**:
- 使用 kebab-case 命名事件
- 事件参数类型明确
- 避免在事件中传递过多参数
- **插槽设计**:
- 使用具名插槽提高可读性
- 为插槽添加默认内容
- 使用作用域插槽传递数据
- **样式设计**:
- 使用 `scoped` 样式避免冲突
- 合理使用 `:deep()` 选择器
- 避免在组件中使用全局样式
### 3. 状态管理最佳实践
- **模块化设计**:按功能模块拆分 store
- **状态定义**:
- 使用 `interface` 定义 state 类型
- 初始化所有状态
- 避免使用嵌套过深的状态结构
- **Actions 设计**:
- 处理异步操作
- 使用 try/catch 捕获错误
- 提交多个 mutations 时使用事务
- **Getters 设计**:
- 缓存计算结果
- 避免在 getters 中修改状态
- 合理使用参数化 getters
### 4. API 调用最佳实践
- **模块化管理**:按功能模块组织 API 接口
- **请求封装**:
- 统一处理请求头
- 统一处理错误
- 统一处理 loading 状态
- **响应处理**:
- 类型定义响应数据结构
- 统一处理响应状态码
- 合理处理空数据和边界情况
- **请求优化**:
- 使用防抖和节流
- 缓存频繁请求的结果
- 合理使用并发请求
### 5. 性能优化建议
- **代码分割**:使用路由懒加载和组件懒加载
- **资源优化**:
- 压缩图片和静态资源
- 使用 WebP 格式图片
- 合理使用 CDN
- **渲染优化**:
- 使用 `v-memo` 缓存计算结果
- 合理使用 `v-if` 和 `v-show`
- 避免在模板中使用复杂表达式
- **网络优化**:
- 使用 HTTP/2 或 HTTP/3
- 启用 Gzip 或 Brotli 压缩
- 合理设置缓存策略
### 6. 测试最佳实践
- **测试分层**:单元测试、集成测试、端到端测试
- **测试覆盖率**:
- 核心功能 100% 覆盖
- 复杂逻辑 80% 以上覆盖
- 简单功能 50% 以上覆盖
- **测试工具**:
- 使用 Vitest 进行单元测试
- 使用 Playwright 进行端到端测试
- 使用 Vue Test Utils 进行组件测试
### 7. 代码审查要点
- **类型安全**:检查 TypeScript 类型定义是否正确
- **代码质量**:检查代码是否简洁、清晰
- **性能问题**:检查是否存在性能瓶颈
- **安全问题**:检查是否存在安全漏洞
- **规范遵循**:检查是否遵循项目开发规范
## 🐍后端开发规范
### 1. 代码风格
#### 1.1 Python 规范
- 遵循 PEP 8 代码风格
- 使用 4 个空格缩进
- 行长度不超过 100 字符
- 函数和类之间空两行
- 方法之间空一行
- 导入语句按标准库、第三方库、本地库分组
#### 1.2 FastAPI 规范
- 使用 FastAPI 装饰器定义路由
- 使用 Pydantic 模型定义请求和响应数据
- 使用依赖注入处理认证和权限
- 使用路径参数和查询参数
- 使用 HTTPException 处理错误
- 使用 Depends 注入依赖
### 2. 目录结构
```
backend/app/
├── api/ # API 接口
├── common/ # 公共代码
├── config/ # 配置管理
├── core/ # 核心功能
├── plugin/ # 插件系统
└── utils/ # 工具函数
```
### 3. 插件开发规范
- 插件目录应该以 `module_` 开头
- 插件应该包含 `controller.py`、`model.py`、`schema.py`、`service.py`、`crud.py` 等文件
- 控制器应该使用 `APIRouter` 定义路由
- 路由前缀应该与模块名对应(module_xxx -> /xxx)
- 控制器应该使用 `OperationLogRoute` 记录操作日志
- 接口应该使用 `AuthPermission` 进行权限控制
### 4. 数据库规范
- 使用 SQLAlchemy 2.0 ORM
- 使用 Alembic 进行数据库迁移
- 模型类应该继承自 `Base`
- 模型类应该定义 `__tablename__` 属性
- 字段命名应该使用 snake_case
- 表名应该使用 snake_case 复数形式
- 外键应该使用 `ForeignKey` 定义
- 关系应该使用 `relationship` 定义
### 5. 认证和权限规范
- 使用 JWT 进行身份认证
- 使用 RBAC 模型进行权限管理
- 接口应该添加权限控制装饰器
- 权限字符串格式:`module:controller:action`
- 权限应该在角色管理中配置
### 6. 错误处理规范
- 使用 `HTTPException` 处理 HTTP 错误
- 使用自定义异常处理全局错误
- 错误响应应该有统一的格式
- 错误应该记录到日志
### 7. 日志规范
- 使用 Python 标准库 `logging` 模块
- 日志级别:DEBUG、INFO、WARNING、ERROR、CRITICAL
- 日志应该包含时间、级别、模块、消息等信息
- 关键操作应该记录日志
- 错误应该记录详细信息
## 📦FastApp 移动端开发规范
### 1. 代码风格
- 遵循前端开发规范
- 使用 TypeScript 严格模式
- 使用 Vue 3 Composition API
- 使用 `<script setup lang="ts">` 语法
- 组件命名使用 PascalCase
- 变量和函数命名使用 camelCase
### 2. 目录结构
```
FastApp/src/
├── api/ # API 接口
├── components/ # 组件
├── composables/ # 组合式函数
├── constants/ # 常量定义
├── enums/ # 枚举定义
├── layouts/ # 布局组件
├── pages/ # 页面文件
├── router/ # 路由配置
├── static/ # 静态资源
├── store/ # 状态管理
├── styles/ # 样式文件
├── types/ # TypeScript 类型定义
├── utils/ # 工具函数
├── App.vue # 应用根组件
└── main.ts # 应用入口文件
```
### 3. 页面开发规范
- 页面组件应该放在 `pages` 目录下
- 页面目录应该使用 kebab-case
- 页面组件应该包含 `index.vue` 文件
- 页面组件可以包含 `data.ts`、`types.ts` 等辅助文件
- 页面组件应该使用 `onLoad()`、`onShow()` 等生命周期钩子
- 页面跳转应该使用 `uni.navigateTo()`、`uni.switchTab()` 等 API
### 4. API 调用规范
- 遵循前端 API 调用规范
- 使用封装的 `request.ts` 工具
- API 接口应该按模块分类
- API 调用应该处理错误情况
- API 调用应该显示加载状态
### 5. 跨平台适配规范
- 使用条件编译处理平台差异
- 使用 `#ifdef`、`#ifndef`、`#endif` 指令
- 平台特有 API 应该添加条件编译
- 样式应该考虑不同平台的差异
- 布局应该使用 flexbox 确保跨平台一致性
## 🎯Git 提交规范
### 1. 分支管理
- `master`:主分支,用于发布生产版本
- `dev`:开发分支,用于集成开发
- `feature/xxx`:功能分支,用于开发新功能
- `bugfix/xxx`:修复分支,用于修复 bug
- `hotfix/xxx`:热修复分支,用于紧急修复生产环境问题
### 2. 提交信息规范
提交信息应该遵循以下格式:
```
<type>(<scope>): <subject>
<body>
<footer>
```
#### 2.1 Type
- `feat`:新功能
- `fix`:修复 bug
- `docs`:文档修改
- `style`:代码风格修改
- `refactor`:代码重构
- `test`:测试代码修改
- `chore`:构建工具或依赖修改
- `revert`:回滚提交
#### 2.2 Scope
- 可选,用于指定修改的范围
- 例如:`api`、`component`、`page`、`store` 等
#### 2.3 Subject
- 简短的提交信息,不超过 50 个字符
- 使用祈使句,动词开头
- 首字母小写
- 不需要句号结尾
#### 2.4 Body
- 可选,详细的提交信息
- 每行不超过 72 个字符
- 解释为什么修改,而不是如何修改
#### 2.5 Footer
- 可选,用于引用 issue 或 BUG
- 例如:`Closes #123`、`Fixes #456`
### 3. 提交示例
```
feat(api): 添加用户登录接口
- 实现用户登录功能
- 添加 JWT 认证
- 处理登录错误情况
Closes #123
```
```
fix(frontend): 修复首页轮播图显示问题
- 修复轮播图高度计算错误
- 优化轮播图切换动画
Fixes #456
```
```
docs: 更新开发文档
- 添加 API 文档说明
- 完善部署指南
```
### 4. Pull Request 规范
- Pull Request 应该从功能分支合并到 dev 分支
- Pull Request 标题应该清晰、语义化
- Pull Request 描述应该详细说明修改内容
- Pull Request 应该包含相关的 issue 链接
- Pull Request 应该通过所有测试
- Pull Request 应该由至少一个 reviewer 审核
## 🔧工具链规范
### 1. 前端工具链
- 使用 Vite 作为构建工具
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 使用 Stylelint 进行样式检查
- 使用 Husky 进行 Git 钩子管理
- 使用 Commitlint 进行提交信息检查
### 2. 后端工具链
- 使用 Poetry 或 pip 管理依赖
- 使用 Pylint 或 Flake8 进行代码检查
- 使用 Black 进行代码格式化
- 使用 MyPy 进行类型检查
- 使用 pytest 进行测试
## 💡开发流程规范
### 1. 需求分析
- 明确功能需求
- 分析业务逻辑
- 确定技术方案
### 2. 设计阶段
- 设计数据库表结构
- 设计 API 接口
- 设计前端页面
- 设计组件结构
### 3. 开发阶段
- 创建分支
- 实现功能
- 编写测试
- 运行测试
### 4. 测试阶段
- 单元测试
- 集成测试
- 端到端测试
- 性能测试
### 5. 部署阶段
- 构建生产版本
- 部署到测试环境
- 进行回归测试
- 部署到生产环境
### 6. 维护阶段
- 监控系统运行状态
- 处理 bug 和问题
- 进行性能优化
- 进行功能迭代
## 📚参考资料
- [TypeScript 官方文档](https://www.typescriptlang.org/docs/)
- [Vue 官方文档](https://vuejs.org/docs/)
- [FastAPI 官方文档](https://fastapi.tiangolo.com/)
- [SQLAlchemy 官方文档](https://docs.sqlalchemy.org/)
- [PEP 8 代码风格指南](https://peps.python.org/pep-0008/)
- [Conventional Commits](https://www.conventionalcommits.org/)
- [ESLint 官方文档](https://eslint.org/docs/)
- [Prettier 官方文档](https://prettier.io/docs/en/)
## 🤝贡献指南
如果您对开发规范有任何建议或改进意见,欢迎提交 Issue 或 Pull Request。我们会认真考虑每一个建议,不断完善开发规范。
## 📄许可协议
本开发规范文档采用 MIT 许可协议,与 FastApiAdmin 项目保持一致。
+817
View File
@@ -0,0 +1,817 @@
---
layout: doc
outline: "deep"
title: FastApp 移动端开发指南
description: FastApp 移动端开发指南,基于 UniApp + Vue3 + Wot Design Uni 实现 H5、微信小程序、Android/iOS App 三端统一开发,涵盖环境配置、组件使用、API 接入与发布流程。
---
# FastApp 移动端开发指南
## 📱项目概述
**FastApp** 是 FastApiAdmin 项目的移动端应用,基于 **Uni App** 框架开发,支持一套代码多端运行(包括 H5、微信小程序、支付宝小程序、App 等)。采用 Vue 3 + TypeScript + Vite 等现代化技术栈,集成了完善的代码规范和开发工具链,为开发者提供开箱即用的移动端开发解决方案。
### 核心功能
- **用户认证**:登录、注册、密码重置、权限管理
- **首页展示**:轮播图、快捷导航、通知公告、数据统计
- **工作台**:业务功能入口,支持权限控制
- **个人中心**:个人信息、设置、FAQ、问题反馈
- **数据统计**:实时访客数、浏览量等数据展示
- **主题切换**:支持深色/浅色主题切换
### 系统功能特性
- 🔐 **用户管理** - 支持用户注册、登录、权限管理等功能,提供完善的用户体系
- 📊 **数据统计** - 提供实时数据分析和可视化报表,帮助您更好地了解业务状况
- 📁 **文件管理** - 支持文件上传、下载、分类管理,提供安全的文件存储服务
- 🔔 **消息通知** - 实时消息推送和系统通知,确保您不会错过重要信息
- 🛡️ **权限控制** - 基于RBAC的权限管理模型,灵活控制用户访问权限
- 📝 **日志审计** - 完整的操作日志记录,便于追踪和审计用户行为
## 🛠️技术栈
| 技术 | 版本 | 说明 |
|------|------|------|
| Uni App | 3.0.0+ | 跨平台移动端开发框架 |
| Vue3 | 3.5.22+ | 前端框架(Composition API) |
| TypeScript | 5.9.2+ | 类型系统 |
| Vite | 6.0+ | 构建工具 |
| Pinia | 2.1+ | 状态管理 |
| Wot Design Uni | 1.9.1+ | UI 组件库 |
| UnoCSS | 0.58+ | 原子化 CSS 引擎 |
| VueUse | 10.7+ | Vue Composition API 工具集合 |
| @stomp/stompjs | 7.0+ | WebSocket 消息协议库 |
## 📁项目结构
```
FastApp/
├─ public/ # 静态资源
│ └─ favicon.ico # 网站图标
├─ src/ # 源代码
│ ├─ api/ # API 接口
│ │ ├─ auth.ts # 认证相关接口
│ │ ├─ file.ts # 文件相关接口
│ │ └─ user.ts # 用户相关接口
│ ├─ components/ # 组件
│ │ ├─ cu-date-query/ # 日期查询组件
│ │ ├─ cu-picker/ # 选择器组件
│ │ ├─ qiun-error/ # 错误提示组件
│ │ └─ qiun-loading/ # 加载组件
│ ├─ composables/ # 组合式函数
│ │ ├─ useNavigationBar.ts # 导航栏管理
│ │ ├─ useStomp.ts # WebSocket 管理
│ │ └─ useTabbar.ts # 标签栏管理
│ ├─ constants/ # 常量定义
│ │ ├─ index.ts # 常量定义
│ │ └─ storage.constant.ts # 存储键名
│ ├─ enums/ # 枚举定义
│ │ ├─ api-code.enum.ts # API 错误码
│ │ └─ api-header.enum.ts # API 头部
│ ├─ layouts/ # 布局组件
│ │ ├─ default.vue # 默认布局
│ │ └─ tabbar.vue # 标签栏布局
│ ├─ pages/ # 页面文件
│ │ ├─ index/ # 首页
│ │ │ ├─ data.ts # 数据定义
│ │ │ ├─ index.vue # 首页组件
│ │ │ └─ types.ts # 类型定义
│ │ ├─ login/ # 登录页
│ │ │ └─ index.vue # 登录组件
│ │ ├─ mine/ # 个人中心
│ │ │ ├─ about/ # 关于页面
│ │ │ ├─ faq/ # FAQ页面
│ │ │ ├─ feedback/ # 反馈页面
│ │ │ ├─ profile/ # 个人资料
│ │ │ ├─ settings/ # 设置页面
│ │ │ └─ index.vue # 个人中心组件
│ │ └─ work/ # 工作台
│ │ ├─ data.ts # 数据定义
│ │ ├─ index.vue # 工作台组件
│ │ └─ types.ts # 类型定义
│ ├─ router/ # 路由配置
│ │ └─ index.ts # 路由配置文件
│ ├─ static/ # 静态资源
│ │ ├─ icons/ # 图标
│ │ ├─ images/ # 图片
│ │ └─ logo.svg # Logo
│ ├─ store/ # 状态管理
│ │ ├─ modules/ # 模块
│ │ │ ├─ theme.store.ts # 主题管理
│ │ │ └─ user.store.ts # 用户管理
│ │ └─ index.ts # 状态管理配置
│ ├─ styles/ # 样式文件
│ │ └─ index.scss # 全局样式
│ ├─ types/ # TypeScript 类型定义
│ ├─ utils/ # 工具函数
│ │ ├─ auth.ts # 认证工具
│ │ ├─ color.ts # 颜色工具
│ │ ├─ index.ts # 工具函数
│ │ ├─ request.ts # 请求工具
│ │ └─ storage.ts # 存储工具
│ ├─ App.vue # 应用根组件
│ ├─ main.ts # 应用入口文件
│ ├─ manifest.json # 应用配置文件
│ ├─ pages.json # 页面路由配置
│ └─ theme.json # 主题配置
├─ .env.development # 开发环境配置
├─ .env.production # 生产环境配置
├─ package.json # 项目依赖
├─ pages.config.ts # 页面配置
├─ tsconfig.json # TypeScript 配置
├─ unocss.config.ts # UnoCSS 配置
└─ vite.config.ts # Vite 配置
```
## 🔧环境搭建
### 1. 环境要求
- **Node.js** >= 22
- **pnpm** >= 9
### 2. 安装依赖
```sh
# 进入项目目录
cd FastApp
# 安装项目依赖
pnpm install
```
### 3. 配置环境变量
在项目根目录创建 `.env` 文件配置环境变量:
```bash
# API 基础地址
VITE_API_BASE_URL=http://localhost:8001
# API 前缀
VITE_APP_BASE_API=/api
# 开发服务器端口
VITE_APP_PORT=5180
```
## 🚀开发流程
### 1. 启动开发服务器
#### H5 开发
```sh
# 启动 H5 开发服务器
pnpm run dev:h5
# 访问地址
# http://localhost:5180/app
```
#### 微信小程序开发
```sh
# 启动微信小程序开发服务器
pnpm run dev:mp-weixin
# 在微信开发者工具中导入项目目录:FastApp/dist/dev/mp-weixin
```
#### 其他平台开发
```sh
# 启动支付宝小程序开发服务器
pnpm run dev:mp-alipay
# 启动百度小程序开发服务器
pnpm run dev:mp-baidu
# 启动字节跳动小程序开发服务器
pnpm run dev:mp-toutiao
# 启动 QQ 小程序开发服务器
pnpm run dev:mp-qq
```
## 📚页面开发
### 1. 创建新页面
1. **在 `pages.json` 中添加页面配置**:
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
// 其他页面...
]
}
```
2. **创建页面文件**:
```
FastApp/src/pages/
└─ new-page/
├─ index.vue # 页面组件
├─ data.ts # 数据定义(可选)
└─ types.ts # 类型定义(可选)
```
3. **页面示例**:
```vue
<template>
<view class="page">
<view class="title">新页面</view>
<view class="content">
<text>{{ message }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('Hello FastApp!');
</script>
<style scoped>
.page {
padding: 20rpx;
}
.title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.content {
font-size: 28rpx;
color: #666;
}
</style>
```
### 2. 路由管理
#### 页面跳转
```typescript
// 普通跳转
uni.navigateTo({
url: '/pages/new-page/index'
});
// 带参数跳转
uni.navigateTo({
url: '/pages/new-page/index?id=1&name=test'
});
// 重定向跳转
uni.redirectTo({
url: '/pages/new-page/index'
});
// 跳转到 tabBar 页面
uni.switchTab({
url: '/pages/index/index'
});
// 关闭所有页面,打开新页面
uni.reLaunch({
url: '/pages/new-page/index'
});
```
#### 接收参数
```typescript
// 在页面 onLoad 生命周期中接收参数
import { onLoad } from '@dcloudio/uni-app';
onLoad((options) => {
console.log('参数:', options);
// options.id, options.name
});
```
## 📡API 调用
### 1. 封装的 API 工具
FastApp 使用封装的 `request.ts` 工具进行 API 调用,支持自动添加认证 token、错误处理等功能。
### 2. API 接口定义
API 接口定义在 `src/api` 目录下,按模块分类:
```typescript
// src/api/user.ts 示例
import request from '../utils/request';
export const userApi = {
// 获取用户信息
getUserInfo: () => {
return request({
url: '/api/v1/user/info',
method: 'GET'
});
},
// 更新用户信息
updateUserInfo: (data: any) => {
return request({
url: '/api/v1/user/update',
method: 'POST',
data
});
}
};
```
### 3. 调用 API
```typescript
import { userApi } from '../api/user';
// 调用 API
const getUserInfo = async () => {
try {
const res = await userApi.getUserInfo();
console.log('用户信息:', res.data);
} catch (error) {
console.error('获取用户信息失败:', error);
}
};
// 调用更新用户信息 API
const updateUser = async () => {
try {
const res = await userApi.updateUserInfo({
name: '新名字',
avatar: '新头像'
});
console.log('更新成功:', res.data);
} catch (error) {
console.error('更新失败:', error);
}
};
```
### 4. WebSocket 实时通信
FastApp 集成了 `@stomp/stompjs` 库,支持 WebSocket 实时通信,通过封装的 `useStomp` 组合式函数可以方便地使用:
```typescript
// 使用 WebSocket
import { useStomp } from '../composables/useStomp';
const {
connect,
disconnect,
subscribe,
send,
isConnected
} = useStomp();
// 连接 WebSocket
const initWebSocket = () => {
connect({
url: 'ws://localhost:8001/ws',
onConnect: () => {
console.log('WebSocket 连接成功');
// 订阅消息
subscribe('/topic/messages', (message) => {
console.log('收到消息:', message);
});
},
onError: (error) => {
console.error('WebSocket 连接失败:', error);
}
});
};
// 发送消息
const sendMessage = () => {
if (isConnected.value) {
send('/app/message', {
content: 'Hello WebSocket!'
});
}
};
// 断开连接
const closeWebSocket = () => {
disconnect();
};
```
## 🔐认证管理
### 1. 登录流程
```typescript
import { authApi } from '../api/auth';
import { useUserStore } from '../store/modules/user.store';
const userStore = useUserStore();
const login = async (username: string, password: string) => {
try {
const res = await authApi.login({
username,
password
});
// 保存 token
userStore.setToken(res.data.token);
// 获取用户信息
await userStore.getUserInfo();
// 跳转到首页
uni.switchTab({ url: '/pages/index/index' });
} catch (error) {
console.error('登录失败:', error);
}
};
```
### 2. 登出流程
```typescript
import { useUserStore } from '../store/modules/user.store';
const userStore = useUserStore();
const logout = () => {
// 清除 token 和用户信息
userStore.logout();
// 跳转到登录页
uni.redirectTo({ url: '/pages/login/index' });
};
```
### 3. 权限控制
可以使用全局路由守卫或页面级权限检查来实现权限控制:
```typescript
// 在页面 onLoad 中检查权限
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '../store/modules/user.store';
const userStore = useUserStore();
onLoad(() => {
// 检查是否登录
if (!userStore.token) {
uni.redirectTo({ url: '/pages/login/index' });
return;
}
// 检查用户权限
if (!userStore.hasPermission('required_permission')) {
uni.showToast({
title: '权限不足',
icon: 'none'
});
uni.navigateBack();
}
});
```
## 🎨UI 组件
### 1. 使用 Wot Design Uni
FastApp 使用 **Wot Design Uni** 作为 UI 组件库,提供了丰富的移动端组件:
```vue
<template>
<view class="page">
<!-- 按钮 -->
<wd-button type="primary" @click="handleClick">主要按钮</wd-button>
<!-- 输入框 -->
<wd-input v-model="value" placeholder="请输入内容" />
<!-- 列表 -->
<wd-list>
<wd-list-item title="标题" value="值" />
<wd-list-item title="标题2" value="值2" />
</wd-list>
<!-- 弹窗 -->
<wd-popup v-model:visible="popupVisible" title="弹窗标题">
<view>弹窗内容</view>
</wd-popup>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const value = ref('');
const popupVisible = ref(false);
const handleClick = () => {
popupVisible.value = true;
};
</script>
```
### 2. 使用 UnoCSS
FastApp 集成了 UnoCSS 原子化 CSS 引擎,支持类名方式快速开发:
```vue
<template>
<view class="flex flex-col items-center p-4">
<view class="text-xl font-bold mb-4">Hello FastApp</view>
<view class="w-full max-w-md bg-white rounded-lg shadow-md p-4">
<view class="text-gray-700">Welcome to FastApp</view>
</view>
</view>
</template>
```
### 3. 自定义组件
可以在 `src/components` 目录下创建自定义组件:
```vue
<!-- src/components/custom-button.vue -->
<template>
<view class="custom-button" @click="$emit('click')">
<slot></slot>
</view>
</template>
<script setup lang="ts">
defineEmits(['click']);
</script>
<style scoped>
.custom-button {
padding: 12rpx 24rpx;
background-color: #007aff;
color: #fff;
border-radius: 8rpx;
text-align: center;
}
</style>
```
## 📱多平台适配
### 1. 条件编译
使用 Uni App 的条件编译语法,可以为不同平台编写不同的代码:
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>这是 H5 平台的内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>这是微信小程序平台的内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>这是 App 平台的内容</view>
<!-- #endif -->
</view>
</template>
<script setup lang="ts">
// #ifdef H5
console.log('H5 平台');
// #endif
// #ifdef MP-WEIXIN
console.log('微信小程序平台');
// #endif
</script>
<style scoped>
/* #ifdef H5 */
.view {
font-size: 16px;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.view {
font-size: 28rpx;
}
/* #endif */
</style>
```
### 2. 平台特有 API
使用平台特有 API 时,需要注意添加条件编译:
```typescript
// 调用微信小程序特有 API
// #ifdef MP-WEIXIN
wx.getLocation({
type: 'wgs84',
success: (res) => {
console.log('位置信息:', res);
}
});
// #endif
// 调用 App 特有 API
// #ifdef APP-PLUS
plus.device.getInfo({
success: (info) => {
console.log('设备信息:', info);
}
});
// #endif
```
## 🚀性能优化
### 1. 代码优化
- **减少页面层级**:尽量减少页面嵌套层级,最多不超过 5 层
- **按需加载**:使用分包加载、组件按需导入等方式减少初始包大小
- **避免频繁更新**:使用 `nextTick` 合并更新,避免频繁触发渲染
- **使用虚拟列表**:长列表使用虚拟列表,避免一次性渲染过多数据
### 2. 网络优化
- **缓存数据**:使用本地存储缓存不常变化的数据
- **请求合并**:合并多个请求,减少网络请求次数
- **延迟加载**:非关键资源延迟加载
- **使用 WebSocket**:实时数据使用 WebSocket,减少轮询
### 3. 存储优化
- **合理使用本地存储**:根据数据类型选择合适的存储方式(localStorage、sessionStorage、IndexedDB)
- **清理过期数据**:定期清理过期或无用的数据
- **加密敏感数据**:敏感数据(如 token)进行加密存储
## 📦打包发布
### 1. 构建生产版本
#### H5 构建
```bash
pnpm run build:h5
# 构建产物在 dist/build/h5 目录
```
#### 微信小程序构建
```bash
pnpm run build:mp-weixin
# 构建产物在 dist/build/mp-weixin 目录
```
#### 其他平台构建
```bash
# 构建支付宝小程序
pnpm run build:mp-alipay
# 构建百度小程序
pnpm run build:mp-baidu
# 构建字节跳动小程序
pnpm run build:mp-toutiao
# 构建 QQ 小程序
pnpm run build:mp-qq
```
### 2. 发布流程
#### H5 部署
1. 执行构建命令:`pnpm run build:h5`
2. 将 `dist/build/h5` 目录部署到 Web 服务器
3. 配置服务器支持 SPA 路由(如 Nginx 的 `try_files`)
#### 小程序发布
1. 执行对应平台的构建命令
2. 使用对应平台的开发者工具打开构建产物目录
3. 在开发者工具中上传代码并提交审核
#### App 打包
1. 使用 HBuilderX 打开项目
2. 配置 App 相关信息(图标、启动页等)
3. 选择云打包或本地打包
4. 下载安装包并发布到应用商店
## 🐛常见问题及解决方案
### 1. 开发环境问题
**问题**:H5 开发时跨域错误
**解决方案**:在 `vite.config.ts` 中配置代理:
```typescript
// vite.config.ts
proxy: {
[env.VITE_APP_BASE_API]: {
changeOrigin: true,
target: env.VITE_API_BASE_URL,
},
}
```
**问题**:微信小程序开发时 API 请求失败
**解决方案**:在微信公众平台设置合法域名,或在开发者工具中开启「不校验合法域名」选项。
### 2. 运行时问题
**问题**:页面白屏
**解决方案**:检查是否有语法错误、API 调用错误,查看控制台日志。
**问题**:数据加载失败
**解决方案**:检查网络连接,API 地址是否正确,后端服务是否正常。
**问题**:样式错乱
**解决方案**:检查样式代码,使用条件编译适配不同平台。
### 3. 发布问题
**问题**:微信小程序审核失败
**解决方案**:根据审核反馈修改代码,确保符合微信小程序规范。
**问题**:包大小超过限制
**解决方案**:使用分包加载、按需导入组件、压缩资源等方式减少包大小。
## 📚代码规范
项目集成了完善的代码规范工具:
```bash
# ESLint 检查并自动修复
pnpm run lint:eslint
# Prettier 格式化
pnpm run lint:prettier
# Stylelint 检查样式
pnpm run lint:stylelint
# TypeScript 类型检查
pnpm run type-check
```
## 📚自动导入
项目配置了自动导入,以下内容无需手动导入:
- Vue 3 API(`ref`, `computed`, `watch` 等)
- uni-app API(`uni.request`, `uni.navigateTo` 等)
- Pinia(`defineStore`, `storeToRefs` 等)
- 路由(`useRouter`, `useRoute` 等)
- 组件库工具(`useToast`, `useMessage` 等)
- `src/composables` 目录下的组合式函数
- `src/utils` 目录下的工具函数
- `src/api` 目录下的 API 函数
## 📚参考文档
- **Uni App 官方文档**:[https://uniapp.dcloud.io/](https://uniapp.dcloud.io/)
- **Wot Design Uni 文档**:[https://wot-design-uni.webapp.plus/](https://wot-design-uni.webapp.plus/)
- **Vue3 官方文档**:[https://cn.vuejs.org/](https://cn.vuejs.org/)
- **TypeScript 官方文档**:[https://www.typescriptlang.org/](https://www.typescriptlang.org/)
- **微信小程序开发文档**:[https://developers.weixin.qq.com/miniprogram/dev/framework/](https://developers.weixin.qq.com/miniprogram/dev/framework/)
## 🤝贡献指南
欢迎为 FastApp 项目贡献代码!请遵循以下步骤:
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
## 📄许可协议
FastApp 项目采用 MIT 许可协议,详见 [LICENSE](https://github.com/fastapiadmin/FastApp/blob/master/LICENSE) 文件。
+125
View File
@@ -0,0 +1,125 @@
---
layout: doc
title: 项目概述
description: FastApiAdmin 项目概述,基于 FastAPI + Vue3 + UniApp 的全栈中后台快速开发平台,支持 Web、移动端、小程序三端融合与模块化开发。
outline: "deep"
---
<div style="text-align: center;">
<div align="center">
<img src="/logo.svg" width="150" height="150" alt="logo" />
</div>
<h1>FastApiAdmin <sup style="background-color: #28a745; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.4em; vertical-align: super; margin-left: 5px;">v3.1.0</sup></h1>
<h3>一套现代、开源、全栈融合的中后台快速开发平台</h3>
<p>如果你喜欢这个项目,给个 ⭐️ 支持一下吧!</p>
<p align="center" style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
<a href="https://gitee.com/fastapiadmin/FastApiAdmin"><img src="https://gitee.com/fastapiadmin/FastapiAdmin/badge/star.svg?theme=dark" alt="Gitee Stars"></a>
<a href="https://github.com/fastapiadmin/FastApiAdmin"><img src="https://img.shields.io/github/stars/fastapiadmin/FastApiAdmin?style=social" alt="GitHub Stars"></a>
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-orange.svg" alt="License"></a>
<img src="https://img.shields.io/badge/Python-≥3.10-blue" alt="Python">
<img src="https://img.shields.io/badge/NodeJS-≥20.0-blue" alt="NodeJS">
<img src="https://img.shields.io/badge/MySQL-≥8.0-blue" alt="MySQL">
<img src="https://img.shields.io/badge/Redis-≥7.0-blue" alt="Redis">
</p>
</div>
## 📘项目介绍
**FastApiAdmin** 是一套 **完全开源、高度模块化、技术先进的现代化快速开发平台**,旨在帮助开发者高效搭建高质量的企业级中后台系统。该项目采用 **前后端分离架构**,融合 Python 后端框架 `FastAPI` 和前端主流框架 `Vue3` 实现多端统一开发,提供了一站式开箱即用的开发体验。
> **设计初心**: 以模块化、松耦合为核心,追求丰富的功能模块、简洁易用的接口、详尽的开发文档和便捷的维护方式。通过统一框架和组件,降低技术选型成本,遵循开发规范和设计模式,构建强大的代码分层模型,搭配完善的本地中文化支持,专为团队和企业开发场景量身定制。
## 📦 工程结构概览
项目采用 **Monorepo** 架构,所有子工程在同一仓库中协同开发:
```sh
FastapiAdmin/
├─ backend/ # 后端工程 (FastAPI + Python)
├─ frontend/ # 前端工程
│ ├── web/ # Web 前端 (Vue3 + Element Plus)
│ ├── app/ # 移动端 (UniApp)
│ └── docs/ # 文档网站 (VitePress)
├─ docker/ # Docker 部署配置
│ ├── backend/ # 后端 Dockerfile
│ ├── nginx/ # Nginx 配置和静态文件
│ ├── mysql/ # MySQL 数据目录
│ └── redis/ # Redis 数据目录
├─ deploy.sh # 一键部署脚本
├─ deploy.bat # Windows 启动脚本
├─ LICENSE # 开源协议
└─ README.md # 项目文档
```
> 三个前端子工程均在 `frontend/` 目录下,分别是 `web`(Web 前端)、`app`(移动端)、`docs`(文档网站)。详细目录结构见 [前端开发](./frontend)、[后端开发](./backend)、[移动端开发](./miniprogram) 和 [部署指南](./deployment)。
## ✨核心亮点
| 特性 | 描述 |
| ---- | ---- |
| 🔭 快速开发 | 一套完全开源的现代化快速开发平台,旨在帮助开发者高效搭建高质量的企业级中后台系统。 |
| 🌐 全栈整合 | 前后端分离,融合 Python (FastAPI) + Vue3 多端开发,支持 Web 端和移动端。 |
| 🧱 模块化设计 | 系统功能高度解耦,插件化架构,支持自动路由发现和注册,便于扩展和维护。 |
| ⚡️ 高性能异步 | 使用 FastAPI 异步框架 + Redis 缓存优化接口响应速度。 |
| 🔒 安全认证 | 支持 JWT OAuth2 认证机制,保障系统安全。 |
| 📊 权限管理 | RBAC 模型实现菜单、按钮、数据级别的细粒度权限控制。 |
| 🚀 快速部署 | 支持 Docker/Docker Compose/Nginx 一键部署。 |
| 📄 开发友好 | 提供完善的中文文档 + 中文化界面 + 可视化工具链,降低学习成本。 |
| 🧩 快速接入 | 基于 Vue3、Vite5、Pinia、ElementPlus 等主流前端技术栈,开箱即用。 |
| 📱 移动端支持 | 基于 UniApp 开发的 FastApp 移动端,支持多端运行(H5、微信小程序、支付宝小程序、App 等)。 |
| 🤖 智能体框架 | 集成智能体框架,提供 AI 能力。 |
| 🎨 主题定制 | 支持深色/浅色主题切换,提供个性化界面体验。 |
| 🌍 国际化支持 | 内置国际化框架,支持多语言切换。 |
| 📈 数据可视化 | 集成图表库,提供丰富的数据可视化能力。 |
| 🛠️ 代码生成 | 内置代码生成工具,提升开发效率。 |
## 🛠️技术栈概览
| 类型 | 技术选型 | 描述 |
|----------|---------------------|---------------------|
| 后端框架 | FastAPI / Uvicorn / Pydantic 2.0 / Alembic | 现代、高性能的异步框架,强制类型约束,数据迁移。 |
| ORM | SQLAlchemy 2.0 | 强大的 ORM 库。 |
| 定时任务 | APScheduler | 轻松实现定时任务。 |
| 权限认证 | PyJWT | 实现 JWT 认证。 |
| 前端框架 | Vue3 / Vite5 / Pinia / TypeScript | 快速开发 Vue3 应用。 |
| 前端工具 | ESLint / Prettier / Stylelint | 代码质量和风格工具。 |
| 移动端框架 | UniApp / Vue3 / TypeScript | 跨平台移动应用开发。 |
| UI 库 | ElementPlus (Web) / Wot Design Uni (移动端) | 企业级 UI 组件库。 |
| CSS 框架 | UnoCSS / SCSS | 原子化 CSS 和预处理器。 |
| 数据库 | MySQL / PostgreSQL / SQLite | 关系型数据库支持。 |
| 缓存 | Redis | 强大的缓存数据库。 |
| 文档 | Swagger / Redoc | 自动生成 API 文档。 |
| 部署 | Docker / Nginx / Docker Compose | 快速部署项目。 |
| 监控 | 内置服务器监控 / 缓存监控 | 系统运行状态监控。 |
| 国际化 | i18n | 多语言支持。 |
| 数据可视化 | ECharts | 图表库。 |
## 📌内置模块
| 模块名 | 子模块名 | 描述 |
|--------|----------|------|
| 仪表盘 | 工作台、分析页 | 系统概览和数据分析 |
| 系统管理 | 用户、角色、菜单、部门、岗位、字典、配置、公告 | 核心系统管理功能 |
| 监控管理 | 在线用户、服务器监控、缓存监控 | 系统运行状态监控 |
| 任务管理 | 定时任务 | 异步任务调度管理 |
| 日志管理 | 操作日志 | 用户行为审计 |
| 开发工具 | 代码生成、表单构建、接口文档 | 提升开发效率的工具 |
| 文件管理 | 文件存储 | 统一文件管理 |
> 移动端模块详见 [移动端开发](./miniprogram)。
## 📐 分包理念:按业务域 vs 按技术层
讨论的是**源码目录如何划分**(文件夹怎么分包),与是否做 MVC / Controller–Service–CRUD **逻辑分层**是不同的概念。
| 方式 | 组织方式 | 典型目录(示例) |
|------|----------|-----------------|
| **按技术层次分包** | 同一类技术文件归在一起 | 顶层 `models/`、`schemas/`、`services/`、`controllers/` … |
| **按业务特性分包** | 同一业务域的文件归在一起 | `app/api/v1/module_*/` 下并列 `controller.py`、`service.py`、`crud.py`、`model.py`、`schema.py` |
**本项目(后端)采用:按业务特性分包(竖切)。**
**设计考量**:
- **解耦的单位是业务边界**:以系统管理、监控等为模块,子域内再分文件。多人协作时各自目录独立,减少冲突。
- **面向未来的拆分**:若要将某一模块独立成子工程,一整个目录搬走即可。按层分包则需要跨多个顶层目录抽取。
- **分层仍在**:Controller → Service → CRUD → Model 的**逻辑分层没有消失**,只是**叠在业务包内部**,而不是拿「全项目唯一的分层目录」作为第一维划分。
+123
View File
@@ -0,0 +1,123 @@
---
layout: doc
outline: "deep"
title: 快速开始
description: "15-30 分钟跑通一个可演示的 MVP:环境准备、代码拉取、Docker Compose 一键启动、初始化数据、本地访问 Web 端与 App 端,常见问题排查。"
---
## 🍪 演示环境
- 官网:[https://service.fastapiadmin.com](https://service.fastapiadmin.com)
- Web 端:[https://service.fastapiadmin.com/web](https://service.fastapiadmin.com/web)
- 移动端:[https://service.fastapiadmin.com/app](https://service.fastapiadmin.com/app)
- 演示账号:`admin` / `123456`(**仅限官方演示站使用,请勿用于生产环境**;首次部署后请立即修改默认密码)
## 环境准备
| 类型 | 技术栈 | 版本 |
|------|--------|------|
| 后端 | Python | ≥ 3.10(推荐 3.12) |
| 后端 | FastAPI | 0.109+ |
| 前端 | Node.js | ≥ 20.0 |
| 前端 | pnpm | ≥ 9.0 |
| Web UI | Element Plus | 2.10+ |
| 移动端 | UniApp | 3.0+ |
| App UI | Wot Design Uni | 1.9+ |
| 数据库 | MySQL | 8.0+ / PostgreSQL 13+ / SQLite |
| 中间件 | Redis | 7.0+ |
## 获取代码
```bash
git clone https://github.com/fastapiadmin/FastApiAdmin.git
# 或使用 Gitee
git clone https://gitee.com/fastapiadmin/FastApiAdmin.git
```
## 后端启动
### 1. 配置环境变量
```bash
cd FastapiAdmin/backend
cp env/.env.dev.example env/.env.dev
# 编辑 env/.env.dev,填写数据库连接、Redis、JWT 密钥等
```
### 2. 安装依赖并启动
```bash
# 推荐使用 uv(与 pyproject.toml 一致)
uv sync
uv run main.py run --env=dev
# 或使用传统 pip / venv
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -r requirements.txt
python main.py run --env=dev
```
**首次启动会自动初始化数据库表与基础数据**,一般无需先执行 `upgrade`。
### 3. 数据库迁移(模型变更时使用)
```bash
python main.py revision --env=dev
python main.py upgrade --env=dev
# 或使用 uv
uv run main.py revision --env=dev
uv run main.py upgrade --env=dev
```
## 前端启动
```bash
# Web 前端 (Vue3)
cd FastapiAdmin/frontend/web
pnpm install
pnpm run dev
# 移动端 (UniApp)
cd FastapiAdmin/frontend/app
pnpm install
pnpm run dev:h5
# 文档网站 (VitePress)
cd FastapiAdmin/frontend/docs
pnpm install
pnpm run dev
```
## 本地访问地址
| 服务 | 地址 |
|------|------|
| Web 前端 | `http://127.0.0.1:5173` |
| 移动端 H5 | `http://127.0.0.1:8080` |
| 文档网站 | `http://127.0.0.1:5174` |
| 后端 API | `http://127.0.0.1:8001` |
| Swagger | `http://127.0.0.1:8001/docs` |
| API 前缀 | `http://127.0.0.1:8001/api/v1` |
## 🐳 Docker 部署
详见 [部署指南](./deployment),快速命令:
```bash
chmod +x deploy.sh
./deploy.sh # 完整部署
./deploy.sh logs # 查看日志
./deploy.sh stop # 停止
./deploy.sh restart # 重启
```
## 💡 常见问题
| 问题 | 解答 |
|------|------|
| 后端启动报数据库连接失败 | 确保已创建空数据库,`.env.dev` 中连接信息正确 |
| 前端请求后端报 CORS 错误 | 确认后端已启动,`.env.development` 中 `VITE_API_BASE_URL` 正确 |
| 首次启动需要执行迁移吗 | **不需要**——后端首次启动自动初始化表与数据 |
| Node.js 版本不符 | 使用 nvm 安装对应版本:`nvm install 20` |
+112
View File
@@ -0,0 +1,112 @@
---
layout: doc
title: 为什么选择 FastApiAdmin?
description: 为什么选择 FastApiAdmin?与其他中后台方案对比分析:异步后端、全栈融合、代码生成、多端统一、模块化设计与活跃社区。
outline: "deep"
---
如果你正在寻找一套快速开发平台来搭建中后台系统,以下是 FastApiAdmin 与其他方案的核心差异。
## 与其他方案对比
| 维度 | FastApiAdmin | Django Admin / Flask-Admin | 纯前端模板(vue-pure-admin 等) |
|------|-------------|---------------------------|-------------------------------|
| **后端** | FastAPI 异步,Pydantic 类型安全 | Django/Flask 同步为主 | 无,需自行搭建 |
| **前端** | Vue3 + TypeScript + Element Plus,开箱即用 | Jinja 模板渲染 | Vue3 + Element Plus |
| **移动端** | UniApp 多端(H5/小程序/App)一体 | 无 | 无 |
| **代码生成** | 内置,数据库表 → 前后端 CRUD | 需额外插件 | 无 |
| **部署** | Docker Compose 一键,含 Nginx + SSL | 需自行配置 | 需自行配置 |
| **架构** | 按业务域竖切分包,插件自动注册 | 按层分包为主 | 按层分包 |
| **数据库** | MySQL / PostgreSQL / SQLite,Alembic 迁移 | Django ORM 迁移 | 无 |
## 技术选型依据
### 为什么是 FastAPI 而不是 Django/Flask?
| 特性 | FastAPI | Django | Flask |
|------|---------|--------|-------|
| 异步原生支持 | ✅ 内置 async/await | ⚠️ 3.1+ 部分支持 | ❌ 需扩展 |
| 自动 API 文档 | ✅ Swagger + Redoc 自动生成 | ❌ 需 drf-spectacular | ❌ 需插件 |
| 类型安全 | ✅ Pydantic 请求/响应验证 | ❌ 运行时校验 | ❌ 无内置 |
| 性能基准 | ~30k req/s | ~10k req/s | ~15k req/s |
| 学习曲线 | 中等 | 陡峭 | 平缓 |
FastAPI 的 **自动类型校验 + 自动文档 + 异步性能** 是组合优势,不需要在速度和开发体验之间做取舍。
### 为什么是 Vue3 而不是 React?
| 特性 | Vue3 | React |
|------|------|-------|
| 上手难度 | 低(模板 + Options/Composition) | 中(JSX + Hooks 心智模型) |
| 官方生态 | Router、Pinia、Vite 一体化 | 第三方选型碎片化 |
| TypeScript | Composition API 天然支持 | 支持良好 |
| 中文社区 | 非常活跃 | 活跃 |
对于中后台场景,Vue3 + Element Plus 的组合在开发效率和组件完整性上更有优势。
### 为什么按「业务域」分包?
```
# 按业务域竖切(本项目)
api/v1/module_system/user/ # 用户相关的代码全在这个目录
├── controller.py
├── service.py
├── crud.py
├── model.py
└── schema.py
# 按技术层分包(常见方案)
models/user.py # 用户模型在这
schemas/user.py # 用户 Schema 在另一个目录
services/user.py # 用户逻辑又在另一个目录
```
| 场景 | 竖切(本项目) | 按层分包 |
|------|-------------|---------|
| 多人协作(不同人负责不同模块) | ✅ 各自目录独立,零冲突 | ❌ 改同一个 model.py |
| 拆分子仓库/独立部署 | ✅ 整个目录搬走 | ❌ 跨多个目录抽取 |
| 跨模块查看所有 model | ❌ 需 IDE 搜索 | ✅ 一个 models/ 目录看全 |
项目选择竖切,核心考量是**优先团队并行开发和解耦**。查看全量表结构可用 IDE/Alembic/数据库工具。
## 内置功能:你不需要从零写的部分
FastApiAdmin 开箱自带这些,而纯前端模板或裸框架**没有**:
| 功能 | FastApiAdmin | Django Admin | 纯前端模板 |
|------|:-----------:|:-----------:|:---------:|
| RBAC 权限(菜单/按钮/数据级) | ✅ | ⚠️ 基础 | ❌ |
| 代码生成器(表→CRUD) | ✅ | ❌ | ❌ |
| 服务监控 + 缓存监控 | ✅ | ❌ | ❌ |
| 操作日志审计 | ✅ | ✅ | ❌ |
| 定时任务管理 | ✅ | ❌ | ❌ |
| WebSocket 实时推送 | ✅ | ❌ | ❌ |
| 移动端(H5/小程序) | ✅ | ❌ | ❌ |
## 总结
如果你的需求是:
- ✅ Python 技术栈,想用 FastAPI 的异步性能
- ✅ 前端团队熟悉 Vue3,需要开箱即用的后台模板
- ✅ 需要移动端(H5/小程序)支持
- ✅ 不想从零搭建 RBAC、日志、监控等基础功能
- ✅ 多人协作,需要模块间低耦合
那么 FastApiAdmin 是这个场景下**效率最高的选择**。
## 下一步
如果你已经决定要试一下,按这条路径走最顺:
| 顺序 | 文档 | 预计时间 | 目的 |
|:---:|------|:-------:|------|
| 1 | [快速开始](/guide/start) | 10 min | 本地跑起来,看到登录页和仪表盘 |
| 2 | [后端开发指南](/guide/backend) | 15 min | 第一次添加一个业务模块 |
| 3 | [前端开发指南](/guide/frontend) | 15 min | 第一次添加一个页面 |
| 4 | [部署指南](/guide/deployment) | 20 min | 从本地推到生产环境 |
或者直接 [克隆仓库](https://gitee.com/fastapiadmin/FastApiAdmin) 边看代码边查文档。
::: tip 遇到问题?
[常见问题](/guide/why#常见问题) · [GitHub Issues](https://github.com/fastapiadmin/FastapiAdmin/issues) · [Gitee 问答](https://gitee.com/fastapiadmin/FastapiAdmin/issues)
:::
+56
View File
@@ -0,0 +1,56 @@
---
layout: home
editLink: true
lastUpdated: true
hero:
name: "FastApiAdmin"
text: "Web · H5 · 小程序,一套全栈"
tagline: 基于 FastAPI + Vue3 + TypeScript,前后端类型共享。30+ 业务模块开箱即用,AI 代码生成器覆盖 90% 常规 CRUD,Docker Compose 一条命令上线。
image:
src: /logo.svg
alt: AI 代码生成器 - 选表即生成完整 CRUD
actions:
- theme: brand
text: 立即开始
link: /guide/start
- theme: alt
text: 在线预览
link: https://service.fastapiadmin.com/web
target: _blank
- theme: alt
text: 移动端
link: https://service.fastapiadmin.com/app
target: _blank
features:
- icon: 📦
title: 全栈开箱即用
details: 前后端 + 移动端完整交付。FastAPI 异步后端 + Vue3 Web + UniApp 移动端,克隆即跑,零额外配置。
- icon: ⚡
title: 高性能异步架构
details: FastAPI 原生 async/await 支持,Pydantic 自动类型校验,Redis 缓存加速,轻松应对高并发场景。
- icon: 🤖
title: AI 代码生成器
details: 选数据库表 → AI 自动生成 Controller / Service / Model / Vue 页面代码。常规 CRUD 几乎不用手写,团队聚焦业务逻辑。
- icon: 🛡️
title: 企业级 RBAC 权限
details: JWT + OAuth2 认证,菜单 / 按钮 / 数据三级粒度权限控制,操作日志全审计。
- icon: 🐳
title: Docker 一键部署
details: Docker Compose 编排全栈服务(含 Nginx + SSL),一条命令上线。支持多环境配置管理。
- icon: 📱
title: Web + 移动端一体
details: 基于 UniApp 的移动端,一套代码同时生成 H5、微信小程序、支付宝小程序、App 等多端应用。
---
<script setup lang="ts">
import HomeSections from "../.vitepress/components/HomeSections.vue";
</script>
<HomeSections />
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

+70
View File
@@ -0,0 +1,70 @@
<svg width="695" height="695" viewBox="195 164.5 695 695" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="white"/>
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="#ECEFFF"/>
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="url(#paint0_radial_402_5926)"/>
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="url(#paint1_radial_402_5926)"/>
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="url(#paint2_radial_402_5926)"/>
<path d="M498.848 411.545C497.534 414.363 494.707 416.164 491.598 416.164H321.164C315.641 416.164 311.164 420.641 311.164 426.164V502C311.164 507.523 315.641 512 321.164 512H439.448C445.3 512 449.172 518.077 446.699 523.381L399.992 623.545C398.678 626.363 395.85 628.164 392.741 628.164H321.164C315.641 628.164 311.164 632.641 311.164 638.164V716C311.164 720.418 307.582 724 303.164 724H203C198.582 724 195 720.418 195 716V310C195 304.477 199.477 300 205 300H538.305C544.157 300 548.028 306.077 545.555 311.381L498.848 411.545Z" fill="url(#paint3_radial_402_5926)"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="white"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="#ECEFFF"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="url(#paint4_radial_402_5926)"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="url(#paint5_radial_402_5926)"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="url(#paint6_radial_402_5926)"/>
<path d="M688.908 560.322C686.291 554.709 690.77 548.423 696.893 549.353C757.064 558.491 810.471 588.221 849.703 631.13C850.244 631.721 850.689 632.392 851.027 633.118L888.099 712.619C890.572 717.923 886.701 724 880.849 724H770.33C767.221 724 764.393 722.199 763.079 719.381L688.908 560.322ZM518.744 719.381C517.43 722.199 514.602 724 511.493 724H421.614C416.148 724 412.297 718.637 414.255 713.534C442.643 639.551 503.816 581.812 579.989 558.107C586.39 556.114 591.818 562.67 588.985 568.746L518.744 719.381ZM704.825 319.586C704.844 319.626 704.877 319.659 704.917 319.678L704.956 319.696C705.03 319.731 705.062 319.819 705.027 319.893C705.009 319.933 705.009 319.979 705.027 320.019L807.477 539.725C810.905 547.077 802.133 554.798 794.992 550.951C758.455 531.27 717.22 519.187 673.402 516.817C670.405 516.655 667.72 514.883 666.451 512.163L648.161 472.939C645.29 466.781 636.532 466.781 633.66 472.939L613.528 516.112C612.404 518.523 610.151 520.21 607.53 520.664C559.993 528.902 516.417 548.698 479.804 577.052C472.49 582.716 458.831 572.994 462.741 564.609L576.796 320.02C576.814 319.98 576.814 319.934 576.795 319.894C576.761 319.819 576.793 319.73 576.867 319.695L576.906 319.677C576.947 319.658 576.98 319.625 576.999 319.584L583.978 304.619C585.292 301.801 588.119 300 591.228 300H690.596C693.705 300 696.532 301.801 697.846 304.619L704.825 319.586Z" fill="url(#paint7_radial_402_5926)"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="white"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="#ECEFFF"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="url(#paint8_radial_402_5926)"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="url(#paint9_radial_402_5926)"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="url(#paint10_radial_402_5926)"/>
<path d="M656.303 547C697.059 547 735.69 556.094 770.28 572.362C775.259 574.704 773.176 582.062 767.674 582.062C666.005 582.062 577.554 638.65 532.097 722.047C530.671 724.664 527.945 726.328 524.965 726.328H414.524C409.01 726.328 405.156 720.88 407.2 715.76C446.677 616.873 543.33 547 656.303 547Z" fill="url(#paint11_radial_402_5926)"/>
<defs>
<radialGradient id="paint0_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-137.956 -387.324 387.315 -228.814 483.689 731.186)" gradientUnits="userSpaceOnUse">
<stop offset="0.634139" stop-color="#1629FF"/>
<stop offset="1" stop-color="#A274FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint1_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-140.464 -366.075 365.281 -152.396 447.03 691.661)" gradientUnits="userSpaceOnUse">
<stop offset="0.493539" stop-color="#8258FF"/>
<stop offset="1" stop-color="#8258FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-111.514 -277.545 374.955 -279.04 405.025 738.373)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="1" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint3_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-190.674 -263.482 350.863 -361.721 469.942 706.034)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="0.690597" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint4_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-186.573 -387.324 523.807 -228.814 804.163 731.186)" gradientUnits="userSpaceOnUse">
<stop offset="0.634139" stop-color="#1629FF"/>
<stop offset="1" stop-color="#A274FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint5_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-189.964 -366.075 494.008 -152.396 754.585 691.661)" gradientUnits="userSpaceOnUse">
<stop offset="0.493539" stop-color="#8258FF"/>
<stop offset="1" stop-color="#8258FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint6_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-150.813 -277.545 507.091 -279.04 697.777 738.373)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="1" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint7_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-257.868 -263.482 474.509 -361.721 785.571 706.034)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="0.690597" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint8_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-143.901 -163.816 404.006 -96.7753 707.774 729.368)" gradientUnits="userSpaceOnUse">
<stop offset="0.634139" stop-color="#1629FF"/>
<stop offset="1" stop-color="#A274FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint9_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-146.517 -154.829 381.023 -64.455 669.536 712.651)" gradientUnits="userSpaceOnUse">
<stop offset="0.493539" stop-color="#8258FF"/>
<stop offset="1" stop-color="#8258FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint10_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-116.32 -117.386 391.113 -118.018 625.721 732.407)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="1" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint11_radial_402_5926" cx="0" cy="0" r="1" gradientTransform="matrix(-198.891 -111.438 365.983 -152.988 693.435 718.729)" gradientUnits="userSpaceOnUse">
<stop stop-color="#59B2FF"/>
<stop offset="0.690597" stop-color="#5EB4FF" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

+5
View File
@@ -0,0 +1,5 @@
User-agent: *
Allow: /
Disallow: /assets/
Sitemap: https://service.fastapiadmin.com/sitemap.xml
Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB