krco/README.md

基于arco-design-vue的配置化表格表单组件

# Krco

基于 Arco Design Vue 的配置化表格和表单组件库，提供开箱即用的高阶功能，支持 TypeScript 类型提示，帮助快速构建后台管理系统。

## 特性

- 🚀 配置化驱动：通过简单的配置即可生成复杂的表单和表格
- 💪 完整的类型支持：使用 TypeScript 编写，提供完整的类型定义
- 🎨 基于 Arco Design：继承 Arco Design 的设计风格，提供统一的用户体验
- 📦 开箱即用：提供丰富的组件和完整的文档

## 安装

```bash
# pnpm
pnpm add krco

# npm
npm install krco

# yarn
yarn add krco
```

## 快速开始

### 1. 引入组件

```ts
// 1. 引入 Arco Design Vue
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'

// 2. 引入 krco
import krco from krco
import "krco/es/style.css"

// 3. 注册组件
app.use(ArcoVue)
app.use(krco)

// 4. (可选) 如需使用图标，请安装并注册图标组件
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
app.use(ArcoVueIcon)
```

## 组件

### FormPlus 表单组件

通过配置快速生成表单，支持多种表单项类型和验证规则。

```vue
<template>
  <a-form-plus v-model="form" :option="option" />
</template>

<script setup lang="ts">
import type { Option } from "krco"

const form = ref({
  name: "张三",
  age: 18
})

const option = reactive<Option>({
  columns: [
    {
      label: "姓名",
      field: "name",
      type: "input", // 输入框类型
      required: true, // 必填
    },
    {
      label: "年龄",
      field: "age",
      type: "number", // 数字输入框
      min: 0,
      max: 100
    }
  ]
})
</script>
```

### TablePlus 表格组件

配置化的表格组件，支持搜索、排序、分页等功能。

```vue
<template>
  <a-table-plus
    v-model="form"
    v-model:page="page"
    :option="option"
    :data="data"
  />
</template>

<script setup lang="ts">
import type { TableOption } from "krco"

const page = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 10
})

const form = ref({})

const data = [
  { name: '李四', age: 20, sex: '女' },
  { name: '王五', age: 22, sex: '男' },
  { name: '赵六', age: 24, sex: '女' }
]

const option: TableOption = {
  columns: [
    {
      label: '姓名',
      field: 'name',
      search: true, // 开启搜索
    },
    {
      label: '年龄',
      field: 'age',
      sortable: true, // 开启排序
    },
    {
      label: '性别',
      field: 'sex',
      filter: true, // 开启筛选
    }
  ]
}
</script>
```

## API 文档

### FormPlus Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 表单数据对象 | `object` | - |
| option | 表单配置项 | `Option` | - |
| loading | 加载状态 | `boolean` | `false` |

### TablePlus Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| data | 表格数据 | `array` | `[]` |
| option | 表格配置项 | `TableOption` | - |
| v-model:page | 分页信息 | `object` | - |
| loading | 加载状态 | `boolean` | `false` |

更多 API 和配置项请参考 完整文档

## 注意事项
1. 依赖要求：
确保项目中已安装 Vue 3.4.0 或更高版本。
需要配合 Arco Design Vue 使用。
2. 样式文件：
必须引入krco/es/style.css 确保组件样式生效。
3. TypeScript：
组件库提供完整的类型声明，支持类型安全开发。

## 许可证

[MIT License](LICENSE)