oci-portal-dash/.trellis/spec/frontend/index.md

Frontend Development Guidelines(oci-portal-dash 前端规范)

Vue 3 前端(oci-portal-dash/)编码规范入口。

---

技术栈约束

Vue 3 + Vite + TypeScript + Naive UI + Tailwind CSS v4 + ECharts + Pinia。Naive UI 承担组件视觉(themeOverrides),Tailwind 只承载设计 token 与布局工具类。选型对比与理由归档于 .trellis/tasks/archive/2026-07/07-06-frontend-design-research/。

---

Guidelines Index

Guide	内容
Directory Structure	src 分层、文件命名与全局作用域约定
TypeScript & Vue	TS 严格模式与组件写法
Styling & Design Tokens	Anthropic 风设计 token、字体与反模式清单
Buttons	按钮七变体、尺寸档位与危险两段式守则
API & State	请求封装与 Pinia 使用边界

---

Pre-Development Checklist

写代码前确认:

• 读过 Directory Structure,文件放对层(views / components / composables / api / stores / types)
• 涉及颜色、圆角、间距时先看 Styling & Design Tokens,禁止硬编码 hex
• 新增请求走 api/ 统一封装,DTO 类型进 types/(与后端 swagger oci-portal/docs/ 一一对应)
• 出 UI 设计稿前读 ../guides/design-workflow.md

Quality Check

提交前必过:

npm run lint        # ESLint(flat config,含 eslint-plugin-vue recommended)+ Prettier
npm run typecheck   # vue-tsc --noEmit
npm run test        # vitest(happy-dom),*.test.ts 与被测模块同目录
npm run build       # 类型检查 + 产物构建

• 提交信息沿用项目规范(中文、≤50 字),不采用 Conventional Commits。
• 依赖变更后 package.json 与 lockfile 一起提交;不提交 node_modules、构建产物。