OpenTiny TinyVue组件有哪些常用组件？
OpenTiny 的 TinyVue 组件库是一套功能丰富、设计现代的企业级 UI 组件库，专为构建复杂、高性能的中后台应用而设计。其组件在各类业务场景中都有广泛且典型的应用。以下是 TinyVue 常用组件及其核心应用场景的详细解析。
📊 一、基础与布局组件
这些是构建页面骨架和基础交互的“基石”。
| 组件 | 常用场景 | 应用示例 |
|---|---|---|
<t-button> | 触发操作 | “提交”、“取消”、“搜索”、“导出”等所有需要用户点击的按钮。常与 v-permission 结合实现权限控制。 |
<t-icon> | 视觉标识 | 按钮前的图标、列表项的标记、状态指示（如成功✅、失败❌）。 |
<t-link> | 页面跳转 | 导航菜单中的链接、页面内的跳转锚点、外部链接。 |
<t-typography> | 文本展示 | 标题、段落、引用、代码块的样式化展示，确保文本层次清晰。 |
<t-grid> / <t-layout> | 页面布局 | 构建响应式栅格系统（如表单的两列布局）、搭建经典的“头部-侧边栏-内容区”三栏布局。 |
📝 二、表单与数据输入组件
用于收集和验证用户输入，是业务系统的核心。
| 组件 | 常用场景 | 应用示例 |
|---|---|---|
<t-input> | 单行文本输入 | 用户名、邮箱、手机号、搜索框。 |
<t-input-number> | 数字输入 | 商品数量、价格、年龄。 |
<t-textarea> | 多行文本输入 | 备注、描述、意见反馈。 |
<t-select> | 下拉选择 | 选择省份、城市、状态（启用/禁用）、所属部门。 |
<t-cascader> | 级联选择 | 选择省-市-区三级地址、选择分类（如电子产品 > 手机 > 智能手机）。 |
<t-checkbox> / <t-radio> | 多选/单选 | 选择兴趣爱好（多选）、选择性别（单选）、协议勾选。 |
<t-switch> | 开关切换 | 启用/禁用某个功能、开启/关闭通知。 |
<t-date-picker> / <t-time-picker> | 日期时间选择 | 选择出生日期、设置活动开始时间、查询某个时间段的数据。 |
<t-upload> | 文件上传 | 上传头像、上传合同文件、上传商品图片。支持拖拽、图片墙等多种模式。 |
<t-form> | 表单容器 | 将上述所有输入组件组织起来，提供统一的表单验证、布局（行内、上下）和提交机制。是所有数据录入页面的核心。 |
📊 三、数据展示与反馈组件
用于呈现数据和与用户进行交互反馈。
| 组件 | 常用场景 | 应用示例 |
|---|---|---|
<t-table> | 最核心组件 | 展示用户列表、订单列表、商品列表、日志记录等结构化数据。支持分页、排序、筛选、多选、固定列、虚拟滚动（大数据量不卡顿）、树形数据等高级功能。 |
<t-card> | 内容区块化 | 将相关信息（如用户基本信息、订单详情）包裹在卡片中，提升可读性。常用于仪表盘（Dashboard）。 |
<t-list> | 列表展示 | 展示新闻列表、消息列表、评论列表等。比表格更灵活，适合非结构化或富媒体内容。 |
<t-tree> | 树形结构 | 展示组织架构、文件目录、分类树。支持懒加载，适用于大型树结构。 |
<t-tabs> | 内容分区 | 在同一页面内切换不同内容区域，如“基本信息”、“详细信息”、“操作日志”标签页。 |
<t-breadcrumb> | 导航路径 | 显示当前页面在系统中的位置，如 首页 > 用户管理 > 用户列表，方便用户理解和导航。 |
<t-avatar> | 头像展示 | 用户头像、团队成员头像。 |
<t-tag> | 标记与分类 | 标记订单状态（“已发货”、“已完成”）、标记文章标签。 |
<t-badge> | 徽标计数 | 在图标或文字旁显示未读消息数、待处理任务数。 |
💬 四、导航与反馈组件
用于系统导航和用户操作反馈。
| 组件 | 常用场景 | 应用示例 |
|---|---|---|
<t-menu> | 核心导航 | 构建左侧或顶部的导航菜单，是中后台系统的“骨架”。支持多级菜单、图标、权限控制（通过 v-permission）。 |
<t-modal> | 模态对话框 | 弹出“新增用户”表单、确认“删除”操作、展示“详情”信息。是与用户进行关键交互的主要方式。 |
<t-message> | 轻量提示 | 操作成功（“保存成功”）、操作失败（“网络错误”）的短暂提示，不打断用户操作。 |
<t-notification> | 通知提醒 | 系统级通知，如“有新的审批待处理”，通常出现在屏幕右上角。 |
<t-popconfirm> | 气泡确认 | 对“删除”等危险操作进行二次确认，比 Modal 更轻量。 |
<t-tooltip> | 文字提示 | 当鼠标悬停在图标或省略的文本上时，显示完整信息或说明。 |
<t-progress> | 进度指示 | 显示文件上传进度、任务完成进度。 |
<t-skeleton> | 骨架屏 | 在数据加载前，显示内容的占位结构，提升用户体验。 |
<t-loading> | 加载状态 | 在表格、卡片等区域数据加载时显示加载动画。 |
🎨 五、高级与特殊场景组件
满足更复杂或特定的业务需求。
| 组件 | 常用场景 | 应用示例 |
|---|---|---|
<t-steps> | 分步引导 | 多步骤表单（如注册流程、发布商品）、向导式操作。 |
<t-rate> | 评分 | 用户对商品或服务进行评分。 |
<t-slider> | 范围选择 | 选择价格区间、调节音量。 |
<t-divider> | 内容分隔 | 在页面中分隔不同区块的内容。 |
<t-affix> | 元素固钉 | 将“返回顶部”按钮或关键操作按钮固定在视口。 |
<t-anchor> | 页面锚点 | 长文档内的快速跳转导航。 |
<t-back-top> | 返回顶部 | 一键返回页面顶部。 |
🏁 总结：TinyVue 的场景应用精髓
<t-table>+<t-form>+<t-modal>：这是构建数据管理类系统（CRUD）的“黄金三角”。90% 的中后台页面都围绕这三者展开。<t-menu>+<t-layout>：构建了整个应用的导航和布局骨架。<t-button>+v-permission：实现了细粒度的权限控制，是企业级应用的安全基石。<t-message>/<t-notification>：提供了流畅的用户操作反馈，提升用户体验。<t-upload>+<t-avatar>/<t-image>：满足了多媒体内容处理的需求。
掌握这些组件的常用场景，您就能快速地将业务需求转化为具体的 UI 实现，大幅提升开发效率。 在学习时，建议结合 TinyPro 的示例项目，观察这些组件在真实业务中的组合与应用方式。