# jiananyou/leavemanager_vue architecture

> Architecture diagram of the GitHub repository jiananyou/leavemanager_vue, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jiananyou/leavemanager_vue
- Repository: https://github.com/jiananyou/leavemanager_vue

## Overview

This is the Vue frontend for a student leave-management system. Students enter leave requests and review their history; staff use the shared application to review requests, while college users also have analysis and Excel-import screens. Account settings provide password changes and logout. The app is bootstrapped through the root component and router, with Vuex holding identity state. The shown request-form, history/review, and settings code calls a separately hosted backend. Analysis, import, and login are represented from the routes and navigation; their implementation details were not excerpted.

Main entry points: [`src/router/index.js`](https://github.com/jiananyou/leavemanager_vue/blob/master/src/router/index.js) (Route Map), [`src/main.js`](https://github.com/jiananyou/leavemanager_vue/blob/master/src/main.js) (Vue Bootstrap), [`src/components/Home.vue`](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Home.vue) (Leave History), [`src/components/Vacate.vue`](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Vacate.vue) (Leave Request)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_main["Vue Bootstrap<br/>[main.js]"]
  node_approot["Root View<br/>[App.vue]"]
  node_router["Route Map<br/>[index.js]"]
  node_shell["Role Navigation<br/>[Index.vue]"]
  node_identity["Identity State<br/>[index.js]"]
end

subgraph group_leave["Leave Workflow"]
  node_history["Leave History<br/>[Home.vue]"]
  node_request["Leave Request<br/>[Vacate.vue]"]
end

subgraph group_admin["College Tools"]
  node_analysis["Leave Analysis<br/>[Analysis.vue]"]
  node_import["Excel Import<br/>[FileUpload.vue]"]
end

subgraph group_account["Account"]
  node_login["Login<br/>[Login.vue]"]
  node_settings["User Settings<br/>[Settings.vue]"]
end

node_user(("User"))
node_backend{{"Leave Backend"}}

node_user -.->|"opens app"| node_login
node_main -->|"mounts"| node_approot
node_main -->|"installs"| node_router
node_main -->|"installs"| node_identity
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_shell
node_router -->|"routes to"| node_history
node_router -->|"routes to"| node_request
node_router -->|"routes to"| node_analysis
node_router -->|"routes to"| node_import
node_router -->|"routes to"| node_settings
node_history -->|"requests records"| node_backend
node_history -->|"accepts or refuses"| node_backend
node_request -->|"checks courses"| node_backend
node_request -->|"submits leave"| node_backend
node_settings -->|"changes password"| node_backend

click node_main "https://github.com/jiananyou/leavemanager_vue/blob/master/src/main.js"
click node_approot "https://github.com/jiananyou/leavemanager_vue/blob/master/src/App.vue"
click node_router "https://github.com/jiananyou/leavemanager_vue/blob/master/src/router/index.js"
click node_shell "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Index.vue"
click node_identity "https://github.com/jiananyou/leavemanager_vue/blob/master/src/store/index.js"
click node_login "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Login.vue"
click node_history "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Home.vue"
click node_request "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Vacate.vue"
click node_analysis "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Analysis.vue"
click node_import "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/FileUpload.vue"
click node_settings "https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Settings.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_approot,node_router,node_shell,node_identity,node_user toneBlue
class node_history,node_request toneAmber
class node_analysis,node_import toneMint
class node_login,node_settings toneRose
class node_backend toneIndigo
```

## Components

### Application Shell

- [Vue Bootstrap](https://github.com/jiananyou/leavemanager_vue/blob/master/src/main.js): `src/main.js`
- [Root View](https://github.com/jiananyou/leavemanager_vue/blob/master/src/App.vue): `src/App.vue`
- [Route Map](https://github.com/jiananyou/leavemanager_vue/blob/master/src/router/index.js): `src/router/index.js`
- [Role Navigation](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Index.vue): `src/components/Index.vue`
- [Identity State](https://github.com/jiananyou/leavemanager_vue/blob/master/src/store/index.js): `src/store/index.js`

### Leave Workflow

- [Leave History](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Home.vue): `src/components/Home.vue`
- [Leave Request](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Vacate.vue): `src/components/Vacate.vue`

### College Tools

- [Leave Analysis](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Analysis.vue): `src/components/Analysis.vue`
- [Excel Import](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/FileUpload.vue): `src/components/FileUpload.vue`

### Account

- [Login](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Login.vue): `src/components/Login.vue`
- [User Settings](https://github.com/jiananyou/leavemanager_vue/blob/master/src/components/Settings.vue): `src/components/Settings.vue`

### Other components

- **User**
- **Leave Backend**

## Connections

- User → Login: opens app
- Vue Bootstrap → Root View: mounts (evidence: `src/main.js`)
- Vue Bootstrap → Route Map: installs (evidence: `src/main.js`)
- Vue Bootstrap → Identity State: installs (evidence: `src/main.js`)
- Route Map → Login: routes to (evidence: `src/router/index.js`)
- Route Map → Role Navigation: routes to (evidence: `src/router/index.js`)
- Route Map → Leave History: routes to (evidence: `src/router/index.js`)
- Route Map → Leave Request: routes to (evidence: `src/router/index.js`)
- Route Map → Leave Analysis: routes to (evidence: `src/router/index.js`)
- Route Map → Excel Import: routes to (evidence: `src/router/index.js`)
- Route Map → User Settings: routes to (evidence: `src/router/index.js`)
- Leave History → Leave Backend: requests records (evidence: `src/components/Home.vue`)
- Leave History → Leave Backend: accepts or refuses (evidence: `src/components/Home.vue`)
- Leave Request → Leave Backend: checks courses (evidence: `src/components/Vacate.vue`)
- Leave Request → Leave Backend: submits leave (evidence: `src/components/Vacate.vue`)
- User Settings → Leave Backend: changes password (evidence: `src/components/Settings.vue`)