memory-bank/systemPatterns.md

系统模式 (System Patterns)

系统架构

spwebsite 采用前后端一体的单体应用架构，通过 Docker 进行容器化部署。

• 前端: 静态文件 (HTML, CSS, JavaScript) 由后端 FastAPI 应用提供服务。
• 后端: Python FastAPI 应用处理业务逻辑、API 请求，并与 Supabase 数据库交互。
• 数据库: 外部托管的 Supabase (PostgreSQL) 数据库。

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 提供数据安全。