🚀 TabTab Admin：一款现代化的 Vue 3 后台管理系统模板

基于 Vue 3 + TypeScript + Vite 构建的企业级后台管理解决方案，内置 JSON 配置化组件、RBAC 权限系统、国际化支持等开箱即用的功能。

前言

在企业级后台管理系统的开发中，我们常常面临这样的困境：

• 🔄 重复造轮子：每个项目都要重新搭建基础架构
• 📦 组件封装困难：表格、表单等复杂组件难以复用
• 🎨 主题定制繁琐：暗黑模式、品牌色切换需要大量工作
• 🔐 权限系统复杂：RBAC 权限控制实现成本高
• 🌍 国际化麻烦：多语言支持需要额外配置

TabTab Admin 应运而生，它不仅是一个后台模板，更是一套完整的解决方案。

仪表板 - 明亮模式

仪表板 - 暗黑模式

✨ 核心亮点

1. JSON 配置化组件 — 低代码开发体验

这是 TabTab Admin 最具特色的功能。通过 JSON Schema 配置，快速构建复杂的表格、表单、对话框和抽屉组件。

TTable — 配置化表格

TTable 配置化表格 - 支持排序、筛选、行选择、操作列

<script setup lang="ts">
import { TTable } from '@/components/business/TTable'
import type { TableSchema } from '@/components/business/TTable'

const schema: TableSchema = {
  columns: [
    { title: '用户名', dataIndex: 'username' },
    { title: '邮箱', dataIndex: 'email' },
    { 
      title: '状态', 
      dataIndex: 'status', 
      slot: 'status',
      filters: [
        { text: '启用', value: 'active' },
        { text: '禁用', value: 'inactive' }
      ]
    },
    { title: '创建时间', dataIndex: 'createdAt', sorter: true }
  ],
  actions: [
    { text: '编辑', type: 'primary', onClick: (row) => handleEdit(row) },
    { text: '删除', type: 'danger', confirm: '确定删除？', onClick: (row) => handleDelete(row) }
  ],
  rowSelection: { type: 'checkbox' },
  pagination: { pageSize: 10 }
}
</script>

<template>
  <TTable :schema="schema" :data="tableData" :loading="loading">
    <template #status="{ text }">
      <a-tag :color="text === 'active' ? 'green' : 'red'">
        {{ text === 'active' ? '启用' : '禁用' }}
      </a-tag>
    </template>
  </TTable>
</template>

一行配置，搞定：

• ✅ 列定义与渲染
• ✅ 排序与筛选
• ✅ 操作列（带确认删除）
• ✅ 行选择
• ✅ 分页

TForm — 配置化表单

TForm 配置化表单 - 支持 36+ 种字段类型

<script setup lang="ts">
import { TForm } from '@/components/business/TForm'
import type { FormSchema } from '@/components/business/TForm'

const schema: FormSchema = {
  fields: [
    { 
      name: 'username', 
      type: 'input', 
      label: '用户名',
      rules: [{ required: true, message: '请输入用户名' }],
      props: { placeholder: '请输入用户名' }
    },
    { 
      name: 'email', 
      type: 'input', 
      label: '邮箱',
      rules: [{ type: 'email', message: '邮箱格式不正确' }]
    },
    { 
      name: 'role', 
      type: 'select', 
      label: '角色',
      options: [
        { label: '管理员', value: 'admin' },
        { label: '普通用户', value: 'user' }
      ]
    },
    { 
      name: 'avatar', 
      type: 'upload', 
      label: '头像',
      props: { accept: 'image/*', maxCount: 1 }
    },
    {
      name: 'bio',
      type: 'textarea',
      label: '个人简介',
      props: { rows: 4 }
    }
  ],
  layout: 'horizontal',
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
}

const handleSubmit = (values) => {
  console.log('表单数据：', values)
}
</script>

<template>
  <TForm :schema="schema" @submit="handleSubmit" />
</template>

支持 36+ 种字段类型：

• 输入类：input、textarea、inputNumber、password、email...
• 选择类：select、radio、checkbox、switch、cascader...
• 日期类：datePicker、rangePicker、timePicker...
• 上传类：upload、uploadImage、uploadDragger...
• 高级类：custom（自定义组件）

TModal & TDrawer — 配置化弹窗

TModal 对话框

TDrawer 抽屉

2. 🎨 完善的主题系统

支持 暗黑/明亮模式 切换，以及丰富的主题定制选项：

主题设置面板 - 实时预览，一键切换

明亮主题

暗黑主题

import type { LayoutConfig } from '@/types/theme';

/**
 * 主题配置
 * 可从设置页面复制 JSON 直接替换下面的值
 * 
 * 可用主题: default, slate, stone, red, rose, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink
 * 可用模式: light, dark
 */
export const themeConfig = {
  theme: 'lime',
  mode: 'light' as 'light' | 'dark',
  layout: {
    sidebarWidth: 280,
    sidebarCollapsed: false,
    radius: 0.625,
    fontSize: 'base' as 'sm' | 'base' | 'lg',
    animations: true,
    showTabBar: true,
    showBreadcrumb: true,
    fixedTabBar: false,
  } as Partial<LayoutConfig>,
  customThemes: {} as Record<string, {
    name: string;
    primary: string;
    primaryForeground?: string;
    accent?: string;
    accentForeground?: string;
    darkPrimary?: string;
  }>,
};

用户可以在设置页面实时预览和调整主题，配置自动持久化存储。

3. 🔐 RBAC 权限控制

基于角色的访问控制系统，提供多层次的权限控制：

按钮级权限控制 - 无权限按钮自动隐藏

<template>
  <!-- 按钮级权限控制 -->
  <a-button v-permission="'user:create'">创建用户</a-button>
  
  <!-- 多权限判断（满足其一即可） -->
  <a-button v-permission="['user:edit', 'user:admin']">编辑</a-button>
  
  <!-- 组合式函数权限检查 -->
  <a-button v-if="hasPermission('user:delete')">删除</a-button>
</template>

<script setup lang="ts">
import { usePermission } from '@/composables/usePermission'

const { hasPermission, hasRole } = usePermission()

// 编程式权限检查
if (hasRole('admin')) {
  // 管理员专属逻辑
}
</script>

权限系统特性：

• 🎯 页面级权限：路由守卫自动拦截
• 🔘 按钮级权限：v-permission 指令
• 📋 菜单级权限：动态菜单过滤
• 🔄 动态路由：根据权限动态生成

4. 🌍 完整的国际化支持

内置中英文双语，支持一键切换：

中文界面	English Interface

// 使用 i18n
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

// 切换语言
locale.value = 'en-US'

// 模板中使用
<template>
  <h1>{{ t('menu.dashboard') }}</h1>
</template>

5. 🏷️ 标签栏管理

多标签页管理，支持页面缓存和快捷操作：

多标签页管理 - 支持缓存、关闭、刷新等操作

标签栏功能：

• 📑 多标签页切换
• 💾 页面状态缓存
• 🔄 刷新当前页
• ❌ 关闭当前/其他/全部标签

🛠️ 技术栈详解

类别	技术选型	选择理由
核心框架	Vue 3 + TypeScript	类型安全，开发体验优秀
构建工具	Vite (Rolldown)	极速开发体验，生产构建优化
样式方案	Tailwind CSS v4	原子化 CSS，开发效率高
UI 组件	Antdv-next + shadcn-vue	企业级组件 + 高度可定制
表单验证	Antdv-next Form + VeeValidate + Zod	多种验证方案可选
数据表格	Antdv-next Table + TanStack Table	功能丰富，性能优秀
状态管理	Pinia	Vue 3 官方推荐，轻量灵活
HTTP 请求	Alova + Axios	请求缓存，自动重试
测试框架	Vitest	Vite 原生支持，极速测试

🚀 快速开始

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

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

📁 项目结构

src/
├── api/                    # API 接口模块
│   ├── client/            # HTTP 客户端配置
│   └── modules/           # 业务 API 模块
├── components/            # 组件
│   ├── bento/            # Bento 风格布局组件
│   ├── business/         # 业务组件 (TTable/TForm/TModal/TDrawer)
│   ├── layout/           # 布局组件
│   └── ui/               # UI 组件库
├── composables/           # 可复用组合式函数
├── stores/               # Pinia 状态管理
├── views/                # 页面视图
└── i18n/                 # 国际化配置

🧩 Composables 工具库

项目提供了一系列开箱即用的组合式函数：

// 表格数据管理
import { useTableData } from '@/composables/useTableData'
const { data, loading, pagination, fetchData } = useTableData(apiFn)

// 表单数据处理
import { useFormData } from '@/composables/useFormData'
const { formData, resetForm, submitForm } = useFormData(schema)

// 权限检查
import { usePermission } from '@/composables/usePermission'
const { hasPermission, hasRole } = usePermission()

// 加载状态
import { useLoading } from '@/composables/useLoading'
const { loading, withLoading } = useLoading()

// 请求封装
import { useRequest } from '@/composables/useRequest'
const { data, loading, error, run } = useRequest(apiFn)

🔌 Mock 服务

内置完整的 Mock 服务，支持独立开发和测试：

mock/
├── data/              # Mock 数据定义
├── routes/            # Mock 路由配置
└── server.ts          # Mock 服务器入口

支持的 Mock 功能：

• 用户认证（登录、登出、获取用户信息）
• 用户管理（CRUD 操作）
• 角色管理
• 组织管理
• 菜单管理
• 订单管理
• 商品管理

📊 Bento 风格仪表板

采用现代化的 Bento Grid 布局设计：

Bento 风格仪表板 - 现代化网格布局设计

• 🎨 视觉层次分明
• 📱 响应式自适应
• 🌙 暗黑模式完美适配
• 📈 数据可视化组件

🔔 通知系统

基于 vue-sonner 的消息通知系统：

通知系统 - 支持多种类型和自定义样式

🎯 适用场景

• ✅ 企业级后台管理系统
• ✅ SaaS 平台管理后台
• ✅ 电商/订单管理系统
• ✅ CMS 内容管理系统
• ✅ 数据分析平台
• ✅ 内部工具快速搭建

📌 开发计划

• 基础布局和导航
• 主题系统
• TTable/TForm/TModal/TDrawer 组件
• 国际化支持
• RBAC 权限控制
• Mock 服务
• 测试框架
• 标签栏 (TabBar)
• 错误边界处理
• 更多数据可视化组件
• 工作流设计器
• 代码生成器

结语

TabTab Admin 旨在提供一套开箱即用、高度可定制的后台管理解决方案。无论你是需要快速搭建一个内部管理系统，还是需要一个企业级的管理平台，TabTab Admin 都能满足你的需求。

如果你觉得这个项目对你有帮助，欢迎 ⭐ Star 支持一下！

---

🔗 相关链接：

• 🎮 在线演示
• 💻 GitHub 仓库

🤝 贡献指南：

欢迎提交 Issue 和 Pull Request，一起让这个项目变得更好！

---

如果这篇文章对你有帮助，欢迎点赞、收藏、转发！

---