# Frontend Guidelines

## Scope
- Applies to files under frontend/.
- Inherit the root [AGENTS.md](../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](.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](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](src/services).
- Keep permission-aware navigation and access rules centered in [frontend/src/router/index.ts](src/router/index.ts), [frontend/src/stores/auth.ts](src/stores/auth.ts), and [frontend/src/services/access.ts](src/services/access.ts).
- Keep Element Plus on-demand loading configured in [frontend/vite.config.ts](vite.config.ts). Do not reintroduce global Element Plus registration or full-library CSS import in [frontend/src/main.ts](src/main.ts).
- When adding heavy UI dependencies or shared utilities, preserve the current manual chunk strategy in [frontend/vite.config.ts](vite.config.ts) and watch for new build-size regressions.
- Reuse shared business components such as [frontend/src/components/OrderEditorDialog.vue](src/components/OrderEditorDialog.vue) instead of duplicating order editing flows.
- Preserve the established visual language from [前端页面UI方案.md](../前端页面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.