---
description: Frontend development rules for HealthLink-HIS Vue 3/Element Plus code
paths:
  - "healthlink-his-ui/src/**/*.{vue,js,ts,jsx,tsx}"
  - "healthlink-his-ui/package.json"
  - "healthlink-his-ui/vite.config.js"
---

# Frontend Development Rules

## Tech stack
- Vue 3.5 + Vite 6.4 + Element Plus 2.14 + Pinia 2.2 + TypeScript 5.9
- Based on RuoYi-Vue3 framework

## Directory structure
```
src/api/{module}/        # API interfaces
src/views/{module}/      # Page components
src/store/modules/       # Pinia state management
src/components/          # Shared components
```

## Key constraints
- API prefix: `/healthlink-his/api/v1/`
- Route lazy loading: `() => import('@/views/xxx/index.vue')`
- Use `<script setup>` syntax for all pages
- Button permissions: `v-hasPermi` directive
- Cleanup: events registered in `onMounted` must be removed in `onUnmounted`

## Iron Laws (Frontend)
- **Iron Law 4**: API paths must align with backend (`/healthlink-his/api/v1/`)
- **Iron Law 18**: Never break existing page component structure when adding new pages
- **Iron Law 23**: Always use UTF-8 encoding when reading/writing files (PowerShell trap)
- **Iron Law 30**: Frontend compilation is mandatory — `npm run build:dev` must pass

## SCSS rules
- Check bracket closure in `<style lang="scss" scoped>` blocks
- All `{}` must be paired
- Compilation errors must be fixed immediately

## Verification commands
```bash
cd healthlink-his-ui
npm run build:dev        # Build verification
npm run lint             # ESLint check
npm run test:run         # Vitest unit tests
```

## Common patterns
- Use Element Plus components (ElTable, ElForm, ElDialog)
- Use vxe-table for complex data grids
- Use ECharts for charts and visualizations
- Use vue-plugin-hiprint for printing