0 Fork 0

Files

T

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