diff --git a/docs/docs/zh/components/Alert.mdx b/docs/docs/zh/components/Alert.mdx
new file mode 100644
index 00000000..8bf4b46d
--- /dev/null
+++ b/docs/docs/zh/components/Alert.mdx
@@ -0,0 +1,39 @@
+---
+group: 'components'
+category: 'state'
+title: Alert
+description: '警告提示'
+order: 1
+---
+
+## 基础用法
+
+警告提示，展现需要关注的信息。当某个页面或页面局部表单需要向用户显示警告当信息时使用，非浮层当静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
+代码演示
+
+```js live=true
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+```
+
+## 不同类型的警告
+
+通过 type 属性设置警告类型。
+
+```js live=true
+
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+
+```
diff --git a/docs/docs/zh/components/Badge.mdx b/docs/docs/zh/components/Badge.mdx
new file mode 100644
index 00000000..4ab01970
--- /dev/null
+++ b/docs/docs/zh/components/Badge.mdx
@@ -0,0 +1,60 @@
+---
+group: 'components'
+category: 'state'
+title: Badge
+description: 'Badge图标右上角的圆形徽标数字'
+order: 1
+---
+
+## 基础用法
+
+状态提示，单纯的 count 值
+
+```js live=true
+
+ 3
+ 12
+
+```
+
+## 不同颜色标记
+
+徽标内容可以是文本，也可以是数字，通过设置 color 属性可以设置组件的颜色
+
+```js live=true
+
+ KubeSphere
+ #12
+ KubeSphere
+ KubeSphere
+ 9
+
+```
+
+## 带阴影标记
+
+可以设置 shadow，给徽标增加阴影效果。
+
+```js live=true
+
+
+ KubeSphere
+
+
+ #12
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ 9
+
+
+```
+
+
+
+
diff --git a/docs/docs/zh/components/Banner.mdx b/docs/docs/zh/components/Banner.mdx
new file mode 100644
index 00000000..24938171
--- /dev/null
+++ b/docs/docs/zh/components/Banner.mdx
@@ -0,0 +1,55 @@
+---
+group: 'components'
+category: 'state'
+title: Banner
+description: '横幅'
+order: 1
+---
+
+## 何时使用
+
+Banner 是整个展示页面重要的组成部分，一般介绍产品的名称和简介。
+
+## 代码演示
+
+Banner 可以展示产品图标和简介，BannerTip 可以展示子条目。
+
+```js live=true
+() => {
+ const data = [
+ {
+ label: 'KubeSphere',
+ value: 'KubeSphere',
+ },
+ {
+ label: 'Jenkins',
+ value: 'Jenkins',
+ },
+ {
+ label: 'Kubernetes',
+ value: 'Kubernetes',
+ },
+ ];
+ const { Cluster } = KubeIcon;
+ return (
+
+
+ 节点分为主控 (Master) 节点和工作 (Worker) 节点
+
+
+ 节点污点 (Taints) 可以阻止某些容器组 (Pod) 副本部署至该节点中, 与容忍度 (Tolerations)
+ 一起工作确保容器组不会被调度到不合适的节点上
+
+
+
+ )
+}
+```
+
diff --git a/docs/docs/zh/components/Button.mdx b/docs/docs/zh/components/Button.mdx
new file mode 100644
index 00000000..415ef700
--- /dev/null
+++ b/docs/docs/zh/components/Button.mdx
@@ -0,0 +1,91 @@
+---
+group: 'components'
+category: 'state'
+title: Button
+description: '常用操作按钮'
+order: 1
+---
+
+## 基础用法
+
+标记一组操作命令，响应用户的点击行为，触发相应的业务逻辑。
+
+```js live=true
+
+
+ KubeSphere111
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+```
+
+## 按钮样式
+
+可以设置 Variant 来改变 button 的视觉效果。您可以设置值为 filled，text，outline, 或者 link。
+
+```js live=true
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+```
+
+## 按钮颜色
+
+通过 color 设置按钮的颜色，默认有四种按钮颜色，default，success，error，warning
+
+```js live=true
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+```
+
+## 按钮尺寸
+
+可以使用 size 和 radius 属性可以改变按钮的大小以及圆角。你可以设置值为 xs，sm，md，lg，xl.
+
+```js live=true
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+ KubeSphere
+
+
+```
diff --git a/docs/docs/zh/components/Card.mdx b/docs/docs/zh/components/Card.mdx
new file mode 100644
index 00000000..2b5f7c77
--- /dev/null
+++ b/docs/docs/zh/components/Card.mdx
@@ -0,0 +1,54 @@
+---
+group: 'components'
+category: 'state'
+title: Card
+description: '卡片'
+order: 1
+---
+
+## 基础用法
+
+将信息聚合在卡片容器中展示。
+
+```js live=true
+() => (
+
+
+ Kubesphere.io is an upstream project of the KubeSphere container management platform.
+
+
+)
+```
+
+## 带章节标题
+
+```js live=true
+() => (
+
+
+ Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.
+
+
+)
+```
+
+
+## 带hover状态
+
+```js live=true
+() => (
+
+
+ Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.
+
+
+)
+```
diff --git a/docs/docs/zh/components/Center.mdx b/docs/docs/zh/components/Center.mdx
new file mode 100644
index 00000000..0bc37613
--- /dev/null
+++ b/docs/docs/zh/components/Center.mdx
@@ -0,0 +1,16 @@
+---
+group: 'components'
+category: 'state'
+title: Center
+description: '组件内子元素水平垂直居中'
+order: 1
+---
+
+## 基础用法
+
+定义一个 center 盒子，盒子内子元素垂直水平居中
+
+```js live=true
+
+ Center组件的子元素水平垂直居中
+
diff --git a/docs/docs/zh/components/Checkbox.mdx b/docs/docs/zh/components/Checkbox.mdx
new file mode 100644
index 00000000..b50a1fbc
--- /dev/null
+++ b/docs/docs/zh/components/Checkbox.mdx
@@ -0,0 +1,130 @@
+---
+group: 'components'
+category: 'state'
+title: Checkbox
+description: '多选框'
+order: 1
+---
+
+## 何时使用
+
+单独使用可以表示两种状态之间的切换，checkbox 一般用于状态标记，需要和提交的操作配合;
+用于在一组可选项中进行多项选择时。
+
+## 基础用法
+
+通过 defaultChecked 属性来设置默认勾选。
+
+```js live=true
+() => {
+ const onChange = (e) => {
+ console.log(e);
+ };
+ return (
+
+
+ );
+}
+```
+
+## 禁用状态
+
+多选框不可用状态
+
+```js live=true
+() => {
+ const [disabled, setDisabled] = React.useState(false);
+ const toggle = () => {
+ setDisabled(!disabled);
+ };
+ return (
+ <>
+
+
+
+ Switch
+
+
+ );
+}
+```
+
+## Indeterminate状态
+
+indeterminate 属性用来表示 checkbox 的不确定状态，一般用于实现全选的效果
+
+```js live=true
+() => {
+ const [indeterminate, setIndeterminate] = React.useState(false);
+ const toggle = () => {
+ setIndeterminate(!indeterminate);
+ };
+ return (
+ <>
+
+
+
+ Switch
+
+
+ );
+}
+```
+
+## 勾选控制
+
+可以通过外部按钮控制勾选框的两种状态直接的切换。
+
+```js live=true
+() => {
+ const [checked, setChecked] = React.useState(false);
+ const toggle = () => {
+ setChecked(!checked);
+ };
+ return (
+ <>
+
+
+
+ Switch
+
+
+ );
+}
+```
+
+## 多选框组
+
+适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项
+
+```js live=true
+() => {
+ const [value, setValue] = React.useState(['China']);
+ const toggle = () => {
+ if (value.length > 1) {
+ setValue(['China']);
+ } else {
+ setValue(['USA', 'China']);
+ }
+ };
+ const onChange = (val) => {
+ console.log(val);
+ };
+ return (
+ <>
+
+
+
+ Switch
+
+
+ );
+}
+```
diff --git a/docs/docs/zh/components/Container.mdx b/docs/docs/zh/components/Container.mdx
new file mode 100644
index 00000000..e42ebe19
--- /dev/null
+++ b/docs/docs/zh/components/Container.mdx
@@ -0,0 +1,42 @@
+---
+group: 'components'
+category: 'state'
+title: Container
+description: '组件容器'
+order: 1
+---
+
+## 基础用法
+
+容器组件的内容从左到右排列
+
+```js live=true
+
+ 容器
+
+```
+
+## 容器的大小和内边距
+
+使用 size 和 padding 可以设置容器的大小和内边距
+
+```js live=true
+<>
+
+ 容器
+
+
+ 容器
+
+
+```
+
+## 流式布局
+
+使用 fluid 可以设置流式布局，从左到右排列最大宽度为 100%。
+
+```js live=true
+
+ 容器
+
+```
diff --git a/docs/docs/zh/components/Descriptions.mdx b/docs/docs/zh/components/Descriptions.mdx
new file mode 100644
index 00000000..40f80628
--- /dev/null
+++ b/docs/docs/zh/components/Descriptions.mdx
@@ -0,0 +1,63 @@
+---
+group: 'components'
+category: 'state'
+title: Descriptions
+description: '描述列表'
+order: 1
+---
+
+## 基础用法
+
+列表形式展示多个字段
+
+## 代码演示
+
+```js live=true
+() => (
+ 10.233.74.19/32
+)
+```
+
+## 无样式
+
+通过 variant 属性可以设置列表无样式展示，通过 label 属性可以设置描述列表的名称
+
+```js live=true
+() => (
+
+
+
+ KubeSphere
+
+
+ default
+
+
+
+)
+```
+
+## 批量列表展示
+
+通过给 data 属性传递数组，可以批量展示描述列表，通过给 variant 设置 default 可以显示列表的默认样式。
+
+```js live=true
+() => {
+ const data = [
+ { label: 'Cluster', value: 'default' },
+ { label: 'Project', value: 'ifcloud' },
+ { label: 'Instance Name', value: 'dev-node1' },
+ { label: 'Instance IP', value: '10.233.74.19' },
+ ];
+ return (
+
+
+
+
+
+
+ )
+}
+```
diff --git a/docs/docs/zh/components/Divider.mdx b/docs/docs/zh/components/Divider.mdx
new file mode 100644
index 00000000..1a602c4d
--- /dev/null
+++ b/docs/docs/zh/components/Divider.mdx
@@ -0,0 +1,59 @@
+---
+group: 'components'
+category: 'state'
+title: Divider
+description: '间隔内容的分割线'
+order: 1
+---
+
+## 基础用法
+
+对不同章节对文本段落进行分割
+
+对行内文字/链接进行分割
+
+
+```js live=true
+
+
+```
+
+## 分割线的样式
+使用variant可以设置分割线的显示形式，默认为 solid (实线)，dotted (点线)，dashed (虚线)
+当分割线为垂直方向时，使用margins设置分割线左右的外边距
+当分割线为水平方向时，使用margins设置分割线上下左右的外边距
+
+```js live=true
+
+
+```
+
+## 分割线的方向
+
+direction 设置分割线的方向，vertical 为垂直方向，horizontal 为水平方向
+
+```js live=true
+
+ 1
+ 2
+ 3
+
+```
+
+## 分割线的标签
+
+label 设置分割线的标签名称，labelPosition 设置标签的位置，默认为左侧。
+
+```js live=true
+
+
+```
diff --git a/docs/docs/zh/components/Dropdown.mdx b/docs/docs/zh/components/Dropdown.mdx
new file mode 100644
index 00000000..b5573910
--- /dev/null
+++ b/docs/docs/zh/components/Dropdown.mdx
@@ -0,0 +1,39 @@
+---
+group: 'components'
+category: 'state'
+title: Dropdown
+description: '下拉菜单'
+order: 1
+---
+
+## 何时使用
+
+使用下拉菜单让用户从一系列选项中选择一个选项或操作。
+
+## 基础用法
+
+通过 content 属性设置下拉菜单，通过 trigger 属性设置触发方式，默认为 click
+
+```js live=true
+() => {
+const { Add, Stop, Pen, Trash, More } = KubeIcon;
+const MenuComponent = (
+
+ menu label
+
+);
+return (
+
+
+
+
+
+
+)
+}
+```
diff --git a/docs/docs/zh/components/Entity.mdx b/docs/docs/zh/components/Entity.mdx
new file mode 100644
index 00000000..ff2e9611
--- /dev/null
+++ b/docs/docs/zh/components/Entity.mdx
@@ -0,0 +1,44 @@
+group: 'components'
+category: 'state'
+title: Entity
+description: '实体'
+order: 1
+---
+
+## 基础用法
+
+实体，可以用来表示一种资源的多种特征。
+
+## 代码演示
+
+实体的一种特征的显示区域。
+
+```js live=true
+() =>
+
+)
+```
+
+## 带hover效果
+
+```js live=true
+() => (
+
+
+)
+```
diff --git a/docs/docs/zh/components/Form.mdx b/docs/docs/zh/components/Form.mdx
new file mode 100644
index 00000000..d9f0e5b1
--- /dev/null
+++ b/docs/docs/zh/components/Form.mdx
@@ -0,0 +1,121 @@
+---
+group: 'components'
+category: 'state'
+title: Form
+description: '表单'
+order: 1
+---
+
+## 基础用法
+
+表单控件，用于创建一个实体或收集信息，需要对输入对数据类型进行校验时。
+
+## 代码演示
+
+```js live=true
+() => {
+ const onFinish = (values) => {
+ console.log(values);
+ };
+ return (
+
+ )
+}
+```
+
+## 动态表单
+
+可以新增表单项格数，自定义表单项的输入内容
+
+```js live=true
+() => {
+ const [form] = useForm();
+ const getFieldErrors = () => {
+ console.log(form.validateFields());
+ };
+ const onFinish = (values) => {
+ console.log(values);
+ };
+ const { Add, Trash } = KubeIcon;
+ return (
+
+ );
+}
+```
diff --git a/docs/docs/zh/components/Grid.mdx b/docs/docs/zh/components/Grid.mdx
new file mode 100644
index 00000000..1a2967c1
--- /dev/null
+++ b/docs/docs/zh/components/Grid.mdx
@@ -0,0 +1,121 @@
+---
+group: 'components'
+category: 'state'
+title: Grid 栅格
+description: '基于Flexbox的12栅格系统'
+order: 1
+---
+
+## 基础用法
+
+布局的栅格化系统，是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。
+
+```js live=true
+
+ col-4
+
+ col-4
+
+ col-4
+
+
+```
+
+## 设置栅格间距
+
+Gutter 用于设置栅格间距，使用数组形式同时设置[水平间距，垂直间距]
+
+```js live=true
+
+ 1
+
+ 2
+
+ 3
+
+
+```
+
+## 多行
+
+多行排列，栅格系统默认当栅格数是十二，当没有自定义栅格数且一行当栅格超过了十二，那么剩余当栅格将会换行排列。
+
+```js live=true
+
+ 1
+
+ 2
+
+ 3
+
+ 4
+
+
+```
+
+## Grow自适应
+
+栅格自适应宽度，在一行中，栅格数超过12时，剩余栅格占满一行。
+
+```js live=true
+
+ col-4
+
+ col-4
+
+ col-4
+
+ col-4
+
+
+```
+
+## Offset偏移
+
+通过给col组件设置 offset，可以控制栅格偏移的距离。
+
+```js live=true
+
+ col-3
+
+ col-3
+
+ col-3
+
+
+```
+
+## Column大小
+
+默认是十二栅格，通过给Row组件设置 columns，可以自定义栅格数。
+
+```js live=true
+
+ col-12
+
+ col-6
+
+ col-6
+
+
+```
diff --git a/docs/docs/zh/components/Group.mdx b/docs/docs/zh/components/Group.mdx
new file mode 100644
index 00000000..e7eaecb7
--- /dev/null
+++ b/docs/docs/zh/components/Group.mdx
@@ -0,0 +1,85 @@
+---
+group: 'components'
+category: 'state'
+title: Group
+description: '垂直居中的弹性盒子'
+order: 1
+---
+
+## 基础用法
+
+基于 flexbox 的弹性盒布局，默认垂直方向居中，水平方向可以自定义对齐方式。
+
+```js live=true
+
+ 1
+ 2
+ 3
+
+```
+
+## 设置水平方向对齐方式
+
+使用 Position 设置水平方向上对齐方式，可以设置为 center，right，left，apart 四种参数。
+
+```js live=true
+<>
+
+ 1
+ 2
+ 3
+
+
+ 1
+ 2
+ 3
+
+
+```
+
+## 设置元素间隔
+
+使用 spacing 设置水平方向的元素之间的间隔, spacing参数可以设置为 "number"， "xs" ， "sm" ， "md" ， "lg" ， "xl"
+
+```js live=true
+<>
+
+ 1
+ 2
+ 3
+
+
+ 1
+ 2
+ 3
+
+
+```
+
+## 设置元素排列方向
+
+使用 direction 设置元素的排列方向，同flex-direction属性参数一致。
+- row(默认值)：主轴为水平方向，起点在左端
+- column：主轴为垂直方向，起点在上方
+- row-reverse:主轴为水平方向，起点在上方
+- column-reverse: 主轴为垂直方向，起点在下方
+
+```js live=true
+
+ 1
+ 2
+ 3
+
+```
+
+## Grow自适应宽度
+
+grow设置元素占满整个行。
+
+```js live=true
+
+ 1
+ 2
+ 3
+
+```
diff --git a/docs/docs/zh/components/Input.mdx b/docs/docs/zh/components/Input.mdx
new file mode 100644
index 00000000..8bba837d
--- /dev/null
+++ b/docs/docs/zh/components/Input.mdx
@@ -0,0 +1,49 @@
+---
+group: 'components'
+category: 'state'
+title: Input
+description: '文本输入框'
+order: 1
+---
+
+## 基础用法
+
+通过鼠标或键盘输入字符
+
+```js live=true
+() =>
+
+)
+}
+```
+
+## 输入框禁用状态
+
+```js live=true
+() =>
+
+ )
+}
+```
diff --git a/docs/docs/zh/components/InputNumber.mdx b/docs/docs/zh/components/InputNumber.mdx
new file mode 100644
index 00000000..191ff974
--- /dev/null
+++ b/docs/docs/zh/components/InputNumber.mdx
@@ -0,0 +1,21 @@
+---
+group: 'components'
+category: 'state'
+title: InputNumber
+description: '数字输入框'
+order: 1
+---
+
+## 基础用法
+
+通过鼠标或键盘输入范围内的数值
+
+```js live=true
+() =>
+
+)
+```
diff --git a/docs/docs/zh/components/LoadingOverlay.mdx b/docs/docs/zh/components/LoadingOverlay.mdx
new file mode 100644
index 00000000..70a22d9c
--- /dev/null
+++ b/docs/docs/zh/components/LoadingOverlay.mdx
@@ -0,0 +1,21 @@
+---
+group: 'components'
+category: 'state'
+title: LoadingOverlay
+description: '覆盖加载'
+order: 1
+---
+
+## 使用方法
+
+加载中的状态显示在卡片的内容上面。
+
+## 代码演示
+```js live=true
+() => (
+
+
+)
+```
diff --git a/docs/docs/zh/components/Menu.mdx b/docs/docs/zh/components/Menu.mdx
new file mode 100644
index 00000000..555774dd
--- /dev/null
+++ b/docs/docs/zh/components/Menu.mdx
@@ -0,0 +1,33 @@
+---
+group: 'components'
+category: 'state'
+title: Menu
+description: '为页面和功能提供导航的菜单列表'
+order: 1
+---
+
+## 何时使用
+
+菜单提供类目和功能，使用多级结构来收纳和排列网站架构。
+
+## 基础用法
+
+在Menu组件中嵌套MenuItem组件。
+
+```js live=true
+() => {
+ const { Add, Stop, Pen, Trash } = KubeIcon;
+ return (
+
+
+ menu label
+
+
+ )
+}
+```
diff --git a/docs/docs/zh/components/Modal.mdx b/docs/docs/zh/components/Modal.mdx
new file mode 100644
index 00000000..0b64f9bb
--- /dev/null
+++ b/docs/docs/zh/components/Modal.mdx
@@ -0,0 +1,89 @@
+---
+group: 'components'
+category: 'state'
+title: Modal
+description: '对话框'
+order: 1
+---
+
+## 基础用法
+
+模态对话框，需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面打开一个浮层，承载相应的操作。
+
+```js live=true
+() => {
+ const [visible, setVisible] = React.useState(false);
+ const { Cluster } = KubeIcon;
+ const ref = React.createRef();
+
+ const openModal = () => {
+ setVisible(true);
+ };
+
+ const closeModal = () => {
+ console.log(ref.current);
+ setVisible(false);
+ };
+
+ return (
+ <>
+ Open Modal
+ Nest Imperative Modal ;
+
+ const openModal = () => {
+ modal.open({
+ title: 'Imperative Modal',
+ description: 'description text',
+ content,
+ });
+ };
+
+ return Imperative Modal ;
+}
+```
+
+## 确认模态框
+
+```js live=true
+() => {
+ const modal = useModal();
+ return (
+ {
+ modal.confirm({ title: 'confirm modal', content: 'confirm content' });
+ }}
+ >
+ Imperative Modal
+
+ );
+}
+```
diff --git a/docs/docs/zh/components/Navs.mdx b/docs/docs/zh/components/Navs.mdx
new file mode 100644
index 00000000..d9a02d9b
--- /dev/null
+++ b/docs/docs/zh/components/Navs.mdx
@@ -0,0 +1,22 @@
+---
+group: 'components'
+category: 'state'
+title: Navs
+description: '导航菜单'
+order: 1
+---
+
+## 基础用法
+
+```js live=true
+() => {
+ const data = [
+ { value: 'KubeSphere',label:'KubeSphere' },
+ { value: 'Jenkins',label:'Jenkins' },
+ { value: 'Kubernetes',label:'Kubernetes' }
+ ]
+ return (
+
+
+ Blank
+ Success
+ Error
+ Loading
+
+
+ );
+}
+```
+
+## 长消息通知
+
+```js live=true
+() => {
+ const trigger = () =>
+ notify.success(
+ 'Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.Here is your toast.'
+ );
+ return (
+
+ Make me a toast
+
+ );
+}
+```
+
+## 更新通知内容
+
+```js live=true
+() => {
+ let notifyId;
+ const trigger = () => {
+ notifyId = notify.loading('uploading...');
+ };
+
+ const update = () => {
+ notify.success('upload success !', { id: notifyId });
+ };
+
+ return (
+
+
+ Make me a notify
+ Update the notify
+
+
+ );
+}
+```
diff --git a/docs/docs/zh/components/Popover.mdx b/docs/docs/zh/components/Popover.mdx
new file mode 100644
index 00000000..1e1c72ef
--- /dev/null
+++ b/docs/docs/zh/components/Popover.mdx
@@ -0,0 +1,24 @@
+---
+group: 'components'
+category: 'state'
+title: Popover
+description: '点击/鼠标移入元素，弹出气泡式的卡片浮层'
+order: 1
+---
+
+## 基础用法
+
+当目标元素有进一步当描述和相关操作时，可以收纳到卡片中，根据用户到操作行为进行展现。和 Tooltip 的区别是，用户可以对浮层上对元素进行操作，因此它可以承载更复杂对内容，比如链接或按钮等。
+
+## 代码演示
+
+```js live=true
+() => (
+
+)
+```
+
diff --git a/docs/docs/zh/components/Radio.mdx b/docs/docs/zh/components/Radio.mdx
new file mode 100644
index 00000000..6509c413
--- /dev/null
+++ b/docs/docs/zh/components/Radio.mdx
@@ -0,0 +1,74 @@
+---
+group: 'components'
+category: 'state'
+title: Radio
+description: '单选按钮'
+order: 1
+---
+
+## 何时使用
+
+在一组备选项中进行单选
+
+## 基础用法
+
+通过value属性设置值，label属性设置按钮标签
+
+```js live=true
+() =>
+
+
+ );
+}
+```
+
+## 控制单选组合
+
+```js live=true
+() => {
+ const [value, setValue] = React.useState('China');
+ const toggle = () => {
+ if (value === 'USA') {
+ setValue('China');
+ } else {
+ setValue('USA');
+ }
+ };
+ const onChange = (val) => {
+ console.log(val);
+ };
+ return (
+ <>
+
+
+
+ Switch
+
+
+ );
+}
+```
diff --git a/docs/docs/zh/components/Select.mdx b/docs/docs/zh/components/Select.mdx
new file mode 100644
index 00000000..b4b3ad92
--- /dev/null
+++ b/docs/docs/zh/components/Select.mdx
@@ -0,0 +1,54 @@
+---
+group: 'components'
+category: 'state'
+title: Select
+description: '选择器'
+order: 1
+---
+
+## 何时使用
+
+选择器常用在表单中，以帮助用户快速输入表单内容，选择器适合有固定选项的数据录入，或者大佬数据需要借助选择器筛选以输入表单内容。
+
+## 基础用法
+
+下拉选择器，弹出一个下拉菜单给用户进行操作。
+
+```js live=true
+() => (
+
+ 按 CPU 平均负载排行
+ 按内存用量排行
+ 按磁盘用量排行
+ 按磁盘用量排行2
+
+)
+```
+
+## 带搜索框
+
+展开后可对选项进行搜索。
+
+```js live=true
+() => (
+
+ China
+ USA
+ Russian
+
+)
+```
+
+## 多选
+
+多选，从已有条目中选择。
+
+```js live=true
+() => (
+
+ 按 CPU 平均负载排行
+ 按内存用量排行
+ 按磁盘用量排行
+
+)
+```
diff --git a/docs/docs/zh/components/StatusDot.mdx b/docs/docs/zh/components/StatusDot.mdx
new file mode 100644
index 00000000..4bc87208
--- /dev/null
+++ b/docs/docs/zh/components/StatusDot.mdx
@@ -0,0 +1,57 @@
+---
+group: 'components'
+category: 'state'
+title: StatusDot
+description: '状态点'
+order: 1
+---
+
+## 基础用法
+
+状态点，表示任务进行状态
+
+## 代码演示
+
+```js live=true
+() => (
+
+ Ready
+ Warning
+
+
+
+)
+```
+
+## 无标签状态点
+
+以不同点颜色点状态点区分状态
+
+```js live=true
+() => (
+
+
+)
+```
+
+## 运动的状态点
+
+```js live=true
+() => (
+
+
+ 启动中
+
+
+ 重启中
+
+
+)
+```
diff --git a/docs/docs/zh/components/Switch.mdx b/docs/docs/zh/components/Switch.mdx
new file mode 100644
index 00000000..3f575d92
--- /dev/null
+++ b/docs/docs/zh/components/Switch.mdx
@@ -0,0 +1,35 @@
+---
+group: 'components'
+category: 'state'
+title: Switch
+description: '开关选择器'
+order: 1
+---
+
+## 基础用法
+
+用于需要表示开关状态或者两种状态直接的切换。
+
+```js live=true
+() =>
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+)
+```
+
+## 卡片式页签
+
+```js live=true
+() => (
+ <>
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+)
+```
+
+## 竖形页签
+
+```js live=true
+() => (
+ <>
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+)
+```
+
+## 页签标题位置变换
+
+```js live=true
+() => (
+ <>
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+
+)
+```
+
+## 放大页签
+
+```js live=true
+() => (
+
+
+ one
+
+
+ Two
+
+
+ Three
+
+
+)
+```
diff --git a/docs/docs/zh/components/Tag.mdx b/docs/docs/zh/components/Tag.mdx
new file mode 100644
index 00000000..cffbd50b
--- /dev/null
+++ b/docs/docs/zh/components/Tag.mdx
@@ -0,0 +1,55 @@
+---
+group: 'components'
+category: 'state'
+title: Tag
+description: '用于标记和给事物分类，也可用作独立内容的展示。'
+order: 1
+---
+
+## 何时使用
+
+用于标记事物的属性和维度；进行分类；展示独立内容。
+
+## 基本用法
+
+```js live=true
+() => (
+
+ KubeSphere
+ KubeSphere
+
+)
+```
+
+## 不同颜色标签
+
+```js live=true
+() => (
+
+ KubeSphere
+ KubeSphere
+ KubeSphere
+ KubeSphere
+
+ KubeSphere
+
+
+)
+```
+
+## 带图标标签
+
+```js live=true
+() => {
+ const { Add } = KubeIcon;
+ return (
+ text normal
+```
+
+## 带颜色的文本
+
+使用 color 可以设置不同颜色的文本，参数值有 warning，error, success。
+
+```js live=true
+
+ text warning
+ text error
+ text success
+
+```
+
+## 不同样式的文本
+
+可以给 text 文本设置样式。
+
+```js live=true
+
+ text underline
+ text delete
+ text italic
+ text weight
+ text weight
+
+```
+
+## 不同大小字体的文本
+
+可以使用 variant 设置文本的字体大小。
+
+```js live=true
+
+ h1 title
+ h2 title
+ h3 title
+ h4 title
+ h5 title
+ h6 title
+
+```
diff --git a/docs/docs/zh/components/Tooltip.mdx b/docs/docs/zh/components/Tooltip.mdx
new file mode 100644
index 00000000..c4cf12cb
--- /dev/null
+++ b/docs/docs/zh/components/Tooltip.mdx
@@ -0,0 +1,149 @@
+---
+group: 'components'
+category: 'state'
+title: Tooltip
+description: '文字提示'
+order: 1
+---
+
+
+## 基础用法
+
+进行标记和分类带小标签
+
+## 代码演示
+
+```js live=true
+() => (
+
+ Tooltip
+
+)
+```
+
+## 位置
+
+```js live=true
+() => (
+ <>
+
+
+ top
+
+
+
+ top-start
+
+
+
+ top-end
+
+
+
+ right
+
+
+
+ right-start
+
+
+
+ right-end
+
+
+
+ left
+
+
+
+ left-start
+
+
+
+ left-end
+
+
+
+ bottom
+
+
+
+ bottom-start
+
+
+
+ bottom-end
+
+
+
+
+)
+```
+
+## 触发事件
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
+
+```js live=true
+() => (
+
+
+ Click
+
+
+ focusin
+
+
+)
+```
+
+## 箭头
+
+可以设置是否显示一个箭头
+
+```js live=true
+() => (
+
+ Arrow
+
+)
+```
diff --git a/docs/lib/menuData.ts b/docs/lib/menuData.ts
index 13ba9ef9..7caeed9b 100644
--- a/docs/lib/menuData.ts
+++ b/docs/lib/menuData.ts
@@ -16,28 +16,47 @@ export default {
},
{
title: 'General',
- menu: ['Button', 'Text', 'Icon'],
+ menu: [
+ 'Button',
+ 'Text',
+ // 'Icon'
+ ],
},
{
title: 'Data Entry',
menu: [
- 'AutoComplete',
'Checkbox',
'DatePicker',
'Input',
+ 'InputNumber',
'Radio',
'Select',
- 'Slider',
+ // 'Slider',
'Switch',
],
},
{
title: 'Data Display',
- menu: ['Avatar', 'Badge', 'Card', 'Collapse', 'Popover', 'Tabs', 'Tag', 'Tooltip'],
+ menu: [
+ 'Badge',
+ 'Card',
+ 'Popover',
+ 'Tabs',
+ 'Tag',
+ 'Tooltip',
+ 'menu',
+ 'Navs',
+ 'Notify',
+ 'Banner',
+ 'Descriptions',
+ 'Entity',
+ 'Form',
+ 'Dropdown',
+ ],
},
{
title: 'Feedback',
- menu: ['Alert', 'Drawer', 'Loading', 'LoadingOverlay', 'Modal', 'Progress'],
+ menu: ['Alert', 'Loading', 'LoadingOverlay', 'Modal', 'StatusDot'],
},
],
hooks: [
diff --git a/docs/pages/[category]/[slug].tsx b/docs/pages/[category]/[slug].tsx
index 06d953a2..edc722b0 100644
--- a/docs/pages/[category]/[slug].tsx
+++ b/docs/pages/[category]/[slug].tsx
@@ -4,6 +4,7 @@ import { MDXRemote } from 'next-mdx-remote';
import styled from 'styled-components';
import { Tabs, Tab } from '@kubed/components';
import * as Kubed from '@kubed/components';
+import * as KubeIcon from '@kubed/icons';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { getMdxData } from '../../lib/getMdx';
import { DocLayout } from '../../lib/layouts/DocLayout';
@@ -16,6 +17,7 @@ const Pre = ({ children }: React.PropsWithChildren) => <>{children};
const components = {
...Kubed,
+ KubeIcon,
pre: Pre,
code: CodeBox,
};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c0367249..ad55dbfb 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -22,6 +22,7 @@ export { Descriptions, Description } from './Descriptions/Descriptions';
export { Entity, Field } from './Entity/Entity';
export { Dropdown } from './Dropdown/Dropdown';
export { Loading } from './Loading/Loading';
+export { LoadingOverlay } from './LoadingOverlay/LoadingOverlay';
export { Input } from './Input/Input';
export { Form, FormItem, FormList, useForm } from './Form/Form';
export { default as Select } from './Select/Select';
@@ -30,3 +31,6 @@ export { CheckboxGroup, Checkbox } from './Checkbox/Checkbox';
export { RadioGroup, Radio } from './Radio/Radio';
export { Switch } from './Switch/Switch';
export { InputNumber } from './InputNumber/InputNumber';
+export { Banner } from './Banner/Banner';
+export { BannerTip } from './Banner/BannerTip';
+export { Notify, notify } from './Notify/Notify';