# 系统模式 (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 提供数据安全。