三、主题定制
3.1 Design Token体系
TDesign通过Design Token实现设计系统的原子化管理。它是一套描述设计属性的变量集合，涵盖颜色、字体、间距、尺寸等各个方面。
借助Design Token，不仅能确保设计风格在不同组件、页面和项目间保持高度一致，还方便开发人员直接调用变量进行样式开发，大幅提升开发效率。
3.2 明亮与暗色模式
TDesign提供了明亮和暗色两种模式，支持一键切换，提升用户的使用体验。
小程序中的主题切换：
// 定义主题文件（如dark.json）
{
"brandColor": "#4f46e5",
"backgroundColor": "#1a1a1a"
}
// 动态切换
import { ThemeStore } from 'tdesign-miniprogram';
ThemeStore.setTheme('dark');
TDesign组件会自动响应var(--brand-color)等CSS变量的变化，实现主题的动态切换。
3.3 主题生成器
TDesign提供了主题生成器（theme-generator），支持：
动态主题切换：支持明暗主题自动切换和手动切换
颜色系统定制：品牌色、功能色和中性色的精细化调整
样式参数配置：字体、圆角、阴影等视觉元素的自定义
主题导出功能：一键下载定制主题样式文件
颜色配置支持两种模式：
保留输入模式：精确控制每个色阶的颜色值
智能推荐模式：根据主色自动生成和谐的色阶
3.4 Vite主题定制
在Vite项目中，可以通过修改Less变量来自定义主题：
// vite.config.js
export default {
css: {
preprocessorOptions: {
less: {
modifyVars: {
'@btn-height-default': '40px',
},
},
},
},
};
3.5 Webpack主题定制
在Webpack项目中，需要配置less-loader：
// webpack.config.js
module.exports = {
rules: [{
test: /.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
'@btn-height-default': '40px',
},
javascriptEnabled: true,
},
},
}],
}],
}
四、核心组件解析
TDesign提供了丰富完整的组件体系，覆盖了从基础布局到复杂数据展示的各类场景。
4.1 基础组件
按钮（Button）
按钮是用户交互的基础元素，TDesign提供了多种按钮类型，包括主要按钮、次要按钮、文字按钮、图标按钮等，支持不同的尺寸、状态和主题。
标签（Tag）
标签用于对信息进行标注、分类或状态标识。TDesign的标签组件提供了丰富的样式配置：
形状：默认圆角矩形，视觉简洁现代
颜色：支持主题色、状态色（成功/失败/警告/信息）
交互：可设置可关闭标签（含×号）、可点击标签
尺寸：支持多种尺寸选择
适用场景：
状态提示：如订单状态、任务流程标识（待审核/已完成）
分类标注：为文章、内容、项目打上分类标签
表格内嵌：在表格中嵌入状态标签，提升数据可读性
分割线（Divider）
用于分隔内容区域，增强页面层次感。
链接（Link）
提供文字链接样式，支持不同主题色和禁用状态。
排版（Typography）
统一的文字排版规范，包括标题、正文、辅助文字等样式。
4.2 导航组件
TDesign提供多种导航组件，帮助用户快速定位和访问不同模块：
面包屑（Breadcrumb）
展示当前页面在页面层级中的位置，帮助用户理解页面结构并快速返回上级页面。
下拉菜单（Dropdown）
提供一组可选择的菜单项，支持点击或悬浮触发，常用于工具栏、操作菜单等场景。
分页（Pagination）
处理大量数据的分页展示，支持页码跳转、每页条数调整等功能。
步骤条（Steps）
引导用户按步骤完成任务的流程组件，常用于多步骤表单、订单流程等场景。
选项卡（Tabs）
在同一区域切换不同内容的组件，支持卡片样式、可关闭标签等高级功能。
4.3 消息提醒组件
消息提醒组件负责及时向用户传达系统信息、操作反馈或重要提示：
全局提示（Message）
临时提醒用户某些事情，如“保存成功”“上传失败”，不会阻塞用户操作，通常自动消失。
位置灵活：通常显示于页面顶部或右侧角落
颜色区分：成功（绿）、错误（红）、警告（黄）、信息（蓝）
图标辅助：配合不同图标强化信息传递
用户引导（Tour）
帮助新用户快速了解页面功能的新手引导组件。
抽屉（Drawer）
从屏幕边缘滑出的面板，用于展示表单、详情等内容的轻量级弹窗。
对话框（Dialog）
用于重要操作确认或信息提示的模态窗口，通常需要用户进行确认或响应操作。
气泡确认框（Popconfirm）
常用于提示用户对重要操作进行二次确认，避免误操作导致不可逆的后果。它通常包含明确的提示语和“确认”及“取消”按钮，帮助用户做出明确选择。
加载中（Loading）
表示系统正在处理请求，提示用户稍等，避免误操作或疑惑。支持转圈动画、进度条等多种样式，可设置全屏遮罩或局部覆盖。
文字提醒（Alert）
以文字形式给用户提供提示信息，比如“请填写必填项”或者“密码格式不正确”，通常与表单或交互相关。
4.4 数据显示组件
数据显示组件覆盖了从基础结构展示到高级图形化呈现的多个层级：
头像（Avatar）
展示用户头像或占位图标，支持图片、图标、文字三种形式。
徽标（Badge）
在图标或文字右上角展示红点、数字或状态，用于提示用户有新消息或更新。
日历（Calendar）
展示日期信息的日历组件，支持日期选择、日期范围选择等功能。
卡片（Card）
将内容分组在容器中展示，常用于信息概览、数据统计等场景。
表格（Table）
TDesign的表格组件功能强大，支持列拖拽、行拖拽、列固定、表头吸顶、自定义单元格、展开展开行等多种高级功能。
列表（List）
用于展示同类信息的集合，支持加载更多、滚动加载等交互。
评论（Comment）
展示用户评论内容，支持回复、点赞等操作。
4.5 输入组件
输入组件是连接用户与系统的桥梁，承担着数据采集、表单填写、筛选查询等核心任务：
颜色选择器（ColorPicker）
提供可视化的颜色选择，支持预设颜色和自定义颜色。
日期选择器（DatePicker）
选择日期或日期范围的组件，支持年/月/日/时间等多种粒度。
表单（Form）
TDesign的表单组件支持表单校验、表单布局、表单联动等复杂功能，与FormItem组件配合使用可以快速构建企业级表单。
输入框（Input）
基础文本输入组件，支持前/后缀图标、清除按钮、密码模式等多种状态。
数字输入框（InputNumber）
专门用于数值输入的组件，支持步长控制、精度设置等。
单选框（Radio）
一组互斥的选择项，用户只能选择其中一个。
复选框（Checkbox）
一组可多选的选项，用户可以选择一个或多个。
开关（Switch）
开启或关闭某个状态的开关组件，常用于功能设置。
滑块（Slider）
通过滑动选择一个数值范围内的某个值。
选择器（Select）
下拉选择组件，支持单选、多选、搜索、分组等多种模式。
树选择（TreeSelect）
通过下拉方式展示树形结构数据的选择器。
来源：
http://htnus.cn
