在 Pixso 调用 TDesign 组件库，先从资源社区复制设计文件，再从组件面板取用按钮、输入框、表格等元素，组合成业务页面；跨文件复用时还要发布资源库，并在使用文件中启用、检查更新。设计稿不会因此自动变成已上线的网页。下面以“用户管理列表”为例，完成筛选、列表和状态设计；主组件与实例的关系可先看Pixso 组件基础教程。
先分清设计资源、代码库与组件更新
TDesign 的设计资源用于画布中的界面搭建；TDesign 代码组件则需要研发在对应的前端工程中安装、配置和调用。两者可以采用相同的设计规范，但复制一份设计文件，并不会安装代码依赖，也不会让原网站的后续修改自动进入这个副本。
- 设计文件：保留组件层级、字体、颜色和状态，供设计师组合与调整。
- 组件实例：与主组件保持关联，适合复用；分离成普通图层后，不再跟随主组件更新。
- 团队资源库：把组件和样式发布给其他文件使用。跨文件更新需要检查资源库引用与更新内容，不能仅凭“已经复制”判断。
1. 从资源社区复制 TDesign 设计文件
打开Pixso 资源社区，搜索“TDesign”，进入资源详情，查看适用端、预览图和文件说明。桌面端组件适合后台管理界面；若做移动端页面，应选择对应资源，避免直接缩小桌面表格。点击“复制”后，在自己的工作区打开副本，保留原有组件页，另建业务页面。
原资源中的按钮、输入框、表格与分页不必一开始全部修改。先选择本次需要的部分，检查项目字体是否可用，颜色和间距是否符合团队规范。社区也有京东、饿了么、WeUI、Arco Design 等资源；一张页面尽量从同一套设计规范起步，减少尺寸和状态混用。
2. 调用组件，搭好用户管理列表
这张页面解决三个任务：找到用户、判断账号状态、处理账号。先建立“用户管理”页面，在组件面板搜索输入框、下拉选择、按钮、表格和分页，将需要的组件实例放入画布；若组件仅存在于复制文件中，可先在该文件内组页，再按后文发布资源库供其他文件引用。
- 放置筛选栏：姓名或邮箱搜索框、角色下拉框、账号状态下拉框，以及“查询”“重置”。把“新增用户”放在列表工具栏，不与筛选条件混成一组。
- 排列列表：按“用户、邮箱、角色、账号状态、最近活跃、操作”设置表头。用真实业务长度的示例填三行：短姓名、较长姓名和较长邮箱；检查省略、换行与列宽，不只用整齐的占位文字。
- 设置操作：普通行可提供“查看”“编辑”；停用或恢复账号应说明对象及后果。若支持批量处理，选择行后再显示数量和批量操作，避免未选中时出现可执行的危险按钮。
- 接好分页与筛选结果：画出当前页、页数或总条数等实际需要的信息；筛选后无结果时保留筛选栏，并提供清除条件入口。原型中可用连接表现跳转，但设计稿本身不会查询数据库。
最后复制页面，分别制作正常有数据、加载中、筛选无结果和无操作权限的状态。加载中用占位或进度反馈，无结果给出下一步，无权限则保留允许查看的信息。不要把这些不同原因都写成“暂无数据”。
3. 将重复区块做成主组件与实例
TDesign 已有的组件优先直接使用实例；自己新增的“用户单元格”“角色标签”或“列表工具栏”如果需要多处复用，再选中相关图层创建组件。可使用工具栏或右键菜单中的“创建组件”；Mac 常用快捷键为 Option + Command + K，Windows 为 Ctrl + Alt + K。创建后检查图层的组件标识。
把头像和姓名做成用户单元格时，应允许实例替换姓名、头像与状态，同时保持排列和间距一致。对短姓名、长姓名和缺少头像的情况各放一个实例，检查容器是否能容纳内容。需要调整全部用户单元格的间距时修改主组件，不要逐行手动改；仅改某行文案时，则在该实例中替换。
4. 命名组件并管理资源库
打开左侧组件面板，查看本地组件与已使用的库；Mac 常用 Option + 2，Windows 常用 Alt + 2。为本次业务组件采用便于搜索的名称，例如“用户管理/用户单元格”“用户管理/角色标签”，并补充适用场景与可修改属性。名称与说明应能让接手者识别用途，而不是只写“组件1”。
本地组件来自当前文件；跨文件使用前，需要从资源库管理入口启用对应的团队库。启用后在组件面板中搜索、预览并放入实例。若只复制了普通图层，或实例已被分离，后续主组件的修改不会沿原关联同步。
5. 发布一次更新，并在业务页面中验收
以“角色标签的左右间距”调整为例，先在资源库源文件中修改主组件，查看同文件实例是否符合预期，再从组件面板的团队资源库入口发布变更。首次建立共享库和获取资源的操作可参考团队资源库共享方法。发布的是设计资源，不是业务网站。
- 在源文件保留修改前后的样例，并记录变更范围，例如“只调整角色标签内边距，不改角色名称与颜色含义”。不要把一次小改动夹带成整套组件替换。
- 打开引用该库的用户管理文件，在资源库管理入口查看、同步或接收对应更新。先在测试页面确认间距、文本覆盖和实例状态，再处理正式页面。
- 检查三行示例与四种页面状态：长姓名是否挤压操作列，禁用按钮是否仍有说明，空状态和分页是否受到布局变化影响。
- 若未出现预期更新，先检查文件启用的库、实例来源和是否分离；不要靠重复复制相似组件掩盖引用问题。发现异常时保留当前可用版本并修正源组件，再重新发布。
交付给研发时，将页面、关键状态、组件版本和交互说明一并提供。设计侧资源的发布、工程里的 TDesign 依赖升级以及网站部署是三个不同动作，分别由对应负责人完成，才能避免设计稿已更新而线上行为未变的误解。
