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

1. 解决什么问题

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

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

QCPT 盯的就是这类问题。

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

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

用法是 npm install qcpt。入口先引 qcpt.css / qcpt-styles.css，Quasar 要挂 Notify、Dialog，再 qcptInit。文档站现在依赖的版本是 0.1.2。

2. 特点、功能

基于 Vue 3、TypeScript

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

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

深度结合 Quasar

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

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

提供企业后台常用组件

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

- 表格组件

- 分页组件

- 搜索表单

- 弹窗、确认框

- 文件上传、下载

- 日期、月份、年份选择

- 输入框、选择器

- 树形选择

- 多级选择

- 权限组件

- 详情列表

- 可折叠列表

- 复制组件

- 文本溢出提示

- 更多菜单

- 表单标签

- 列表编辑器

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

命名按前缀：JQ 是表单、表格一类，JC 是工具件，JCh 是 Chart.js 图表。文档里还有轻量表格 JCTable、按钮、下拉按钮、自动完成、输入识别、键值对列表编辑、标签页、双击编辑、空值回退、柱折混合图，前面那串没逐个点名。

内置权限控制

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

这样做有两个好处。

第一，页面更干净。第二，权限控制方式更统一，某个页面漏判断的情况少一点。

权限 ID 可以用 usePagePermissionSync 对齐 localStorage，开着好几个标签页也会一块变。

支持国际化

QCPT 内置 i18n 支持，包含中文、英文语言资源。需要多语言的项目更好接，不必每个组件单独处理文案。

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

支持数据可视化

QCPT 集成了基于 Chart.js 的图表组件，包含柱状图、折线图、饼图、雷达图、气泡图，还有柱折混合图。

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

支持主题定制

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

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

提供工具方法、工程能力

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

- 本地存储工具

- URL 处理

- 字符串处理

- 数字处理

- 数组、对象处理

- DOM 辅助方法

- 性能相关工具

- 正则校验（手机号、邮箱、身份证这类）

- 图标、SVG 处理

- 组件自动解析能力

零散 helper 都挂在 jqTool 下面。Vite 上可以接 unplugin-vue-components，用 qcptResolver 自动导入。

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

https://github.com/dirkhe1051931999/qcpt

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