75 lines
1.8 KiB
Markdown
75 lines
1.8 KiB
Markdown
# 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 脚本，后续应在计划中补齐
|