@phelan/design 0.0.1

package/docs/components/basic/form.md

@@ -0,0 +1,112 @@
+# Form 表单
+
+表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。
+
+## 典型表单
+
+最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。
+
+在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。
+
+:::preview
+
+demo-preview=../../examples/form/basic-form.vue
+
+:::
+
+## 典型表单
+
+当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
+
+通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
+
+:::preview
+
+demo-preview=../../examples/form/inline-form.vue
+
+:::
+
+## 典型表单
+
+当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
+
+通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
+
+:::preview
+
+demo-preview=../../examples/form/inline-form.vue
+
+:::
+
+## 对齐方式
+
+根据你们的设计情况，来选择最佳的标签对齐方式。
+
+通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left, 当设为 top 时标签会置于表单域的顶部
+
+:::preview
+
+demo-preview=../../examples/form/alignment.vue
+
+:::
+
+## 表单校验​
+
+Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。
+
+Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 校验规则参见 async-validator
+
+
+:::preview
+
+demo-preview=../../examples/form/validation.vue
+
+:::
+
+## 自定义校验规则
+​
+这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
+
+本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。
+
+:::preview
+
+demo-preview=../../examples/form/custom-validation.vue
+
+:::
+
+## 添加/删除表单项​
+除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。
+:::preview
+
+demo-preview=../../examples/form/form-items.vue
+
+:::
+
+## 数字类型验证
+数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
+
+:::preview
+
+demo-preview=../../examples/form/number-validate.vue
+
+:::
+
+## 尺寸控制
+表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。
+
+如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。
+
+:::preview
+
+demo-preview=../../examples/form/size-control.vue
+
+:::
+
+## Form API
+
+### Form Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| xxx    | xxx  | `String` | —      |

package/docs/components/basic/icon.md

@@ -0,0 +1,53 @@
+# Icon 图标
+专门给AIM系统设计的一套图标集合，区别于element-plus-icon图标库。
+
+## 使用图标
+使用需要全局注册图标组件
+
+### 安装图标包
+```bash
+npm install @m-design/icons
+```
+
+### 注册图标
+```typescript
+import * as AimDesignIcons from '@m-design/icons';
+
+for (const [key, component] of Object.entries(AimDesignIcons)) {
+    app.component(key, component);
+}
+```
+
+## 基础用法
+
+用法和el-icon稍微不一样，可以直接通过icon属性引入图标，保留slot引入图标的能力。
+
+:::preview
+
+demo-preview=../../examples/icon/index.vue
+
+:::
+
+## 图标集合
+
+<icon />
+
+
+## Icon API
+
+### Icon Attributes
+
+| 属性名 | 说明                        | 类型              | 默认值 |
+| ------ | --------------------------- | ----------------- | ------ |
+| icon   | SVG图标名称                 | `String ｜ Component`          | —      |
+| color  | SVG的fill颜色               | `String`          | —      |
+| size   | SVG 图标的大小，size x size | `number`/`String` | —      |
+
+### Slots
+| 名称    | 说明           |
+| ------- | -------------- |
+| default | 自定义默认内容 |
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/image.md

@@ -0,0 +1,110 @@
+# Image 图片
+
+图片容器，在保留所有原生 img 的特性下，支持懒加载，自定义占位、加载失败等
+
+## 基础用法
+
+可通过`fit`确定图片如何适应到容器框，同原生 object-fit。
+
+:::preview
+
+demo-preview=../../examples/image/index.vue
+
+:::
+
+## 占位内容
+
+可通过`slot = placeholder`可自定义占位内容
+
+:::preview
+
+demo-preview=../../examples/image/placeholder.vue
+
+:::
+
+## 加载失败
+
+通过 `slot = error` and `slot = viewer-error`自定义图像加载错误时的内容。
+
+:::preview
+
+demo-preview=../../examples/image/error.vue
+
+:::
+
+## 懒加载
+
+可通过`lazy`开启懒加载功能， 当图片滚动到可视范围内才会加载。 可通过 `scroll-container` 来设置滚动容器， 若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。
+
+:::preview
+
+demo-preview=../../examples/image/lazy.vue
+
+:::
+
+## 图片预览
+
+可通过 `previewSrcList` 开启预览大图的功能。 你可以通过 `initial-index` 初始化第一张预览图片的位置。 默认初始位置为 0。
+
+:::preview
+
+demo-preview=../../examples/image/preview.vue
+
+:::
+
+## API
+
+### Attributes
+
+| 属性名                   | 说明                                                                                                       | 类型              | 默认值   |
+| --------------------- | -------------------------------------------------------------------------------------------------------- | --------------- | ----- |
+| src                   | 图片源地址，同原生属性一致                                                                                            | string          | ''    |
+| fit                   | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)                | enum            | ''    |
+| hide-on-click-modal   | 当开启 preview 功能时，是否可以通过点击遮罩层关闭 preview                                                                    | boolean         | false |
+| loading                | 浏览器加载图像的策略，和 [浏览器原生](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)能力一致     | enum            | —     |
+| lazy                  | 是否使用懒加载                                                                                                  | boolean         | false |
+| scroll-container      | 开启懒加载功能后，监听 scroll 事件的容器 默认情况下，开启懒加载功能后，监听 scroll 事件的容器                                                  | string / object | —     |
+| alt                   | 原生属性 alt                                                                                                 | string          | —     |
+| referrerpolicy        | 原生属性 [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy)。 | string          | —     |
+| crossorigin           | 原生属性 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)             | enum            | —     |
+| preview-src-list      | 开启图片预览功能                                                                                                 | object          | \[\]  |
+| z-index               | 设置图片预览的 z-index                                                                                          | number          | —     |
+| initial-index         | 初始预览图像索引，小于 url-list 的长度                                                                                 | number          | 0     |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Image Viewer                                                                             | boolean         | true  |
+| preview-teleported    | image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true                                                | boolean         | false |
+| infinite              | 是否可以无限循环预览                                                                                               | boolean         | true  |
+| zoom-rate             | 图像查看器缩放事件的缩放速率。                                                                                          | number          | 1.2   |
+| scale                 | 预览图像缩放。                                                                                                  | number          | 1     |
+| min-scale             | 图像查看器缩放事件的最小缩放比例                                                                                         | number          | 0.2   |
+| max-scale             | 图像查看器缩放事件的最大缩放比例                                                                                         | number          | 7     |
+| show-progress         | 是否在预览图片时显示进度条                                                                                            | boolean         | false |
+
+### Events
+
+| 事件名    | 说明                                             | 类型       |
+| ------ | ---------------------------------------------- | -------- |
+| load   | 图片加载成功触发                                       | Function |
+| error  | 图片加载失败触发                                       | Function |
+| switch | 切换图像时触发。                                       | Function |
+| close  | 当点击 X 按钮或者在hide-on-click-modal为 true 时点击遮罩层时触发 | Function |
+| show   | 当 Viewer 显示时触发                                 | Function |
+
+### Slots
+
+| 插槽名         | 说明                       |
+| ----------- | ------------------------ |
+| placeholder  | 当图像尚未加载时，自定义的占位符内容       |
+| error        | 自定义图像加载失败的内容             |
+| toolbar      | 自定义工具栏内容                  |
+| progress     | 自定义进度内容                  |
+| viewer-error | 自定义图像加载失败的内容             |
+
+### Exposes
+
+| 方法名               | 说明       | 类型       |
+| ----------------- | -------- | -------- |
+| showPreview       | 手动打开大图预览 | Function |
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/import-dialog.md

@@ -0,0 +1,54 @@
+# import-dialog 样例
+
+用于文件导入的对话框组件，支持单文件和多文件上传，可自定义文件类型限制和数量限制。
+
+## 单文件上传
+
+单文件上传模式适用于只需要导入一个文件的场景。当设置 multiple 为 false 时，组件只允许用户选择一个文件。
+
+:::preview
+
+demo-preview=../../examples/import-dialog/single.vue
+
+:::
+
+## 多文件上传
+
+多文件上传模式适用于需要批量导入多个文件的场景。通过 multiple 属性开启多文件上传功能，同时可以使用 limit 属性限制最大上传数量。
+
+:::preview
+
+demo-preview=../../examples/import-dialog/multiple.vue
+
+:::
+
+## ImportDialog API
+
+### ImportDialog Attributes
+
+| 属性名           | 说明                  | 类型            | 默认值       |
+| ---------------- | --------------------- | --------------- | ------------ |
+| modelValue       | 控制对话框显示/隐藏的 | `Boolean`       | false        |
+| v-model:flieList | 上传url               | `String`        | -            |
+| importUrl        | 上传的文件数据        | `Array`         | []           |
+| title            | 标题                  | `String`        | '导入'       |
+| importTemplate   | 模板标识              | `Number/String` | —            |
+| accept           | 允许上传的文件类型    | `String`        | '.xls,.xlsx' |
+| multiple         | 是否支持多文件上传    | `Boolean`       | —            |
+| limit            | 最大上传文件数量限制  | `String/Number` | —            |
+
+### ImportDialog Events
+
+| 事件名      | 说明               | 类型       |
+| ----------- | ------------------ | ---------- |
+| cancel   | 取消时回调         | `Function` |
+| confirm  | 确认提交时回调     | `Function` |
+| success  | 上传成功回调       | `Function` |
+| error    | 上传失败回调       | `Function` |
+| download | 点击下载模板时回调 | `Function` |
+
+### ImportDialog Slots
+
+| 插槽名   | 说明             |
+| -------- | ---------------- |
+| template | 下载按钮区域插槽 |

package/docs/components/basic/independent-nav.md

@@ -0,0 +1,45 @@
+# IndependentNav 独立页面导航
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/independent-nav/index.vue
+
+:::
+
+## 自定义左侧logo
+
+:::preview
+
+demo-preview=../../examples/independent-nav/icon-slot.vue
+
+:::
+
+## IndependentNav API
+
+### IndependentNav Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ----- | ---- | ---- | ---- |
+| — | — | — | — |
+
+### IndependentNav Events
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ---- |
+| — | — | — |
+
+### IndependentNav Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ----- | ---- | ---- |
+| default | 默认插槽，接收独立导航中间的主要内容 | — |
+| logo | 替换左侧默认的 AIM logo | — |
+| right | 独立导航右侧的插槽 | — |
+
+### IndependentNav Exposes
+
+| 方法名 | 说明 | 类型 |
+| ----- | ---- | ---- |
+| — | — | — |

package/docs/components/basic/input-number.md

@@ -0,0 +1,61 @@
+# InputNumber 数字
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/input-number/index.vue
+
+:::
+
+## InputNumber API
+
+### InputNumber Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ---- | ----- | ---- | ---- |
+| model-value / v-model | 选中项绑定值 | ^[number] | — |
+| min | 设置计数器允许的最小值 | ^[number] | -Infinity |
+| max | 设置计数器允许的最大值 | ^[number] | Infinity |
+| step | 计数器步长 | ^[number] | 1 |
+| step-strictly | 是否只能输入 step 的倍数 | ^[boolean] | false |
+| precision | 数值精度 | ^[number] | — |
+| size | 计数器尺寸 | ^[enum]`'large' \| 'default' \| 'small'` | default |
+| readonly (Element+ ^(2.2.16)) | 原生 `readonly` 属性，是否只读 | ^[boolean] | false |
+| disabled | 是否禁用状态 | ^[boolean] | false |
+| controls | 是否使用控制按钮 | ^[boolean] | false |
+| controls-position | 控制按钮位置 | ^[enum]`'' \| 'right'` | — |
+| name | 等价于原生 input `name` 属性 | ^[string] | — |
+| aria-label ^(a11y) (Element+ ^(2.7.2)) | 等价于原生 input `aria-label` 属性 | ^[string] | — |
+| placeholder | 等价于原生 input `placeholder` 属性 | ^[string] | — |
+| id | 等价于原生 input `id` 属性 | ^[string] | — |
+| value-on-clear (Element+ ^(2.2.0)) | 当输入框被清空时显示的值 | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
+| validate-event | 是否触发表单验证 | ^[boolean] | true |
+| label ^(a11y) (Element+ ^(deprecated)) | same as `aria-label` in native input | ^[string] | — |
+| inputmode (Element+ ^(2.10.3)) | 等价于原生 input `inputmode` 属性 | ^[string] | — |
+| align (Element+ ^(2.10.5)) | 内部输入文本对齐 | ^[enum]`'left' \| 'center' \| 'right'` | 'center' |
+| disabled-scientific (Element+ ^(2.10.5)) | 禁用科学计数法的输入（例如输入 'e'） | ^[boolean] | false |
+
+### InputNumber Events
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ---- |
+| change | 绑定值被改变时触发s | ^[Function]`(currentValue: number \| undefined, oldValue: number \| undefined) => void` |
+| blur | 在组件 Input 失去焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
+| focus | 在组件 Input 获得焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
+
+### InputNumber Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ----- | ---- | ---- |
+| decrease-icon (Element+ ^(2.6.3)) | 自定义输入框按钮减少图标 | — |
+| increase-icon (Element+ ^(2.6.3)) | 自定义输入框按钮增加图标 | — |
+| prefix (Element+ ^(2.8.4)) | 输入框头部内容 | — |
+| suffix (Element+ ^(2.8.4)) | 输入框尾部内容 | — |
+
+### InputNumber Exposes
+
+| 方法名 | 说明 | 类型 |
+| ----- | ---- | ---- |
+| focus | 使 input 组件获得焦点 | ^[Function]`() => void` |
+| blur | 使 input 组件失去焦点 | ^[Function]`() => void` |

package/docs/components/basic/input.md

@@ -0,0 +1,98 @@
+# Input 输入框
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/input/index.vue
+
+:::
+
+## 特殊处理的自定义icon
+
+:::preview
+
+demo-preview=../../examples/input/icon.vue
+
+:::
+
+## Input API
+
+### Input Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ---- | ----- | ---- | ---- |
+| type | 输入类型，更多信息请参见 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | ^[string]`'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url'` | text |
+| model-value / v-model | 绑定值 | ^[string] / ^[number] | — |
+| model-modifiers (Element+ ^(2.11.5)) | v-model 修饰符，参考 [Vue modifiers](https://vuejs.org/guide/essentials/forms.html#modifiers) | ^[object]`{ lazy?: boolean, number?: boolean, trim?: boolean }` | — |
+| maxlength | 同原生 `maxlength` 属性 | ^[string] / ^[number] | — |
+| minlength | 同原生 `minlength` 属性 | ^[string] / ^[number] | — |
+| show-word-limit | 是否显示统计字数, 只在 `type` 为 'text' 或 'textarea' 的时候生效 | ^[boolean] | false |
+| word-limit-position (Element+ ^(2.11.5)) | 字数统计的位置，仅当 `show-word-limit` 为 `true` 时生效 | ^[enum]`'inside' \| 'outside'` | "inside" |
+| placeholder | 输入框占位文本 | ^[string] | — |
+| clearable | 是否显示清除按钮，只有当 `type` 不是 textarea时生效 | ^[boolean] | false |
+| clear-icon (Element+ ^(2.11.0)) | 自定义清除图标 | ^[string] / ^[object]`Component` | CircleClose |
+| formatter | 指定输入值的格式。(只有当 `type` 是"text"时才能工作) | ^[Function]`(value: string \| number) => string` | — |
+| parser | 指定从格式化器输入中提取的值。(仅当 `type` 是"text"时才起作用) | ^[Function]`(value: string) => string` | — |
+| show-password | 是否显示切换密码图标 | ^[boolean] | false |
+| disabled | 是否禁用 | ^[boolean] | false |
+| size | 输入框尺寸，只在 `type` 不为 'textarea' 时有效 | ^[enum]`'large' \| 'default' \| 'small'` | — |
+| prefix-icon | 自定义前缀图标 | ^[string] / ^[Component] | — |
+| suffix-icon | 自定义后缀图标 | ^[string] / ^[Component] | — |
+| rows | 输入框行数，仅 `type` 为 'textarea' 时有效 | ^[number] | 2 |
+| autosize | textarea 高度是否自适应，仅 `type` 为 'textarea' 时生效。 可以接受一个对象，比如: `{ minRows: 2, maxRows: 6 }` | ^[boolean] / ^[object]`{ minRows?: number, maxRows?: number }` | false |
+| autocomplete | 原生 `autocomplete` 属性 | ^[string] | off |
+| name | 等价于原生 input `name` 属性 | ^[string] | — |
+| readonly | 原生 `readonly` 属性，是否只读 | ^[boolean] | false |
+| max | 原生 `max` 属性，设置最大值 | — | — |
+| min | 原生 `min` 属性，设置最小值 | — | — |
+| step | 原生 `step` 属性，设置输入字段的合法数字间隔 | — | — |
+| resize | 控制是否能被用户缩放 | ^[enum]`'none' \| 'both' \| 'horizontal' \| 'vertical'` | — |
+| autofocus | 原生 `autofocus` 属性，自动获取焦点 | ^[boolean] | false |
+| form | 原生 `form` 属性 | `string` | — |
+| aria-label ^(a11y) (Element+ ^(2.7.2)) | 等价于原生 input `aria-label` 属性 | ^[string] | — |
+| tabindex | 输入框的 tabindex | ^[string] / ^[number] | — |
+| validate-event | 输入时是否触发表单的校验 | ^[boolean] | true |
+| input-style | input 元素或 textarea 元素的 style | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | {} |
+| label ^(a11y) (Element+ ^(deprecated)) | 等价于原生 input `aria-label` 属性| ^[string] | — |
+| inputmode (Element+ ^(2.10.3)) | 等价于原生 input `inputmode` 属性 | ^[string] | — |
+
+### Input Events
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ---- |
+| blur | 当选择器的输入框失去焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
+| focus | 当选择器的输入框获得焦点时触发 | ^[Function]`(event: FocusEvent) => void` |
+| change | 仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发 | ^[Function]`(value: string \| number, evt?: Event) => void` |
+| input | 在 Input 值改变时触发 | ^[Function]`(value: string \| number) => void` |
+| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | ^[Function]`() => void` |
+| keydown | 按下键时触发 | ^[Function]`(event: KeyboardEvent \| Event) => void` |
+| mouseleave | 当鼠标离开输入元素时触发 | ^[Function]`(event: MouseEvent) => void` |
+| mouseenter | 当鼠标进入输入元素时触发 | ^[Function]`(event: MouseEvent) => void` |
+| compositionstart | 输入法输入开始时触发 | ^[Function]`(event: CompositionEvent) => void` |
+| compositionupdate | 输入法输入改变时触发 | ^[Function]`(event: CompositionEvent) => void` |
+| compositionend | 输入法输入完成时触发 | ^[Function]`(event: CompositionEvent) => void` |
+
+### Input Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ----- | ---- | ---- |
+| prefix | 输入框头部内容，只对非 `type="textarea"` 有效 | — |
+| suffix | 输入框尾部内容，只对非 `type="textarea"` 有效 | — |
+| prepend | 输入框前置内容，只对非 `type="textarea"` 有效 | — |
+| append | 输入框后置内容，只对非 `type="textarea"` 有效 | — |
+
+### Input Exposes
+
+| 方法名 | 说明 | 类型 |
+| ----- | ---- | ---- |
+| blur | 使 input 失去焦点 | ^[Function]`() => void` |
+| clear | 清除 input 值 | ^[Function]`() => void` |
+| focus | 使 input 获取焦点 | ^[Function]`() => void` |
+| input | Input HTML 元素 | ^[object]`Ref<HTMLInputElement>` |
+| ref | HTML元素 input 或 textarea | ^[object]`Ref<HTMLInputElement \| HTMLTextAreaElement>` |
+| resizeTextarea | 改变 textarea 大小 | ^[Function]`() => void` |
+| select | 选中 input 中的文字 | ^[Function]`() => void` |
+| textarea | HTML textarea 元素 | ^[object]`Ref<HTMLTextAreaElement>` |
+| textareaStyle | textarea 的样式 | ^[object]`Ref<StyleValue>` |
+| isComposing (Element+ ^(2.8.0)) | 是否是输入 composing 状态 | ^[object]`Ref<boolean>` |

package/docs/components/basic/layout.md

@@ -0,0 +1,141 @@
+# Layout 布局
+
+通过基础的 24 分栏，迅速简便地创建布局。
+
+组件默认使用 Flex 布局，不需要手动设置 `type="flex"`。
+
+请注意父容器避免使用 `inline` 相关样式，会导致组件宽度不能撑满。
+
+列的基本单位为1，最多24个，最少0个。
+
+## 基础布局
+
+使用列创建基础网格布局。
+
+通过 `m-row` 和 `m-col` 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
+
+:::preview
+
+demo-preview=../../examples/layout/index.vue
+
+:::
+
+## 分栏间隔
+
+支持列间距。
+
+行提供 `gutter` 属性来指定列之间的间距，其默认值为0。
+
+:::preview
+
+demo-preview=../../examples/layout/gutter.vue
+
+:::
+
+## 混合布局
+
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
+
+:::preview
+
+demo-preview=../../examples/layout/mixed.vue
+
+:::
+
+## 列偏移
+
+您可以指定列偏移量。
+
+通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
+
+:::preview
+
+demo-preview=../../examples/layout/offset.vue
+
+:::
+
+## 对齐方式
+
+默认使用 flex 布局来对分栏进行灵活的对齐。
+
+您可以通过`justify` 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。
+
+:::preview
+
+demo-preview=../../examples/layout/justify.vue
+
+:::
+
+## 响应式布局
+
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
+
+:::preview
+
+demo-preview=../../examples/layout/responsive.vue
+
+:::
+
+## 基于断点的隐藏类
+
+Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要，请自行引入以下文件：
+
+```js
+import 'element-plus/theme-chalk/display.css'
+```
+
+这些类名为：
+
+* `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
+* `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
+* `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
+* `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
+* `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
+* `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
+* `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
+* `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
+* `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
+* `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
+* `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
+
+## API
+
+### Row Attributes
+
+| 属性名     | 说明              | 类型     | 默认值   |
+| ------- | --------------- | ------ | ----- |
+| gutter  | 栅格间隔            | number | 0     |
+| justify | flex 布局下的水平排列方式 | enum   | start |
+| align   | flex 布局下的垂直排列方式 | enum   | —     |
+| tag     | 自定义元素标签         | string | div   |
+
+### Row Slots
+
+| 插槽名     | 说明      | 子标签 |
+| ------- | ------- | --- |
+| default | 自定义默认内容 | Col |
+
+### Col Attributes
+
+| 属性名    | 说明                     | 类型              | 默认值 |
+| ------ | ---------------------- | --------------- | --- |
+| span   | 栅格占据的列数                | number          | 24  |
+| offset | 栅格左侧的间隔格数              | number          | 0   |
+| push   | 栅格向右移动格数               | number          | 0   |
+| pull   | 栅格向左移动格数               | number          | 0   |
+| xs     | <768px 响应式栅格数或者栅格属性对象  | number / object | —   |
+| sm     | ≥768px 响应式栅格数或者栅格属性对象  | number / object | —   |
+| md     | ≥992px 响应式栅格数或者栅格属性对象  | number / object | —   |
+| lg     | ≥1200px 响应式栅格数或者栅格属性对象 | number / object | —   |
+| xl     | ≥1920px 响应式栅格数或者栅格属性对象 | number / object | —   |
+| tag    | 自定义元素标签                | string          | div |
+
+### Col Slots
+
+| 插槽名     | 说明      |
+| ------- | ------- |
+| default | 自定义默认内容 |
+
+## Owner
+
+Aric.Li@aldi.cn