---
jd-id: "01.02"
name: "src-components"
desc: "Shared UI building blocks for the authenticated layout (header, drawer, footer, layout shell) plus the language switcher and the global menu items definition."
author: "Clark Lin"
updateTime: "2026-07-06"
status: active
type: "A-高层系统"
tags:
  - 前端
  - Vue3
  - Vuetify
  - Components
---

## Core Files

| File path | Role |
|-----------|------|
| `src/components/AppLayout.vue` | Authenticated page chrome — composes `AppHeader` + `AppDrawer` + breadcrumbs + logout dialog; uses `100dvh` min-height so mobile full-bleed works on real devices |
| `src/components/AppHeader.vue` | Top app bar; renders the title, `LanguageSwitcher`, user info and triggers the logout dialog |
| `src/components/AppDrawer.vue` | Left navigation; resolves menu items from `components/constants/menuItems.js` |
| `src/components/AppFooter.vue` | Footer shown within the default layout |
| `src/components/LanguageSwitcher.vue` | Persists the user's locale choice via `setLocale(...)` into `localStorage('preferred-locale')` |
| `src/components/constants/menuItems.js` | `GLOBAL_MENU_ITEMS` with nested `children` for the **Master Data** group; matched against `route.meta.breadcrumbPath` to resolve icons in `AppLayout` |
| `src/components/constants/colors.js` | Shared color tokens for use across views |

---

## Conventions

- All authenticated views must keep `meta.layout: 'default'` in the router; the login route sets `meta.layout: 'none'` so `App.vue` renders a bare `<div>`.
- Breadcrumbs are **not** derived from the path. Each route declares `meta.breadcrumbPath` (an array of `{ key, to, disabled }` i18n keys); `AppLayout` resolves them and applies a fixed `home`/`master-data` icon, falling back to `meta.breadcrumb.icon` or matching `menuItems` for the leaf entry.

---

Home: [[01.00 student-app-frontend]] | **Location:** `C:\Projects\vue\student-app-frontend\src\components`