his/.qoder/rules/frontend.md

description, paths

description	paths
Frontend development rules for HealthLink-HIS Vue 3/Element Plus code	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

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