TDesign - 腾讯出品的企业级开源设计系统越发成熟稳定，支持 Vue3 / 小程序，适合开发企业中后台和移动应用

TDesing 发展越来越好了，出了好几套组件库，很成熟稳定了，新项目完全可以考虑使用。

早在2021年，腾讯的 TDesing 刚发布不久，我就写了一篇简短的文章来介绍，当时主要关注的是 TDesign 的 Vue 组件库和用来搭建 admin 后台系统的实用性。虽然当时看起来不错，但还处于测试版，和很多读者一样，我也担心会是一个 KPI 项目。

现在2年多过去了，再看 TDesign，发现这几年官方团队不仅一直在维护更新，甚至还推出了移动端的微信和 QQ 小程序版本，已经很成熟稳定，不仅腾讯内部多个明星项目在使用，很多事业单位、大型企业也在使用，开发的实用性大大增强。所以就再写一篇文章来介绍它。

关于 TDesign

TDesign 是由腾讯出品的一套完整的企业级设计体系，拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。简单地说就是不仅提供用于前端开发的组件库，还包含这套组件库设计的所有规范、设计原理以及相关的设计稿。

技术特性

• 跨端支持：桌面端 / 移动端 / 小程序，其中移动端还支持 Flutter；
• 设计资源：提供清晰完善的设计规范文档（Figma / Sketch等），开发上游的设计师和产品经理可以直接拿来使用；
• 开箱即用：移动端和 admin 中后台都内置了大量页面模板，开发者可以直接使用和二次修改。

开发上手体验和使用建议

需要注意的是，TDesign 的桌面端 Vue 组件基于 Vue 2.6，Vue-Next 才是 Vue3。下面演示的 Vue-Next 桌面端组件。

Vue Next for web 目前最新版本是 2024年8月16日发布的 v1.9.9 ，我们可以通过 NPM 安装：

npm i tdesign-vue-next

然后在 Vue 应用中使用

import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next';
import App from './app.vue';

// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';

const app = createApp(App);
app.use(TDesign);

在 Vue 页面中使用，比如创建一个数据表格：

<template>
  <t-space direction="vertical">
    <!-- 按钮操作区域 -->
    <t-radio-group v-model="size" variant="default-filled">
      <t-radio-button value="small">小尺寸</t-radio-button>
      <t-radio-button value="medium">中尺寸</t-radio-button>
      <t-radio-button value="large">大尺寸</t-radio-button>
    </t-radio-group>

    <t-space>
      <t-checkbox v-model="stripe"> 显示斑马纹 </t-checkbox>
      <t-checkbox v-model="bordered"> 显示表格边框 </t-checkbox>
      <t-checkbox v-model="hover"> 显示悬浮效果 </t-checkbox>
      <t-checkbox v-model="tableLayout"> 宽度自适应 </t-checkbox>
      <t-checkbox v-model="showHeader"> 显示表头 </t-checkbox>
    </t-space>

    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table
      row-key="index"
      :data="data"
      :columns="columns"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :size="size"
      :pagination="pagination"
      :show-header="showHeader"
      cell-empty-content="-"
      resizable
      lazy-load
      @row-click="handleRowClick"
    >
    </t-table>
  </t-space>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next';

const statusNameListMap = {
  0: { label: '审批通过', theme: 'success', icon: <CheckCircleFilledIcon /> },
  1: { label: '审批失败', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  2: { label: '审批过期', theme: 'warning', icon: <ErrorCircleFilledIcon /> },
};
const data = [];
const total = 28;
for (let i = 0; i < total; i++) {
  data.push({
    index: i + 1,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    status: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
  });
}

const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);

const columns = ref([
  { colKey: 'applicant', title: '申请人', width: '100' },
  {
    colKey: 'status',
    title: '申请状态',
    cell: (h, { row }) => {
      return (
        <t-tag shape="round" theme={statusNameListMap[row.status].theme} variant="light-outline">
          {statusNameListMap[row.status].icon}
          {statusNameListMap[row.status].label}
        </t-tag>
      );
    },
  },
  { colKey: 'channel', title: '签署方式' },
  { colKey: 'detail.email', title: '邮箱地址', ellipsis: true },
  { colKey: 'createTime', title: '申请时间' },
]);

const handleRowClick = (e) => {
  console.log(e);
};

const pagination = {
  defaultCurrent: 1,
  defaultPageSize: 5,
  total,
};
</script>

TDesign 提供的几套组件库都支持国际化/多语言、自定义主题和暗黑模式，也支持通过配置 webpack 或者 Vite 实现按需使用，减少应用打包体积。

和 Element Plus 相比？

TDesign 和饿了么的 Element 同为设计系统，除了大部分组件都类似外，TDesign 还可以用于移动端开发，实用性更强。而且根据我使用多年 Element，有些组件性能较差，比如表格，而 TDesign 的组件，无论是桌面还是手机端，体验下来都很流畅。

开发文档在项目开发中使用频率很高，TDesign 组件的使用文档阅读体验也更好，文档规范整洁，可以方便地查看组件使用的代码示例和 api，不同的组件还配套了使用指南，其实这也很重要，我见过很多后台的功能很难用，一个很重要的原因就是没有用对组件，只是为了实现功能，所以建议大家还是阅读一下指南，能帮助我们把功能做得更好。

哪些项目适合用 TDesign?

从设计风格上看，TDesign 的组件 UI 风格偏中性，可以说全是腾讯系产品的影子，比如腾讯云，虽然我们可以自定于主题来适配自己的项目，但从视觉上更适合做企业类的应用，特别是用来开发具有同样设计风格、跨多端的前端应用。

同时这是一套贯穿设计和开发流程的体系，非常适合中小公司使用和学习。TDesign 官方还提供了 admin 中后系统，也是开箱即用，所以无论是 admin 后台还是客户端，都可以使用 TDesign。

免费开源说明

TDesign 是腾讯出品的企业设计系统，也是一个免费开源的项目，基于 MIT 开源协议开放源码，我们可以免费下载来使用，可以自由地用在商业项目上。