shitang453/pure-admin-thin

How shitang453/pure-admin-thin works

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: index.vue Layout shell · main.ts Vue bootstrap · index.ts Router · useDataThemeChange.ts Theme controls

Components 30

App startup

Vue bootstrap src/main.ts
Platform config src/config/index.ts
App root src/App.vue
UI plugins src/plugins/elementPlus.ts
App directives src/directives/index.ts

Identity and access

Login view src/views/login/index.vue
User state src/store/modules/user.ts
Token and auth src/utils/auth.ts
Permission controls src/components/ReAuth/src/auth.tsx

Routing and layout

Router src/router/index.ts
Route processing src/router/utils.ts
Layout shell src/layout/index.vue
Sidebar navigation src/layout/components/lay-sidebar
Navigation logic src/layout/hooks/useNav.ts
Navigation search src/layout/components/lay-search
Layout settings src/layout/components/lay-setting/index.vue
Routed content src/layout/components/lay-content/index.vue
Admin and error views src/views

Application state

Permission state src/store/modules/permission.ts
Page tags src/store/modules/multiTags.ts
App state src/store/modules/app.ts
Settings state src/store/modules/settings.ts
Element theme state src/store/modules/epTheme.ts
Theme controls src/layout/hooks/useDataThemeChange.ts

API and utilities

HTTP client src/utils/http/index.ts
User API src/api/user.ts
Route API src/api/routes.ts
Local storage helpers src/utils/localforage/index.ts
Route tree helpers src/utils/tree.ts

Other components

Admin user

Connections 36

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

More TypeScript diagrams: gadget-inc/js-clients · genarogg/react-pdf-levelup · giauphan/codeatlas-mcp-server · gmagl/omniroute · govuk-one-login/authentication-frontend

Drawn by GitDiagram on September 30, 2026 from the repository's file tree, README and source files. Read as Markdown ·