CC-Vue-UI

基于 Vue 3 和 Ant Design Vue 的企业级组件库，组件统一使用 cc- 前缀。

特性

• 88+ 组件：覆盖基础组件、布局组件、反馈组件、业务组件和高级组件
• Vue 3 + TypeScript：面向企业后台系统的组件封装
• Ant Design Vue 风格：保持和 Ant Design Vue 一致的交互与视觉规范
• 高级组件完整方案：内置 FormLayout、TableLayout、TreeLayout、PageLayout
• 业务组件沉淀：包含全局弹窗、全局抽屉、弹窗选择、下拉树选择等常用能力
• 完整引入和按需引入：支持全局注册，也支持只导入需要的组件

安装

npm install cc-vue-ui ant-design-vue vue

也可以使用 pnpm 或 yarn：

pnpm add cc-vue-ui ant-design-vue vue
yarn add cc-vue-ui ant-design-vue vue

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import CcUI from 'cc-vue-ui'
import 'cc-vue-ui/style.css'

const app = createApp(App)

app.use(CcUI, {
  emptyCell: '--',
  dataEmpty: '--',
  iconfont: false
})

app.mount('#app')

按需引入

样式建议仍然在应用入口统一引入一次：

import 'cc-vue-ui/style.css'

组件可以在页面内按需导入：

<script setup>
import { Button, FormLayout, TableLayout } from 'cc-vue-ui'
</script>

<template>
  <cc-button type="primary">新增</cc-button>
  <cc-form-layout v-model:model="form" :config="formConfig" />
  <cc-table-layout :columns="columns" :request-url="requestUrl" />
</template>

组件前缀

所有组件标签统一使用 cc- 前缀：

<cc-button />
<cc-form-layout />
<cc-table-layout />
<cc-tree-layout />
<cc-page-layout />

如果旧项目里还存在 fs- 前缀，需要统一替换成 cc-。

高级组件

高级组件是这个组件库最重要的部分，适合后台管理系统里的复杂页面。

| 组件 | 说明 | 常见场景 | | --- | --- | --- | | FormLayout | 配置化表单布局 | 新增、编辑、审批表单、动态表单 | | FormLayoutDetail | 配置化详情展示 | 详情页、审批详情、只读表单 | | TableLayout | 搜索、分页、表格、导出一体化 | 用户列表、业务台账、管理后台列表 | | TableFilterLayout | 表头筛选表格 | Excel 风格列筛选、紧凑型列表 | | TreeLayout | 带搜索和操作的树布局 | 组织架构、分类管理、权限树 | | PageLayout | 页面骨架布局 | 左树右表、顶部页签加内容区 |

FormLayout 示例

<script setup>
import { reactive } from 'vue'

const form = reactive({})

const formConfig = {
  responsive: true,
  items: [
    { label: '用户名', name: 'username', temp: 'cc-input', rules: [{ required: true, message: '请输入用户名' }] },
    { label: '年龄', name: 'age', temp: 'cc-input-number' },
    {
      label: '状态',
      name: 'status',
      temp: 'cc-select',
      options: [
        { label: '启用', value: 1 },
        { label: '停用', value: 0 }
      ]
    }
  ]
}
</script>

<template>
  <cc-form-layout v-model:model="form" :config="formConfig" />
</template>

TableLayout 示例

<script setup>
import { reactive } from 'vue'

const searchForm = reactive({})

const search = {
  form: searchForm,
  config: {
    items: [
      { label: '关键字', name: 'keyword', temp: 'cc-input' },
      { label: '创建时间', name: 'createdAt', temp: 'cc-range-picker', colspan: 2 }
    ]
  }
}

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '用户名', dataIndex: 'username' },
  { title: '状态', dataIndex: 'status' },
  { title: '操作', dataIndex: 'action', dataType: 'actions', width: 160 }
]

const requestUrl = params => {
  return api.userPage(params)
}
</script>

<template>
  <cc-table-layout
    row-key="id"
    :columns="columns"
    :search="search"
    :request-url="requestUrl"
    custom-columns
  />
</template>

左树右表示例

<template>
  <div style="height: 100%">
    <cc-page-layout>
      <cc-page-layout-content :left-width="320">
        <template #left>
          <cc-tree-layout
            fixed
            :tree-data="treeData"
            :field-names="{ title: 'name', key: 'id', children: 'children' }"
            @select="handleTreeSelect"
          />
        </template>

        <template #right>
          <cc-table-layout
            ref="tableRef"
            :columns="columns"
            :request-url="requestUrl"
          />
        </template>
      </cc-page-layout-content>
    </cc-page-layout>
  </div>
</template>

全局配置

app.use(CcUI, {
  components: ['FormLayout', 'TableLayout'],
  directives: ['loading', 'watermark'],
  emptyCell: '--',
  dataEmpty: '--',
  iconfont: false
})

文档开发

npm install
npm run docs:dev
npm run docs:build

Gitee Pages 构建时建议使用项目路径作为 base：

npm run docs:build:gitee

构建产物位于：

docs/.vitepress/dist

相关链接

• npm: https://www.npmjs.com/package/cc-vue-ui
• Gitee: https://gitee.com/cc65259423/cc-vue-ui
• 文档站点: https://cc65259423.gitee.io/cc-vue-ui/

License

MIT © CC