teapot_system/frontend/AGENTS.md

Frontend Guidelines

Scope

• Applies to files under frontend/.
• Inherit the root AGENTS.md and only override frontend-specific expectations here.

Stack

• Vue 3 + Vite + TypeScript + Vue Router + Pinia + Element Plus.
• Local API base URL is configured through frontend/.env.local and should point to http://localhost:8081 for local development.

Build And Test

• Install dependencies from frontend/: npm install
• Start the dev server from frontend/: npm run dev
• Build from frontend/: npm run build
• Run the frontend build after any change under frontend/.

Conventions

• Keep route-level pages lazily loaded in frontend/src/router/index.ts.
• Preserve the current split between views, components, services, stores, layouts, and types. Do not move API calls into view files when they belong in frontend/src/services.
• Keep permission-aware navigation and access rules centered in frontend/src/router/index.ts, frontend/src/stores/auth.ts, and frontend/src/services/access.ts.
• Keep Element Plus on-demand loading configured in frontend/vite.config.ts. Do not reintroduce global Element Plus registration or full-library CSS import in frontend/src/main.ts.
• When adding heavy UI dependencies or shared utilities, preserve the current manual chunk strategy in frontend/vite.config.ts and watch for new build-size regressions.
• Reuse shared business components such as frontend/src/components/OrderEditorDialog.vue instead of duplicating order editing flows.
• Preserve the established visual language from 前端页面UI方案.md: warm copper palette, fixed left navigation, and dedicated detail routes instead of modal-driven workflows.

Frontend Business Rules

• Product detail remains a standalone route and must keep the left category tree visible during navigation.
• Read-only users may browse product and order information but must not see edit-only actions.
• Product and order screens should reflect the same permission and stock rules enforced by the backend, not looser frontend-only behavior.
• Label download entry points stay in order detail flows, while product detail handles image and label template management.