TabTab：一款高颜值、可开箱即用的 Vue3 后端管理模板

在开发中后台系统时，布局适配、主题切换、国际化配置等往往占据大量重复性工作。今天推荐一款开源后端管理模板 TabTab，它内置了多种布局模式、明暗主题、国际化、多标签页等完整能力，可显著提升中后台项目的开发效率。

核心亮点

TabTab 基于 Vue3 + TypeScript + shadcn-vue 构建，采用 Monorepo 架构，支持桌面端和移动端。以下能力均可在运行时配置，无需重启或重新发版：

• 5 种布局模式实时切换：经典侧边栏（sidebar）、双栏侧边栏（double-sidebar）、顶部导航（top-nav）、混合布局（mixed）、混合双栏（mixed-double）。菜单密集的 SaaS 系统、层级较深的 ERP、轻量工具后台均可用同一套代码适配。
• 明暗主题切换：基于 CSS 变量构建，运行时切换无刷新，适配不同使用场景。
• 中英文国际化：原生集成 Vue I18n，菜单、按钮、提示语支持一键切换，免去单独维护语言包的负担。
• 多标签页管理：支持标签页打开、关闭、缓存及快捷操作，标签页固定开关可配置，多业务页面切换不丢状态。
• 全局页面搜索：输入关键字秒级定位到任意菜单页面，提升导航效率。
• 主题定制面板：可调整布局宽度、标签栏固定、侧边栏折叠等细节，满足个性化使用习惯。
• 响应式设计：完美适配桌面与移动设备，手机查看后台数据、平板审批均正常显示。
• Toast 通知系统：内置基于 Toast 的统一消息提示，覆盖成功、失败、警告等场景，无需二次封装。
• 状态管理：集成 Pinia 与 pinia-plugin-persistedstate，登录态、主题偏好、标签页状态在刷新后依然保留。
• 组件库：基于 shadcn-vue + Reka UI 构建，组件源码可直接复制到项目中随意修改，摆脱组件库源码不可控的限制。
• 布局组件库：提供 Layout、LayoutHeader、LayoutContent、LayoutPage、LayoutTabs、LayoutSidebarApp、DoubleSidebar、Breadcrumb 等组件，支持按需引入，体积更小，迁移更灵活。

系统架构

TabTab 采用 Monorepo 结构，职责清晰，便于维护与扩展：

• apps（应用层）

  • admin：后台管理系统主入口，包含 components、composables、config/i18n/constants、layouts、router、stores、views 等模块。
  • playground：组件演示应用，便于预览与调试。

• packages（包层）

  • ui：布局与 UI 组件库（@tabtab/ui）
  • styles：全局样式包（@tabtab/styles）
  • typescript-config：统一 TypeScript 配置
  • utils：工具函数集合

• internal（内部工具）

  • dev-cli：开发命令行的辅助工具

技术栈

快速开始

确保本地环境满足 Node.js ≥ 20.0.0 与 pnpm ≥ 10.32.0，然后执行以下命令：

# 安装 pnpm
npm install -g pnpm

# 克隆项目
git clone https://github.com/tabtab-dev/ui.git
cd ui

# 启动开发服务器
pnpm dev          # 启动全部应用
pnpm dev:admin    # 仅启动 Admin
pnpm dev:playground  # 仅启动 Playground

TabTab 以“灵活、美观”为核心设计理念，为外包接单开发者、SaaS 创业团队及企业内部工具开发者提供了一套可直接投入使用的开箱即用方案，适合需要快速搭建个性化中后台系统的团队。