Oh My CV 架构解密：模块化简历构建引擎的设计与实现

核心架构：如何实现浏览器端简历编辑的模块化设计？

🔧 工作区组织策略

项目采用 monorepo 架构，通过 pnpm-workspace.yaml 实现多包管理。核心代码分为两大模块：packages/ 目录下的 11 个独立功能包（如 dynamic-css、gfonts-loader）和 site/ 目录下的 Nuxt 应用主体。这种设计使样式处理、字体加载等核心能力可独立复用，同时保持简历编辑功能的高度内聚。

🛠️ 前端应用架构

Nuxt 驱动的 site/ 目录采用页面路由与组件分离的设计：

• 页面层：site/src/pages/[...lang]/ 实现多语言路由，支持国际化简历编辑
• 组件层：site/src/components/ 按功能划分为 edit（编辑器）、resumes（简历管理）和 shared（通用组件）三大模块
• 状态管理：site/src/composables/stores/ 采用 Vue Composition API 实现响应式数据管理，避免传统 Vuex 的繁琐配置

关键文件：驱动简历编辑器的核心引擎

📝 入口文件解析

site/src/app.vue 作为应用根组件，整合了三大核心功能：

• 多语言支持通过 i18n 模块实现动态切换
• 编辑器状态通过 useStyleStore 和 useDataStore 实现全局管理
• 响应式布局适配从移动设备到桌面端的各类屏幕尺寸

✨ 特色功能实现

动态样式引擎：packages/dynamic-css/src/index.ts 提供运行时 CSS 生成能力，支持用户实时调整字体、间距等样式参数。核心实现采用 CSS-in-JS 思想，将用户配置直接转换为内联样式。

Markdown 处理管道：通过 packages/markdown-it-katex/ 和 markdown-it-cross-ref/ 等插件，实现学术公式渲染和交叉引用功能，满足技术简历的专业排版需求。

配置体系：如何定制你的简历编辑环境？

⚙️ 项目级配置

根目录的 tsconfig.base.json 定义了跨包 TypeScript 规则，确保类型一致性。eslint.config.js 采用扁平配置结构，统一代码风格检查标准。

📁 应用配置指南

• 国际化：site/configs/i18n.ts 管理语言切换逻辑，对应 site/src/i18n/ 目录下的多语言文件
• PWA 支持：site/configs/pwa.ts 配置离线缓存策略，使简历编辑功能在无网络环境下可用
• UnoCSS 配置：site/unocss.config.ts 定义原子化 CSS 规则，加速 UI 开发

开发建议小贴士

1. 新增功能时优先考虑封装为 packages/ 下的独立包，提高复用性
2. 修改样式相关功能可通过 site/src/composables/stores/style.ts 调试样式状态
3. 添加新字体需更新 site/src/assets/fonts/ 目录并修改 gfonts-loader 配置

通过这套架构设计，Oh My CV 实现了"浏览器内本地优先"的核心特性，同时保持代码的可维护性和功能扩展性。开发者可以基于现有模块快速定制个性化简历编辑器，或扩展支持更多专业排版需求。