# shitang453/pure-admin-thin architecture

> Architecture diagram of the GitHub repository shitang453/pure-admin-thin, 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/shitang453/pure-admin-thin
- Repository: https://github.com/shitang453/pure-admin-thin

## Overview

This is a Vue-based admin application scaffold. Its central workflow is loading platform configuration, initializing the app and router, then presenting authenticated users with permission-filtered navigation and routed views; login and user state support that access flow. The layout also provides navigation search, tags, theme controls, and settings. Several important subsystems are represented from the tree and SOURCE INDEX, but their internal calls are not inferred where source excerpts do not show them.

Main entry points: [`src/layout/index.vue`](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/index.vue) (Layout shell), [`src/main.ts`](https://github.com/shitang453/pure-admin-thin/blob/main/src/main.ts) (Vue bootstrap), [`src/router/index.ts`](https://github.com/shitang453/pure-admin-thin/blob/main/src/router/index.ts) (Router), [`src/layout/hooks/useDataThemeChange.ts`](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts) (Theme controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["App startup"]
  node_bootstrap["Vue bootstrap<br/>[main.ts]"]
  node_platform_config["Platform config<br/>[index.ts]"]
  node_app_root["App root<br/>[App.vue]"]
  node_plugins["UI plugins<br/>[elementPlus.ts]"]
  node_directives["App directives<br/>[index.ts]"]
end

subgraph group_identity["Identity and access"]
  node_login["Login view<br/>[index.vue]"]
  node_user_state["User state<br/>[user.ts]"]
  node_auth["Token and auth<br/>[auth.ts]"]
  node_access_controls["Permission controls<br/>[auth.tsx]"]
end

subgraph group_navigation["Routing and layout"]
  node_router["Router<br/>[index.ts]"]
  node_route_utils["Route processing<br/>[utils.ts]"]
  node_layout["Layout shell<br/>[index.vue]"]
  node_navigation_ui["Sidebar navigation"]
  node_nav_logic["Navigation logic<br/>[useNav.ts]"]
  node_search["Navigation search"]
  node_settings_ui["Layout settings<br/>[index.vue]"]
  node_content["Routed content<br/>[index.vue]"]
  node_views["Admin and error views"]
end

subgraph group_state["Application state"]
  node_permission_state["Permission state<br/>[permission.ts]"]
  node_tag_state["Page tags<br/>[multiTags.ts]"]
  node_app_state["App state<br/>[app.ts]"]
  node_settings_state["Settings state<br/>[settings.ts]"]
  node_theme_state["Element theme state<br/>[epTheme.ts]"]
  node_theme_logic["Theme controls"]
end

subgraph group_services["API and utilities"]
  node_http["HTTP client<br/>[index.ts]"]
  node_user_api["User API<br/>[user.ts]"]
  node_route_api["Route API<br/>[routes.ts]"]
  node_storage["Local storage helpers<br/>[index.ts]"]
  node_tree["Route tree helpers<br/>[tree.ts]"]
end

node_admin(("Admin user"))

node_admin -->|"signs in"| node_login
node_bootstrap -->|"loads config"| node_platform_config
node_bootstrap -->|"creates app"| node_app_root
node_bootstrap -->|"registers plugin"| node_plugins
node_bootstrap -->|"registers directives"| node_directives
node_bootstrap -->|"installs router"| node_router
node_bootstrap -.->|"mounts app"| node_views
node_login -->|"uses user state"| node_user_state
node_user_state -->|"calls API"| node_user_api
node_user_state -->|"uses token helpers"| node_auth
node_auth -->|"updates user state"| node_user_state
node_http -->|"reads auth"| node_auth
node_route_utils -->|"fetches routes"| node_route_api
node_router -->|"uses route helpers"| node_route_utils
node_router -->|"uses permission state"| node_permission_state
node_router -->|"builds route tree"| node_tree
node_route_utils -->|"sets menus"| node_permission_state
node_route_utils -->|"initializes tags"| node_tag_state
node_router -->|"routes to shell"| node_layout
node_layout -->|"renders content"| node_content
node_layout -->|"renders navigation"| node_navigation_ui
node_layout -->|"renders settings"| node_settings_ui
node_layout -->|"reads layout state"| node_app_state
node_layout -->|"reads settings state"| node_settings_state
node_layout -->|"applies theme"| node_theme_logic
node_nav_logic -->|"reads menus"| node_permission_state
node_nav_logic -->|"reads user identity"| node_user_state
node_search -->|"searches menus"| node_permission_state
node_search -->|"uses navigation logic"| node_nav_logic
node_theme_logic -->|"updates layout"| node_app_state
node_theme_logic -->|"sets theme color"| node_theme_state
node_theme_logic -->|"updates tag settings"| node_tag_state
node_theme_logic -->|"clears token on reset"| node_auth
node_app_state -.->|"persists layout"| node_storage
node_tag_state -->|"reads route data"| node_permission_state
node_access_controls -->|"checks route permissions"| node_route_utils

click node_bootstrap "https://github.com/shitang453/pure-admin-thin/blob/main/src/main.ts"
click node_platform_config "https://github.com/shitang453/pure-admin-thin/blob/main/src/config/index.ts"
click node_app_root "https://github.com/shitang453/pure-admin-thin/blob/main/src/App.vue"
click node_plugins "https://github.com/shitang453/pure-admin-thin/blob/main/src/plugins/elementPlus.ts"
click node_login "https://github.com/shitang453/pure-admin-thin/blob/main/src/views/login/index.vue"
click node_user_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/user.ts"
click node_auth "https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/auth.ts"
click node_access_controls "https://github.com/shitang453/pure-admin-thin/blob/main/src/components/ReAuth/src/auth.tsx"
click node_http "https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/http/index.ts"
click node_user_api "https://github.com/shitang453/pure-admin-thin/blob/main/src/api/user.ts"
click node_route_api "https://github.com/shitang453/pure-admin-thin/blob/main/src/api/routes.ts"
click node_router "https://github.com/shitang453/pure-admin-thin/blob/main/src/router/index.ts"
click node_route_utils "https://github.com/shitang453/pure-admin-thin/blob/main/src/router/utils.ts"
click node_permission_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/permission.ts"
click node_layout "https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/index.vue"
click node_navigation_ui "https://github.com/shitang453/pure-admin-thin/tree/main/src/layout/components/lay-sidebar"
click node_nav_logic "https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/hooks/useNav.ts"
click node_search "https://github.com/shitang453/pure-admin-thin/tree/main/src/layout/components/lay-search"
click node_tag_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/multiTags.ts"
click node_app_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/app.ts"
click node_settings_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/settings.ts"
click node_theme_state "https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/epTheme.ts"
click node_theme_logic "https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts"
click node_settings_ui "https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/components/lay-setting/index.vue"
click node_content "https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/components/lay-content/index.vue"
click node_views "https://github.com/shitang453/pure-admin-thin/tree/main/src/views"
click node_directives "https://github.com/shitang453/pure-admin-thin/blob/main/src/directives/index.ts"
click node_storage "https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/localforage/index.ts"
click node_tree "https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/tree.ts"

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_bootstrap,node_platform_config,node_app_root,node_plugins,node_directives,node_admin toneBlue
class node_login,node_user_state,node_auth,node_access_controls toneAmber
class node_router,node_route_utils,node_layout,node_navigation_ui,node_nav_logic,node_search,node_settings_ui,node_content,node_views toneMint
class node_permission_state,node_tag_state,node_app_state,node_settings_state,node_theme_state,node_theme_logic toneRose
class node_http,node_user_api,node_route_api,node_storage,node_tree toneIndigo
```

## Components

### App startup

- [Vue bootstrap](https://github.com/shitang453/pure-admin-thin/blob/main/src/main.ts): `src/main.ts`
- [Platform config](https://github.com/shitang453/pure-admin-thin/blob/main/src/config/index.ts): `src/config/index.ts`
- [App root](https://github.com/shitang453/pure-admin-thin/blob/main/src/App.vue): `src/App.vue`
- [UI plugins](https://github.com/shitang453/pure-admin-thin/blob/main/src/plugins/elementPlus.ts): `src/plugins/elementPlus.ts`
- [App directives](https://github.com/shitang453/pure-admin-thin/blob/main/src/directives/index.ts): `src/directives/index.ts`

### Identity and access

- [Login view](https://github.com/shitang453/pure-admin-thin/blob/main/src/views/login/index.vue): `src/views/login/index.vue`
- [User state](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/user.ts): `src/store/modules/user.ts`
- [Token and auth](https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/auth.ts): `src/utils/auth.ts`
- [Permission controls](https://github.com/shitang453/pure-admin-thin/blob/main/src/components/ReAuth/src/auth.tsx): `src/components/ReAuth/src/auth.tsx`

### Routing and layout

- [Router](https://github.com/shitang453/pure-admin-thin/blob/main/src/router/index.ts): `src/router/index.ts`
- [Route processing](https://github.com/shitang453/pure-admin-thin/blob/main/src/router/utils.ts): `src/router/utils.ts`
- [Layout shell](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/index.vue): `src/layout/index.vue`
- [Sidebar navigation](https://github.com/shitang453/pure-admin-thin/tree/main/src/layout/components/lay-sidebar): `src/layout/components/lay-sidebar`
- [Navigation logic](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/hooks/useNav.ts): `src/layout/hooks/useNav.ts`
- [Navigation search](https://github.com/shitang453/pure-admin-thin/tree/main/src/layout/components/lay-search): `src/layout/components/lay-search`
- [Layout settings](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/components/lay-setting/index.vue): `src/layout/components/lay-setting/index.vue`
- [Routed content](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/components/lay-content/index.vue): `src/layout/components/lay-content/index.vue`
- [Admin and error views](https://github.com/shitang453/pure-admin-thin/tree/main/src/views): `src/views`

### Application state

- [Permission state](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/permission.ts): `src/store/modules/permission.ts`
- [Page tags](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/multiTags.ts): `src/store/modules/multiTags.ts`
- [App state](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/app.ts): `src/store/modules/app.ts`
- [Settings state](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/settings.ts): `src/store/modules/settings.ts`
- [Element theme state](https://github.com/shitang453/pure-admin-thin/blob/main/src/store/modules/epTheme.ts): `src/store/modules/epTheme.ts`
- [Theme controls](https://github.com/shitang453/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts): `src/layout/hooks/useDataThemeChange.ts`

### API and utilities

- [HTTP client](https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/http/index.ts): `src/utils/http/index.ts`
- [User API](https://github.com/shitang453/pure-admin-thin/blob/main/src/api/user.ts): `src/api/user.ts`
- [Route API](https://github.com/shitang453/pure-admin-thin/blob/main/src/api/routes.ts): `src/api/routes.ts`
- [Local storage helpers](https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/localforage/index.ts): `src/utils/localforage/index.ts`
- [Route tree helpers](https://github.com/shitang453/pure-admin-thin/blob/main/src/utils/tree.ts): `src/utils/tree.ts`

### Other components

- **Admin user**

## Connections

- Admin user → Login view: signs in (evidence: `src/views/login/index.vue`)
- Vue bootstrap → Platform config: loads config (evidence: `src/main.ts`)
- Vue bootstrap → App root: creates app (evidence: `src/main.ts`)
- Vue bootstrap → UI plugins: registers plugin (evidence: `src/main.ts`)
- Vue bootstrap → App directives: registers directives (evidence: `src/main.ts`)
- Vue bootstrap → Router: installs router (evidence: `src/main.ts`)
- Vue bootstrap → Admin and error views: mounts app
- Login view → User state: uses user state (evidence: `src/views/login/index.vue`)
- User state → User API: calls API (evidence: `src/store/modules/user.ts`)
- User state → Token and auth: uses token helpers (evidence: `src/store/modules/user.ts`)
- Token and auth → User state: updates user state (evidence: `src/utils/auth.ts`)
- HTTP client → Token and auth: reads auth (evidence: `src/utils/http/index.ts`)
- Route processing → Route API: fetches routes (evidence: `src/router/utils.ts`)
- Router → Route processing: uses route helpers (evidence: `src/router/index.ts`)
- Router → Permission state: uses permission state (evidence: `src/router/index.ts`)
- Router → Route tree helpers: builds route tree (evidence: `src/router/index.ts`)
- Route processing → Permission state: sets menus (evidence: `src/router/utils.ts`)
- Route processing → Page tags: initializes tags (evidence: `src/router/utils.ts`)
- Router → Layout shell: routes to shell
- Layout shell → Routed content: renders content (evidence: `src/layout/index.vue`)
- Layout shell → Sidebar navigation: renders navigation (evidence: `src/layout/index.vue`)
- Layout shell → Layout settings: renders settings (evidence: `src/layout/index.vue`)
- Layout shell → App state: reads layout state (evidence: `src/layout/index.vue`)
- Layout shell → Settings state: reads settings state (evidence: `src/layout/index.vue`)
- Layout shell → Theme controls: applies theme (evidence: `src/layout/index.vue`)
- Navigation logic → Permission state: reads menus (evidence: `src/layout/hooks/useNav.ts`)
- Navigation logic → User state: reads user identity (evidence: `src/layout/hooks/useNav.ts`)
- Navigation search → Permission state: searches menus (evidence: `src/layout/components/lay-search/components/SearchModal.vue`)
- Navigation search → Navigation logic: uses navigation logic (evidence: `src/layout/components/lay-search/components/SearchModal.vue`)
- Theme controls → App state: updates layout (evidence: `src/layout/hooks/useDataThemeChange.ts`)
- Theme controls → Element theme state: sets theme color (evidence: `src/layout/hooks/useDataThemeChange.ts`)
- Theme controls → Page tags: updates tag settings (evidence: `src/layout/hooks/useDataThemeChange.ts`)
- Theme controls → Token and auth: clears token on reset (evidence: `src/layout/hooks/useDataThemeChange.ts`)
- App state → Local storage helpers: persists layout
- Page tags → Permission state: reads route data (evidence: `src/store/modules/multiTags.ts`)
- Permission controls → Route processing: checks route permissions (evidence: `src/components/ReAuth/src/auth.tsx`)