SC-Riber 网站

使用 Flutter Web 构建的现代响应式企业网站。具有玻璃拟态设计、流畅动画、深色模式支持以及 OAuth + PassKey 安全认证。

SC-RIBER 网站

摘要

SC-Riber 网站是一个完全使用 Flutter Web 构建的现代响应式企业作品集网站。该项目展示了我们的产品、项目和博客内容，重点关注用户体验、视觉吸引力和尖端安全性。

关键词: Flutter Web、OAuth、PassKey、WebAuthn、Cloudflare、响应式设计、玻璃拟态

1. 简介

SC-Riber 网站作为我们公司的数字门面，展示我们的项目组合、产品和技术专长。使用 Flutter Web 技术构建，该网站在所有平台和设备上提供一致的高质量体验。

2. 主要功能

2.1. 响应式设计

完全响应式布局，无缝适配桌面、平板和移动设备屏幕。

2.2. 深色和浅色主题

完整的主题支持，在深色和浅色模式之间平滑过渡。

2.3. 玻璃拟态 UI

现代美学设计，包含玻璃拟态元素、微妙的模糊效果和半透明表面。

2.4. 滚动触发动画

引人入胜的微交互和滚动触发动画。

2.5. 博客系统

集成的博客平台，提供完整的 Markdown 支持、分类过滤和搜索功能。

2.6. 现代登录系统（OAuth + PassKey）

最先进的认证系统，包含：

OAuth 2.0 集成: 使用 Google、GitHub 和 Discord 账户无缝登录
PassKey 支持: 使用 WebAuthn/FIDO2 标准的无密码认证
安全会话管理: 带自动刷新的加密会话令牌
多因素认证: 通过多种验证方法增强安全性

2.7. 多语言支持

完整的国际化支持，超过10种语言。

3. 技术架构

3.1. 前端

Flutter Web: 跨平台 UI 框架
响应式布局: 适用于所有屏幕尺寸的自适应设计模式
状态管理: 使用 Provider 模式的高效状态处理

3.2. 后端基础设施

Cloudflare Workers: 用于 API 端点的无服务器边缘计算
Cloudflare D1: 边缘的 SQLite 兼容数据库
Cloudflare R2: 用于媒体和静态资源的对象存储
better-auth: 支持 OAuth 和 PassKey 的现代认证库

4. 安全功能

全站 HTTPS: 所有连接使用 TLS 1.3 加密
CSRF 保护: 基于令牌的跨站请求伪造保护
速率限制: 防御暴力破解和 DDoS 攻击
内容安全策略: 严格的 CSP 头以防止 XSS 攻击

5. 性能优化

边缘部署: 内容从 200 多个全球位置提供
资源优化: 压缩图片和延迟加载
代码分割: 按需加载以实现更快的首次页面加载