How tencent/tdesign-vue-next-starter works
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: main.ts App bootstrap · permission.ts Route permission · index.vue Workspace layout · list.ts List API
Components 23
App shell
- App bootstrap
src/main.ts - Root view
src/App.vue
Routing and state
- Route registry
src/router/index.ts - Route permission
src/permission.ts - Route resolver
src/utils/route/index.ts - Pinia stores
src/store/index.ts - Tab state
src/store/modules/tabs-router.ts
Starter pages
- Login and register
src/pages/login/components/Login.vue - Dashboard examples
src/pages/dashboard/base/index.ts - List examples
src/pages/list/base/index.vue - Contract table
src/components/common-table/index.vue - Form examples
src/pages/form/step/index.vue - Detail examples
src/pages/detail/advanced/index.vue - Result pages
src/router/modules/result.ts
API and requests
- List API
src/api/list.ts - List data model
src/api/model/listModel.ts - HTTP client
src/utils/request/index.ts
Theme and layout
- Workspace layout
src/layouts/index.vue - Content layout
src/layouts/components/LayoutContent.vue - Layout settings
src/layouts/setting.vue - Setting state
src/store/modules/setting.ts - Theme colors
src/utils/color.ts
Other components
- Admin user
Connections 19
- Admin user → App bootstrap: opens app
- App bootstrap → Root view: mounts
src/main.ts - App bootstrap → Route registry: installs
src/main.ts - App bootstrap → Route permission: loads
src/main.ts - Root view → Pinia stores: reads settings
src/App.vue - Route registry → Login and register: routes to
src/router/index.ts - Route permission → Route registry: checks routes
src/permission.ts - Route permission → Route resolver: resolves paths
src/permission.ts - Route permission → Pinia stores: checks state
src/permission.ts - Route resolver → Result pages: adds fallback
src/utils/route/index.ts - Workspace layout → Content layout: renders
src/layouts/index.vue - Workspace layout → Layout settings: renders
src/layouts/index.vue - Workspace layout → Tab state: appends route
src/layouts/index.vue - Content layout → Route resolver: uses route tools
src/layouts/components/LayoutContent.vue - Layout settings → Setting state: reads settings
src/layouts/setting.vue - Setting state → Theme colors: uses color tools
src/store/modules/setting.ts - Contract table → List API: fetches list
src/components/common-table/index.vue - List API → HTTP client: sends request
src/api/list.ts - List API → List data model: uses model
src/api/list.ts