CC-UI

🎨 基于 Ant Design Vue 的 Vue3 企业级组件库

✨ 特性

• 🎯 86+ 组件 - 开箱即用的高质量组件
• 🎨 基于 Ant Design Vue - 遵循 Ant Design 设计规范
• 📦 TypeScript - 完整的类型定义支持
• 🛠️ 高级布局 - 内置 FormLayout、TableLayout、TreeLayout 等高级组件
• 🌍 企业级 - 久经考验的企业级组件库
• ⚡ 按需加载 - 支持 Tree Shaking

📦 安装

# npm
npm install cc-ui

# yarn
yarn add cc-ui

# pnpm
pnpm add cc-ui

🔨 使用

完整引入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import CcUI from 'cc-ui'
import 'cc-vue-ui/src/style.less'

const app = createApp(App)

// 使用默认配置
app.use(CcUI)

// 或自定义配置
app.use(CcUI, {
  formLayout: {
    // 表单布局配置
  },
  tableLayout: {
    // 表格布局配置
  },
  emptyCell: '-', // 空值显示
})

app.mount('#app')

按需引入

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

<template>
  <fs-button type="primary">按钮</fs-button>
  <fs-form-layout :config="formConfig" />
  <fs-table-layout :columns="columns" />
</template>

📚 核心组件

高级布局组件

• FormLayout - 强大的表单布局组件
• TableLayout - 完整的表格解决方案（含搜索、分页、导出）
• TreeLayout - 树形数据展示和操作
• PageLayout - 页面布局组件

基础组件（基于 Ant Design Vue）

所有组件都以 fs- 前缀命名：

• Button - 按钮
• Input - 输入框
• Select - 选择器
• Modal - 模态框
• Form - 表单
• Table - 表格
• ... 更多组件

🎯 快速示例

表单布局

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

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

const form = ref({})
const config = {
  items: [
    { label: '用户名', prop: 'username', temp: 'fs-input' },
    { label: '年龄', prop: 'age', temp: 'fs-input-number' },
    { label: '日期', prop: 'date', temp: 'fs-date-picker' },
  ]
}
</script>

表格布局

<template>
  <fs-table-layout
    :columns="columns"
    :requestUrl="requestUrl"
  />
</template>

<script setup>
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
]

const requestUrl = (params) => {
  return fetch('/api/list', { params })
}
</script>

🔧 配置

全局配置

import CcUI, { createFsUiOptions } from 'cc-ui'

const options = createFsUiOptions({
  // 表单配置
  formLayout: {
    labelCol: createLabelCol('150px'), // 标签宽度
  },
  
  // 表格配置
  tableLayout: {
    theadWidthConfig: {
      minWidth: 100,
      maxWidth: 800,
    },
  },
  
  // 空值显示
  emptyCell: '--',
})

app.use(CcUI, options)

📖 文档

详细文档请查看：CC-UI 文档（待完善）

🤝 依赖

需要同时安装以下依赖：

{
  "vue": "^3.2.0",
  "ant-design-vue": "^3.2.0"
}

📄 License

MIT © CC

🙏 致谢

本组件库基于以下优秀项目：

• Vue.js
• Ant Design Vue