chore: optimize build config and dependency management

.trae/specs/backendless-website-improvements/checklist.md

@@ -0,0 +1,55 @@
+# 无后端网站改进能力 - 验证清单
+
+- [x] 智能缓存系统
+  - [x] 数据成功存储到 IndexedDB
+  - [x] 离线状态下能加载缓存数据
+  - [x] 缓存状态显示清晰
+  - [x] 缓存策略正常工作
+
+- [ ] AI 辅助功能
+  - [ ] AI 模型能在浏览器中运行
+  - [ ] 智能推荐功能正常工作
+  - [ ] 内容生成功能正常工作
+  - [ ] AI 交互界面响应及时
+
+- [ ] 实时协作功能
+  - [ ] WebRTC 连接建立成功
+  - [ ] 实时编辑内容同步正常
+  - [ ] 协作成员管理功能正常
+  - [ ] 协作界面可用性良好
+
+- [x] 渐进式 Web 应用 (PWA)
+  - [x] 能被添加到主屏幕
+  - [x] 离线访问功能正常
+  - [x] 推送通知功能正常
+  - [x] Service Worker 正确缓存资源
+
+- [ ] 边缘计算集成
+  - [ ] CDN 正确缓存资源
+  - [ ] Edge Functions 正常工作
+  - [ ] 资源加载性能提升
+  - [ ] 响应时间减少
+
+- [ ] 3D 场景实现
+  - [ ] 3D 效果视觉质量良好
+  - [ ] 3D 场景性能流畅 (FPS > 60)
+  - [ ] 3D 交互响应及时
+  - [ ] 3D 资源加载优化
+
+- [x] 响应式设计
+  - [x] 在不同设备上布局效果良好
+  - [x] 关键断点的响应式行为正确
+  - [x] 触摸交互可用性良好
+  - [x] 移动端体验流畅
+
+- [ ] 性能优化和监控
+  - [ ] 性能监控数据采集正常
+  - [ ] 加载时间和性能指标达标
+  - [ ] 性能仪表盘可用性良好
+  - [ ] 资源加载优化有效
+
+- [ ] 整体功能
+  - [ ] 所有功能正常运行
+  - [ ] 用户体验流畅
+  - [ ] 界面设计符合规范
+  - [ ] 性能达到预期目标

.trae/specs/backendless-website-improvements/spec.md

@@ -0,0 +1,73 @@
+# 无后端网站改进能力 - 产品需求文档
+
+## 1. Product Overview
+无后端网站改进项目旨在通过前沿技术提升无后端网站的功能和性能，实现更丰富的用户体验。
+- 主要解决无后端网站功能受限的问题，为用户提供更完整、更智能的网站体验
+- 目标用户为前端开发者和网站所有者，市场价值在于降低开发成本同时提升网站质量
+
+## 2. Core Features
+
+### 2.1 User Roles
+| Role | Registration Method | Core Permissions |
+|------|---------------------|------------------|
+| 普通用户 | 无需注册 | 浏览网站内容，使用基本功能 |
+| 高级用户 | 浏览器本地存储 | 访问个人化功能，保存偏好设置 |
+
+### 2.2 Feature Module
+1. **智能缓存系统**：本地数据存储，离线访问能力
+2. **AI 辅助功能**：基于浏览器的 AI 能力，无需后端支持
+3. **实时协作**：基于 WebRTC 的点对点通信
+4. **渐进式 Web (PWA)**：离线访问，推送通知
+5. **边缘计算**：利用 CDN 和 Edge Functions 增强性能
+
+### 2.3 Page Details
+| Page Name | Module Name | Feature description |
+|-----------|-------------|---------------------|
+| 主页面 | 智能缓存系统 | 本地存储常用数据，提升加载速度，支持离线访问 |
+| 主页面 | AI 辅助功能 | 基于浏览器的 AI 模型，提供智能推荐和内容生成 |
+| 协作页面 | 实时协作 | 基于 WebRTC 的点对点通信，支持多人实时编辑 |
+| 应用页面 | 渐进式应用 | 支持添加到主屏幕，离线访问，推送通知 |
+| 性能监控 | 边缘计算 | 利用 CDN 和 Edge Functions 优化性能，减少延迟 |
+
+## 3. Core Process
+用户访问网站 → 智能缓存系统加载本地数据 → AI 辅助功能提供个性化内容 → 实时协作功能支持多人互动 → 渐进式应用提供离线访问能力 → 边缘计算优化性能
+
+```mermaid
+flowchart TD
+    A[用户访问网站] --> B[智能缓存系统加载数据]
+    B --> C[AI 辅助功能提供个性化内容]
+    C --> D[实时协作功能]
+    D --> E[渐进式应用离线访问]
+    E --> F[边缘计算优化性能]
+```
+
+## 4. User Interface Design
+### 4.1 Design Style
+- 主色调：深蓝色 (#165DFF) 和浅灰色 (#F5F7FA)
+- 按钮风格：圆角设计，悬停效果
+- 字体：Inter 无衬线字体，标题 24px，正文 16px
+- 布局风格：卡片式布局，响应式设计
+- 图标风格：线性图标，简洁现代
+
+### 4.2 Page Design Overview
+| Page Name | Module Name | UI Elements |
+|-----------|-------------|-------------|
+| 主页面 | 智能缓存系统 | 加载状态指示器，缓存状态显示，离线模式提示 |
+| 主页面 | AI 辅助功能 | 智能推荐卡片，内容生成按钮，AI 交互界面 |
+| 协作页面 | 实时协作 | 多人光标指示，实时编辑状态，协作成员列表 |
+| 应用页面 | 渐进式应用 | 添加到主屏幕提示，离线状态指示器，推送通知设置 |
+| 性能监控 | 边缘计算 | 性能指标仪表盘，加载时间可视化，CDN 状态显示 |
+
+### 4.3 Responsiveness
+- 采用移动优先设计，支持从 320px 到 1920px 的所有设备
+- 关键断点：360px (手机)、768px (平板)、1200px (桌面)
+- 触摸优化：按钮最小尺寸 44x44px，支持触摸手势
+
+### 4.4 3D Scene Guidance
+- 环境：简约现代的 3D 背景，轻度视差效果
+- 光照：柔和的环境光，强调主题元素
+- 相机：固定视角，轻微的交互响应
+- 构图：中心聚焦，辅助元素环绕
+- 交互：鼠标悬停时的细微动画效果
+- 后处理：轻微的景深效果，提升视觉层次感
+- 资源：使用轻量级 3D 模型，确保性能流畅

.trae/specs/backendless-website-improvements/tasks.md

@@ -0,0 +1,113 @@
+# 无后端网站改进能力 - 实现计划
+
+## [x] 任务 1: 智能缓存系统实现
+- **优先级**: P0
+- **依赖**: 无
+- **描述**:
+  - 实现基于 IndexedDB 的本地数据存储
+  - 设计缓存策略，包括数据过期和更新机制
+  - 提供离线访问能力，当网络不可用时仍能加载缓存数据
+- **验收标准**: AC-1, AC-2
+- **测试要求**:
+  - `programmatic` TR-1.1: 验证数据成功存储到 IndexedDB
+  - `programmatic` TR-1.2: 验证离线状态下能加载缓存数据
+  - `human-judgment` TR-1.3: 检查缓存状态显示是否清晰
+- **备注**: 考虑使用 Dexie.js 简化 IndexedDB 操作
+
+## [ ] 任务 2: AI 辅助功能集成
+- **优先级**: P1
+- **依赖**: 任务 1
+- **描述**:
+  - 集成浏览器端 AI 模型 (如 ONNX Runtime Web)
+  - 实现智能内容推荐功能
+  - 添加基于 AI 的内容生成能力
+- **验收标准**: AC-3, AC-4
+- **测试要求**:
+  - `programmatic` TR-2.1: 验证 AI 模型能在浏览器中运行
+  - `human-judgment` TR-2.2: 评估推荐内容的相关性
+  - `human-judgment` TR-2.3: 评估生成内容的质量
+- **备注**: 选择轻量级 AI 模型以确保性能
+
+## [ ] 任务 3: 实时协作功能实现
+- **优先级**: P1
+- **依赖**: 任务 1
+- **描述**:
+  - 基于 WebRTC 实现点对点通信
+  - 实现实时编辑和同步功能
+  - 添加协作成员管理和状态显示
+- **验收标准**: AC-5, AC-6
+- **测试要求**:
+  - `programmatic` TR-3.1: 验证 WebRTC 连接建立成功
+  - `programmatic` TR-3.2: 验证实时编辑内容同步
+  - `human-judgment` TR-3.3: 检查协作界面的可用性
+- **备注**: 考虑使用 PeerJS 简化 WebRTC 实现
+
+## [x] 任务 4: 渐进式 Web 应用 (PWA) 配置
+- **优先级**: P0
+- **依赖**: 任务 1
+- **描述**:
+  - 创建 PWA 配置文件 (manifest.json)
+  - 实现 Service Worker 用于离线访问
+  - 添加推送通知功能
+- **验收标准**: AC-7, AC-8
+- **测试要求**:
+  - `programmatic` TR-4.1: 验证 PWA 能被添加到主屏幕
+  - `programmatic` TR-4.2: 验证离线访问功能
+  - `programmatic` TR-4.3: 验证推送通知功能
+- **备注**: 确保 Service Worker 正确缓存关键资源
+
+## [ ] 任务 5: 边缘计算集成
+- **优先级**: P2
+- **依赖**: 无
+- **描述**:
+  - 配置 CDN 加速静态资源
+  - 实现 Edge Functions 处理动态请求
+  - 优化资源加载策略
+- **验收标准**: AC-9, AC-10
+- **测试要求**:
+  - `programmatic` TR-5.1: 验证 CDN 正确缓存资源
+  - `programmatic` TR-5.2: 验证 Edge Functions 正常工作
+  - `programmatic` TR-5.3: 测量加载性能提升
+- **备注**: 考虑使用 Cloudflare Workers 或 Vercel Edge Functions
+
+## [ ] 任务 6: 3D 场景实现
+- **优先级**: P2
+- **依赖**: 无
+- **描述**:
+  - 使用 Three.js 实现轻量级 3D 背景
+  - 添加交互效果和动画
+  - 优化 3D 性能以确保流畅运行
+- **验收标准**: AC-11, AC-12
+- **测试要求**:
+  - `human-judgment` TR-6.1: 评估 3D 效果的视觉质量
+  - `programmatic` TR-6.2: 验证 3D 场景性能 (FPS > 60)
+  - `human-judgment` TR-6.3: 检查 3D 交互的响应性
+- **备注**: 使用 React Three Fiber 简化 React 中的 Three.js 集成
+
+## [x] 任务 7: 响应式设计优化
+- **优先级**: P0
+- **依赖**: 无
+- **描述**:
+  - 实现移动优先的响应式设计
+  - 优化不同设备的布局和交互
+  - 确保触摸设备的良好体验
+- **验收标准**: AC-13, AC-14
+- **测试要求**:
+  - `human-judgment` TR-7.1: 检查在不同设备上的布局效果
+  - `programmatic` TR-7.2: 验证关键断点的响应式行为
+  - `human-judgment` TR-7.3: 评估触摸交互的可用性
+- **备注**: 使用 Tailwind CSS 简化响应式设计实现
+
+## [ ] 任务 8: 性能优化和监控
+- **优先级**: P1
+- **依赖**: 任务 4, 任务 5
+- **描述**:
+  - 实现性能监控系统
+  - 优化资源加载和渲染性能
+  - 提供性能分析工具
+- **验收标准**: AC-15, AC-16
+- **测试要求**:
+  - `programmatic` TR-8.1: 验证性能监控数据采集
+  - `programmatic` TR-8.2: 测量加载时间和性能指标
+  - `human-judgment` TR-8.3: 评估性能仪表盘的可用性
+- **备注**: 考虑使用 Lighthouse 和 Web Vitals 进行性能评估

index.html

@@ -60,5 +60,19 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      // 注册Service Worker
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/service-worker.js')
+            .then((registration) => {
+              console.log('Service Worker registered with scope:', registration.scope);
+            })
+            .catch((error) => {
+              console.error('Service Worker registration failed:', error);
+            });
+        });
+      }
+    </script>
   </body>
 </html>