添加组件，并且添加文档

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

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

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'
+                    },
                 ]
             },
         ],

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 作为参数传递出去，外部组件可以监听该事件并进行处理。 |

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`            | `''`    | 选项的描述信息，可用于展示更多内容 |

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` | 是否禁用该选项         |

docs/cn/other/columnSetting.md

@@ -1,4 +1,4 @@
-# ProColumnSetting 组件文档
+# ProColumnSetting
 
 > `ProColumnSetting` 是一个用于管理列设置的 Vue 3 组件，常用于表格组件中，提供列的显示/隐藏以及排序功能。该组件结合了 `naive-ui` 的 `n-popover`、`n-button`、`n-tree` 组件，允许用户通过勾选和拖拽的方式，自定义列的可见性和顺序。
 

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>

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>

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>

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>

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>

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>