font2pic/frontend/README.md

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 脚本，后续应在计划中补齐