SuperAPI AI 工具集

tdesign-vue-next

前端与建站

查看项目

更新于 10-16 02:31

技能介绍

用途:为 Vue 3.3+ 项目提供 tdesign-vue-next@^1 组件库的使用指导,涵盖基础、布局、导航、输入、数据展示、反馈类组件,以及主题定制、暗色模式和 Chat 组件。

主要能力:按组件层级给出选型建议(如简单列表用 List、复杂表格用 Table、大数据表格启用虚拟滚动、远程搜索用 Select + filterable + remote、AI 对话用 Chat);提供 ConfigProvider 全局配置、表单校验、表格行键与列缓存、上传受控模式、树与级联异步加载、Dialog/Drawer 嵌套与命令式调用、主题与暗色模式等实践要点;复杂场景(动态表单、服务端分页排序、虚拟滚动、可编辑单元格、断点续传、流式响应等)会指向对应 Reference 文档。

使用方式:安装 npm install tdesign-vue-next,图标库 npm install tdesign-icons-vue-next;支持全量引入或按需引入(推荐),按需示例为 import { Button } from 'tdesign-vue-next' 并配合 app.use(Button)。样式需引入 tdesign-vue-next/es/style/index.css。建议在应用根部使用单个 ConfigProvider 统一配置,主题优先用 CSS 变量与 ConfigProvider,避免直接覆盖组件内部类名。

适用场景:Vue 3 + TypeScript 的中后台、表单与数据密集型界面、需要主题定制或暗色模式、以及 AI 聊天交互的前端项目。

限制:仅使用官方文档记录的 API,不虚构 props、事件或组件名;不使用 @ts-ignore 绕过类型检查;不涉及未公开内部 API、DOM hack 及其他 TDesign 技术栈(React/小程序);示例代码需可直接运行。若遇疑似缺陷或文档与行为不一致,应告知用户并引导提交 Issue。官方文档:https://tdesign.tencent.com/vue-next/overview,GitHub:https://github.com/Tencent/tdesign-vue-next。