# 从选型到落地：TDesign 在果唯云客服工作台中的实践

> 本文记录果唯云客服（在线客服 SaaS）前端从 0 到 1 的组件库选型与落地过程。没有炫技，全是真实的工程决策：为什么在 Element Plus、Ant Design Vue 面前选了 TDesign，怎么用 Design Token 做品牌定制，如何把首屏体积降下来，以及我们踩过的几个坑。适合正在选型 Vue 3 组件库、或准备做 B 端后台 / 客服类产品的同学。

## 一、背景：一个客服 SaaS 的前端诉求

果唯云客服是一款面向中小企业的在线客服系统，定价 365 元 / 坐席 / 年，产品主打「开箱即用、低成本」。上线节奏要求我们 2～3 个月完成第一版，五个模块同时开工：

1.  **会话工作台**（坐席每天待最久的页面）

2.  工单管理

3.  知识库

4.  报表中心

5.  系统设置

客服产品的前端有几个天然特点，直接决定了组件库的选型标准：

*   **界面密度高**：坐席一个屏幕要同时容纳会话列表、消息流、客户信息、快捷回复，信息密度远高于普通 B 端后台；

*   **长列表极多**：会话记录、工单列表、操作日志动辄几千上万行，**虚拟滚动是刚需**；

*   **主题定制是卖点**：作为 SaaS，要给不同企业预留品牌色定制空间；

*   **深色模式是标配**：客服夜班值班是常态，暗色工作台几乎成了客服产品的默认配置。

技术栈先定下来：Vue 3 + TypeScript + Vite。剩下的核心问题只有一个：**组件库选谁？**

## 二、选型：为什么最后是 TDesign

我们认真对比了市面上主流的四款 Vue 3 组件库，关键维度如下：

| 维度     | TDesign Vue Next                  | Element Plus        | Ant Design Vue           | Naive UI          |
| ------ | --------------------------------- | ------------------- | ------------------------ | ----------------- |
| 设计体系   | 腾讯企业级体系，自带深浅双色板                   | 简洁轻量                | Ant Design，生态庞大          | 轻量，TS 友好          |
| 主题定制   | Design Token（CSS Variables），运行时换肤 | SCSS 变量重编译 / CSS 覆盖 | ConfigProvider + less 变量 | Theme Provider，灵活 |
| 深色模式   | 官方双色板，一行切换                        | 需自行覆盖               | 官方支持                     | 官方支持              |
| 复杂组件能力 | Table / Tree / Form 强，虚拟滚动开箱即用    | Table 常需搭配插件        | Table 强                  | Table 一般          |
| 按需引入   | tree-shaking + resolver           | 支持                  | 支持                       | 支持                |
| 维护方与协议 | 腾讯多业务团队共建，MIT，持续迭代                | 饿了么团队               | 蚂蚁集团                     | 社区驱动              |
| 中文文档质量 | 好                                 | 好                   | 好                        | 好                 |

最终决定用 TDesign，有四个决定性理由：

1.  **Design Token 体系干净**。TDesign 把所有颜色、字体、圆角、阴影都声明为 CSS Variables（`--td-*`），主题定制是**运行时能力**，不需要重新编译。这对 SaaS 多租户品牌色定制太关键了 —— 换肤成本低一个量级。

2.  **深浅色双色板开箱即用**。`theme-mode="dark"` 一行切换，所有组件自动换色，不用自己维护一套暗色样式。

3.  **复杂组件不拉胯**。Table 的虚拟滚动、固定列、拖拽排序，Form 的复杂校验，Tree 的选择联动，全是客服后台的高频场景，TDesign 开箱即用。

4.  **开源可信度**。TDesign 是腾讯多个业务团队在真实业务中沉淀的设计体系，MIT 协议，版本迭代稳定。企业级产品用开源库最怕「作者弃坑」，维护方的业务背书让我们放心。

## 三、工作台整体架构

客服工作台的布局以「三栏结构」为核心，TDesign 的 Layout、Menu、List、Descriptions 等组件刚好覆盖：

    ┌─────────────────────────────────────────────────────────────┐

    │  顶栏：THeader + TMenu（工作台 / 工单 / 知识库 / 报表 / 设置）    │

    ├─────────────┬─────────────────────────────┬─────────────────┤

    │  会话列表     │          消息区              │   客户信息侧栏     │

    │  TList       │  气泡列表（虚拟滚动）          │  TDescriptions   │

    │  在线/排队/   │  TInput + 快捷回复 + 转人工    │  + TForm（建工单） │

    │  已结束 Tab   │                             │  标签 / 备注       │

    └─────────────┴─────────────────────────────┴─────────────────┘

前端整体分四层：

    ┌──────────────────────────────────────────┐

    │ 业务模块层：会话工作台 / 工单 / 知识库 / 报表  │

    ├──────────────────────────────────────────┤

    │ 通用能力层：路由 / 状态管理 / 请求 / 权限控制 │

    ├──────────────────────────────────────────┤

    │ UI 层：TDesign Vue Next 组件 + 自研业务组件 │

    ├──────────────────────────────────────────┤

    │ 主题层：CSS Variables Token / 深色模式      │

    └──────────────────────────────────────────┘

![exported_image.png](https://developer.qcloudimg.com/http-save/yehe-12787683/e25cc9373d32f615f1ef4ea36ad45d7e.png)

## 四、落地实践

### 1. 按需引入：把首屏体积降下来

全量引入最省事，但代价是打包体积。我们用 `unplugin-vue-components` + `TDesignResolver` 实现组件与样式自动按需：

    // vite.config.ts

    import Components from 'unplugin-vue-components/vite'

    import { TDesignResolver } from 'unplugin-vue-components/resolvers'

    export default defineConfig({

    &#x20; plugins: \[

    &#x20;   vue(),

    &#x20;   Components({

    &#x20;     dts: true,

    &#x20;     resolvers: \[TDesignResolver({ library: 'vue-next' })],

    &#x20;   }),

    &#x20; ],

    })

配置之后模板里直接写 `<t-button>` 即可，组件、样式按需加载。**我们项目实测：按需引入后，首屏相关 bundle 体积比全量引入下降约 60%**（具体数值因项目而异，以实际构建产物为准）。

函数式组件（Message、Dialog 等）需要显式引入：

    import { MessagePlugin } from 'tdesign-vue-next'

    MessagePlugin.success('已保存')

    MessagePlugin.warning('该客户已设置过标签')

### 2. 品牌主题定制：SaaS 多租户换肤

TDesign 的 Design Token 都是 CSS Variables，直接覆盖即可实现品牌色定制：

    :root {

    &#x20; --td-brand-color: #0a7aff;        /\* 品牌主色 \*/

    &#x20; --td-brand-color-light: #e6f0ff;  /\* 主色浅背景 \*/

    &#x20; --td-brand-color-focus: #d1e4ff;  /\* 主色聚焦 \*/

    &#x20; --td-radius-default: 6px;         /\* 圆角 \*/

    &#x20; --td-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

    }

多租户场景下，我们把 token 写在租户级的样式作用域里，登录后按租户配置**动态注入**。相比 less 变量重编译换肤，成本低一个量级，而且可以做到**不停机即时生效**。

### 3. 深色模式：夜班客服的刚需

TDesign 内置两套色板，切换只改一个属性：

    function applyTheme(dark: boolean) {

    &#x20; document.documentElement.setAttribute('theme-mode', dark ? 'dark' : '')

    }

    // 跟随系统偏好

    const mq = window.matchMedia('(prefers-color-scheme: dark)')

    applyTheme(mq.matches)

    mq.addEventListener('change', (e) => applyTheme(e.matches))

切主题后所有组件自动换色。我们的经验是：**业务样式里禁止硬编码颜色，一律用 **`--td-*`** token 或语义色变量**，否则深色模式会漏出一片刺眼的白。

### 4. 会话列表与消息区：虚拟滚动是刚需

坐席打开一个高客诉客户，消息可能上千条，直接渲染整棵 DOM 树会卡死。我们的做法：

*   **会话列表**：直接用 `TList` + 分页加载；

*   **消息区**：气泡布局特殊（左右分列、头像、时间线），自研了一个轻量虚拟列表 —— 固定行高 + 视口裁剪 + 「加载更早消息」分页合并；

*   **万行报表**：直接上 TTable 虚拟滚动：



    \<t-table

    &#x20; :data="rows"

    &#x20; :columns="columns"

    &#x20; :scroll="{ type: 'virtual', rowHeight: 44 }"

    &#x20; :max-height="620"

    &#x20; lazy-load

    />

`lazy-load` 在数据量大时还能进一步降低首屏渲染压力。滚动 5000+ 行记录无卡顿，这是我们当初最担心的点，TDesign 的 Table 扛住了。

### 5. 工单表单：Form 校验开箱即用

工单创建、客户信息编辑都是典型的高频表单，TDesign 的 Form 校验内置了成功 / 失败 / 警告三种状态：

    const rules: FormRules = {

    &#x20; title: \[{ required: true, message: '请输入工单标题', type: 'error' }],

    &#x20; priority: \[{ required: true, message: '请选择优先级', type: 'error' }],

    }



    \<t-form :data="formData" :rules="rules" @submit="onSubmit">

    &#x20; \<t-form-item label="工单标题" name="title">

    &#x20;   \<t-input v-model="formData.title" placeholder="一句话描述问题" />

    &#x20; \</t-form-item>

    &#x20; \<t-form-item label="优先级" name="priority">

    &#x20;   \<t-select v-model="formData.priority" :options="priorityOptions" />

    &#x20; \</t-form-item>

    &#x20; \<t-button theme="primary" type="submit">创建工单\</t-button>

    \</t-form>

校验状态、错误提示、国际化全部内置，省掉了大量自造轮子的时间。

### 6. 其它高频组件清单

| 场景          | 组件                         |
| ----------- | -------------------------- |
| 后台导航        | `TMenu` / `TBreadcrumb`    |
| 客户详情        | `TDescriptions`            |
| 会话状态 / 客户标签 | `TTag`                     |
| 报表时间范围      | `TDatePicker`              |
| 工单分页        | `TPagination`              |
| 转人工 / 排队提醒  | `TBadge` / `TNotification` |
| 快捷回复分组      | `TCollapse`                |

## 五、踩过的坑（写给后来者）

**坑 1：包名搞混。** `tdesign-vue` 是 Vue 2 版，`tdesign-vue-next` 才是 Vue 3 版。网上不少教程、文章是 Vue 2 的，API 对不上，排查半天才发现是包版本问题。

**坑 2：按需引入后弹层样式丢失。** Message、Dialog 等挂在 `body` 下的组件，resolver 偶尔覆盖不到样式，表现为「功能正常但没样式」。解决办法：全局显式引入一次样式入口，或检查 resolver 配置。

**坑 3：虚拟滚动与动态行高冲突。** 消息内容长短不一，固定行高会截断、动态行高会跳动。我们的取舍：消息区固定行高 + 多行省略，完整内容点开查看；表格保持固定 `rowHeight`，避免动态测量带来的性能损耗。

**坑 4：深色模式下自定义组件发白。** 最初业务组件里硬编码了 `#fff` 背景，切到深色后格外刺眼。全部改成 token 变量后解决。**教训：用组件库的换肤能力，就要遵守它的 token 约定。**

**坑 5：主题切换闪烁（FOUC）。** 刷新页面时先亮后暗。解决：入口 HTML 里根据本地存储的主题偏好提前设置 `theme-mode`，在 JS 加载前完成主题应用。

## 六、收益与总结

**实际收益（均为本项目实测口径）：**

*   **开发提效**：5 个模块 2 个多月完成第一版，组件开箱即用贡献最大；

*   **体积优化**：按需引入后首屏 bundle 体积下降约 60%；

*   **主题能力**：租户换肤 + 深色模式都是运行时切换，零重新编译成本；

*   **稳定性**：长列表虚拟滚动、复杂表单校验没有成为项目瓶颈。

**客观说几个 TDesign 的不足：**

1.  社区规模比 Element Plus 小，网上踩坑文章少，冷门问题要自己去翻 GitHub issue；

2.  部分业务场景（富文本、日历视图等）需要自行扩展；

3.  版本迭代中 API 偶有调整，升级前要仔细看 changelog。

但对客服工作台这个场景，TDesign 是「性价比」最高的选择：设计语言统一、token 体系干净、深色模式开箱即用、复杂组件足够硬。

果唯云客服还在持续迭代中（365 元 / 坐席 / 年，面向中小企业的在线客服系统），欢迎对客服系统、SaaS 前端感兴趣的同学一起交流，也欢迎在开源社区关注我们的进展。

***

本文记录果唯云客服（在线客服 SaaS）前端从 0 到 1 的组件库选型与落地过程。没有炫技，全是真实的工程决策：为什么在 Element Plus、Ant Design Vue 面前选了 TDesign，怎么用 Design Token 做品牌定制，如何把首屏体积降下来，以及我们踩过的几个坑。适合正在选型 Vue 3 组件库、或准备做 B 端后台 / 客服类产品的同学。

TDesign 在果唯云客服工作台中的实践

前端

开发工具

架构设计

从选型到落地，本文详述果唯云客服前端选用TDesign的实践：对比ElementPlus等库后，因DesignToken定制、深色模式与复杂组件优势胜出。分享按需引入降首屏体积60%、虚拟滚动、主题换肤等关键实现，并总结踩坑经验，为Vue3组件库选型及B端后台开发提供参考。

TypeScript 

路由

SaaS

Vite

2026上云采购 | AI焕新·智启新局

cscbot

lexiang

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

TDesign 在果唯云客服工作台中的实践-腾讯云开发者社区-腾讯云

TDesign 在果唯云客服工作台中的实践

TDesign 在果唯云客服工作台中的实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐