| # 系统模式 (System Patterns) | |
| ## 系统架构 | |
| `spwebsite` 采用前后端一体的单体应用架构，通过 Docker 进行容器化部署。 | |
| * **前端**: 静态文件 (HTML, CSS, JavaScript) 由后端 FastAPI 应用提供服务。 | |
| * **后端**: Python FastAPI 应用处理业务逻辑、API 请求，并与 Supabase 数据库交互。 | |
| * **数据库**: 外部托管的 Supabase (PostgreSQL) 数据库。 | |
| ```mermaid | |
| graph TD | |
| Browser --> FastAPI_App[FastAPI 应用 (Python)] | |
| FastAPI_App --> StaticFiles[提供静态文件 (Vue.js/Bootstrap)] | |
| FastAPI_App --> Supabase_DB[Supabase 数据库 (PostgreSQL)] | |
| StaticFiles --> Browser | |
| ``` | |
| ## 关键技术决策 | |
| 1. **前后端一体**: 简化部署和开发流程，尤其适用于 Hugging Face Spaces 的 Docker 部署。 | |
| 2. **FastAPI**: 选择 FastAPI 作为后端框架，因为它性能高、易于使用，并内置 OpenAPI/Swagger 文档。 | |
| 3. **Vue.js (CDN)**: 采用 CDN 方式引入 Vue.js，避免了复杂的构建工具链，简化了前端开发和部署。 | |
| 4. **Bootstrap 5.3 (CDN)**: 同样通过 CDN 引入，提供快速响应式 UI 开发能力。 | |
| 5. **Supabase**: 作为后端即服务 (BaaS) 解决方案，提供托管的 PostgreSQL 数据库、认证和 API，大大减少了后端基础设施的维护工作。 | |
| 6. **Docker**: 容器化确保了开发、测试和生产环境的一致性。 | |
| ## 设计模式 | |
| * **MVC/MVVM (前端)**: Vue.js 自然地支持 MVVM 模式，通过数据绑定和组件化管理 UI 状态和行为。 | |
| * **RESTful API (后端)**: 后端通过 RESTful 风格的 API 端点与前端通信。 | |
| * **依赖注入 (后端)**: FastAPI 通过其依赖注入系统简化了请求处理和资源管理。 | |
| ## 组件关系 | |
| * **`index.html`**: 前端应用的入口，加载所有静态资源和 Vue 应用。 | |
| * **`style.css`**: 定义全局和组件级样式。 | |
| * **`app.js`**: 包含 Vue 根实例，管理应用状态和行为，通过 `fetch` API 调用后端。 | |
| * **`app.py`**: | |
| * 使用 `StaticFiles` 挂载 `static/` 目录，提供前端文件。 | |
| * 定义 API 路由 (`/api/proxies`)，处理前端请求。 | |
| * 通过 `supabase` 客户端与 Supabase 数据库进行 CRUD 操作。 | |
| * **Supabase 数据库**: 存储 `sp_proxies` 等应用数据（表名前缀为 `sp_`），并通过 RLS 提供数据安全。 | |