TDesign 主题组件
从鹅伴成长 (hr-demo) 项目中提取的基于 TDesign Vue Next 的腾讯主题可复用组件库。
依赖
bash
npm install tdesign-vue-next tdesign-icons-vue-next marked引入
js
// main.js
import 'ui-components/tdesign/index.css'
import { AppSidebar, PageContainer, StatCard, ChatBubble, GuideTooltip, useToast } from 'ui-components/tdesign'主题配色
腾讯蓝 #0052D9 为品牌主色，辅以成功绿 #2BA471、警告橙 #E37318、错误红 #D54941。
CSS 变量
通过 --td-brand-color 等 CSS 自定义属性控制全局配色。
组件
- AppSidebar — 侧边栏
- PageContainer — 页面容器
- StatCard — 统计卡片
- ChatBubble — 聊天气泡
- GuideTooltip — 引导提示
- useToast — Toast 提示
样式类
| 类名 | 说明 |
|---|---|
.app-shell | 应用外壳布局（flex column，全屏高度） |
.app-header | 顶部导航栏（56px） |
.app-body | 主体区域（flex row，sidebar + content） |
.app-sidebar | 侧边栏（232px / 折叠 64px） |
.app-content | 内容区域（灰色背景 #F3F4F6） |
.app-card | 通用卡片（白底、圆角 8px、边框、阴影） |
.card-header | 卡片头部（底部分割线） |
.card-body | 卡片内容（20px 内边距） |
.page-container | 页面容器（最大宽 1400px，居中） |
.grid-row.cols-{2,3,4} | 网格布局辅助 |