frontend
frontend/ 是 font2svg 的 Vue 3 + TypeScript 前端应用，负责字体浏览、文本预览与 SVG/PNG 导出。
技术栈
- Vue 3 +
<script setup> - TypeScript
- Vite
- Pinia
- UnoCSS
- opentype.js
- harfbuzzjs（当前仅在高级接口中可用）
本地开发
pnpm install
pnpm run dev
默认地址：http://localhost:5174
构建与预览
pnpm run build
pnpm run preview
build 已包含 vue-tsc -b 类型检查。
目录说明
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 脚本，后续应在计划中补齐