diff --git a/.dumirc.ts b/.dumirc.ts
index 0fb2f108..eddb1388 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -1,84 +1,17 @@
 import { defineConfig } from 'dumi';
 
-const isProd = process.env.NODE_ENV === 'production';
-
 export default defineConfig({
   outputPath: 'docs-dist',
   mfsu: false,
   favicons: ['https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg'],
-  // @ts-ignore
   ssr: false,
   hash: true,
   ignoreMomentLocale: true,
   themeConfig: {
-    hero: {
-      'zh-CN': {
-        title: 'ProEditor',
-        description: '🌟 通用编辑器 UI 框架',
-        actions: [
-          {
-            text: '快速开始 →',
-            link: '/guide/intro',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/ant-design/pro-editor',
-          },
-        ],
-      },
-      'en-US': {
-        title: 'ProEditor',
-        description: '🌟 A General Editor UI Framework',
-        actions: [
-          {
-            text: 'Quick Start →',
-            link: '/guide/intro',
-          },
-        ],
-      },
-    },
     socialLinks: {
       github: 'https://github.com/ant-design/pro-editor',
     },
     footer: 'Made with ❤️ by 蚂蚁集团 - AFX & 数字科技',
-    features: [
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr',
-        title: '简单易用',
-        description: '在 Ant Design 上进行了自己的封装，更加易用',
-      },
-      {
-        image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-        title: 'Ant Design',
-        description: '与 Ant Design 设计体系一脉相承，无缝对接 antd 项目',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr',
-        title: '通用编辑器组件',
-        description: '提供完备的编辑器组件，方便使用者定制自己的编辑器',
-      },
-
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr',
-        title: '预设样式',
-        description: '样式风格与 antd 一脉相承，无需魔改，浑然天成。默认好用的主题系统',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr',
-        title: '预设行为',
-        description: '更少的代码，更少的 Bug，更多的功能',
-      },
-
-      {
-        image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg',
-        title: 'TypeScript',
-        description: '使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网',
-      },
-    ],
     logo: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
     name: '@ant-design/pro-editor',
   },
diff --git a/.i18nrc.js b/.i18nrc.js
index 822fd6cf..ce72e61e 100644
--- a/.i18nrc.js
+++ b/.i18nrc.js
@@ -6,7 +6,6 @@ module.exports = {
   markdown: {
     entry: ['docs/**/**.md', 'src/**/**.md'],
     entryLocale: 'zh-CN',
-    exclude: ['docs/index.zh-CN.md'],
     entryExtension: '.zh-CN.md',
     outputLocales: ['en-US'],
   },
diff --git a/docs/guide/demos/ColumnList/data.ts b/docs/guide/demos/ColumnList/data.ts
index f0521a38..92c71d03 100644
--- a/docs/guide/demos/ColumnList/data.ts
+++ b/docs/guide/demos/ColumnList/data.ts
@@ -2,37 +2,37 @@
  * Column 所有类型
  * */
 export const tableColumnValueOptions = [
-  { label: '序号', value: 'index' },
-  { label: '圆形序号', value: 'indexBorder' },
-  { label: '数字', value: 'digit' },
-  { label: '密码', value: 'password' },
-  { label: '金额', value: 'money' },
-  { label: '文本', value: 'text' },
-  { label: '文本域', value: 'textarea' },
-  { label: '日期', value: 'date' },
-  { label: '操作', value: 'option' },
-  { label: '日期时间', value: 'dateTime' },
-  { label: '周', value: 'dateWeek' },
-  { label: '月', value: 'dateMonth' },
-  { label: '季度', value: 'dateQuarter' },
-  { label: '年份', value: 'dateYear' },
-  { label: '日期区间', value: 'dateRange' },
-  { label: '日期时间区间', value: 'dateTimeRange' },
-  { label: '时间', value: 'time' },
-  { label: '时间区间', value: 'timeRange' },
-  { label: '下拉框', value: 'select' },
-  { label: '多选框', value: 'checkbox' },
-  { label: '星级组件', value: 'rate' },
-  { label: '单选框', value: 'radio' },
-  { label: '按钮单选框', value: 'radioButton' },
-  { label: '进度条', value: 'progress' },
-  { label: '百分比', value: 'percent' },
-  { label: '秒格式化', value: 'second' },
-  { label: '头像', value: 'avatar' },
-  { label: '代码框', value: 'code' },
-  { label: '开关', value: 'switch' },
-  { label: '显示当前时间', value: 'fromNow' },
-  { label: '图片', value: 'image' },
-  { label: 'json 格式化', value: 'jsonCode' },
-  { label: '颜色选择器', value: 'color' },
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
 ];
diff --git a/docs/guide/intro.en-US.md b/docs/guide/intro.en-US.md
index 1e73f7b4..cf1e3d2e 100644
--- a/docs/guide/intro.en-US.md
+++ b/docs/guide/intro.en-US.md
@@ -1,10 +1,10 @@
 ---
 title: Quick Start
 group:
-  title: Quick Start
+  title: Getting Started Quickly
   order: 1
 nav:
-  title: Document
+  title: Documentation
   order: 1
 ---
 
@@ -22,7 +22,7 @@ $ npm install @ant-design/pro-editor -S
 
 ### Using Components
 
-ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", etc. For the complete component documentation, please refer to: [Basic Components](/components/action-icon)
+ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", and more. For complete component documentation, please refer to: [Basic Components](/components/action-icon)
 
 Below is a typical array object editing scenario. Our provided ColumnList can help developers quickly implement a high-quality array editing component.
 
@@ -30,46 +30,16 @@ Below is a typical array object editing scenario. Our provided ColumnList can he
 
 ### Component Assembler
 
-ProEditor was initially positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component.
+Initially, ProEditor was positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component.
 
 See: [ProEditor Assembler Container](/pro-editor)
 
-### 🚧 Using Atomic Capabilities
-
-> Working in Progress
-
-ProEditor will provide various atomic capabilities required for editing scenarios, including but not limited to "undo/redo", "real-time collaboration", "keyboard shortcuts", "selection capabilities", etc.
-
-This part of the capability is still under rapid development, so stay tuned.
-
-## Integration with Frameworks
-
-### Integration with Umi
-
-In the development scenario of the middle and back office, Umi is a very good choice. Integrating ProEditor with Umi is very easy. After installation, you can use it directly.
-
-### Integration with Next.js
-
-[Next.js](https://nextjs.org/) is a very popular development framework in the community. Integrating ProEditor with Next.js is also very easy.
-
-Since Next.js is a CSR/SSR isomorphic React framework, and ProEditor only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`:
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Convert pure esm modules to node-compatible modules
-  transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva is a ProEditor dependency module
-};
-```
-
-Then you can use it just like any other component.
-
 ## Engineering Capabilities
 
 ### On-Demand Loading
 
-ProEditor supports tree shaking based on ES modules by default. Simply import `import { ActionIcon } from '@ant-design/pro-editor`; to achieve on-demand loading.
+ProEditor supports tree shaking based on ES modules by default. Directly importing `import { ActionIcon } from '@ant-design/pro-editor';` will achieve on-demand loading.
 
 ### TypeScript
 
-ProEditor is developed using TypeScript, so it provides complete type definitions.
+ProEditor is developed using TypeScript, thus providing complete type definitions.
diff --git a/docs/guide/intro.zh-CN.md b/docs/guide/intro.zh-CN.md
index f48457b2..2d413bda 100644
--- a/docs/guide/intro.zh-CN.md
+++ b/docs/guide/intro.zh-CN.md
@@ -34,36 +34,6 @@ ProEditor 最初的定位是作为组件的可视化配置框架。因此在 Pro
 
 详见：[ProEditor 装配器容器](/pro-editor)
 
-### 🚧 使用原子化能力
-
-> Working in Progress
-
-ProEditor 将会提供编辑场景需要的各类原子化能力，包括但不限于「撤销重做」、「实时协同」、「键盘快捷键」、「选择能力」等。
-
-当前该部分能力仍处于高速开发中，敬请期待。
-
-## 与框架集成
-
-### 与 Umi 集成
-
-在中后台的研发场景， umi 是一个非常不错的选择。ProEditor 与 umi 的集成非常容易。安装后直接使用即可。
-
-### 与 Next.js 集成
-
-[Next.js](https://nextjs.org/) 是社区中非常流行的研发框架。ProEditor 与 Next.js 的集成也非常容易。
-
-由于 Next.js 是一个 CSR、SSR 同构的 React 框架，而 ProEditor 默认只提供 esm 模块，因此在安装后，需要在 `next.config.(m)js` 中 `transpilePackages` 中加入相关依赖：
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // 将纯 esm 模块转为 node 兼容模块
-  transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva 为 ProEditor 依赖模块
-};
-```
-
-接下来和其他组件一样使用即可。
-
 ## 工程化能力
 
 ### 按需加载
diff --git a/docs/guide/nextjs.en-US.md b/docs/guide/nextjs.en-US.md
index 590251f4..6bff665c 100644
--- a/docs/guide/nextjs.en-US.md
+++ b/docs/guide/nextjs.en-US.md
@@ -1,6 +1,78 @@
 ---
 title: NextJs
 group:
-  title: Work in FrameWork
+  title: Framework Usage
   order: 5
 ---
+
+## Integration with Next.js
+
+[Next.js](https://nextjs.org/) is a very popular development framework in the community, and integrating ProEditor with Next.js is very easy.
+
+```bash
+npx create-next-app@latest
+```
+
+### Dependency Installation
+
+```bash
+npm install @ant-design/pro-editor --save
+or
+pnpm install @ant-design/pro-editor
+```
+
+Since Next.js is a CSR/SSR isomorphic React framework, and ProChat only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`:
+
+> In the latest version of NextJS 14 AppRoute, this configuration is no longer needed
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Convert pure esm modules to node-compatible modules
+  transpilePackages: ['@ant-design/pro-editor'],
+};
+```
+
+### Usage
+
+Taking the `SortableList` component as an example, if it is a project created by the default scaffolding, you can simply write the following code in `page.js|tsx` to see it in action.
+
+```js
+'use client';
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { useState } from 'react';
+
+const tableColumnValueOptions = [
+  // ... (omitted for brevity)
+];
+
+type SchemaItem = {
+  title: string,
+  valueType: string,
+  dataIndex: string,
+};
+
+const INIT_VALUES = [
+  // ... (omitted for brevity)
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  // ... (omitted for brevity)
+];
+
+export default () => {
+  const [value, setValue] = useState(INIT_VALUES);
+
+  return (
+    <ColumnList
+      columns={columns}
+      value={value}
+      onChange={(values) => {
+        setValue(values);
+        console.log('onChange', values);
+      }}
+    />
+  );
+};
+```
diff --git a/docs/guide/nextjs.zh-CN.md b/docs/guide/nextjs.zh-CN.md
index 6d5a8b89..0ea15483 100644
--- a/docs/guide/nextjs.zh-CN.md
+++ b/docs/guide/nextjs.zh-CN.md
@@ -4,3 +4,128 @@ group:
   title: 框架使用
   order: 5
 ---
+
+## 与 Next.js 集成
+
+[Next.js](https://nextjs.org/) 是社区中非常流行的研发框架，ProEditor 与 Next.js 的集成非常容易。
+
+```bash
+npx create-next-app@latest
+```
+
+### 依赖安装
+
+```bash
+npm install @ant-design/pro-editor --save
+or
+pnpm install @ant-design/pro-editor
+```
+
+由于 Next.js 是一个 CSR、SSR 同构的 React 框架，而 ProChat 默认只提供 esm 模块，因此在安装后，需要在 `next.config.(m)js` 中 `transpilePackages` 中加入相关依赖：
+
+> 在最新版本 NextJS 14 AppRoute 中可以不需要配置了
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // 将纯 esm 模块转为 node 兼容模块
+  transpilePackages: ['@ant-design/pro-editor'],
+};
+```
+
+### 使用
+
+以 `SortableList` 组件为例，如果是默认脚手架创建出来的项目中，直接在 `page.js|tsx` 中写下如下代码就可以看到了。
+
+```js
+'use client';
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { useState } from 'react';
+
+const tableColumnValueOptions = [
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
+];
+
+type SchemaItem = {
+  title: string,
+  valueType: string,
+  dataIndex: string,
+};
+
+const INIT_VALUES = [
+  { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' },
+  {
+    title: 'Enterprise',
+    valueType: 'text',
+    dataIndex: 'name',
+  },
+  { title: 'Company', valueType: 'text', dataIndex: 'authCompany' },
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: 'ValueType',
+    dataIndex: 'valueType',
+    type: 'select',
+    options: tableColumnValueOptions,
+  },
+  {
+    title: 'DataIndex',
+    dataIndex: 'dataIndex',
+    type: 'select',
+  },
+];
+
+export default () => {
+  const [value, setValue] = useState(INIT_VALUES);
+
+  return (
+    <ColumnList
+      columns={columns}
+      value={value}
+      onChange={(values) => {
+        setValue(values);
+        console.log('onChange', values);
+      }}
+    />
+  );
+};
+```
diff --git a/docs/guide/umi.en-US.md b/docs/guide/umi.en-US.md
index 1ca8cfcf..e48f107e 100644
--- a/docs/guide/umi.en-US.md
+++ b/docs/guide/umi.en-US.md
@@ -1,6 +1,121 @@
 ---
 title: Umi
 group:
-  title: Work in FrameWork
+  title: Framework Usage
   order: 5
 ---
+
+## Integration with Umi
+
+In the development scene of the middle and back office, [umi](https://umijs.org/) is a very good choice. Integrating `ProEditor` with `umi` is very easy. After installation, you can use it directly.
+
+```bash
+npx create-umi@latest
+or
+yarn create umi
+pnpm dlx create-umi@latest
+```
+
+### Dependency Installation
+
+After creating it
+
+```bash
+npm install @ant-design/pro-editor --save
+or
+pnpm install @ant-design/pro-editor
+```
+
+### Usage
+
+```js
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { useState } from 'react';
+
+const tableColumnValueOptions = [
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
+];
+
+type SchemaItem = {
+  title: string,
+  valueType: string,
+  dataIndex: string,
+};
+
+const INIT_VALUES = [
+  { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' },
+  {
+    title: 'Enterprise',
+    valueType: 'text',
+    dataIndex: 'name',
+  },
+  { title: 'Company', valueType: 'text', dataIndex: 'authCompany' },
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: 'ValueType',
+    dataIndex: 'valueType',
+    type: 'select',
+    options: tableColumnValueOptions,
+  },
+  {
+    title: 'DataIndex',
+    dataIndex: 'dataIndex',
+    type: 'select',
+  },
+];
+
+export default () => {
+  const [value, setValue] = useState(INIT_VALUES);
+
+  return (
+    <ColumnList
+      columns={columns}
+      value={value}
+      onChange={(values) => {
+        setValue(values);
+        console.log('onChange', values);
+      }}
+    />
+  );
+};
+```
diff --git a/docs/guide/umi.zh-CN.md b/docs/guide/umi.zh-CN.md
index 94972769..861d7944 100644
--- a/docs/guide/umi.zh-CN.md
+++ b/docs/guide/umi.zh-CN.md
@@ -4,3 +4,118 @@ group:
   title: 框架使用
   order: 5
 ---
+
+## 与 Umi 集成
+
+在中后台的研发场景， [umi](https://umijs.org/) 是一个非常不错的选择。`ProEditor` 与 `umi` 的集成非常容易。安装后直接使用即可。
+
+```bash
+npx create-umi@latest
+or
+yarn create umi
+pnpm dlx create-umi@latest
+```
+
+### 依赖安装
+
+创建好后
+
+```bash
+npm install @ant-design/pro-editor --save
+or
+pnpm install @ant-design/pro-editor
+```
+
+### 使用
+
+```js
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { useState } from 'react';
+
+const tableColumnValueOptions = [
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
+];
+
+type SchemaItem = {
+  title: string,
+  valueType: string,
+  dataIndex: string,
+};
+
+const INIT_VALUES = [
+  { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' },
+  {
+    title: 'Enterprise',
+    valueType: 'text',
+    dataIndex: 'name',
+  },
+  { title: 'Company', valueType: 'text', dataIndex: 'authCompany' },
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  {
+    title: 'Title',
+    dataIndex: 'title',
+    type: 'input',
+  },
+  {
+    title: 'ValueType',
+    dataIndex: 'valueType',
+    type: 'select',
+    options: tableColumnValueOptions,
+  },
+  {
+    title: 'DataIndex',
+    dataIndex: 'dataIndex',
+    type: 'select',
+  },
+];
+
+export default () => {
+  const [value, setValue] = useState(INIT_VALUES);
+
+  return (
+    <ColumnList
+      columns={columns}
+      value={value}
+      onChange={(values) => {
+        setValue(values);
+        console.log('onChange', values);
+      }}
+    />
+  );
+};
+```
diff --git a/docs/index.en-US.md b/docs/index.en-US.md
new file mode 100644
index 00000000..a8fba4f3
--- /dev/null
+++ b/docs/index.en-US.md
@@ -0,0 +1,35 @@
+---
+hero:
+  title: ProEditor
+  description: 🌟 Universal Editor UI Framework
+  actions:
+    - text: Get Started →
+      link: /guide/intro
+    - text: Github
+      link: https://github.com/ant-design/pro-editor
+
+features:
+  - title: Easy to Use
+    description: Wrapped on Ant Design, making it more user-friendly
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr
+
+  - title: Ant Design
+    description: Inherit the Ant Design design system, seamlessly integrate with antd projects
+    image: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
+
+  - title: Universal Editor Components
+    description: Provide comprehensive editor components for users to customize their own editors
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr
+
+  - title: Preset Styles
+    description: Style in line with antd, no need for major modifications, naturally integrated, default user-friendly theme system
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr
+
+  - title: Preset Behaviors
+    description: Less code, fewer bugs, more functionality
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr
+
+  - title: TypeScript
+    description: Developed using TypeScript, providing complete type definition files, no need to frequently visit the official website
+    image: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg
+---
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index f80e4d3d..00000000
--- a/docs/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-hero:
-  title: ProEditor
-  description: 🌟 Universal Editor UI Framework
----
-
-@ant-design/pro-editor
diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
index c9e28204..ad855da3 100644
--- a/docs/index.zh-CN.md
+++ b/docs/index.zh-CN.md
@@ -2,6 +2,34 @@
 hero:
   title: ProEditor
   description: 🌟 通用编辑器 UI 框架
----
+  actions:
+    - text: 快速开始 →
+      link: /guide/intro
+    - text: Github
+      link: https://github.com/ant-design/pro-editor
+
+features:
+  - title: 简单易用
+    description: 在 Ant Design 上进行了自己的封装，更加易用
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr
+
+  - title: Ant Design
+    description: 与 Ant Design 设计体系一脉相承，无缝对接 antd 项目
+    image: https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg
+
+  - title: 通用编辑器组件
+    description: 提供完备的编辑器组件，方便使用者定制自己的编辑器
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr
 
-@ant-design/pro-editor
+  - title: 预设样式
+    description: 样式风格与 antd 一脉相承，无需魔改，浑然天成，默认好用的主题系统
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr
+
+  - title: 预设行为
+    description: 更少的代码，更少的 Bug，更多的功能
+    image: https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr
+
+  - title: TypeScript
+    description: 使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网
+    image: https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg
+---
diff --git a/docs/showcase/flow-editor.en-US.md b/docs/showcase/flow-editor.en-US.md
deleted file mode 100644
index 3aae2357..00000000
--- a/docs/showcase/flow-editor.en-US.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Flow Editor Node Editor
----
-
-# Introduction
-
-Flow Editor is a set of node-based editing tools for running large models.
-
-![](https://mdn.alipayobjects.com/huamei_rusp7w/afts/img/A*8TzqSK8jnhAAAAAAAAAAAAAADmB6AQ/original)
-
-## Access Address
-
-<https://github.com/ant-design/pro-flow-editor>
diff --git a/docs/showcase/flow-editor.zh-CN.md b/docs/showcase/flow-editor.zh-CN.md
deleted file mode 100644
index fe7d0159..00000000
--- a/docs/showcase/flow-editor.zh-CN.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Flow Editor 节点编辑器
----
-
-# 简介
-
-Flow Editor 是一套节点式运行大模型的编辑工具。
-
-![](https://mdn.alipayobjects.com/huamei_rusp7w/afts/img/A*8TzqSK8jnhAAAAAAAAAAAAAADmB6AQ/original)
-
-## 访问地址
-
-<https://github.com/ant-design/pro-flow-editor>
diff --git a/docs/showcase/index.en-US.md b/docs/showcase/index.en-US.md
deleted file mode 100644
index a50f8653..00000000
--- a/docs/showcase/index.en-US.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Welcome PR
-nav:
-  title: Use Cases
-  order: 999
----
-
-# Use Cases
-
-If your project uses ProEditor, you can submit a PR to add it to our use case library.
-
-![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*688cTLS47_QAAAAAAAAAAAAADmuEAQ/original)
diff --git a/docs/showcase/index.zh-CN.md b/docs/showcase/index.zh-CN.md
deleted file mode 100644
index 4973b81b..00000000
--- a/docs/showcase/index.zh-CN.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: 欢迎 PR
-nav:
-  title: 使用案例
-  order: 999
----
-
-# 使用案例
-
-如您的项目使用到了 ProEditor，可以提交 PR 添加到我们的案例库中来。
-
-![](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*688cTLS47_QAAAAAAAAAAAAADmuEAQ/original)
diff --git a/docs/showcase/kitchen-color-studio.en-US.md b/docs/showcase/kitchen-color-studio.en-US.md
deleted file mode 100644
index 92992036..00000000
--- a/docs/showcase/kitchen-color-studio.en-US.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Kitchen Color Studio Color System Editor
----
-
-# Introduction
-
-Kitchen Color Studio is an open-source color system editor.
-
-![](https://raw.githubusercontent.com/ant-design/kitchen-color-studio/master/public/preview1.webp)
-
-## Access Address
-
-<https://github.com/ant-design/antd-color-editor>
diff --git a/docs/showcase/kitchen-color-studio.zh-CN.md b/docs/showcase/kitchen-color-studio.zh-CN.md
deleted file mode 100644
index c7d8f54a..00000000
--- a/docs/showcase/kitchen-color-studio.zh-CN.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: kitchen Color Studio 颜色系统编辑器
----
-
-# 简介
-
-kitchen Color Studio 是一套开源的颜色系统编辑器。
-
-![](https://raw.githubusercontent.com/ant-design/kitchen-color-studio/master/public/preview1.webp)
-
-## 访问地址
-
-<https://github.com/ant-design/antd-color-editor>
diff --git a/package.json b/package.json
index 58020370..1cc57acb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-editor",
-  "version": "0.40.0",
+  "version": "1.0.0",
   "description": "🌟 Lightweight Editor UI Framework",
   "homepage": "https://github.com/ant-design/pro-editor",
   "bugs": {
diff --git a/src/index.ts b/src/index.ts
index 1b5c40bd..821427b7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -15,6 +15,7 @@ export { default as FreeCanvas } from './FreeCanvas';
 export type { FreeCanvasProps } from './FreeCanvas';
 export * from './Highlight';
 export * from './IconPicker';
+export * from './InteractContainer';
 export { Layout as EditorLayout } from './Layout';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export * from './ProBuilder';