QCPT：面向企业后台的 Vue 3 组件库

1. 解决什么问题

做企业后台，最耗时间的往往不是页面本身，而是大量重复组件和业务交互。

表格、搜索表单、弹窗、分页、权限控制、文件上传、日期选择、图表展示、空状态、提示气泡，这些东西每个项目都会用。只靠基础 UI 库，开发时还要反复封装；每个团队各写一套，样式不统一，交互不一致，后期维护成本也高。

QCPT 解决的就是这类问题。

它基于 Vue 3、TypeScript 和 Quasar，把企业后台里高频使用的组件提前封装好，让项目可以更快搭页面、更稳地复用组件，也更容易保持统一的产品体验。

简单说，QCPT 不是从零造一个 UI 框架，而是在 Quasar 基础上补齐企业项目常用的业务组件和工具能力。

2. 特点和功能

基于 Vue 3 和 TypeScript

QCPT 使用 Vue 3 开发，适合现代前端项目。组件带有 TypeScript 类型支持，使用时参数更清楚，编辑器提示更完整，也能减少运行时错误。

对多人协作项目来说，类型定义很重要。组件怎么传参、事件怎么用、数据结构长什么样，都能更明确。

深度结合 Quasar

Quasar 本身提供了成熟的基础组件和响应式能力。QCPT 在这个基础上继续封装业务组件，保留 Quasar 的稳定性，同时减少项目里的重复代码。

比如按钮、输入框、选择器、表格、分页、弹窗这些常见能力，可以直接使用 QCPT 提供的封装版本，少写很多重复配置。

提供企业后台常用组件

QCPT 覆盖了不少后台系统里的高频场景，例如：

- 表格组件

- 分页组件

- 搜索表单

- 弹窗和确认框

- 文件上传和下载

- 日期、月份、年份选择

- 输入框和选择器

- 树形选择

- 多级选择

- 权限组件

- 详情列表

- 可折叠列表

- 复制组件

- 文本溢出提示

- 更多菜单

- 表单标签

- 列表编辑器

这些组件适合管理系统、数据平台、运营后台、配置中心等项目使用。

内置权限控制

后台系统通常会涉及按钮权限、菜单权限、操作权限。QCPT 提供权限相关组件，可以把权限判断从业务页面里拆出来，减少页面代码里的判断逻辑。

这样做有两个好处。

第一，页面更干净。第二，权限控制方式更统一，不容易出现某个页面漏判断的问题。

支持国际化

QCPT 内置 i18n 支持，包含中文和英文语言资源。对于需要多语言的项目，可以更方便地接入，不用每个组件单独处理文案。

这对跨地区系统、内部多语言平台、海外项目比较实用。

支持数据可视化

QCPT 集成了基于 Chart.js 的图表组件，包含柱状图、折线图、饼图、雷达图、气泡图等常见类型。

后台系统经常需要展示统计数据、趋势数据、占比数据。使用封装好的图表组件，可以减少 Chart.js 原始配置的使用成本，让开发更聚焦业务数据本身。

支持主题定制

企业系统通常有自己的品牌色、状态色、页面风格。QCPT 支持主题配置，可以根据项目需要调整视觉表现。

相比在页面里到处覆盖样式，统一的主题配置更容易维护，也更适合长期项目。

提供工具方法和工程能力

除了组件，QCPT 还包含一些常用工具能力，例如：

- 本地存储工具

- URL 处理

- 字符串处理

- 数字处理

- 数组和对象处理

- DOM 辅助方法

- 性能相关工具

- 图标和 SVG 处理

- 组件自动解析能力

这些工具不抢业务逻辑，但能减少项目里的零散重复代码。

https://github.com/dirkhe1051931999/qcpt

https://www.npmjs.com/package/qcpt