# liangxh0523/worktime architecture

> Architecture diagram of the GitHub repository liangxh0523/worktime, 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/liangxh0523/worktime
- Repository: https://github.com/liangxh0523/worktime

## Overview

Worktime is a Vue attendance and leave-management interface. Users navigate a shared shell to personal attendance and leave pages or team attendance, leave, and annual-statistics views; forms and tables display the results. The sampled views contain seeded records and mostly placeholder interactions, so the excerpts do not establish a backend or persistent store. The graph covers the documented routes and sampled UI; component-to-route dispatch is visible in the menu, while data-service connections are not shown.

Main entry points: [`src/router/index.js`](https://github.com/liangxh0523/worktime/blob/master/src/router/index.js) (Route Table), [`src/App.vue`](https://github.com/liangxh0523/worktime/blob/master/src/App.vue) (Application Shell), [`src/main.js`](https://github.com/liangxh0523/worktime/blob/master/src/main.js) (Vue Bootstrap), [`src/components/Aside/Aside.vue`](https://github.com/liangxh0523/worktime/blob/master/src/components/Aside/Aside.vue) (Navigation Menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application Shell"]
  node_app["Application Shell<br/>[App.vue]"]
  node_menu["Navigation Menu<br/>[Aside.vue]"]
  node_router["Route Table<br/>[index.js]"]
  node_bootstrap["Vue Bootstrap<br/>[main.js]"]
end

subgraph group_personal["Personal Worktime"]
  node_personal_attendance["Personal Attendance"]
  node_personal_leave["Personal Leave"]
end

subgraph group_team["Team Worktime"]
  node_team_attendance["Team Attendance"]
  node_team_leave["Team Leave<br/>[team_vocation.vue]"]
  node_team_statistics["Team Statistics"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_bootstrap -->|"mounts"| node_app
node_bootstrap -->|"installs"| node_router
node_app -->|"renders"| node_menu
node_menu -->|"dispatches routes"| node_router
node_router -->|"routes to"| node_personal_attendance
node_router -->|"routes to"| node_personal_leave
node_router -->|"routes to"| node_team_attendance
node_router -->|"routes to"| node_team_leave
node_router -->|"routes to"| node_team_statistics

click node_app "https://github.com/liangxh0523/worktime/blob/master/src/App.vue"
click node_menu "https://github.com/liangxh0523/worktime/blob/master/src/components/Aside/Aside.vue"
click node_router "https://github.com/liangxh0523/worktime/blob/master/src/router/index.js"
click node_bootstrap "https://github.com/liangxh0523/worktime/blob/master/src/main.js"
click node_personal_attendance "https://github.com/liangxh0523/worktime/blob/master/src/components/personal/personal_attendance.vue"
click node_personal_leave "https://github.com/liangxh0523/worktime/blob/master/src/components/personal/personal_vocation.vue"
click node_team_attendance "https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_attendance.vue"
click node_team_leave "https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_vocation.vue"
click node_team_statistics "https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_statistics.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_app,node_menu,node_router,node_bootstrap,node_user toneBlue
class node_personal_attendance,node_personal_leave toneAmber
class node_team_attendance,node_team_leave,node_team_statistics toneMint
```

## Components

### Application Shell

- [Application Shell](https://github.com/liangxh0523/worktime/blob/master/src/App.vue): `src/App.vue`
- [Navigation Menu](https://github.com/liangxh0523/worktime/blob/master/src/components/Aside/Aside.vue): `src/components/Aside/Aside.vue`
- [Route Table](https://github.com/liangxh0523/worktime/blob/master/src/router/index.js): `src/router/index.js`
- [Vue Bootstrap](https://github.com/liangxh0523/worktime/blob/master/src/main.js): `src/main.js`

### Personal Worktime

- [Personal Attendance](https://github.com/liangxh0523/worktime/blob/master/src/components/personal/personal_attendance.vue): `src/components/personal/personal_attendance.vue`
- [Personal Leave](https://github.com/liangxh0523/worktime/blob/master/src/components/personal/personal_vocation.vue): `src/components/personal/personal_vocation.vue`

### Team Worktime

- [Team Attendance](https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_attendance.vue): `src/components/team/team_attendance.vue`
- [Team Leave](https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_vocation.vue): `src/components/team/team_vocation.vue`
- [Team Statistics](https://github.com/liangxh0523/worktime/blob/master/src/components/team/team_statistics.vue): `src/components/team/team_statistics.vue`

### Other components

- **User**

## Connections

- User → Application Shell: uses (evidence: `src/App.vue`)
- Vue Bootstrap → Application Shell: mounts (evidence: `src/main.js`)
- Vue Bootstrap → Route Table: installs (evidence: `src/main.js`)
- Application Shell → Navigation Menu: renders (evidence: `src/App.vue`)
- Navigation Menu → Route Table: dispatches routes (evidence: `src/components/Aside/Aside.vue`)
- Route Table → Personal Attendance: routes to (evidence: `src/router/index.js`)
- Route Table → Personal Leave: routes to (evidence: `src/router/index.js`)
- Route Table → Team Attendance: routes to (evidence: `src/router/index.js`)
- Route Table → Team Leave: routes to (evidence: `src/router/index.js`)
- Route Table → Team Statistics: routes to (evidence: `src/router/index.js`)