update at 2026-02-07 16:05:38

frontend/README.md

@@ -1,5 +1,74 @@
-# Vue 3 + TypeScript + Vite
+# frontend
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+`frontend/` 是 `font2svg` 的 Vue 3 + TypeScript 前端应用，负责字体浏览、文本预览与 SVG/PNG 导出。
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 技术栈
+
+- 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 脚本，后续应在计划中补齐