前端规范
引言
OneArchive 前端采用 Vue 3 + TypeScript + Pinia + PrimeVue v4 + Tailwind CSS v4 技术栈。本规范确保前端代码质量、一致性和可维护性,充分利用所选技术栈优势。
1. 技术栈使用原则
TypeScript 使用
必须使用 TypeScript,而非 JavaScript。启用 strict: true 以获得最严格类型检查。
前端使用 pnpm 作为包管理器。
类型定义要求
所有组件 props、emits、事件回调、Pinia store state/getters/actions 必须有精确类型定义。
UI 组件库选择
优先使用 PrimeVue v4 组件,如 Button、DataTable、Dialog 等及其内置功能(pt 属性、slots、theming)。
样式定制优先通过 PrimeVue pt(Pass Through)属性或 Tailwind 类覆盖实现,而非直接写 CSS。
深度定制时,使用 Tailwind CSS v4 封装原子组件,但不得重复造轮子——PrimeVue 已有组件时,不要重新实现。
2. 样式与集成
Tailwind 配置
tailwind.config.js 中启用 cssLayer 选项以兼容 PrimeVue styled 模式。
安装并配置 tailwindcss-primeui 插件以获得最佳集成体验。
样式职责分离
Tailwind 主要用于布局、间距、响应式等通用样式。组件内部结构由 PrimeVue 控制。
3. 项目结构
composables/:存放组合式函数,如useAuth、useTauriCommand等。stores/:Pinia store,每个 store 对应一个业务域。types/:全局 TypeScript 接口和类型。api/:Tauri 命令调用封装,按模块划分。components/:业务组件,优先组合 PrimeVue 原子组件。
4. 类型安全
避免使用 any、unknown,除非必要且有类型守卫。
所有 API 响应(Tauri invoke 返回值)必须定义接口。
使用 defineProps<{ ... }>() 和 defineEmits<{ ... }>() 进行显式声明。