liquidliangandClaude Sonnet 4.5
057fdef0f4
feat(editor): 完善文本属性面板和字体管理系统
## 新增功能
### 字体管理服务 (font-manager-service.ts)
- 自动提取画布中使用的字体
- 画布初始化时预加载已使用的字体
- 支持系统字体和 Google Fonts
- 字体预览图管理
- 使用 link 标签加载字体，由 Service Worker 自动缓存
### Service Worker 字体缓存
- 拦截 Google Fonts CSS 和字体文件请求
- Cache-First 策略，优先从缓存读取
- 自动缓存字体文件，支持离线使用
- 应用层无感知的缓存管理
### 文本属性面板增强
- 集成字体管理服务
- 预加载 Google Fonts，提升用户体验
- 优化字体选择器性能
- 支持字体加载状态显示
## 技术实现
### 字体加载流程
```
画布加载
↓
提取使用的字体 (extractFontsFromBoard)
↓
预加载字体 (preloadBoardFonts)
↓
Service Worker 拦截请求
↓
缓存/返回字体文件
↓
渲染文本
```
### 缓存策略
- 使用 Service Worker Cache API
- Cache-First 策略
- 字体文件永久缓存
- 支持离线访问
## 文件变更
### 新增文件
- `packages/drawnix/src/services/font-manager-service.ts` - 字体管理服务
- `packages/drawnix/src/constants/text-effects.ts` - 字体配置
- `packages/drawnix/src/types/text-effects.types.ts` - 类型定义
- `packages/drawnix/src/utils/text-effects-utils.ts` - 工具函数
- `packages/drawnix/src/transforms/text-effects.ts` - 文本特效转换
### 修改文件
- `apps/web/src/sw/index.ts` - 添加字体缓存逻辑
- `packages/drawnix/src/drawnix.tsx` - 集成字体预加载
- `packages/drawnix/src/components/toolbar/popup-toolbar/text-property-panel.tsx` - 使用字体管理服务
- `CLAUDE.md` - 更新文档，记录字体管理功能
## 相关文档
- 字体管理服务: `packages/drawnix/src/services/font-manager-service.ts`
- Service Worker 字体缓存: `apps/web/src/sw/index.ts`
- 字体配置: `packages/drawnix/src/constants/text-effects.ts`
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-09 16:32:12 +08:00
..
2026-01-09 16:32:12 +08:00
2025-09-05 21:36:55 +08:00