# Vue 3 组件目录

> 按使用场景查找 UI Docs 的 Vue 3 组件，包括动态表单、数据表格、预计进度条、雪花特效和滚动动画，并查看示例与参数。

原始页面：[Vue 3 组件目录](http://docs.quyongqing.cn/components/)

这里收录本项目的业务组件与视觉特效。每篇文档都提供使用说明、交互预览和代码示例，组件源码位于仓库的 `src/components/` 目录。

## 按场景选择组件

| 使用场景 | 组件 | 主要能力与边界 |
| --- | --- | --- |
| 查询筛选、录入编辑 | [QyqForm 动态表单](http://docs.quyongqing.cn/components/qyq-form.html) | 基于 Element Plus，通过字段配置生成表单，支持校验、日期金额和插槽扩展 |
| 后台列表、订单列表 | [QyqTable 数据表格](http://docs.quyongqing.cn/components/qyq-table.html) | 配置列、状态映射和分页；业务数据请求由调用方处理 |
| 无法获取真实进度的异步任务 | [EstimatedProgressBar 预计进度条](http://docs.quyongqing.cn/components/estimated-progress-bar.html) | 模拟推进到 99%，由调用方在任务成功后通知完成 |
| 节日活动、横幅背景 | [SnowEffect 雪花特效](http://docs.quyongqing.cn/components/snow-effect.html) | Canvas 背景特效，当前不提供配置项 |
| 品牌展示、作品集视觉区 | [ScrollAnimation 滚动动画](http://docs.quyongqing.cn/components/scroll-animation.html) | 基于 GSAP 的滚动翻转效果，图片与动画节奏在源码中配置 |

## 接入方式

当前仓库是组件源码与文档工程，尚未提供独立 npm 组件包。接入时需要复制对应组件及其本地依赖，按照各文档的说明配置 Vue、Element Plus 或 GSAP 等依赖；示例中的 `@/components/` 指向使用方的 `src/components/`。

可以先从 [QyqForm 的最小示例](http://docs.quyongqing.cn/components/qyq-form.html#%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5)或[预计进度条的任务处理示例](http://docs.quyongqing.cn/components/estimated-progress-bar.html#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)开始，再查看完整参数与场景说明。

## 相关项目

[项目专题](http://docs.quyongqing.cn/projects/)介绍 AI 对话前端、业务后台与模型接入服务的技术实践。