# tencent/tdesign-vue-next-starter architecture

> Architecture diagram of the GitHub repository tencent/tdesign-vue-next-starter, 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/tencent/tdesign-vue-next-starter
- Repository: https://github.com/tencent/tdesign-vue-next-starter

## Overview

TDesign Vue Next Starter is a Vue-based admin-project starter: users enter through login or navigation, visit dashboard and business-example pages, and can configure the interface theme and layout. Its runtime centers on application bootstrapping, routing and permission handling, shared layouts and state, and reusable request/API plumbing. The README also advertises dark mode, custom colors, multiple layouts, and mock-data support. Some page and integration details are unsampled, so the graph shows documented capabilities without guessing their internal call paths.

Main entry points: [`src/main.ts`](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/main.ts) (App bootstrap), [`src/permission.ts`](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/permission.ts) (Route permission), [`src/layouts/index.vue`](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/index.vue) (Workspace layout), [`src/api/list.ts`](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/api/list.ts) (List API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_app["Root view<br/>[App.vue]"]
end

subgraph group_state["Routing and state"]
  node_router["Route registry<br/>[index.ts]"]
  node_permission["Route permission<br/>[permission.ts]"]
  node_routeutils["Route resolver<br/>[index.ts]"]
  node_stores["Pinia stores<br/>[index.ts]"]
  node_tabs["Tab state<br/>[tabs-router.ts]"]
end

subgraph group_examples["Starter pages"]
  node_login["Login and register<br/>[Login.vue]"]
  node_dashboard["Dashboard examples<br/>[index.ts]"]
  node_lists["List examples<br/>[index.vue]"]
  node_table["Contract table<br/>[index.vue]"]
  node_forms["Form examples<br/>[index.vue]"]
  node_details["Detail examples<br/>[index.vue]"]
  node_results["Result pages<br/>[result.ts]"]
end

subgraph group_services["API and requests"]
  node_api["List API<br/>[list.ts]"]
  node_listmodel["List data model<br/>[listModel.ts]"]
  node_request["HTTP client<br/>[index.ts]"]
end

subgraph group_appearance["Theme and layout"]
  node_layout["Workspace layout<br/>[index.vue]"]
  node_layoutcontent["Content layout<br/>[LayoutContent.vue]"]
  node_settings["Layout settings<br/>[setting.vue]"]
  node_settingstate["Setting state<br/>[setting.ts]"]
  node_color["Theme colors<br/>[color.ts]"]
end

node_user(("Admin user"))

node_user -.->|"opens app"| node_bootstrap
node_bootstrap -->|"mounts"| node_app
node_bootstrap -->|"installs"| node_router
node_bootstrap -->|"loads"| node_permission
node_app -->|"reads settings"| node_stores
node_router -->|"routes to"| node_login
node_permission -->|"checks routes"| node_router
node_permission -->|"resolves paths"| node_routeutils
node_permission -->|"checks state"| node_stores
node_routeutils -->|"adds fallback"| node_results
node_layout -->|"renders"| node_layoutcontent
node_layout -->|"renders"| node_settings
node_layout -->|"appends route"| node_tabs
node_layoutcontent -->|"uses route tools"| node_routeutils
node_settings -->|"reads settings"| node_settingstate
node_settingstate -->|"uses color tools"| node_color
node_table -->|"fetches list"| node_api
node_api -->|"sends request"| node_request
node_api -->|"uses model"| node_listmodel

click node_bootstrap "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/main.ts"
click node_app "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/App.vue"
click node_router "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/router/index.ts"
click node_permission "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/permission.ts"
click node_routeutils "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/route/index.ts"
click node_stores "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/index.ts"
click node_tabs "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/modules/tabs-router.ts"
click node_login "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/login/components/Login.vue"
click node_dashboard "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/dashboard/base/index.ts"
click node_lists "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/list/base/index.vue"
click node_table "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/components/common-table/index.vue"
click node_forms "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/form/step/index.vue"
click node_details "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/detail/advanced/index.vue"
click node_results "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/router/modules/result.ts"
click node_api "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/api/list.ts"
click node_listmodel "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/api/model/listModel.ts"
click node_request "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/request/index.ts"
click node_layout "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/index.vue"
click node_layoutcontent "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/components/LayoutContent.vue"
click node_settings "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/setting.vue"
click node_settingstate "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/modules/setting.ts"
click node_color "https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/color.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_app,node_user toneBlue
class node_router,node_permission,node_routeutils,node_stores,node_tabs toneAmber
class node_login,node_dashboard,node_lists,node_table,node_forms,node_details,node_results toneMint
class node_api,node_listmodel,node_request toneRose
class node_layout,node_layoutcontent,node_settings,node_settingstate,node_color toneIndigo
```

## Components

### App shell

- [App bootstrap](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/main.ts): `src/main.ts`
- [Root view](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/App.vue): `src/App.vue`

### Routing and state

- [Route registry](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/router/index.ts): `src/router/index.ts`
- [Route permission](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/permission.ts): `src/permission.ts`
- [Route resolver](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/route/index.ts): `src/utils/route/index.ts`
- [Pinia stores](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/index.ts): `src/store/index.ts`
- [Tab state](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/modules/tabs-router.ts): `src/store/modules/tabs-router.ts`

### Starter pages

- [Login and register](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/login/components/Login.vue): `src/pages/login/components/Login.vue`
- [Dashboard examples](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/dashboard/base/index.ts): `src/pages/dashboard/base/index.ts`
- [List examples](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/list/base/index.vue): `src/pages/list/base/index.vue`
- [Contract table](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/components/common-table/index.vue): `src/components/common-table/index.vue`
- [Form examples](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/form/step/index.vue): `src/pages/form/step/index.vue`
- [Detail examples](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/pages/detail/advanced/index.vue): `src/pages/detail/advanced/index.vue`
- [Result pages](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/router/modules/result.ts): `src/router/modules/result.ts`

### API and requests

- [List API](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/api/list.ts): `src/api/list.ts`
- [List data model](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/api/model/listModel.ts): `src/api/model/listModel.ts`
- [HTTP client](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/request/index.ts): `src/utils/request/index.ts`

### Theme and layout

- [Workspace layout](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/index.vue): `src/layouts/index.vue`
- [Content layout](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/components/LayoutContent.vue): `src/layouts/components/LayoutContent.vue`
- [Layout settings](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/layouts/setting.vue): `src/layouts/setting.vue`
- [Setting state](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/store/modules/setting.ts): `src/store/modules/setting.ts`
- [Theme colors](https://github.com/tencent/tdesign-vue-next-starter/blob/develop/src/utils/color.ts): `src/utils/color.ts`

### Other components

- **Admin user**

## Connections

- Admin user → App bootstrap: opens app
- App bootstrap → Root view: mounts (evidence: `src/main.ts`)
- App bootstrap → Route registry: installs (evidence: `src/main.ts`)
- App bootstrap → Route permission: loads (evidence: `src/main.ts`)
- Root view → Pinia stores: reads settings (evidence: `src/App.vue`)
- Route registry → Login and register: routes to (evidence: `src/router/index.ts`)
- Route permission → Route registry: checks routes (evidence: `src/permission.ts`)
- Route permission → Route resolver: resolves paths (evidence: `src/permission.ts`)
- Route permission → Pinia stores: checks state (evidence: `src/permission.ts`)
- Route resolver → Result pages: adds fallback (evidence: `src/utils/route/index.ts`)
- Workspace layout → Content layout: renders (evidence: `src/layouts/index.vue`)
- Workspace layout → Layout settings: renders (evidence: `src/layouts/index.vue`)
- Workspace layout → Tab state: appends route (evidence: `src/layouts/index.vue`)
- Content layout → Route resolver: uses route tools (evidence: `src/layouts/components/LayoutContent.vue`)
- Layout settings → Setting state: reads settings (evidence: `src/layouts/setting.vue`)
- Setting state → Theme colors: uses color tools (evidence: `src/store/modules/setting.ts`)
- Contract table → List API: fetches list (evidence: `src/components/common-table/index.vue`)
- List API → HTTP client: sends request (evidence: `src/api/list.ts`)
- List API → List data model: uses model (evidence: `src/api/list.ts`)