dubbo-admin-frontend

# dubbo-admin Frontend ## Purpose Use this skill to change or explain the Vue frontend while preserving routing, API, state, layout, i18n, and traffic-rule form patterns. ## When to use Use for `ui-vue3/` changes, route definitions, views, components, API clients, Pinia stores, tabs, SearchDomain pages, traffic rule forms, and frontend validation. Do not use for backend-only logic unless frontend API contracts are affected. ## Inputs Required: - Frontend route, view, component, or user workflow. - Intended UI behavior or API contract. Optional: - Backend endpoint or payload. - Screenshot or user interaction path. - Existing page to mirror. If missing, start from `ui-vue3/src/router/defaultRoutes.ts` and identify the view. ## Workflow 1. Locate the route in `ui-vue3/src/router/defaultRoutes.ts`. 2. Read the view under `ui-vue3/src/views/` and nearby components or composables. 3. Check API calls in `ui-vue3/src/api/` and request behavior in `src/base/http/request.ts`. 4. Use shared components and layout patterns before adding new abstractions. 5. Update Pinia state, i18n keys, and tests when user-visible behavior changes. 6. Read `references/traffic-rule-forms.md` for routing, dynamic config, or tag rule forms. ## Output format Return changed UI flow, route or component paths, API contract impact, validation commands, and any screenshot or browser-test gap. ## Validation - Run the smallest relevant command: `yarn lint`, `yarn type-check`, `yarn test:unit`, or `yarn build`. - Confirm request payloads match backend models. - Confirm new user-facing text has i18n keys. - For traffic forms, confirm form and YAML paths round-trip the same data. ## Edge cases - Mesh is injected by the Axios request layer; avoid duplicate mesh handling unless required. - Tabbed detail pages rely on route metadata and layout state. - If backend response fields change, check both API client types and view usage. ## References - Read `references/frontend-structure.md` for directory and route patterns. - Read `references/traffic-rule-forms.md` for traffic form design and round-trip checks.