Skip to content

前端规范 ​

引言 ​

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<{ ... }>() 进行显式声明。

5. 关联外链 ​