docs(curdTable): complete doc

docs/.vitepress/config.mts

@@ -6,6 +6,10 @@ export default defineConfig({
   lang: 'zh-CN',
   title: 'Naive Potato UI',
   themeConfig: {
+    outline: {
+      level: [2, 6],
+      label: '页面导航',
+    },
     nav: [
       { text: '指南', link: '/guide/' },
       { text: '组件', link: '/components/curd-table' },

docs/.vitepress/theme/custom.css

@@ -15,4 +15,12 @@
   .VPNavBar.has-sidebar .content {
     padding-left: calc(var(--vp-sidebar-width));
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin-top: 4rem;
+  }
 }

docs/components/curd-table.md

@@ -56,6 +56,139 @@ layoutClass: m-nav-layout
 
 :::
 
+### 表格配置文件
+
+`NpCurdTableHeader`,`props.header`的类型,本组件的配置类型
+
+#### 基础配置
+
+基础部分的配置,`TForm`为列表接口返回的数据类型,`TInfo`为详情接口返回的数据类型
+
+- `info`部分指的是在组件中显示的部分，包括表格内的显示，详情的显示；
+- `form`部分指的是在组件中编辑的部分，包括表格内的编辑，新增的编辑，详情的编辑以及查询时的form部分；
+
+:::api
+
+- *title[string](-):列标题,在表格列头显示
+- *key[ keyof TForm | string](-):列的字段名,用于在查询结果中取值
+- infoRender[(info: TInfo) => VNode | string | number](-):渲染详情的默认方法，渲染详情的时候如果没有单独配置，则使用此方法渲染
+- formRender[(form: TForm) => VNode | string | number](-):渲染表单的默认方法，渲染表单的时候如果没有单独配置，则使用此方法渲染
+- default[any](undefined):默认值，用于新增时的表单默认值
+- defaultConfig[NCurdTableHeaderRenderOptions< TForm, TInfo >](-):当显示和编辑都为同义字段，且显示/编辑的逻辑一样，可以只编辑此配置,后续下面的配置未设置时会使用此配置
+- column[NCurdTableHeaderColumn< TForm, TInfo>](-):表格中显示的配置
+- query[NCurdTableHeaderQuery< TForm >](-):查询时的配置
+- create[NCurdTableHeaderCreate< TForm >](-):新增时的配置
+- edit[NCurdTableHeaderEdit< TForm >](-):编辑时的配置
+- info[NCurdTableHeaderInfo< TInfo >](-):详情时的配置
+
+:::
+
+#### 渲染配置
+
+渲染的配置，用于配置当前字段的显示和编辑的逻辑，单个配置在显示和编辑时的渲染方式已经预先配置好，如果需要自定义渲染方式，可以在设置时使用类型`custom`，并在`render`属性中配置自定义渲染方法
+
+当前字段类型有(`NCurdTableHeaderType`):
+
+| 类型        | 说明                                                          |
+| ----------- | ------------------------------------------------------------- |
+| text        | 文本                                                          |
+| textarea    | 多行文本                                                      |
+| password    | 密码                                                          |
+| number      | 数字                                                          |
+| select      | 下拉框                                                        |
+| multSelect  | 多选下拉框                                                    |
+| asyncSelect | 异步选择(需引入 [AsyncSelect](/components/async-select.html)) |
+| radio       | 单选框                                                        |
+| date        | 日期                                                          |
+| datetime    | 日期时间                                                      |
+| time        | 时间                                                          |
+| upload      | 上传                                                          |
+| custom      | 自定义渲染组件                                                |
+
+
+
+##### 渲染基础配置
+
+:::api
+
+- title[string](-):字段标题，用于表格表头，表单label
+- show[boolean](true):是否展示该字段(即使不展示，该字段也会在query,create,edit表单中存在)
+- active[(row: TForm, info?: TInfo) => boolean](-):根据数据判断是否在表单中展示该字段，为false时，不会渲染，在最终提交表单时，也不会提交该字段
+- disabled[(row: TForm, info?: TInfo) => boolean](-):根据数据判断是否禁用该字段，为true时，不可编辑
+- type[NCurdTableHeaderRenderType]('text'):字段展示和编辑的类型，用于表单的渲染
+- config[Record<string,any>](undefined):字段展示和编辑的配置，根据不同的 `type` 配置不同，用于表单的渲染，更多具体配置见下表
+- render[(row: TForm, info?: TInfo) => VNode | string | number](-):字段展示和编辑的自定义渲染方法，当字段 `type` 为 `custom` 时，用于表单的渲染
+- default[any](undefined):默认值，用于新增时的表单默认值
+- required[boolean](false):简单根据是否填写/选择判断是否必填，用于表单的渲染，复杂判断条件使用 `rules` 属性
+- rules[Record<string,any>[]](undefined):校验规则，当判断规则比较复杂时覆盖 `required` 属性，用于表单的渲染
+
+:::
+
+
+##### 渲染类型配置
+
+根据[渲染类型](#渲染配置)的不同(`type`)，进行相应的配置,下方列出的为 `type` 为特定值时，`config` 的配置
+
+###### 字符类型
+
+> type 为'text' | 'textarea' | 'password' | 'number'
+
+::: api
+
+- prefix[() => VNode](-):前缀，在显示和编辑时会显示在前面，一般用于显示单位
+- suffix[() => VNode](-):后缀，在显示和编辑时会显示在后面，一般用于显示单位，状态或功能按钮
+
+:::
+
+###### 选择类型
+
+> type 为'select' | 'multSelect'
+
+::: api
+
+- options[Array<SelectOption | SelectGroupOption>](-):下拉框的选项，格式参考Naive UI 的 Select - options
+- labelField[string]('label'):下拉框选项的label字段名
+- valueField[string]('value'):下拉框选项的value字段名
+
+:::
+
+###### 异步选择类型
+
+> type 为'asyncSelect'
+>
+> 需引入 [AsyncSelect](/components/async-select.html) , config配置参考[AsyncSelect props](/components/async-select.html#api)
+
+###### 单选类型
+
+> type 为'radio'
+
+同[选择类型](#选择类型)
+
+###### 日期类型
+
+> type 为'date' | 'datetime'
+
+::: api
+
+- *format[string](-):日期格式(见[🔗date-fns format 文档](https://date-fns.org/v2.23.0/docs/format))
+- range[boolean](false):是否为范围选择
+- startField[string]('start'):范围选择的开始字段名
+- endField[string]('end'):范围选择的结束字段名
+
+:::
+
+###### 时间类型
+
+> type 为'time'
+
+:::api
+
+- *format[string](-):时间格式(见[🔗date-fns format 文档](https://date-fns.org/v2.23.0/docs/format))
+- range[boolean](false):是否为范围选择
+
+:::
+
+
 ### Method
 
 | 方法名     | 说明                     | 参数 |