# frontend

`frontend/` 是 `font2svg` 的 Vue 3 + TypeScript 前端应用，负责字体浏览、文本预览与 SVG/PNG 导出。

## 技术栈

- Vue 3 + `<script setup>`
- TypeScript
- Vite
- Pinia
- UnoCSS
- opentype.js
- harfbuzzjs（当前仅在高级接口中可用）

## 本地开发

```bash
pnpm install
pnpm run dev
```

默认地址：`http://localhost:5174`

## 构建与预览

```bash
pnpm run build
pnpm run preview
```

`build` 已包含 `vue-tsc -b` 类型检查。

## 目录说明

```text
frontend/
├── public/
│   ├── fonts/              # 字体文件（由根目录统一维护）
│   └── fonts.json          # 字体清单（根目录脚本生成）
├── src/
│   ├── components/         # 页面组件
│   ├── composables/        # 组合式逻辑
│   ├── stores/             # Pinia 状态管理
│   ├── utils/              # 字体加载/排版/导出工具
│   ├── types/              # 类型声明
│   ├── App.vue             # 主界面
│   └── main.ts             # 应用入口
├── vite.config.ts
└── uno.config.ts
```

## 关键实现

- `src/stores/fontStore.ts`
  - 字体、收藏、预览、分类展开状态
  - localStorage 持久化
  - 字体按需加载与进度回传
- `src/components/SvgPreview.vue`
  - 预览防抖
  - 批量并发生成
  - 交叉观察器懒加载
  - 预览几何缓存（LRU）
- `src/utils/svg-builder.ts`
  - 字体文本转 SVG
  - 自动按 45 字换行
- `src/utils/download.ts`
  - SVG/PNG 下载
  - ZIP 打包导出

## 注意事项

- 字体目录唯一来源是 `frontend/public/fonts/`
- 更新字体后需要在仓库根目录执行 `pnpm run prepare-fonts`
- 当前仓库尚未配置前端 lint/test 脚本，后续应在计划中补齐