From 5c5d49a58cc22c535e50204704e3c00dbc94cfad Mon Sep 17 00:00:00 2001
From: kylin <260987762@qq.com>
Date: Mon, 30 Sep 2024 18:09:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README-zh_CN.md                               |   8 +-
 README.md                                     |  32 +++--
 docs/.vitepress/locales/cn.ts                 |  16 +++
 docs/cn/other/breadcrumb.md                   |  36 +++++
 docs/cn/other/checkCard.md                    |  29 ++++
 docs/cn/other/checkbox.md                     |  25 ++++
 docs/cn/other/columnSetting.md                |   2 +-
 .../cn/other/components/DemoProBreadcrumb.vue |  35 +++++
 .../other/components/DemoProBreadcrumb2.vue   |  50 +++++++
 .../other/components/DemoProBreadcrumb3.vue   |  38 +++++
 docs/cn/other/components/DemoProCheckCard.vue |  23 +++
 .../cn/other/components/DemoProCheckCard2.vue |  23 +++
 .../cn/other/components/DemoProCheckCard3.vue |  31 ++++
 docs/cn/other/components/DemoProCheckbox.vue  |  25 ++++
 docs/cn/other/components/DemoProCheckbox2.vue |  30 ++++
 docs/cn/other/components/DemoProRadio.vue     |  20 +++
 docs/cn/other/components/DemoProRadio2.vue    |  20 +++
 docs/cn/other/radio.md                        |  25 ++++
 package.json                                  |   2 +-
 packages/k-naiveui-pro/.idea/.gitignore       |   5 +
 packages/k-naiveui-pro/package.json           |   4 +-
 .../src/components/ProBreadcrumb.vue          |  65 +++++++++
 .../src/components/ProCheckCard.vue           | 136 ++++++++++++++++++
 .../src/components/ProCheckbox.vue            |  43 ++++++
 .../src/components/ProDescriptions.vue        |   2 +-
 .../k-naiveui-pro/src/components/ProRadio.vue |  43 ++++++
 .../k-naiveui-pro/src/components/index.ts     |   6 +-
 27 files changed, 751 insertions(+), 23 deletions(-)
 create mode 100644 docs/cn/other/breadcrumb.md
 create mode 100644 docs/cn/other/checkCard.md
 create mode 100644 docs/cn/other/checkbox.md
 create mode 100644 docs/cn/other/components/DemoProBreadcrumb.vue
 create mode 100644 docs/cn/other/components/DemoProBreadcrumb2.vue
 create mode 100644 docs/cn/other/components/DemoProBreadcrumb3.vue
 create mode 100644 docs/cn/other/components/DemoProCheckCard.vue
 create mode 100644 docs/cn/other/components/DemoProCheckCard2.vue
 create mode 100644 docs/cn/other/components/DemoProCheckCard3.vue
 create mode 100644 docs/cn/other/components/DemoProCheckbox.vue
 create mode 100644 docs/cn/other/components/DemoProCheckbox2.vue
 create mode 100644 docs/cn/other/components/DemoProRadio.vue
 create mode 100644 docs/cn/other/components/DemoProRadio2.vue
 create mode 100644 docs/cn/other/radio.md
 create mode 100644 packages/k-naiveui-pro/.idea/.gitignore
 create mode 100644 packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
 create mode 100644 packages/k-naiveui-pro/src/components/ProCheckCard.vue
 create mode 100644 packages/k-naiveui-pro/src/components/ProCheckbox.vue
 create mode 100644 packages/k-naiveui-pro/src/components/ProRadio.vue

diff --git a/README-zh_CN.md b/README-zh_CN.md
index 3443f43..e385129 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -106,16 +106,18 @@ export default defineConfig({
 - [X] 添加 ProQueryForm
 - [X] 添加 ProStepsForm
 - [ ] 添加 ProCrud
-- [ ] 添加 ProBreadcrumb
+- [X] 添加 ProBreadcrumb
 - [X] 添加 ProBackground
 - [X] 添加 ProTabs
-- [ ] 添加 ProCheckbox
-- [ ] 添加 ProRadio
+- [X] 添加 ProCheckbox
+- [X] 添加 ProRadio
 - [X] 添加 ProColumnSetting
 - [X] 添加 ProDescriptions
 - [X] 添加 ProToggleFullScreen
 - [X] 添加 ProToggleLanguage
 - [X] 添加 ProToggleTheme
+- [X] 添加 ProCheckCard
+- [X] 添加 ProAvatar
 
 
 ## License
diff --git a/README.md b/README.md
index 274e6cb..006eb70 100644
--- a/README.md
+++ b/README.md
@@ -102,21 +102,23 @@ export default defineConfig({
 
 ## List of things to do
 
-- [X] Add a  ProLayout
-- [X] Add a  ProBaseForm
-- [X] Add a  ProQueryForm
-- [X] Add a  ProStepsForm
-- [ ] Add a  ProCrud
-- [ ] Add a  ProBreadcrumb
-- [X] Add a  ProBackground
-- [X] Add a  ProTabs
-- [ ] Add a  ProCheckbox
-- [ ] Add a  ProRadio
-- [X] Add a  ProColumnSetting
-- [X] Add a  ProDescriptions
-- [X] Add a  ProToggleFullScreen
-- [X] Add a  ProToggleLanguage
-- [X] Add a  ProToggleTheme
+- [X] Add a ProLayout
+- [X] Add a ProBaseForm
+- [X] Add a ProQueryForm
+- [X] Add a ProStepsForm
+- [ ] Add a ProCrud
+- [X] Add a ProBreadcrumb
+- [X] Add a ProBackground
+- [X] Add a ProTabs
+- [X] Add a ProCheckbox
+- [X] Add a ProRadio
+- [X] Add a ProColumnSetting
+- [X] Add a ProDescriptions
+- [X] Add a ProToggleFullScreen
+- [X] Add a ProToggleLanguage
+- [X] Add a ProToggleTheme
+- [X] Add a ProCheckCard
+- [X] Add a ProAvatar
 
 ## License
 MIT
diff --git a/docs/.vitepress/locales/cn.ts b/docs/.vitepress/locales/cn.ts
index 6033890..eda8f84 100755
--- a/docs/.vitepress/locales/cn.ts
+++ b/docs/.vitepress/locales/cn.ts
@@ -89,6 +89,22 @@ export const cnConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
                         text: 'ProDescriptions',
                         link: '/cn/other/descriptions.md'
                     },
+                    {
+                        text: 'ProCheckbox',
+                        link: '/cn/other/checkbox.md'
+                    },
+                    {
+                        text: 'ProRadio',
+                        link: '/cn/other/radio.md'
+                    },
+                    {
+                        text: 'ProCheckCard',
+                        link: '/cn/other/checkCard.md'
+                    },
+                    {
+                        text: 'ProBreadcrumb',
+                        link: '/cn/other/breadcrumb.md'
+                    },
                 ]
             },
         ],
diff --git a/docs/cn/other/breadcrumb.md b/docs/cn/other/breadcrumb.md
new file mode 100644
index 0000000..a18f760
--- /dev/null
+++ b/docs/cn/other/breadcrumb.md
@@ -0,0 +1,36 @@
+# ProBreadcrumb
+
+> `ProBreadcrumb` 是基于 `Naive UI` 的 `n-breadcrumb` 组件封装的面包屑导航组件。它提供了更加灵活的配置方式，支持自定义样式和类名，能够满足更多样化的需求。
+
+<demo path="./components/DemoProBreadcrumb" />
+
+<demo path="./components/DemoProBreadcrumb2" />
+
+<demo path="./components/DemoProBreadcrumb3" />
+
+
+## Props
+
+### ProBreadcrumbProps
+
+| 参数              | 类型                                              | 默认值   | 说明                              |
+|-----------------|-------------------------------------------------|-------|---------------------------------|
+| customClass     | `string \| string[] \| Record<string, boolean>` | —     | 自定义面包屑容器的类名，支持字符串、字符串数组或对象形式的类名 |
+| customLinkClass | `string \| string[] \| Record<string, boolean>` | —     | 自定义面包屑链接的类名，支持字符串、字符串数组或对象形式的类名 |
+| options         | `BreadcrumbOption[]`                            | `[]`  | 面包屑导航项的配置数组，包含每个导航项的属性          |
+| separator       | `string \| (() => JSX.Element)`                 | `'/'` | 分隔符，可以是字符串或返回 JSX 元素的函数         |
+
+### ProBreadcrumbOption
+
+| 参数    | 类型       | 默认值         | 说明                              |
+|-------|----------|-------------|---------------------------------|
+| label | `string` | `''`        | 导航项的显示文本                        |
+| path  | `string` | `undefined` | 导航项的路径，点击后会通过事件传递给外部处理          |
+| icon  | `string` | `undefined` | 面包屑项的图标，传入 `@iconify/vue` 的图标名称 |
+
+
+### 事件
+
+| 事件名        | 	回调参数            | 说明                                                                       |
+|------------|------------------|--------------------------------------------------------------------------|
+| item-click | `(path: string)` | 当点击带有 path 属性的面包屑项时，会触发 item-click 事件，并将 path 作为参数传递出去，外部组件可以监听该事件并进行处理。 |
\ No newline at end of file
diff --git a/docs/cn/other/checkCard.md b/docs/cn/other/checkCard.md
new file mode 100644
index 0000000..78dba37
--- /dev/null
+++ b/docs/cn/other/checkCard.md
@@ -0,0 +1,29 @@
+# ProCheckCard
+
+> `ProCheckCard` 是基于 `Naive UI` 组件库封装的多功能选择卡片组件。它集成了选择（多选或单选）和卡片样式展示的功能，适用于需要以卡片形式展示内容且支持选择的场景，如商品选择、选项卡等。
+
+<demo path="./components/DemoProCheckCard" />
+
+<demo path="./components/DemoProCheckCard2" />
+
+<demo path="./components/DemoProCheckCard3" />
+
+## 参数
+
+| 参数         | 类型                                           | 默认值         | 说明                                 |
+|------------|----------------------------------------------|-------------|------------------------------------|
+| value      | `ProCheckCardValue` \| `ProCheckCardValue[]` | `undefined` | 选中的值，支持单个值或数组形式（与 `modelValue` 等效） |
+| modelValue | `ProCheckCardValue` \| `ProCheckCardValue[]` | `undefined` | 选中的值，支持 `v-model` 双向绑定             |
+| options    | `Array<Option>`                              | `[]`        | 选项列表，包含每个选项的详细信息                   |
+| multiple   | `boolean`                                    | `false`     | 是否多选模式，默认单选                        |
+| size       | `'small'` \| `'medium'` \| `'large'`         | `'medium'`  | 卡片尺寸大小                             |
+| disabled   | `boolean`                                    | `false`     | 是否禁用整个组件                           |
+
+### Option 对象
+
+| 参数          | 类型                  | 默认值     | 说明                |
+|-------------|---------------------|---------|-------------------|
+| label       | `string`            | `''`    | 选项的显示文本           |
+| value       | `ProCheckCardValue` | —       | 选项的值，用于绑定和提交数据    |
+| disabled    | `boolean`           | `false` | 是否禁用该选项           |
+| description | `string`            | `''`    | 选项的描述信息，可用于展示更多内容 |
diff --git a/docs/cn/other/checkbox.md b/docs/cn/other/checkbox.md
new file mode 100644
index 0000000..c7a63f2
--- /dev/null
+++ b/docs/cn/other/checkbox.md
@@ -0,0 +1,25 @@
+# ProCheckbox
+
+> `ProCheckbox` 是对 `naive-ui` 的 `n-checkbox-group` 组件的封装，旨在提供更简洁、更易用的多选框组组件。通过 `ProCheckbox`，您可以更方便地使用多选框组，并支持更多的配置选项和自定义功能。
+
+<demo path="./components/DemoProCheckbox" />
+
+<demo path="./components/DemoProCheckbox2" />
+
+## Props
+
+| 参数       | 类型                                   | 默认值        | 说明                                |
+|----------|--------------------------------------|------------|-----------------------------------|
+| options  | `ProCheckboxOption[]`                | `[]`       | 多选框选项列表，包含每个选项的 `label` 和 `value` |
+| value    | `Array<string \| number>`            | `[]`       | 选中的值数组，支持 `v-model` 双向绑定          |
+| name     | `string`                             | `''`       | 多选框组的名称                           |
+| disabled | `boolean`                            | `false`    | 是否禁用整个多选框组                        |
+| size     | `'small'` \| `'medium'` \| `'large'` | `'medium'` | 多选框的尺寸大小                          ||
+
+### ProCheckboxOption
+
+| 参数       | 类型                   | 默认值     | 说明              |
+|----------|----------------------|---------|-----------------|
+| label    | `string`             | —       | 多选框的显示文本        |
+| value    | `string` \| `number` | —       | 多选框的值，用于绑定和提交数据 |
+| disabled | `boolean`            | `false` | 是否禁用该选项         |
diff --git a/docs/cn/other/columnSetting.md b/docs/cn/other/columnSetting.md
index bb270d8..fdd140f 100644
--- a/docs/cn/other/columnSetting.md
+++ b/docs/cn/other/columnSetting.md
@@ -1,4 +1,4 @@
-# ProColumnSetting 组件文档
+# ProColumnSetting
 
 > `ProColumnSetting` 是一个用于管理列设置的 Vue 3 组件，常用于表格组件中，提供列的显示/隐藏以及排序功能。该组件结合了 `naive-ui` 的 `n-popover`、`n-button`、`n-tree` 组件，允许用户通过勾选和拖拽的方式，自定义列的可见性和顺序。
 
diff --git a/docs/cn/other/components/DemoProBreadcrumb.vue b/docs/cn/other/components/DemoProBreadcrumb.vue
new file mode 100644
index 0000000..24dacaa
--- /dev/null
+++ b/docs/cn/other/components/DemoProBreadcrumb.vue
@@ -0,0 +1,35 @@
+<docs lang="md">
+---
+title: 基础用法
+---
+</docs>
+<script setup lang="ts">
+import {createDiscreteApi} from "naive-ui";
+
+const { message} = createDiscreteApi(
+    ['message'],
+)
+
+const breadcrumbOptions = [
+  {
+    label: '首页',
+    to: '/',
+    icon: 'mdi:home',
+  },
+  {
+    label: '分类',
+    to: '/category',
+    icon: 'mdi:folder-outline',
+  },
+  {
+    label: '文章详情',
+    icon: 'mdi:file-document-outline',
+  },
+];
+function handleClick(path: string) {
+  message.info(`Clicked path: ${path}`);
+}
+</script>
+<template>
+  <ProBreadcrumb :options="breadcrumbOptions"  @item-click="handleClick"/>
+</template>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProBreadcrumb2.vue b/docs/cn/other/components/DemoProBreadcrumb2.vue
new file mode 100644
index 0000000..8efa339
--- /dev/null
+++ b/docs/cn/other/components/DemoProBreadcrumb2.vue
@@ -0,0 +1,50 @@
+<docs lang="md">
+---
+title: 自定义类名和样式
+---
+</docs>
+<script setup lang="ts">
+import {createDiscreteApi} from "naive-ui";
+
+const { message} = createDiscreteApi(
+    ['message'],
+)
+
+const breadcrumbOptions = [
+  {
+    label: '首页',
+    to: '/',
+    icon: 'mdi:home',
+  },
+  {
+    label: '分类',
+    to: '/category',
+    icon: 'mdi:folder-outline',
+  },
+  {
+    label: '文章详情',
+    icon: 'mdi:file-document-outline',
+  },
+];
+function handleClick(path: string) {
+  message.info(`Clicked path: ${path}`);
+}
+</script>
+<template>
+  <ProBreadcrumb
+      :options="breadcrumbOptions"
+      customClass="my-breadcrumb"
+      customLinkClass="my-breadcrumb-link"
+      @item-click="handleClick"
+  />
+</template>
+
+<style scoped>
+.my-breadcrumb {
+  /* 自定义面包屑容器的样式 */
+}
+
+.my-breadcrumb-link {
+  /* 自定义面包屑链接的样式 */
+}
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProBreadcrumb3.vue b/docs/cn/other/components/DemoProBreadcrumb3.vue
new file mode 100644
index 0000000..2a4e62d
--- /dev/null
+++ b/docs/cn/other/components/DemoProBreadcrumb3.vue
@@ -0,0 +1,38 @@
+<docs lang="md">
+---
+title: 使用 UnoCSS 进行样式定制
+---
+</docs>
+<script setup lang="ts">
+import {createDiscreteApi} from "naive-ui";
+
+const { message} = createDiscreteApi(
+    ['message'],
+)
+const breadcrumbOptions = [
+  {
+    label: '首页',
+    to: '/',
+    icon: 'mdi:home',
+  },
+  {
+    label: '分类',
+    to: '/category',
+    icon: 'mdi:folder-outline',
+  },
+  {
+    label: '文章详情',
+    icon: 'mdi:file-document-outline',
+  },
+];
+function handleClick(path: string) {
+  message.info(`Clicked path: ${path}`);
+}
+</script>
+<template>
+  <ProBreadcrumb
+      :options="breadcrumbOptions"
+      :customLinkClass="['text-blue-500', 'hover:text-blue-700']"
+      @item-click="handleClick"
+  />
+</template>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProCheckCard.vue b/docs/cn/other/components/DemoProCheckCard.vue
new file mode 100644
index 0000000..822c0b4
--- /dev/null
+++ b/docs/cn/other/components/DemoProCheckCard.vue
@@ -0,0 +1,23 @@
+<docs lang="md">
+---
+title: 基础用法
+---
+</docs>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedValue = ref(null)
+const cardOptions = [
+  { label: '选项一', value: 1, description: '这是选项一的描述' },
+  { label: '选项二', value: 2, description: '这是选项二的描述' },
+  { label: '选项三', value: 3, description: '这是选项三的描述' },
+]
+</script>
+
+<template>
+  <ProCheckCard v-model="selectedValue" :options="cardOptions" />
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProCheckCard2.vue b/docs/cn/other/components/DemoProCheckCard2.vue
new file mode 100644
index 0000000..5e06057
--- /dev/null
+++ b/docs/cn/other/components/DemoProCheckCard2.vue
@@ -0,0 +1,23 @@
+<docs lang="md">
+---
+title: 多选用法
+---
+</docs>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedValue = ref(null)
+const cardOptions = [
+  { label: '选项一', value: 1, description: '这是选项一的描述' },
+  { label: '选项二', value: 2, description: '这是选项二的描述' },
+  { label: '选项三', value: 3, description: '这是选项三的描述' },
+]
+</script>
+
+<template>
+  <ProCheckCard v-model="selectedValue" :options="cardOptions"  multiple/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProCheckCard3.vue b/docs/cn/other/components/DemoProCheckCard3.vue
new file mode 100644
index 0000000..7a860bc
--- /dev/null
+++ b/docs/cn/other/components/DemoProCheckCard3.vue
@@ -0,0 +1,31 @@
+<docs lang="md">
+---
+title: 自定义卡片内容
+---
+</docs>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedValue = ref(null)
+const cardOptions = [
+  { label: '选项一', value: 1, description: '这是选项一的描述' },
+  { label: '选项二', value: 2, description: '这是选项二的描述' },
+  { label: '选项三', value: 3, description: '这是选项三的描述' },
+]
+</script>
+
+<template>
+  <ProCheckCard v-model="selectedValue" :options="cardOptions">
+    <template #option="{ option }">
+      <div>
+        <h3>{{ option.label }}</h3>
+        <p>{{ option.description }}</p>
+        <!-- 其他自定义内容，如图片、图标等 -->
+      </div>
+    </template>
+  </ProCheckCard>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProCheckbox.vue b/docs/cn/other/components/DemoProCheckbox.vue
new file mode 100644
index 0000000..4c05ff6
--- /dev/null
+++ b/docs/cn/other/components/DemoProCheckbox.vue
@@ -0,0 +1,25 @@
+<docs lang="md">
+---
+title: 基础用法
+---
+</docs>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedValues = ref([])
+const checkboxOptions = [
+  { label: '苹果', value: 'apple' },
+  { label: '香蕉', value: 'banana' },
+  { label: '橘子', value: 'orange' },
+]
+
+</script>
+
+<template>
+  <ProCheckbox v-model="selectedValues" :options="checkboxOptions" />
+  {{ JSON.stringify(selectedValues) }}
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProCheckbox2.vue b/docs/cn/other/components/DemoProCheckbox2.vue
new file mode 100644
index 0000000..7573c17
--- /dev/null
+++ b/docs/cn/other/components/DemoProCheckbox2.vue
@@ -0,0 +1,30 @@
+<docs lang="md">
+---
+title: 设置尺寸和禁用整个多选框组
+---
+</docs>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedValues = ref([])
+const checkboxOptions = [
+  { label: '苹果', value: 'apple' },
+  { label: '香蕉', value: 'banana' },
+  { label: '橘子', value: 'orange' },
+]
+
+</script>
+
+<template>
+  <ProCheckbox
+      v-model="selectedValues"
+      :options="checkboxOptions"
+      size="large"
+      disabled
+  />
+  {{ JSON.stringify(selectedValues) }}
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/docs/cn/other/components/DemoProRadio.vue b/docs/cn/other/components/DemoProRadio.vue
new file mode 100644
index 0000000..3c13fc0
--- /dev/null
+++ b/docs/cn/other/components/DemoProRadio.vue
@@ -0,0 +1,20 @@
+<docs lang="md">
+---
+title: 基础用法
+---
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selectedValue = ref(null)
+const radioOptions = [
+  { label: '苹果', value: 'apple' },
+  { label: '香蕉', value: 'banana' },
+  { label: '橘子', value: 'orange' },
+]
+</script>
+<template>
+  <ProRadio v-model="selectedValue" :options="radioOptions" />
+  {{ JSON.stringify(selectedValue) }}
+</template>
+
diff --git a/docs/cn/other/components/DemoProRadio2.vue b/docs/cn/other/components/DemoProRadio2.vue
new file mode 100644
index 0000000..59e43a2
--- /dev/null
+++ b/docs/cn/other/components/DemoProRadio2.vue
@@ -0,0 +1,20 @@
+<docs lang="md">
+---
+title: 设置尺寸和禁用整个单选框组
+---
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selectedValue = ref(null)
+const radioOptions = [
+  { label: '苹果', value: 'apple' },
+  { label: '香蕉', value: 'banana' },
+  { label: '橘子', value: 'orange' },
+]
+</script>
+<template>
+  <ProRadio v-model="selectedValue" :options="radioOptions"  size="large" disabled />
+  {{ JSON.stringify(selectedValue) }}
+</template>
+
diff --git a/docs/cn/other/radio.md b/docs/cn/other/radio.md
new file mode 100644
index 0000000..e214f1b
--- /dev/null
+++ b/docs/cn/other/radio.md
@@ -0,0 +1,25 @@
+# ProRadio
+
+> `ProRadio` 是对 `naive-ui` 的 `n-radio-group` 组件的封装，旨在提供更简洁、更易用的单选框组组件。通过 `ProRadio`，您可以更方便地使用单选框组，并支持更多的配置选项和自定义功能。
+
+<demo path="./components/DemoProRadio" />
+
+<demo path="./components/DemoProRadio2" />
+
+## Props
+
+| 参数       | 类型                                   | 默认值         | 说明                                |
+|----------|--------------------------------------|-------------|-----------------------------------|
+| options  | `ProRadioOption[]`                   | `[]`        | 单选框选项列表，包含每个选项的 `label` 和 `value` |
+| value    | `string` \| `number`                 | `undefined` | 选中的值，支持 `v-model` 双向绑定            |
+| name     | `string`                             | `''`        | 单选框组的名称                           |
+| disabled | `boolean`                            | `false`     | 是否禁用整个单选框组                        |
+| size     | `'small'` \| `'medium'` \| `'large'` | `'medium'`  | 单选框的尺寸大小                          |
+
+### ProRadioOption
+
+| 参数       | 类型                   | 默认值     | 说明              |
+|----------|----------------------|---------|-----------------|
+| label    | `string`             | —       | 单选框的显示文本        |
+| value    | `string` \| `number` | —       | 单选框的值，用于绑定和提交数据 |
+| disabled | `boolean`            | `false` | 是否禁用该选项         |
diff --git a/package.json b/package.json
index 819fa7b..80b9f80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monorepo",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "scripts": {
     "build": "pnpm run build:resolver && pnpm run build:components",
diff --git a/packages/k-naiveui-pro/.idea/.gitignore b/packages/k-naiveui-pro/.idea/.gitignore
new file mode 100644
index 0000000..10b731c
--- /dev/null
+++ b/packages/k-naiveui-pro/.idea/.gitignore
@@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
diff --git a/packages/k-naiveui-pro/package.json b/packages/k-naiveui-pro/package.json
index fa90fa0..1179302 100644
--- a/packages/k-naiveui-pro/package.json
+++ b/packages/k-naiveui-pro/package.json
@@ -62,10 +62,12 @@
     "@iconify/vue": "^4.1.2",
     "@vue/tsconfig": "^0.4.0",
     "@vueuse/core": "^11.1.0",
+    "clsx": "^2.1.1",
     "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
     "naive-ui": "^2.39.0",
     "unbuild": "^2.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.37",
+    "vue-router": "^4.3.3"
   }
 }
diff --git a/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue b/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
new file mode 100644
index 0000000..fd3d7e9
--- /dev/null
+++ b/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, defineProps, toRefs, defineEmits } from 'vue';
+import { Icon } from '@iconify/vue';
+import clsx from 'clsx';
+
+export interface ProBreadcrumbOption {
+  label: string;
+  icon?: string;
+  path?: string;
+}
+
+export interface ProBreadcrumbProps {
+  customClass?: string | string[] | Record<string, boolean>;
+  customLinkClass?: string | string[] | Record<string, boolean>;
+  options: ProBreadcrumbOption[];
+  separator?: string;
+}
+
+defineOptions({ name: 'ProBreadcrumb', inheritAttrs: false });
+
+const props = defineProps<ProBreadcrumbProps>();
+const emit = defineEmits(['item-click']);
+
+const { customClass, customLinkClass, options, separator } = toRefs(props);
+
+const breadcrumbClass = computed(() => clsx(customClass.value));
+
+// 定义 breadcrumb-link 的类名
+const breadcrumbLinkClass = computed(() =>
+    clsx(
+        'inline-flex',
+        'space-x-1',
+        'items-center',
+        'no-underline',
+        'text-[var(--n-text-color)]',
+        'hover:text-[var(--n-text-color-hover)]',
+        customLinkClass.value, // 合并用户传入的自定义链接类名
+    ),
+);
+
+// 处理点击事件
+const handleClick = (item: ProBreadcrumbOption) => {
+  if (item.path) {
+    emit('item-click', item.path);
+  }
+};
+</script>
+
+<template>
+  <n-breadcrumb :class="breadcrumbClass" :separator="separator">
+    <n-breadcrumb-item
+        v-for="(item, index) in options"
+        :key="index"
+    >
+      <div
+          :class="breadcrumbLinkClass"
+          @click="handleClick(item)"
+          style="cursor: pointer;"
+      >
+        <Icon v-if="item.icon" :icon="item.icon" />
+        <span>{{ item.label }}</span>
+      </div>
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
\ No newline at end of file
diff --git a/packages/k-naiveui-pro/src/components/ProCheckCard.vue b/packages/k-naiveui-pro/src/components/ProCheckCard.vue
new file mode 100644
index 0000000..89aeea1
--- /dev/null
+++ b/packages/k-naiveui-pro/src/components/ProCheckCard.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, computed } from 'vue'
+
+type ProCheckCardValue = string | number
+
+export interface ProCheckCardOption {
+  label?: string
+  value: ProCheckCardValue
+  disabled?: boolean
+  description?: string
+  // 其他自定义属性
+}
+
+export interface ProCheckCardProps {
+  value?: ProCheckCardValue | ProCheckCardValue[]
+  modelValue?: ProCheckCardValue | ProCheckCardValue[]
+  options: ProCheckCardOption[]
+  multiple?: boolean
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+}
+defineOptions({ name: 'ProCheckCard', inheritAttrs: false })
+const props = defineProps<ProCheckCardProps>()
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 计算选中值，支持 modelValue 和 value，两者等效
+const selectedValue = computed({
+  get: () => props.modelValue ?? props.value,
+  set: (val) => {
+    emit('update:modelValue', val)
+    emit('change', val)
+  },
+})
+
+// 判断是否多选模式
+const isMultiple = computed(() => props.multiple)
+
+// 定义 isSelected 函数，用于判断选项是否被选中
+function isSelected(value: ProCheckCardValue) {
+  if (isMultiple.value) {
+    return Array.isArray(selectedValue.value) && selectedValue.value.includes(value)
+  } else {
+    return selectedValue.value === value
+  }
+}
+
+// 处理点击事件
+function handleClick(option: ProCheckCardOption) {
+  if (props.disabled || option.disabled) {
+    return
+  }
+  if (isMultiple.value) {
+    const currentValues = Array.isArray(selectedValue.value) ? [...selectedValue.value] : []
+    const valueIndex = currentValues.indexOf(option.value)
+    if (valueIndex > -1) {
+      currentValues.splice(valueIndex, 1)
+    } else {
+      currentValues.push(option.value)
+    }
+    selectedValue.value = currentValues
+  } else {
+    selectedValue.value = option.value
+  }
+}
+</script>
+
+<template>
+  <div class="pro-check-card">
+    <div
+        v-for="option in props.options"
+        :key="option.value"
+        class="pro-check-card-item"
+    >
+      <n-card
+          :size="props.size"
+          :hoverable="!props.disabled && !option.disabled"
+          :class="{
+          'pro-check-card-selected': isSelected(option.value),
+          'pro-check-card-disabled': props.disabled || option.disabled,
+        }"
+          @click="handleClick(option)"
+      >
+        <template #header>
+          <div class="pro-check-card-header">
+            <span>{{ option.label }}</span>
+            <span v-if="isMultiple">
+              <n-checkbox
+                  :disabled="props.disabled || option.disabled"
+                  :checked="isSelected(option.value)"
+              />
+            </span>
+            <span v-else>
+              <n-radio
+                  :disabled="props.disabled || option.disabled"
+                  :checked="isSelected(option.value)"
+              />
+            </span>
+          </div>
+        </template>
+        <div>
+          <slot name="option" :option="option">
+            <!-- 默认内容，可以在这里展示 option.description 或其他内容 -->
+            <p>{{ option.description }}</p>
+          </slot>
+        </div>
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pro-check-card {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.pro-check-card-item {
+  width: calc(33.333% - 10.666px); /* 三列布局，减去 gap 的影响 */
+}
+
+.pro-check-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pro-check-card-selected {
+  border: 1px solid var(--color-primary);
+}
+
+.pro-check-card-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/packages/k-naiveui-pro/src/components/ProCheckbox.vue b/packages/k-naiveui-pro/src/components/ProCheckbox.vue
new file mode 100644
index 0000000..2c7431a
--- /dev/null
+++ b/packages/k-naiveui-pro/src/components/ProCheckbox.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { defineProps, toRefs } from 'vue'
+
+export interface ProCheckboxOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+export interface ProCheckboxProps {
+  options: ProCheckboxOption[]
+  name?: string
+  disabled?: boolean
+  size?: 'small' | 'medium' | 'large'
+}
+
+defineOptions({ name: 'ProCheckbox', inheritAttrs: false })
+const modelValue = defineModel<Array<string | number> | null>({default: []})
+const props = defineProps<ProCheckboxProps>()
+
+const { options, name, disabled, size, vertical } = toRefs(props)
+</script>
+
+<template>
+  <n-checkbox-group
+      v-model:value="modelValue as any"
+      :name="name"
+      :disabled="disabled"
+      :size="size"
+  >
+    <n-checkbox
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+    >
+      {{ option.label }}
+    </n-checkbox>
+  </n-checkbox-group>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/packages/k-naiveui-pro/src/components/ProDescriptions.vue b/packages/k-naiveui-pro/src/components/ProDescriptions.vue
index 73f9ae4..c292e6f 100644
--- a/packages/k-naiveui-pro/src/components/ProDescriptions.vue
+++ b/packages/k-naiveui-pro/src/components/ProDescriptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineProps } from 'vue'
-interface ProDescriptionsProps {
+export interface ProDescriptionsProps {
   columns: Array<{
     title: string
     key: string
diff --git a/packages/k-naiveui-pro/src/components/ProRadio.vue b/packages/k-naiveui-pro/src/components/ProRadio.vue
new file mode 100644
index 0000000..2419e0a
--- /dev/null
+++ b/packages/k-naiveui-pro/src/components/ProRadio.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { defineProps, toRefs } from 'vue'
+
+export interface ProRadioOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+export interface ProRadioProps {
+  options: ProRadioOption[]
+  name?: string
+  disabled?: boolean
+  size?: 'small' | 'medium' | 'large'
+}
+
+defineOptions({ name: 'ProRadio', inheritAttrs: false })
+const modelValue = defineModel<string | number | boolean | null>({default: null})
+const props = defineProps<ProRadioProps>()
+const { options, value, name, disabled, size } = toRefs(props)
+
+</script>
+
+<template>
+  <n-radio-group
+      v-model:value="modelValue as any"
+      :name="name"
+      :disabled="disabled"
+      :size="size"
+  >
+    <n-radio
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+    >
+      {{ option.label }}
+    </n-radio>
+  </n-radio-group>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/packages/k-naiveui-pro/src/components/index.ts b/packages/k-naiveui-pro/src/components/index.ts
index aa56e7e..f4f312c 100644
--- a/packages/k-naiveui-pro/src/components/index.ts
+++ b/packages/k-naiveui-pro/src/components/index.ts
@@ -10,4 +10,8 @@ export {default as ProToggleFullScreen, type ProToggleFullScreenProps} from './P
 export {default as ProToggleLanguage, type ProToggleLanguageProps} from './ProToggleLanguage.vue'
 export {default as ProToggleTheme, type ProToggleThemeProps} from './ProToggleTheme.vue'
 export {default as ProColumnSetting, type ProColumnSettingProps} from './ProColumnSetting.vue'
-export {default as ProDescriptions, type ProDescriptionsProps} from './ProDescriptions.vue'
\ No newline at end of file
+export {default as ProDescriptions, type ProDescriptionsProps} from './ProDescriptions.vue'
+export {default as ProCheckbox, type ProCheckboxProps, type ProCheckboxOption} from './ProCheckbox.vue'
+export {default as ProRadio, type ProRadioProps, type ProRadioOption} from './ProRadio.vue'
+export {default as ProCheckCard, type ProCheckCardProps, type ProCheckCardOption} from './ProCheckCard.vue'
+export {default as ProBreadcrumb, type ProBreadcrumbProps, type ProBreadcrumbOption} from './ProBreadcrumb.vue'
\ No newline at end of file