chore: 开发环境切成 vite (#5677)

* 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 样式文档调整 * 修复有多个 __inline 时的报错 * scirpt 调整 * feat:chart接入事件动作 (#5669) * chore: input-group 没有 name 不应该报 warning (#5667) * chore: 处理编译TS Warning，调整TableStore中label解析的顺序 (#5670) * feat: timeline时间轴支持自定义图标 (#5668) * fix:折叠器Collapse自定义图标&inputNumber对含后缀生效 * 修改 * 正则修改 * 正则修改 * 正则修改 * feat:将默认px替换为rem 2px===0.125rem * feat:timeline时间轴支持自定义图标 Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * fix: 调整echarts-stat使用方式，兼容vite打包异步非esm模块 (#5672) * feat: chart 支持配置加载 geojson 及百度地图 (#5674) * feat: chart 支持配置 geoURL 及 geoName * 增加百度地图配置 * chore: 修复 coverage 运行报错 (#5678) * chore: coverage 执行换成 v8 解决内存问题 (#5679) * 尝试使用 vite 跑开发环境 * amis-formula 也添加 esm 模块 * 代码合并有问题,做些调整 Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: 吴多益 <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: 徐佳豪 <1440054388@qq.com> Co-authored-by: xujiahao01 <xujiahao01@baidu.com> Co-authored-by: 刘丹 <365533093@qq.com>
2024-11-29 10:29:19 +08:00 · 2022-11-02 22:45:12 +08:00 · 2022-11-02 22:45:12 +08:00 · c591ab4381
commit c591ab4381
parent 3fc5c3de2a
86 changed files with 7290 additions and 1343 deletions
--- a/README.md
+++ b/README.md
@ -44,9 +44,6 @@
 # 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。
 npm i --legacy-peer-deps

-# 因为需要 require 一个 formula/lib/doc.md 文件，所以需要先生成一下
-npm run build --workspace amis-formula
-
 # 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。
 npm start
 ```
--- a/examples/components/CssDocs.tsx
+++ b/examples/components/CssDocs.tsx
@ -51,7 +51,9 @@ export const cssDocs = [
        label: 'Box Sizing',
        path: '/zh-CN/style/layout/box-sizing',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_box-sizing.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/layout/_box-sizing.md'
+          ).then(wrapDoc)
        )
      },

@ -59,7 +61,9 @@ export const cssDocs = [
        label: 'Display',
        path: '/zh-CN/style/layout/display',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_display.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_display.md').then(
+            wrapDoc
+          )
        )
      },

@ -67,7 +71,9 @@ export const cssDocs = [
        label: 'Floats',
        path: '/zh-CN/style/layout/floats',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_float.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_float.md').then(
+            wrapDoc
+          )
        )
      },

@ -75,7 +81,9 @@ export const cssDocs = [
        label: 'Clear',
        path: '/zh-CN/style/layout/clear',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_clear.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_clear.md').then(
+            wrapDoc
+          )
        )
      },

@ -83,7 +91,9 @@ export const cssDocs = [
        label: 'Overflow',
        path: '/zh-CN/style/layout/overflow',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_overflow.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_overflow.md').then(
+            wrapDoc
+          )
        )
      },

@ -91,7 +101,9 @@ export const cssDocs = [
        label: 'Position',
        path: '/zh-CN/style/layout/position',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_position.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_position.md').then(
+            wrapDoc
+          )
        )
      },

@ -99,9 +111,9 @@ export const cssDocs = [
        label: 'Top / Right / Bottom / Left',
        path: '/zh-CN/style/layout/top-right-bottom-left',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_top-right-bottom-left.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md'
+          ).then(wrapDoc)
        )
      },

@ -109,7 +121,9 @@ export const cssDocs = [
        label: 'Visibility',
        path: '/zh-CN/style/layout/visibility',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_visibility.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/layout/_visibility.md'
+          ).then(wrapDoc)
        )
      },

@ -117,7 +131,9 @@ export const cssDocs = [
        label: 'Z-Index',
        path: '/zh-CN/style/layout/z-index',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/layout/_z-index.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/layout/_z-index.md').then(
+            wrapDoc
+          )
        )
      }
    ]
@ -130,7 +146,9 @@ export const cssDocs = [
        label: 'Flex Direction',
        path: '/zh-CN/style/flex/direction',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_direction.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_direction.md').then(
+            wrapDoc
+          )
        )
      },

@ -138,7 +156,9 @@ export const cssDocs = [
        label: 'Flex Wrap',
        path: '/zh-CN/style/flex/wrap',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_wrap.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_wrap.md').then(
+            wrapDoc
+          )
        )
      },

@ -146,7 +166,9 @@ export const cssDocs = [
        label: 'Flex',
        path: '/zh-CN/style/flex/flex',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_flex.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_flex.md').then(
+            wrapDoc
+          )
        )
      },

@ -154,7 +176,9 @@ export const cssDocs = [
        label: 'Flex Grow',
        path: '/zh-CN/style/flex/grow',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_grow.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_grow.md').then(
+            wrapDoc
+          )
        )
      },

@ -162,7 +186,9 @@ export const cssDocs = [
        label: 'Flex Shrink',
        path: '/zh-CN/style/flex/shrink',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_shrink.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_shrink.md').then(
+            wrapDoc
+          )
        )
      },

@ -170,7 +196,9 @@ export const cssDocs = [
        label: 'Flex Order',
        path: '/zh-CN/style/flex/order',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/flex/_order.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/flex/_order.md').then(
+            wrapDoc
+          )
        )
      }
    ]
@ -183,58 +211,72 @@ export const cssDocs = [
        label: 'Grid Template Columns',
        path: '/zh-CN/style/grid/columns',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_columns.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/grid/_columns.md').then(
+            wrapDoc
+          )
        )
      },
      {
        label: 'Grid Column Start / End',
        path: '/zh-CN/style/grid/column-start-end',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_column-start-end.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/grid/_column-start-end.md'
+          ).then(wrapDoc)
        )
      },
      {
        label: 'Grid Template Rows',
        path: '/zh-CN/style/grid/rows',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_rows.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/grid/_rows.md').then(
+            wrapDoc
+          )
        )
      },
      {
        label: 'Grid Row Start / End',
        path: '/zh-CN/style/grid/row-start-end',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_row-start-end.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/grid/_row-start-end.md'
+          ).then(wrapDoc)
        )
      },
      {
        label: 'Grid Auto Flow',
        path: '/zh-CN/style/grid/auto-flow',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_auto-flow.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/grid/_auto-flow.md').then(
+            wrapDoc
+          )
        )
      },
      {
        label: 'Grid Auto Columns',
        path: '/zh-CN/style/grid/auto-columns',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_auto-columns.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/grid/_auto-columns.md'
+          ).then(wrapDoc)
        )
      },
      {
        label: 'Grid Auto Rows',
        path: '/zh-CN/style/grid/auto-rows',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_auto-rows.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/grid/_auto-rows.md').then(
+            wrapDoc
+          )
        )
      },
      {
        label: 'Gap',
        path: '/zh-CN/style/grid/gap',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/grid/_gap.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/grid/_gap.md').then(
+            wrapDoc
+          )
        )
      }
    ]
@ -247,7 +289,7 @@ export const cssDocs = [
        path: '/zh-CN/style/box-alignment/justify-content',
        component: React.lazy(() =>
          import(
-            'amis-ui/scss/helper/box-alignment/_justify-content.scss'
+            '../../packages/amis-ui/scss/helper/box-alignment/_justify-content.md'
          ).then(wrapDoc)
        )
      },
@ -256,9 +298,9 @@ export const cssDocs = [
        label: 'Justify Items',
        path: '/zh-CN/style/box-alignment/justify-items',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_justify-items.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_justify-items.md'
+          ).then(wrapDoc)
        )
      },

@ -266,9 +308,9 @@ export const cssDocs = [
        label: 'Justify Self',
        path: '/zh-CN/style/box-alignment/justify-self',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_justify-self.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_justify-self.md'
+          ).then(wrapDoc)
        )
      },

@ -276,9 +318,9 @@ export const cssDocs = [
        label: 'Align Content',
        path: '/zh-CN/style/box-alignment/align-content',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_align-content.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_align-content.md'
+          ).then(wrapDoc)
        )
      },

@ -286,9 +328,9 @@ export const cssDocs = [
        label: 'Align Items',
        path: '/zh-CN/style/box-alignment/align-items',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_align-items.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_align-items.md'
+          ).then(wrapDoc)
        )
      },

@ -296,9 +338,9 @@ export const cssDocs = [
        label: 'Align Self',
        path: '/zh-CN/style/box-alignment/align-self',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_align-self.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_align-self.md'
+          ).then(wrapDoc)
        )
      },

@ -306,9 +348,9 @@ export const cssDocs = [
        label: 'Place Content',
        path: '/zh-CN/style/box-alignment/place-content',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_place-content.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_place-content.md'
+          ).then(wrapDoc)
        )
      },

@ -316,9 +358,9 @@ export const cssDocs = [
        label: 'Place Items',
        path: '/zh-CN/style/box-alignment/place-items',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_place-items.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_place-items.md'
+          ).then(wrapDoc)
        )
      },

@ -326,9 +368,9 @@ export const cssDocs = [
        label: 'Place Self',
        path: '/zh-CN/style/box-alignment/place-self',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/box-alignment/_place-self.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/box-alignment/_place-self.md'
+          ).then(wrapDoc)
        )
      }
    ]
@ -341,7 +383,9 @@ export const cssDocs = [
        label: 'Padding',
        path: '/zh-CN/style/spacing/padding',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/spacing/_padding.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/spacing/_padding.md').then(
+            wrapDoc
+          )
        )
      },

@ -349,7 +393,9 @@ export const cssDocs = [
        label: 'Margin',
        path: '/zh-CN/style/spacing/margin',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/spacing/_margin.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/spacing/_margin.md').then(
+            wrapDoc
+          )
        )
      },

@ -357,9 +403,9 @@ export const cssDocs = [
        label: 'Space Between',
        path: '/zh-CN/style/spacing/space-between',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/spacing/_space-between.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/spacing/_space-between.md'
+          ).then(wrapDoc)
        )
      }
    ]
@ -372,14 +418,18 @@ export const cssDocs = [
        label: 'Width',
        path: '/zh-CN/style/sizing/width',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/sizing/_width.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/sizing/_width.md').then(
+            wrapDoc
+          )
        )
      },
      {
        label: 'Height',
        path: '/zh-CN/style/sizing/height',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/sizing/_height.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/sizing/_height.md').then(
+            wrapDoc
+          )
        )
      }
    ]
@ -392,9 +442,9 @@ export const cssDocs = [
        label: 'Font Family',
        path: '/zh-CN/style/typography/font-family',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_font-family.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_font-family.md'
+          ).then(wrapDoc)
        )
      },

@ -402,7 +452,9 @@ export const cssDocs = [
        label: 'Font Size',
        path: '/zh-CN/style/typography/font-size',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_font-size.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_font-size.md'
+          ).then(wrapDoc)
        )
      },

@ -410,9 +462,9 @@ export const cssDocs = [
        label: 'Font style',
        path: '/zh-CN/style/typography/font-style',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_font-style.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_font-style.md'
+          ).then(wrapDoc)
        )
      },

@ -420,9 +472,9 @@ export const cssDocs = [
        label: 'Font Weight',
        path: '/zh-CN/style/typography/font-weight',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_font-weight.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_font-weight.md'
+          ).then(wrapDoc)
        )
      },

@ -430,9 +482,9 @@ export const cssDocs = [
        label: 'Letter Spacing',
        path: '/zh-CN/style/typography/letter-spacing',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_letter-spacing.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_letter-spacing.md'
+          ).then(wrapDoc)
        )
      },

@ -440,9 +492,9 @@ export const cssDocs = [
        label: 'Line Height',
        path: '/zh-CN/style/typography/line-height',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_line-height.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_line-height.md'
+          ).then(wrapDoc)
        )
      },

@ -450,9 +502,9 @@ export const cssDocs = [
        label: 'List Style Type',
        path: '/zh-CN/style/typography/list-style-type',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_list-style-type.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_list-style-type.md'
+          ).then(wrapDoc)
        )
      },

@ -460,9 +512,9 @@ export const cssDocs = [
        label: 'Text Alignment',
        path: '/zh-CN/style/typography/text-align',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_text-align.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_text-align.md'
+          ).then(wrapDoc)
        )
      },

@ -470,9 +522,9 @@ export const cssDocs = [
        label: 'Text Color',
        path: '/zh-CN/style/typography/text-color',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_text-color.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_text-color.md'
+          ).then(wrapDoc)
        )
      },

@ -480,9 +532,9 @@ export const cssDocs = [
        label: 'Text Decoration',
        path: '/zh-CN/style/typography/text-decoration',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_text-decoration.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_text-decoration.md'
+          ).then(wrapDoc)
        )
      },

@ -490,9 +542,9 @@ export const cssDocs = [
        label: 'Text Transform',
        path: '/zh-CN/style/typography/text-transform',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_text-transform.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_text-transform.md'
+          ).then(wrapDoc)
        )
      },

@ -500,9 +552,9 @@ export const cssDocs = [
        label: 'Vertical Alignment',
        path: '/zh-CN/style/typography/vertical-align',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_vertical-align.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_vertical-align.md'
+          ).then(wrapDoc)
        )
      },

@ -510,9 +562,9 @@ export const cssDocs = [
        label: 'Whitespace',
        path: '/zh-CN/style/typography/whitespace',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_whitespace.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_whitespace.md'
+          ).then(wrapDoc)
        )
      },

@ -520,9 +572,9 @@ export const cssDocs = [
        label: 'Word Break',
        path: '/zh-CN/style/typography/word-break',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/typography/_word-break.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/typography/_word-break.md'
+          ).then(wrapDoc)
        )
      }
    ]
@ -535,9 +587,9 @@ export const cssDocs = [
        label: 'Background Color',
        path: '/zh-CN/style/background/background-color',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/background/_background-color.scss').then(
-            wrapDoc
-          )
+          import(
+            '../../packages/amis-ui/scss/helper/background/_background-color.md'
+          ).then(wrapDoc)
        )
      }
    ]
@ -550,7 +602,9 @@ export const cssDocs = [
        label: 'Border Radius',
        path: '/zh-CN/style/border/border-radius',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/border/_border-radius.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/border/_border-radius.md'
+          ).then(wrapDoc)
        )
      },

@ -558,7 +612,9 @@ export const cssDocs = [
        label: 'Border Width',
        path: '/zh-CN/style/border/border-width',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/border/_border-width.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/border/_border-width.md'
+          ).then(wrapDoc)
        )
      },

@ -566,7 +622,9 @@ export const cssDocs = [
        label: 'Border Color',
        path: '/zh-CN/style/border/border-color',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/border/_border-color.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/border/_border-color.md'
+          ).then(wrapDoc)
        )
      },

@ -574,7 +632,9 @@ export const cssDocs = [
        label: 'Border Style',
        path: '/zh-CN/style/border/border-style',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/border/_border-style.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/border/_border-style.md'
+          ).then(wrapDoc)
        )
      }
    ]
@ -587,7 +647,9 @@ export const cssDocs = [
        label: 'Box Shadow',
        path: '/zh-CN/style/effect/box-shadow',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/effect/_box-shadow.scss').then(wrapDoc)
+          import(
+            '../../packages/amis-ui/scss/helper/effect/_box-shadow.md'
+          ).then(wrapDoc)
        )
      },

@ -595,7 +657,9 @@ export const cssDocs = [
        label: 'Opacity',
        path: '/zh-CN/style/effect/opacity',
        component: React.lazy(() =>
-          import('amis-ui/scss/helper/effect/_opacity.scss').then(wrapDoc)
+          import('../../packages/amis-ui/scss/helper/effect/_opacity.md').then(
+            wrapDoc
+          )
        )
      }
    ]
--- a/examples/components/EventAction/cmpt-event-action/FormEvent.jsx
+++ b/examples/components/EventAction/cmpt-event-action/FormEvent.jsx
@ -176,16 +176,6 @@ export default {
            }
          ]
        },
-        submitSucc: {
-          actions: [
-            {
-              actionType: 'toast',
-              args: {
-                msg: '提交成功：${event.data|json}'
-              }
-            }
-          ]
-        },
        submitSucc: {
          actions: [
            {
@ -254,7 +244,7 @@ export default {
    {
      type: 'form',
      debug: true,
-      title: "表单：提交表单无target，无api，只触发提交成功事件",
+      title: '表单：提交表单无target，无api，只触发提交成功事件',
      body: [
        {
          type: 'input-text',
@ -284,7 +274,7 @@ export default {
              }
            }
          ]
-        },
+        }
      }
    }
  ]
--- a/examples/components/Form/Custom.tsx
+++ b/examples/components/Form/Custom.tsx
--- a/examples/components/Form/Static.jsx
+++ b/examples/components/Form/Static.jsx
@ -117,8 +117,7 @@ export default {
          imageCaption: 'jfe fjkda fejfkda fejk fdajf dajfe jfkda',
          popOver: {
            title: '查看大图',
-            body:
-              '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
+            body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
          }
        },

--- a/examples/components/Form/SwitchDisplay.jsx
+++ b/examples/components/Form/SwitchDisplay.jsx
--- a/examples/components/MdRenderer.jsx
+++ b/examples/components/MdRenderer.jsx
@ -157,6 +157,7 @@ class Preview extends React.Component {
 }

 export default function (doc) {
+  doc = doc.default || doc;
  return class extends React.Component {
    popoverDom = null;

--- a/examples/components/SchemaRender.jsx
+++ b/examples/components/SchemaRender.jsx
@ -2,7 +2,6 @@ import React from 'react';
 import {render, toast, Button, LazyComponent, Drawer} from 'amis';
 import axios from 'axios';
 import Portal from 'react-overlays/Portal';
-import {toast} from 'amis';
 import {normalizeLink} from 'amis-core';
 import {withRouter} from 'react-router';
 import copy from 'copy-to-clipboard';
--- a/index.html
+++ b/index.html
@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <title>amis - 低代码前端框架</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link
+      type="image/x-icon"
+      rel="shortcut icon"
+      href="./examples/static/favicon.png"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <link rel="stylesheet" href="./examples/static/iconfont.css" />
+    <link
+      rel="stylesheet"
+      href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
+    />
+    <link
+      rel="stylesheet"
+      href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
+    />
+    <link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
+    <link rel="stylesheet" href="./examples/doc.css" />
+
+    <link rel="stylesheet" href="./examples/style.scss" />
+    <style>
+      .app-wrapper,
+      .schema-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+    <script type="module">
+      let theme = localStorage.getItem('amis-theme') || 'cxd';
+      if (theme === 'default') {
+        theme = 'cxd';
+      }
+
+      ['ang', 'cxd', 'dark', 'antd'].forEach(key => {
+        const link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('title', key);
+        if (theme !== key) {
+          link.setAttribute('disabled', 'disabled');
+        }
+        link.setAttribute(
+          'href',
+          new URL(`./packages/amis/lib/themes/${key}.css`, import.meta.url).href
+        );
+        document.head.appendChild(link);
+      });
+    </script>
+    <link rel="stylesheet" href="./packages/amis/lib/helper.css" />
+  </head>
+
+  <body>
+    <div id="root" class="app-wrapper"></div>
+    <script type="text/javascript">
+      if (location.hostname !== 'localhost') {
+        var _hmt = _hmt || [];
+
+        // 百度统计
+        (function () {
+          var hm = document.createElement('script');
+          hm.src =
+            'https://hm.baidu.com/hm.js?286766a21abb57abefedbd5257a26dc8';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+      }
+    </script>
+    <script type="module">
+      import {bootstrap} from './examples/index.jsx';
+
+      import * as monaco from 'monaco-editor';
+      import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+      import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+      import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+      import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+      import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+      self.MonacoEnvironment = {
+        getWorker(_, label) {
+          if (label === 'json') {
+            return new jsonWorker();
+          }
+          if (label === 'css' || label === 'scss' || label === 'less') {
+            return new cssWorker();
+          }
+          if (label === 'html' || label === 'handlebars' || label === 'razor') {
+            return new htmlWorker();
+          }
+          if (label === 'typescript' || label === 'javascript') {
+            return new tsWorker();
+          }
+          return new editorWorker();
+        }
+      };
+
+      window.enableAMISDebug = true;
+
+      const initialState = {};
+      bootstrap(document.getElementById('root'), initialState);
+    </script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -7,10 +7,11 @@
    "packages/amis"
  ],
  "scripts": {
-    "serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse",
-    "start": "concurrently --restart-tries -1 npm:serve npm:dev",
-    "stop": "fis3 server stop",
-    "dev": "fis3 release -cwd ./public",
+    "fis3-serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse",
+    "fis3": "concurrently --restart-tries -1 npm:fis3-serve npm:fis3-dev",
+    "fis3-stop": "fis3 server stop",
+    "start": "vite",
+    "fis3-dev": "fis3 release -cwd ./public",
    "deploy-gh-page": "sh ./deploy-gh-pages.sh",
    "build": "npm run build --workspaces",
    "test": "npm test --workspaces",
@ -23,14 +24,18 @@
    "publish-to-internal": "sh ./publish-to-internal.sh"
  },
  "dependencies": {
-    "marked": "^4.0.16",
    "postcss": "^8.4.14",
-    "prismjs": "^1.28.0",
    "qs": "6.9.7"
  },
  "devDependencies": {
+    "@types/express": "^4.17.14",
    "@types/jest": "^28.1.0",
+    "@types/js-yaml": "^4.0.5",
+    "@types/marked": "^4.0.7",
+    "@types/prismjs": "^1.26.0",
+    "@vitejs/plugin-react": "^2.2.0",
    "echarts": "5.4.0",
+    "express": "^4.18.2",
    "fis-optimizer-terser": "^1.0.1",
    "fis-parser-sass": "^1.2.0",
    "fis-parser-svgr": "^1.0.0",
@ -48,10 +53,20 @@
    "husky": "^8.0.0",
    "jest": "^29.0.3",
    "jest-environment-jsdom": "^29.0.3",
+    "js-yaml": "^4.1.0",
    "lerna": "^5.5.2",
+    "magic-string": "^0.26.7",
+    "marked": "^4.2.1",
+    "plugin-react-i18n": "^0.0.20",
+    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "rollup-pluginutils": "^2.8.2",
+    "setprototypeof": "^1.2.0",
    "ts-jest": "^29.0.2",
+    "vite": "^3.2.2",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-svgr": "^2.2.2",
    "zrender": "^5.3.2"
  },
  "jest": {
--- a/packages/amis-formula/.gitignore
+++ b/packages/amis-formula/.gitignore
@ -1,2 +1,3 @@
 /coverage
 /lib
+/esm
--- a/packages/amis-formula/package.json
+++ b/packages/amis-formula/package.json
@ -3,9 +3,10 @@
  "version": "2.4.0",
  "description": "负责 amis 里面的表达式实现，内置公式，编辑器等",
  "main": "lib/index.js",
+  "module": "esm/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
-    "build": "npm run clean-dist && NODE_ENV=production rollup -c && npm run genDoc && npm run declaration ",
+    "build": "npm run clean-dist && npm run genDoc && NODE_ENV=production rollup -c && cp src/doc.md lib/doc.md && cp src/doc.md esm/doc.md",
    "lib": "npm run clean-dist && NODE_ENV=production IS_LIB=1 rollup -c",
    "clean-dist": "rimraf lib/**",
    "declaration": "tsc --project tsconfig-for-declaration.json --allowJs --declaration --emitDeclarationOnly --declarationDir ./lib --rootDir ./src",
@ -14,6 +15,16 @@
    "coverage": "jest --coverage",
    "genDoc": "ts-node ./scripts/genDoc.ts"
  },
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./esm/index.js"
+    },
+    "./lib/*": {
+      "require": "./lib/*.js",
+      "import": "./esm/*.js"
+    }
+  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/aisuda/amis-tpl.git"
@ -25,7 +36,8 @@
    "formula"
  ],
  "files": [
-    "lib"
+    "lib",
+    "esm"
  ],
  "author": "fex",
  "license": "MIT",
--- a/packages/amis-formula/rollup.config.js
+++ b/packages/amis-formula/rollup.config.js
@ -3,11 +3,16 @@ import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
-import {terser} from 'rollup-plugin-terser';
 import license from 'rollup-plugin-license';
-import {name, version, main, author, dependencies} from './package.json';
-
-const isForLib = process.env.IS_LIB || false;
+import {
+  name,
+  version,
+  main,
+  module,
+  author,
+  dependencies
+} from './package.json';
+import path from 'path';

 const settings = {
  globals: {}
@ -23,52 +28,79 @@ const external = id =>
      .join('|')})`
  ).test(id);

-export default {
-  input: isForLib ? './scripts/lib.ts' : './src/index.ts',
-  output: [
-    {
-      file: isForLib ? 'lib/formula.js' : main,
-      name: isForLib ? 'formula' : main,
-      ...settings,
-      format: isForLib ? 'iife' : 'cjs',
-      plugins: [isForLib && terser()],
-      strict: !isForLib,
-      footer: isForLib
-        ? `var evaluate = formula.evaluate;
-      var momentFormat = formula.momentFormat;
-      var parse = formula.parse;`
-        : ''
-    }
-  ],
-  external: isForLib ? [] : external,
+export default [
+  {
+    input: ['./src/index.ts', './src/doc.ts'],
+    output: [
+      {
+        ...settings,
+        dir: path.dirname(main),
+        format: 'cjs',
+        exports: 'named',
+        preserveModulesRoot: './src',
+        preserveModules: true // Keep directory structure and files
+      }
+    ],
+    external: external,
+    plugins: getPlugins('cjs')
+  },
+  {
+    input: ['./src/index.ts', './src/doc.ts'],
+    output: [
+      {
+        ...settings,
+        dir: path.dirname(module),
+        format: 'esm',
+        exports: 'named',
+        preserveModulesRoot: './src',
+        preserveModules: true // Keep directory structure and files
+      }
+    ],
+    external: external,
+    plugins: getPlugins('esm')
+  }
+];

-  plugins: [
+function getPlugins(format = 'esm') {
+  const typeScriptOptions = {
+    typescript: require('typescript'),
+    sourceMap: false,
+    outputToFilesystem: true,
+
+    ...(format === 'esm'
+      ? {
+          compilerOptions: {
+            rootDir: './src',
+            outDir: path.dirname(module)
+          }
+        }
+      : {
+          compilerOptions: {
+            rootDir: './src',
+            outDir: path.dirname(main)
+          }
+        })
+  };
+
+  return [
    json(),
    resolve({
      jsnext: true,
      main: true,
      browser: true
    }),
-    typescript({
-      typescript: require('typescript'),
-      sourceMap: false,
-      outputToFilesystem: true
+    typescript(typeScriptOptions),
+    commonjs({
+      include: 'node_modules/**',
+      extensions: ['.js'],
+      ignoreGlobal: false,
+      sourceMap: false
    }),
-    commonjs(
-      isForLib
-        ? {}
-        : {
-            include: 'node_modules/**',
-            extensions: ['.js'],
-            ignoreGlobal: false,
-            sourceMap: false
-          }
-    ),
    license({
      banner: `
        ${name} v${version}
        Copyright 2021<%= moment().format('YYYY') > 2021 ? '-' + moment().format('YYYY') : null %> ${author}
      `
    })
-  ]
-};
+  ];
+}
--- a/packages/amis-formula/scripts/genDoc.ts
+++ b/packages/amis-formula/scripts/genDoc.ts
@ -4,8 +4,8 @@ import doctrine from 'doctrine';

 const workDir = path.resolve(path.dirname(__dirname));
 const jsFile = path.join(workDir, 'src/evalutor.ts');
-const outputFile = path.join(workDir, 'lib/doc.js');
-const outputMD = path.join(workDir, 'lib/doc.md');
+const outputFile = path.join(workDir, 'src/doc.ts');
+const outputMD = path.join(workDir, 'src/doc.md');

 function getFormulaComments(contents: string) {
  const comments: Array<{
@ -89,37 +89,29 @@ async function main(...params: Array<any>) {

  fs.writeFileSync(
    outputFile,
-    `/**\n * 公式文档\n */\nexports.doc = ${JSON.stringify(
-      result,
-      null,
-      2
-    )}`.replace(/\"(\w+)\"\:/g, (_, key) => `${key}:`),
-    'utf8'
-  );
-  console.log(`公式文档生成 > ${outputFile}`);
-  fs.writeFileSync(
-    outputFile.replace(/\.js$/, '.d.ts'),
-    //  可以通过以下命令生成
-    // tsc --declaration --emitDeclarationOnly --allowJs doc.js
-    [
-      `export var doc: {`,
+    `/**\n * 公式文档 请运行 \`npm run genDoc\` 自动生成\n */\nexport const doc: ${[
+      `{`,
      `  name: string;`,
      `  description: string;`,
      `  example: string;`,
      `  params: {`,
-      `      type: string;`,
-      `      name: string;`,
-      `      description: string;`,
+      `    type: string;`,
+      `    name: string;`,
+      `    description: string | null;`,
      `  }[];`,
      `  returns: {`,
-      `      type: string;`,
-      `      description: string;`,
+      `    type: string;`,
+      `    description: string | null;`,
      `  };`,
      `  namespace: string;`,
-      `}[];`
-    ].join('\n'),
+      `}[]`
+    ].join('\n')} = ${JSON.stringify(result, null, 2).replace(
+      /\"(\w+)\"\:/g,
+      (_, key) => `${key}:`
+    )};`,
    'utf8'
  );
+  console.log(`公式文档生成 > ${outputFile}`);

  const grouped: any = {};
  result.forEach((item: any) => {
--- a/packages/amis-formula/src/doc.md
+++ b/packages/amis-formula/src/doc.md
@ -0,0 +1,935 @@
+## 逻辑函数
+
+### IF
+
+用法：`IF(condition, consequent, alternate)`
+
+ * `condition:expression` 条件表达式.
+ * `consequent:any` 条件判断通过的返回结果
+ * `alternate:any` 条件判断不通过的返回结果
+
+返回：`any` 根据条件返回不同的结果
+
+示例：IF(A, B, C)
+
+如果满足条件A，则返回B，否则返回C，支持多层嵌套IF函数。
+
+也可以用表达式如：A ? B : C
+
+### AND
+
+用法：`AND(expression1, expression2, ...expressionN)`
+
+ * `conditions:...expression` 条件表达式.
+
+返回：`boolean` 
+
+条件全部符合，返回 true，否则返回 false
+
+示例：AND(语文成绩>80, 数学成绩>80)
+
+语文成绩和数学成绩都大于 80，则返回 true，否则返回 false
+
+也可以直接用表达式如：语文成绩>80 && 数学成绩>80
+
+### OR
+
+用法：`OR(expression1, expression2, ...expressionN)`
+
+ * `conditions:...expression` 条件表达式.
+
+返回：`boolean` 
+
+条件任意一个满足条件，返回 true，否则返回 false
+
+示例：OR(语文成绩>80, 数学成绩>80)
+
+语文成绩和数学成绩任意一个大于 80，则返回 true，否则返回 false
+
+也可以直接用表达式如：语文成绩>80 || 数学成绩>80
+
+### XOR
+
+用法：`XOR(condition1, condition2)`
+
+ * `condition1:expression` 条件表达式1
+ * `condition2:expression` 条件表达式2
+
+返回：`boolean` 
+
+异或处理，多个表达式组中存在奇数个真时认为真。
+
+### IFS
+
+用法：`IFS(condition1, result1, condition2, result2,...conditionN, resultN)`
+
+ * `args:...any` 条件，返回值集合
+
+返回：`any` 第一个满足条件的结果，没有命中的返回 false。
+
+判断函数集合，相当于多个 else if 合并成一个。
+
+示例：IFS(语文成绩 > 80, "优秀", 语文成绩 > 60, "良", "继续努力")
+
+如果语文成绩大于 80，则返回优秀，否则判断大于 60 分，则返回良，否则返回继续努力。
+
+## 数学函数
+
+### ABS
+
+用法：`ABS(num)`
+
+ * `num:number` 数值
+
+返回：`number` 传入数值的绝对值
+
+返回传入数字的绝对值
+
+### MAX
+
+用法：`MAX(num1, num2, ...numN)`
+
+ * `num:...number` 数值
+
+返回：`number` 所有传入值中最大的那个
+
+获取最大值，如果只有一个参数且是数组，则计算这个数组内的值
+
+### MIN
+
+用法：`MIN(num1, num2, ...numN)`
+
+ * `num:...number` 数值
+
+返回：`number` 所有传入值中最小的那个
+
+获取最小值，如果只有一个参数且是数组，则计算这个数组内的值
+
+### SUM
+
+用法：`SUM(num1, num2, ...numN)`
+
+ * `num:...number` 数值
+
+返回：`number` 所有传入数值的总和
+
+求和，如果只有一个参数且是数组，则计算这个数组内的值
+
+### INT
+
+用法：`INT(num)`
+
+ * `num:number` 数值
+
+返回：`number` 数值对应的整形
+
+将数值向下取整为最接近的整数
+
+### MOD
+
+用法：`MOD(num, divisor)`
+
+ * `num:number` 被除数
+ * `divisor:number` 除数
+
+返回：`number` 两数相除的余数
+
+返回两数相除的余数，参数 number 是被除数，divisor 是除数
+
+### PI
+
+用法：`PI()`
+
+圆周率 3.1415...
+
+### ROUND
+
+用法：`ROUND(num[, numDigits = 2])`
+
+ * `num:number` 要处理的数字
+ * `numDigits:number` 小数位数
+
+返回：`number` 传入数值四舍五入后的结果
+
+将数字四舍五入到指定的位数，可以设置小数位。
+
+### FLOOR
+
+用法：`FLOOR(num[, numDigits=2])`
+
+ * `num:number` 要处理的数字
+ * `numDigits:number` 小数位数
+
+返回：`number` 传入数值向下取整后的结果
+
+将数字向下取整到指定的位数，可以设置小数位。
+
+### CEIL
+
+用法：`CEIL(num[, numDigits=2])`
+
+ * `num:number` 要处理的数字
+ * `numDigits:number` 小数位数
+
+返回：`number` 传入数值向上取整后的结果
+
+将数字向上取整到指定的位数，可以设置小数位。
+
+### SQRT
+
+用法：`SQRT(num)`
+
+ * `num:number` 要处理的数字
+
+返回：`number` 开平方的结果
+
+开平方，参数 number 为非负数
+
+### AVG
+
+用法：`AVG(num1, num2, ...numN)`
+
+ * `num:...number` 要处理的数字
+
+返回：`number` 所有数值的平均值
+
+返回所有参数的平均值，如果只有一个参数且是数组，则计算这个数组内的值
+
+### DEVSQ
+
+用法：`DEVSQ(num1, num2, ...numN)`
+
+ * `num:...number` 要处理的数字
+
+返回：`number` 所有数值的平均值
+
+返回数据点与数据均值点之差（数据偏差）的平方和，如果只有一个参数且是数组，则计算这个数组内的值
+
+### AVEDEV
+
+用法：`AVEDEV(num1, num2, ...numN)`
+
+ * `num:...number` 要处理的数字
+
+返回：`number` 所有数值的平均值
+
+数据点到其算术平均值的绝对偏差的平均值
+
+### HARMEAN
+
+用法：`HARMEAN(num1, num2, ...numN)`
+
+ * `num:...number` 要处理的数字
+
+返回：`number` 所有数值的平均值
+
+数据点的调和平均值，如果只有一个参数且是数组，则计算这个数组内的值
+
+### LARGE
+
+用法：`LARGE(array, k)`
+
+ * `nums:array` 要处理的数字
+ * `k:number` 第几大
+
+返回：`number` 所有数值的平均值
+
+数据集中第 k 个最大值
+
+### UPPERMONEY
+
+用法：`UPPERMONEY(num)`
+
+ * `num:number` 要处理的数字
+
+返回：`string` 数值中文大写字符
+
+将数值转为中文大写金额
+
+### RAND
+
+用法：`RAND()`
+
+返回大于等于 0 且小于 1 的均匀分布随机实数。每一次触发计算都会变化。
+
+示例：`RAND()*100`
+
+返回 0-100 之间的随机数
+
+### LAST
+
+用法：`LAST(array)`
+
+ * `arr:...number` 要处理的数组
+
+返回：`any` 最后一个值
+
+取数据最后一个
+
+## 文本函数
+
+### LEFT
+
+用法：`LEFT(text, len)`
+
+ * `text:string` 要处理的文本
+ * `len:number` 要处理的长度
+
+返回：`string` 对应字符串
+
+返回传入文本左侧的指定长度字符串。
+
+### RIGHT
+
+用法：`RIGHT(text, len)`
+
+ * `text:string` 要处理的文本
+ * `len:number` 要处理的长度
+
+返回：`string` 对应字符串
+
+返回传入文本右侧的指定长度字符串。
+
+### LEN
+
+用法：`LEN(text)`
+
+ * `text:string` 要处理的文本
+
+返回：`number` 长度
+
+计算文本的长度
+
+### LENGTH
+
+用法：`LENGTH(textArr)`
+
+ * `textArr:Array<string>` 要处理的文本集合
+
+返回：`Array<number>` 长度集合
+
+计算文本集合中所有文本的长度
+
+### ISEMPTY
+
+用法：`ISEMPTY(text)`
+
+ * `text:string` 要处理的文本
+
+返回：`boolean` 判断结果
+
+判断文本是否为空
+
+### CONCATENATE
+
+用法：`CONCATENATE(text1, text2, ...textN)`
+
+ * `text:...string` 文本集合
+
+返回：`string` 连接后的文本
+
+将多个传入值连接成文本
+
+### CHAR
+
+用法：`CHAR(code)`
+
+ * `code:number` 编码值
+
+返回：`string` 指定位置的字符
+
+返回计算机字符集的数字代码所对应的字符。
+
+`CHAR(97)` 等价于 "a"
+
+### LOWER
+
+用法：`LOWER(text)`
+
+ * `text:string` 文本
+
+返回：`string` 结果文本
+
+将传入文本转成小写
+
+### UPPER
+
+用法：`UPPER(text)`
+
+ * `text:string` 文本
+
+返回：`string` 结果文本
+
+将传入文本转成大写
+
+### UPPERFIRST
+
+用法：`UPPERFIRST(text)`
+
+ * `text:string` 文本
+
+返回：`string` 结果文本
+
+将传入文本首字母转成大写
+
+### PADSTART
+
+用法：`PADSTART(text)`
+
+ * `text:string` 文本
+ * `num:number` 目标长度
+ * `pad:string` 用于补齐的文本
+
+返回：`string` 结果文本
+
+向前补齐文本长度
+
+示例 `PADSTART("6", 2, "0")`
+
+返回 `06`
+
+### CAPITALIZE
+
+用法：`CAPITALIZE(text)`
+
+ * `text:string` 文本
+
+返回：`string` 结果文本
+
+将文本转成标题
+
+示例 `CAPITALIZE("star")`
+
+返回 `Star`
+
+### ESCAPE
+
+用法：`ESCAPE(text)`
+
+ * `text:string` 文本
+
+返回：`string` 结果文本
+
+对文本进行 HTML 转义
+
+示例 `ESCAPE("<star>&")`
+
+返回 `&lt;start&gt;&amp;`
+
+### TRUNCATE
+
+用法：`TRUNCATE(text, 6)`
+
+ * `text:string` 文本
+ * `text:number` 最长长度
+
+返回：`string` 结果文本
+
+对文本长度进行截断
+
+示例 `TRUNCATE("amis.baidu.com", 6)`
+
+返回 `amis...`
+
+### BEFORELAST
+
+用法：`BEFORELAST(text, '.')`
+
+ * `text:string` 文本
+ * `delimiter:string` 结束文本
+
+返回：`string` 判断结果
+
+取在某个分隔符之前的所有字符串
+
+### SPLIT
+
+用法：`SPLIT(text, ',')`
+
+ * `text:string` 文本
+ * `delimiter:string` 文本片段
+
+返回：`Array<string>` 文本集
+
+将文本根据指定片段分割成数组
+
+示例：`SPLIT("a,b,c", ",")`
+
+返回 `["a", "b", "c"]`
+
+### TRIM
+
+用法：`TRIM(text)`
+
+ * `text:string` 文本
+
+返回：`string` 处理后的文本
+
+将文本去除前后空格
+
+### STRIPTAG
+
+用法：`STRIPTAG(text)`
+
+ * `text:string` 文本
+
+返回：`string` 处理后的文本
+
+去除文本中的 HTML 标签
+
+示例：`STRIPTAG("<b>amis</b>")`
+
+返回：`amis`
+
+### LINEBREAK
+
+用法：`LINEBREAK(text)`
+
+ * `text:string` 文本
+
+返回：`string` 处理后的文本
+
+将字符串中的换行转成 HTML `<br>`，用于简单换行的场景
+
+示例：`LINEBREAK("\n")`
+
+返回：`<br/>`
+
+### STARTSWITH
+
+用法：`STARTSWITH(text, '片段')`
+
+ * `text:string` 文本
+ * `startString:string` 起始文本
+
+返回：`string` 判断结果
+
+判断字符串(text)是否以特定字符串(startString)开始，是则返回 True，否则返回 False
+
+### ENDSWITH
+
+用法：`ENDSWITH(text, '片段')`
+
+ * `text:string` 文本
+ * `endString:string` 结束文本
+
+返回：`string` 判断结果
+
+判断字符串(text)是否以特定字符串(endString)结束，是则返回 True，否则返回 False
+
+### CONTAINS
+
+用法：`CONTAINS(text, searchText)`
+
+ * `text:string` 文本
+ * `searchText:string` 搜索文本
+
+返回：`string` 判断结果
+
+判断参数 1 中的文本是否包含参数 2 中的文本。
+
+### REPLACE
+
+用法：`REPLACE(text, search, replace)`
+
+ * `text:string` 要处理的文本
+ * `search:string` 要被替换的文本
+ * `replace:string` 要替换的文本
+
+返回：`string` 处理结果
+
+对文本进行全量替换。
+
+### SEARCH
+
+用法：`SEARCH(text, search, 0)`
+
+ * `text:string` 要处理的文本
+ * `search:string` 用来搜索的文本
+ * `start:number` 起始位置
+
+返回：`number` 命中的位置
+
+对文本进行搜索，返回命中的位置
+
+### MID
+
+用法：`MID(text, from, len)`
+
+ * `text:string` 要处理的文本
+ * `from:number` 起始位置
+ * `len:number` 处理长度
+
+返回：`number` 命中的位置
+
+返回文本字符串中从指定位置开始的特定数目的字符
+
+### BASENAME
+
+用法：`BASENAME(text)`
+
+ * `text:string` 要处理的文本
+
+返回：`string` 文件名
+
+返回路径中的文件名
+
+示例：`/home/amis/a.json`
+
+返回：a.json`
+
+## 日期函数
+
+### DATE
+
+用法：`DATE('2021-12-06 08:20:00')`
+
+创建日期对象，可以通过特定格式的字符串，或者数值。
+
+需要注意的是，其中月份的数值是从0开始的，也就是说，
+如果是12月份，你应该传入数值11。
+
+### TIMESTAMP
+
+用法：`TIMESTAMP(date, 'x')`
+
+ * `date:date` 日期对象
+ * `format:string` 时间戳格式，带毫秒传入 'x'。默认为 'X' 不带毫秒的。
+
+返回：`number` 时间戳
+
+返回时间的时间戳
+
+### TODAY
+
+用法：`TODAY()`
+
+返回今天的日期
+
+### NOW
+
+用法：`NOW()`
+
+返回现在的日期
+
+### DATETOSTR
+
+用法：`DATETOSTR(date, 'YYYY-MM-DD')`
+
+ * `date:date` 日期对象
+ * `format:string` 日期格式，默认为 "YYYY-MM-DD HH:mm:ss"
+
+返回：`number` 日期字符串
+
+将日期转成日期字符串
+
+### STARTOF
+
+用法：`STARTOF(date[unit = "day"])`
+
+ * `date:date` 日期对象
+ * `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等
+
+返回：`date` 新的日期对象
+
+返回日期的指定范围的开端
+
+### ENDOF
+
+用法：`ENDOF(date[unit = "day"])`
+
+ * `date:date` 日期对象
+ * `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等
+
+返回：`date` 新的日期对象
+
+返回日期的指定范围的末尾
+
+### YEAR
+
+用法：`YEAR(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的年份
+
+### MONTH
+
+用法：`MONTH(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的月份，这里就是自然月份。
+
+### DAY
+
+用法：`DAY(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的天
+
+### HOUR
+
+用法：`HOUR(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的小时
+
+### MINUTE
+
+用法：`MINUTE(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的分
+
+### SECOND
+
+用法：`SECOND(date)`
+
+ * `date:date` 日期对象
+
+返回：`number` 数值
+
+返回日期的秒
+
+### YEARS
+
+用法：`YEARS(endDate, startDate)`
+
+ * `endDate:date` 日期对象
+ * `startDate:date` 日期对象
+
+返回：`number` 数值
+
+返回两个日期相差多少年
+
+### MINUTES
+
+用法：`MINUTES(endDate, startDate)`
+
+ * `endDate:date` 日期对象
+ * `startDate:date` 日期对象
+
+返回：`number` 数值
+
+返回两个日期相差多少分钟
+
+### DAYS
+
+用法：`DAYS(endDate, startDate)`
+
+ * `endDate:date` 日期对象
+ * `startDate:date` 日期对象
+
+返回：`number` 数值
+
+返回两个日期相差多少天
+
+### HOURS
+
+用法：`HOURS(endDate, startDate)`
+
+ * `endDate:date` 日期对象
+ * `startDate:date` 日期对象
+
+返回：`number` 数值
+
+返回两个日期相差多少小时
+
+### DATEMODIFY
+
+用法：`DATEMODIFY(date, 2, 'days')`
+
+ * `date:date` 日期对象
+ * `num:number` 数值
+ * `unit:string` 单位：支持年、月、天等等
+
+返回：`date` 日期对象
+
+修改日期，对日期进行加减天、月份、年等操作
+
+示例：
+
+DATEMODIFY(A, -2, 'month')
+
+对日期 A 进行往前减2月的操作。
+
+### STRTODATE
+
+用法：`STRTODATE(value[, format=""])`
+
+ * `value:string` 日期字符
+ * `format:string` 日期格式
+
+返回：`date` 日期对象
+
+将字符日期转成日期对象，可以指定日期格式。
+
+示例：STRTODATE('2021/12/6', 'YYYY/MM/DD')
+
+### ISBEFORE
+
+用法：`ISBEFORE(a, b)`
+
+ * `a:date` 第一个日期
+ * `b:date` 第二个日期
+ * `unit:string` 单位，默认是 'day'， 即之比较到天
+
+返回：`boolean` 判断结果
+
+判断两个日期，是否第一个日期在第二个日期的前面
+
+### ISAFTER
+
+用法：`ISAFTER(a, b)`
+
+ * `a:date` 第一个日期
+ * `b:date` 第二个日期
+ * `unit:string` 单位，默认是 'day'， 即之比较到天
+
+返回：`boolean` 判断结果
+
+判断两个日期，是否第一个日期在第二个日期的后面
+
+### ISSAMEORBEFORE
+
+用法：`ISSAMEORBEFORE(a, b)`
+
+ * `a:date` 第一个日期
+ * `b:date` 第二个日期
+ * `unit:string` 单位，默认是 'day'， 即之比较到天
+
+返回：`boolean` 判断结果
+
+判断两个日期，是否第一个日期在第二个日期的前面或者相等
+
+### ISSAMEORAFTER
+
+用法：`ISSAMEORAFTER(a, b)`
+
+ * `a:date` 第一个日期
+ * `b:date` 第二个日期
+ * `unit:string` 单位，默认是 'day'， 即之比较到天
+
+返回：`boolean` 判断结果
+
+判断两个日期，是否第一个日期在第二个日期的后面或者相等
+
+## 数组
+
+### COUNT
+
+用法：`COUNT(arr)`
+
+ * `arr:Array<any>` 数组
+
+返回：`boolean` 结果
+
+返回数组的长度
+
+### ARRAYMAP
+
+用法：`ARRAYMAP(arr, item => item)`
+
+ * `arr:Array<any>` 数组
+ * `iterator:Array<any>` 箭头函数
+
+返回：`boolean` 结果
+
+数组做数据转换，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
+
+### ARRAYFILTER
+
+用法：`ARRAYFILTER(arr, item => item)`
+
+ * `arr:Array<any>` 数组
+ * `iterator:Array<any>` 箭头函数
+
+返回：`boolean` 结果
+
+数据做数据过滤，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
+将第二个箭头函数返回为 false 的成员过滤掉。
+
+### COMPACT
+
+用法：`COMPACT(arr)`
+
+ * `arr:Array<any>` 数组
+
+返回：`Array<any>` 结果
+
+数组过滤掉 false、null、0 和 ""
+
+示例：
+
+COMPACT([0, 1, false, 2, '', 3]) 得到 [1, 2, 3]
+
+### JOIN
+
+用法：`JOIN(arr, string)`
+
+ * `arr:Array<any>` 数组
+ * `separator:String` 分隔符
+
+返回：`String` 结果
+
+数组转成字符串
+
+示例：
+
+JOIN(['a', 'b', 'c'], '=') 得到 'a=b=c'
+
+### CONCAT
+
+用法：`CONCAT(['a', 'b', 'c'], ['1'], ['3'])`
+
+ * `arr:Array<any>` 数组
+
+返回：`Array<any>` 结果
+
+数组合并
+
+示例：
+
+CONCAT(['a', 'b', 'c'], ['1'], ['3']) 得到 ['a', 'b', 'c', '1', '3']
+
+### UNIQ
+
+用法：`UNIQ([{a: '1'}, {b: '2'}, {a: '1'}], 'x')`
+
+ * `arr:Array<any>` 数组
+ * `field:string` 字段
+
+返回：`Array<any>` 结果
+
+数组去重，第二个参数「field」，可指定根据该字段去重
+
+示例：
+
+UNIQ([{a: '1'}, {b: '2'}, {a: '1'}]， 'id')
+
+## 其他
+
+### ISTYPE
+
+用法：`ISTYPE([{a: '1'}, {b: '2'}, {a: '1'}], 'array')`
+
+ * `判断对象:string` null
+
+返回：`boolean` 结果结果
+
+判断是否为类型支持：string, number, array, date, plain-object。
+
--- a/packages/amis-formula/src/doc.ts
+++ b/packages/amis-formula/src/doc.ts
--- a/packages/amis-formula/src/filter.ts
+++ b/packages/amis-formula/src/filter.ts
@ -1,9 +1,7 @@
 import {Evaluator} from './evalutor';
 import {FilterMap} from './types';

-const entityMap: {
-  [propName: string]: string;
-} = {
+const entityMap: any = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
--- a/packages/amis-formula/tsconfig.json
+++ b/packages/amis-formula/tsconfig.json
@ -3,12 +3,14 @@
  "compilerOptions": {
    "rootDir": "./",
    "outDir": "./dist",
+    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "../../types",
      "./node_modules/@types",
      "../../node_modules/@types"
-    ]
+    ],
+    "paths": {}
  },
  "include": ["src/**/*", "scripts/**/*"],
  "references": []
--- a/packages/amis-ui/package.json
+++ b/packages/amis-ui/package.json
@ -9,6 +9,7 @@
    "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
    "dev": "rollup -c -w",
    "test": "jest",
+    "gen-doc": "ts-node ./scripts/genDoc.ts",
    "update-snapshot": "jest --updateSnapshot",
    "coverage": "jest --coverage",
    "clean-dist": "rimraf lib/** esm/**"
@ -93,7 +94,8 @@
    "rollup-plugin-scss": "^3.0.0",
    "sass": "^1.54.9",
    "ts-jest": "^29.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.6.4",
+    "ts-node": "^10.4.0"
  },
  "peerDependencies": {
    "amis-core": "*",
--- a/packages/amis-ui/scripts/GenDoc.ts
+++ b/packages/amis-ui/scripts/GenDoc.ts
@ -0,0 +1,88 @@
+import path from 'path';
+import fs from 'fs';
+import {promisify} from 'util';
+
+const readdir = promisify(fs.readdir);
+const statPath = promisify(fs.stat);
+
+const DIR = path.join(__dirname, '../scss/helper');
+export async function main() {
+  const files = await getFiles(DIR);
+
+  for (const relativePath of files) {
+    const filepath = path.join(DIR, relativePath);
+    const contents = await readFileAsync(filepath);
+    const markdowns: Array<string> = [];
+
+    contents.replace(
+      /\/\*\!markdown\n([\s\S]+?)\*\//g,
+      (_: string, md: string) => {
+        markdowns.push(md.trim());
+        return _;
+      }
+    );
+
+    if (markdowns.length) {
+      let mdFilePath = filepath.replace(/\.scss$/, '.md');
+      await writeFileAsync(mdFilePath, markdowns.join('\n'));
+      console.log(`write ${mdFilePath}`);
+    }
+  }
+
+  console.log('Done');
+}
+
+async function getFiles(
+  dir: string,
+  prefix: string = '',
+  ret: Array<string> = []
+) {
+  const files = await readdir(dir);
+
+  for (let i = 0, len = files.length; i < len; i++) {
+    const name = files[i];
+    const filepath = path.join(dir, name);
+    const stat = await statPath(filepath);
+
+    if (stat.isDirectory()) {
+      await getFiles(filepath, prefix ? path.join(prefix, name) : name, ret);
+    } else {
+      ret.push(prefix ? path.join(prefix, name) : name);
+    }
+  }
+
+  return ret;
+}
+
+function readFileAsync(filename: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    fs.readFile(filename, 'utf8', (err, data) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(data);
+      }
+    });
+  });
+}
+
+function writeFileAsync(filename: string, content: string): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    fs.writeFile(
+      filename,
+      content,
+      {
+        encoding: 'utf8'
+      },
+      err => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      }
+    );
+  });
+}
+
+main().catch(e => console.error(e));
--- a/packages/amis-ui/scss/helper/background/_background-color.md
+++ b/packages/amis-ui/scss/helper/background/_background-color.md
@ -0,0 +1,131 @@
+---
+title: 背景色
+---
+
+| Class       | Properties               |   Demo   |
+| ----------- | ------------------------ | -------- |
+| bg-none | background: none !important | <span  style="background: none !important;" class="w-24 h-6"></div> |
+| bg-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-black | background: #000 | <div style="background: #000;" class="w-24 h-6"></div> |
+| bg-white | background: #fff | <div style="background: #fff;" class="w-24 h-6"></div> |
+| bg-primary | background: #007bff | <div style="background: #007bff;" class="w-24 h-6"></div> |
+| bg-secondary | background: #6c757d | <div style="background: #6c757d;" class="w-24 h-6"></div> |
+| bg-success | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
+| bg-info | background: #007bff | <div style="background: #007bff" class="w-24 h-6"></div> |
+| bg-warning | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
+| bg-danger | background: #dc3545 | <div style="background: #dc3545;" class="w-24 h-6"></div> |
+| bg-light | background: #f8f9fa | <div style="background: #f8f9fa;" class="w-24 h-6"></div> |
+| bg-dark | background: #343a40 | <div style="background: #343a40;" class="w-24 h-6"></div> |
+| bg-gray-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-gray-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-gray-50 | background: #f9fafb | <div style="background: #f9fafb;" class="w-24 h-6"></div> |
+| bg-gray-100 | background: #f3f4f6 | <div style="background: #f3f4f6;" class="w-24 h-6"></div> |
+| bg-gray-200 | background: #e5e7eb | <div style="background: #e5e7eb;" class="w-24 h-6"></div> |
+| bg-gray-300 | background: #d1d5db | <div style="background: #d1d5db;" class="w-24 h-6"></div> |
+| bg-gray-400 | background: #9ca3af | <div style="background: #9ca3af;" class="w-24 h-6"></div> |
+| bg-gray-500 | background: #6b7280 | <div style="background: #6b7280;" class="w-24 h-6"></div> |
+| bg-gray-600 | background: #4b5563 | <div style="background: #4b5563;" class="w-24 h-6"></div> |
+| bg-gray-700 | background: #374151 | <div style="background: #374151;" class="w-24 h-6"></div> |
+| bg-gray-800 | background: #1f2937 | <div style="background: #1f2937;" class="w-24 h-6"></div> |
+| bg-gray-900 | background: #111827 | <div style="background: #111827;" class="w-24 h-6"></div> |
+| bg-red-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-red-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-red-50 | background: #fef2f2 | <div style="background: #fef2f2;" class="w-24 h-6"></div> |
+| bg-red-100 | background: #fee2e2 | <div style="background: #fee2e2;" class="w-24 h-6"></div> |
+| bg-red-200 | background: #fecaca | <div style="background: #fecaca;" class="w-24 h-6"></div> |
+| bg-red-300 | background: #fca5a5 | <div style="background: #fca5a5;" class="w-24 h-6"></div> |
+| bg-red-400 | background: #f87171 | <div style="background: #f87171;" class="w-24 h-6"></div> |
+| bg-red-500 | background: #ef4444 | <div style="background: #ef4444;" class="w-24 h-6"></div> |
+| bg-red-600 | background: #dc2626 | <div style="background: #dc2626;" class="w-24 h-6"></div> |
+| bg-red-700 | background: #b91c1c | <div style="background: #b91c1c;" class="w-24 h-6"></div> |
+| bg-red-800 | background: #991b1b | <div style="background: #991b1b;" class="w-24 h-6"></div> |
+| bg-red-900 | background: #7f1d1d | <div style="background: #7f1d1d;" class="w-24 h-6"></div> |
+| bg-yellow-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-yellow-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-yellow-50 | background: #fffbeb | <div style="background: #fffbeb;" class="w-24 h-6"></div> |
+| bg-yellow-100 | background: #fef3c7 | <div style="background: #fef3c7;" class="w-24 h-6"></div> |
+| bg-yellow-200 | background: #fde68a | <div style="background: #fde68a;" class="w-24 h-6"></div> |
+| bg-yellow-300 | background: #fcd34d | <div style="background: #fcd34d;" class="w-24 h-6"></div> |
+| bg-yellow-400 | background: #fbbf24 | <div style="background: #fbbf24;" class="w-24 h-6"></div> |
+| bg-yellow-500 | background: #f59e0b | <div style="background: #f59e0b;" class="w-24 h-6"></div> |
+| bg-yellow-600 | background: #d97706 | <div style="background: #d97706;" class="w-24 h-6"></div> |
+| bg-yellow-700 | background: #b45309 | <div style="background: #b45309;" class="w-24 h-6"></div> |
+| bg-yellow-800 | background: #92400e | <div style="background: #92400e;" class="w-24 h-6"></div> |
+| bg-yellow-900 | background: #78350f | <div style="background: #78350f;" class="w-24 h-6"></div> |
+| bg-green-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-green-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-green-50 | background: #ecfdf5 | <div style="background: #ecfdf5;" class="w-24 h-6"></div> |
+| bg-green-100 | background: #d1fae5 | <div style="background: #d1fae5;" class="w-24 h-6"></div> |
+| bg-green-200 | background: #a7f3d0 | <div style="background: #a7f3d0;" class="w-24 h-6"></div> |
+| bg-green-300 | background: #6ee7b7 | <div style="background: #6ee7b7;" class="w-24 h-6"></div> |
+| bg-green-400 | background: #34d399 | <div style="background: #34d399;" class="w-24 h-6"></div> |
+| bg-green-500 | background: #10b981 | <div style="background: #10b981;" class="w-24 h-6"></div> |
+| bg-green-600 | background: #059669 | <div style="background: #059669;" class="w-24 h-6"></div> |
+| bg-green-700 | background: #047857 | <div style="background: #047857;" class="w-24 h-6"></div> |
+| bg-green-800 | background: #065f46 | <div style="background: #065f46;" class="w-24 h-6"></div> |
+| bg-green-900 | background: #064e3b | <div style="background: #064e3b;" class="w-24 h-6"></div> |
+| bg-blue-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-blue-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-blue-50 | background: #eff6ff | <div style="background: #eff6ff;" class="w-24 h-6"></div> |
+| bg-blue-100 | background: #dbeafe | <div style="background: #dbeafe;" class="w-24 h-6"></div> |
+| bg-blue-200 | background: #bfdbfe | <div style="background: #bfdbfe;" class="w-24 h-6"></div> |
+| bg-blue-300 | background: #93c5fd | <div style="background: #93c5fd;" class="w-24 h-6"></div> |
+| bg-blue-400 | background: #60a5fa | <div style="background: #60a5fa;" class="w-24 h-6"></div> |
+| bg-blue-500 | background: #3b82f6 | <div style="background: #3b82f6;" class="w-24 h-6"></div> |
+| bg-blue-600 | background: #2563eb | <div style="background: #2563eb;" class="w-24 h-6"></div> |
+| bg-blue-700 | background: #1d4ed8 | <div style="background: #1d4ed8;" class="w-24 h-6"></div> |
+| bg-blue-800 | background: #1e40af | <div style="background: #1e40af;" class="w-24 h-6"></div> |
+| bg-blue-900 | background: #1e3a8a | <div style="background: #1e3a8a;" class="w-24 h-6"></div> |
+| bg-cyan-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-cyan-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-cyan-50 | background: #ecfeff | <div style="background: #ecfeff;" class="w-24 h-6"></div> |
+| bg-cyan-100 | background: #cffafe | <div style="background: #cffafe;" class="w-24 h-6"></div> |
+| bg-cyan-200 | background: #a5f3fc | <div style="background: #a5f3fc;" class="w-24 h-6"></div> |
+| bg-cyan-300 | background: #67e8f9 | <div style="background: #67e8f9;" class="w-24 h-6"></div> |
+| bg-cyan-400 | background: #22d3ee | <div style="background: #22d3ee;" class="w-24 h-6"></div> |
+| bg-cyan-500 | background: #06b6d4 | <div style="background: #06b6d4;" class="w-24 h-6"></div> |
+| bg-cyan-600 | background: #0891b2 | <div style="background: #0891b2;" class="w-24 h-6"></div> |
+| bg-cyan-700 | background: #0e7490 | <div style="background: #0e7490;" class="w-24 h-6"></div> |
+| bg-cyan-800 | background: #155e75 | <div style="background: #155e75;" class="w-24 h-6"></div> |
+| bg-cyan-900 | background: #164e63 | <div style="background: #164e63;" class="w-24 h-6"></div> |
+| bg-indigo-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-indigo-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-indigo-50 | background: #eef2ff | <div style="background: #eef2ff;" class="w-24 h-6"></div> |
+| bg-indigo-100 | background: #e0e7ff | <div style="background: #e0e7ff;" class="w-24 h-6"></div> |
+| bg-indigo-200 | background: #c7d2fe | <div style="background: #c7d2fe;" class="w-24 h-6"></div> |
+| bg-indigo-300 | background: #a5b4fc | <div style="background: #a5b4fc;" class="w-24 h-6"></div> |
+| bg-indigo-400 | background: #818cf8 | <div style="background: #818cf8;" class="w-24 h-6"></div> |
+| bg-indigo-500 | background: #6366f1 | <div style="background: #6366f1;" class="w-24 h-6"></div> |
+| bg-indigo-600 | background: #4f46e5 | <div style="background: #4f46e5;" class="w-24 h-6"></div> |
+| bg-indigo-700 | background: #4338ca | <div style="background: #4338ca;" class="w-24 h-6"></div> |
+| bg-indigo-800 | background: #3730a3 | <div style="background: #3730a3;" class="w-24 h-6"></div> |
+| bg-indigo-900 | background: #312e81 | <div style="background: #312e81;" class="w-24 h-6"></div> |
+| bg-purple-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-purple-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-purple-50 | background: #f5f3ff | <div style="background: #f5f3ff;" class="w-24 h-6"></div> |
+| bg-purple-100 | background: #ede9fe | <div style="background: #ede9fe;" class="w-24 h-6"></div> |
+| bg-purple-200 | background: #ddd6fe | <div style="background: #ddd6fe;" class="w-24 h-6"></div> |
+| bg-purple-300 | background: #c4b5fd | <div style="background: #c4b5fd;" class="w-24 h-6"></div> |
+| bg-purple-400 | background: #a78bfa | <div style="background: #a78bfa;" class="w-24 h-6"></div> |
+| bg-purple-500 | background: #8b5cf6 | <div style="background: #8b5cf6;" class="w-24 h-6"></div> |
+| bg-purple-600 | background: #7c3aed | <div style="background: #7c3aed;" class="w-24 h-6"></div> |
+| bg-purple-700 | background: #6d28d9 | <div style="background: #6d28d9;" class="w-24 h-6"></div> |
+| bg-purple-800 | background: #5b21b6 | <div style="background: #5b21b6;" class="w-24 h-6"></div> |
+| bg-purple-900 | background: #4c1d95 | <div style="background: #4c1d95;" class="w-24 h-6"></div> |
+| bg-pink-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-pink-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-pink-50 | background: #fdf2f8 | <div style="background: #fdf2f8;" class="w-24 h-6"></div> |
+| bg-pink-100 | background: #fce7f3 | <div style="background: #fce7f3;" class="w-24 h-6"></div> |
+| bg-pink-200 | background: #fbcfe8 | <div style="background: #fbcfe8;" class="w-24 h-6"></div> |
+| bg-pink-300 | background: #f9a8d4 | <div style="background: #f9a8d4;" class="w-24 h-6"></div> |
+| bg-pink-400 | background: #f472b6 | <div style="background: #f472b6;" class="w-24 h-6"></div> |
+| bg-pink-500 | background: #ec4899 | <div style="background: #ec4899;" class="w-24 h-6"></div> |
+| bg-pink-600 | background: #db2777 | <div style="background: #db2777;" class="w-24 h-6"></div> |
+| bg-pink-700 | background: #be185d | <div style="background: #be185d;" class="w-24 h-6"></div> |
+| bg-pink-800 | background: #9d174d | <div style="background: #9d174d;" class="w-24 h-6"></div> |
+| bg-pink-900 | background: #831843 | <div style="background: #831843;" class="w-24 h-6"></div> |
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black`
+
+参考: [tailwindcss](https://tailwindcss.com/docs/background-color)
--- a/packages/amis-ui/scss/helper/border/_border-color.md
+++ b/packages/amis-ui/scss/helper/border/_border-color.md
@ -0,0 +1,109 @@
+---
+title: 边框颜色
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border-black | border-color: #000 |
+| border-white | border-color: #fff |
+| border-primary | border-color: #007bff |
+| border-secondary | border-color: #6c757d |
+| border-success | border-color: #28a745 |
+| border-info | border-color: #007bff |
+| border-warning | border-color: #28a745 |
+| border-danger | border-color: #dc3545 |
+| border-light | border-color: #f8f9fa |
+| border-dark | border-color: #343a40 |
+| border-gray-50 | border-color: #f9fafb |
+| border-gray-100 | border-color: #f3f4f6 |
+| border-gray-200 | border-color: #e5e7eb |
+| border-gray-300 | border-color: #d1d5db |
+| border-gray-400 | border-color: #9ca3af |
+| border-gray-500 | border-color: #6b7280 |
+| border-gray-600 | border-color: #4b5563 |
+| border-gray-700 | border-color: #374151 |
+| border-gray-800 | border-color: #1f2937 |
+| border-gray-900 | border-color: #111827 |
+| border-red-50 | border-color: #fef2f2 |
+| border-red-100 | border-color: #fee2e2 |
+| border-red-200 | border-color: #fecaca |
+| border-red-300 | border-color: #fca5a5 |
+| border-red-400 | border-color: #f87171 |
+| border-red-500 | border-color: #ef4444 |
+| border-red-600 | border-color: #dc2626 |
+| border-red-700 | border-color: #b91c1c |
+| border-red-800 | border-color: #991b1b |
+| border-red-900 | border-color: #7f1d1d |
+| border-yellow-50 | border-color: #fffbeb |
+| border-yellow-100 | border-color: #fef3c7 |
+| border-yellow-200 | border-color: #fde68a |
+| border-yellow-300 | border-color: #fcd34d |
+| border-yellow-400 | border-color: #fbbf24 |
+| border-yellow-500 | border-color: #f59e0b |
+| border-yellow-600 | border-color: #d97706 |
+| border-yellow-700 | border-color: #b45309 |
+| border-yellow-800 | border-color: #92400e |
+| border-yellow-900 | border-color: #78350f |
+| border-green-50 | border-color: #ecfdf5 |
+| border-green-100 | border-color: #d1fae5 |
+| border-green-200 | border-color: #a7f3d0 |
+| border-green-300 | border-color: #6ee7b7 |
+| border-green-400 | border-color: #34d399 |
+| border-green-500 | border-color: #10b981 |
+| border-green-600 | border-color: #059669 |
+| border-green-700 | border-color: #047857 |
+| border-green-800 | border-color: #065f46 |
+| border-green-900 | border-color: #064e3b |
+| border-blue-50 | border-color: #eff6ff |
+| border-blue-100 | border-color: #dbeafe |
+| border-blue-200 | border-color: #bfdbfe |
+| border-blue-300 | border-color: #93c5fd |
+| border-blue-400 | border-color: #60a5fa |
+| border-blue-500 | border-color: #3b82f6 |
+| border-blue-600 | border-color: #2563eb |
+| border-blue-700 | border-color: #1d4ed8 |
+| border-blue-800 | border-color: #1e40af |
+| border-blue-900 | border-color: #1e3a8a |
+| border-cyan-50 | border-color: #ecfeff |
+| border-cyan-100 | border-color: #cffafe |
+| border-cyan-200 | border-color: #a5f3fc |
+| border-cyan-300 | border-color: #67e8f9 |
+| border-cyan-400 | border-color: #22d3ee |
+| border-cyan-500 | border-color: #06b6d4 |
+| border-cyan-600 | border-color: #0891b2 |
+| border-cyan-700 | border-color: #0e7490 |
+| border-cyan-800 | border-color: #155e75 |
+| border-cyan-900 | border-color: #164e63 |
+| border-indigo-50 | border-color: #eef2ff |
+| border-indigo-100 | border-color: #e0e7ff |
+| border-indigo-200 | border-color: #c7d2fe |
+| border-indigo-300 | border-color: #a5b4fc |
+| border-indigo-400 | border-color: #818cf8 |
+| border-indigo-500 | border-color: #6366f1 |
+| border-indigo-600 | border-color: #4f46e5 |
+| border-indigo-700 | border-color: #4338ca |
+| border-indigo-800 | border-color: #3730a3 |
+| border-indigo-900 | border-color: #312e81 |
+| border-purple-50 | border-color: #f5f3ff |
+| border-purple-100 | border-color: #ede9fe |
+| border-purple-200 | border-color: #ddd6fe |
+| border-purple-300 | border-color: #c4b5fd |
+| border-purple-400 | border-color: #a78bfa |
+| border-purple-500 | border-color: #8b5cf6 |
+| border-purple-600 | border-color: #7c3aed |
+| border-purple-700 | border-color: #6d28d9 |
+| border-purple-800 | border-color: #5b21b6 |
+| border-purple-900 | border-color: #4c1d95 |
+| border-pink-50 | border-color: #fdf2f8 |
+| border-pink-100 | border-color: #fce7f3 |
+| border-pink-200 | border-color: #fbcfe8 |
+| border-pink-300 | border-color: #f9a8d4 |
+| border-pink-400 | border-color: #f472b6 |
+| border-pink-500 | border-color: #ec4899 |
+| border-pink-600 | border-color: #db2777 |
+| border-pink-700 | border-color: #be185d |
+| border-pink-800 | border-color: #9d174d |
+| border-pink-900 | border-color: #831843 |
+
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:border-black`
--- a/packages/amis-ui/scss/helper/border/_border-radius.md
+++ b/packages/amis-ui/scss/helper/border/_border-radius.md
@ -0,0 +1,86 @@
+---
+title: 边框圆角
+---
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| rounded-none | border-radius: 0px |
+| rounded-sm | border-radius: 0.125rem |
+| rounded | border-radius: 0.25rem |
+| rounded-md | border-radius: 0.375rem |
+| rounded-lg | border-radius: 0.5rem |
+| rounded-xl | border-radius: 0.75rem |
+| rounded-2xl | border-radius: 1rem |
+| rounded-3xl | border-radius: 1.5rem |
+| rounded-full | border-radius: 9999px |
+| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px |
+| rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem |
+| rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem |
+| rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem |
+| rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem |
+| rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem |
+| rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem |
+| rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem |
+| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px |
+| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px |
+| rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem |
+| rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem |
+| rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem |
+| rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem |
+| rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem |
+| rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem |
+| rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem |
+| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px |
+| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px |
+| rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
+| rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
+| rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
+| rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
+| rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
+| rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem |
+| rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
+| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px |
+| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px |
+| rounded-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
+| rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
+| rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
+| rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
+| rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
+| rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem |
+| rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
+| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px |
+| rounded-tl-none | border-top-left-radius: 0px |
+| rounded-tr-none | border-top-right-radius: 0px |
+| rounded-br-none | border-bottom-right-radius: 0px |
+| rounded-bl-none | border-bottom-left-radius: 0px |
+| rounded-tl-sm | border-top-left-radius: 0.125rem |
+| rounded-tr-sm | border-top-right-radius: 0.125rem |
+| rounded-br-sm | border-bottom-right-radius: 0.125rem |
+| rounded-bl-sm | border-bottom-left-radius: 0.125rem |
+| rounded-tl | border-top-left-radius: 0.25rem |
+| rounded-tr | border-top-right-radius: 0.25rem |
+| rounded-br | border-bottom-right-radius: 0.25rem |
+| rounded-bl | border-bottom-left-radius: 0.25rem |
+| rounded-tl-md | border-top-left-radius: 0.375rem |
+| rounded-tr-md | border-top-right-radius: 0.375rem |
+| rounded-br-md | border-bottom-right-radius: 0.375rem |
+| rounded-bl-md | border-bottom-left-radius: 0.375rem |
+| rounded-tl-lg | border-top-left-radius: 0.5rem |
+| rounded-tr-lg | border-top-right-radius: 0.5rem |
+| rounded-br-lg | border-bottom-right-radius: 0.5rem |
+| rounded-bl-lg | border-bottom-left-radius: 0.5rem |
+| rounded-tl-xl | border-top-left-radius: 0.75rem |
+| rounded-tr-xl | border-top-right-radius: 0.75rem |
+| rounded-br-xl | border-bottom-right-radius: 0.75rem |
+| rounded-bl-xl | border-bottom-left-radius: 0.75rem |
+| rounded-tl-2xl | border-top-left-radius: 1rem |
+| rounded-tr-2xl | border-top-right-radius: 1rem |
+| rounded-br-2xl | border-bottom-right-radius: 1rem |
+| rounded-bl-2xl | border-bottom-left-radius: 1rem |
+| rounded-tl-3xl | border-top-left-radius: 1.5rem |
+| rounded-tr-3xl | border-top-right-radius: 1.5rem |
+| rounded-br-3xl | border-bottom-right-radius: 1.5rem |
+| rounded-bl-3xl | border-bottom-left-radius: 1.5rem |
+| rounded-tl-full | border-top-left-radius: 9999px |
+| rounded-tr-full | border-top-right-radius: 9999px |
+| rounded-br-full | border-bottom-right-radius: 9999px |
+| rounded-bl-full | border-bottom-left-radius: 9999px |
--- a/packages/amis-ui/scss/helper/border/_border-style.md
+++ b/packages/amis-ui/scss/helper/border/_border-style.md
@ -0,0 +1,11 @@
+---
+title: 边框样式
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border-solid | border-style: solid |
+| border-dashed | border-style: dashed |
+| border-dotted | border-style: dotted |
+| border-double | border-style: double |
+| border-none | border-style: none |
--- a/packages/amis-ui/scss/helper/border/_border-width.md
+++ b/packages/amis-ui/scss/helper/border/_border-width.md
@ -0,0 +1,31 @@
+---
+title: 边框宽度
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border | border-width: 1px |
+| border-0 | border-width: 0px |
+| border-2 | border-width: 2px |
+| border-4 | border-width: 4px |
+| border-8 | border-width: 8px |
+| border-t | border-top-width: 1px |
+| border-r | border-right-width: 1px |
+| border-b | border-bottom-width: 1px |
+| border-l | border-left-width: 1px |
+| border-t-0 | border-top-width: 0px |
+| border-r-0 | border-right-width: 0px |
+| border-b-0 | border-bottom-width: 0px |
+| border-l-0 | border-left-width: 0px |
+| border-t-2 | border-top-width: 2px |
+| border-r-2 | border-right-width: 2px |
+| border-b-2 | border-bottom-width: 2px |
+| border-l-2 | border-left-width: 2px |
+| border-t-4 | border-top-width: 4px |
+| border-r-4 | border-right-width: 4px |
+| border-b-4 | border-bottom-width: 4px |
+| border-l-4 | border-left-width: 4px |
+| border-t-8 | border-top-width: 8px |
+| border-r-8 | border-right-width: 8px |
+| border-b-8 | border-bottom-width: 8px |
+| border-l-8 | border-left-width: 8px |
--- a/packages/amis-ui/scss/helper/box-alignment/_align-content.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_align-content.md
@ -0,0 +1,12 @@
+---
+title: Align Content
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| content-center | align-content: center |
+| content-start | align-content: flex-start |
+| content-end | align-content: flex-end |
+| content-between | align-content: space-between |
+| content-around | align-content: space-around |
+| content-evenly | align-content: space-evenly |
--- a/packages/amis-ui/scss/helper/box-alignment/_align-items.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_align-items.md
@ -0,0 +1,11 @@
+---
+title: Align Items
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| items-start | align-items: flex-start |
+| items-end | align-items: flex-end |
+| items-center | align-items: center |
+| items-baseline | align-items: baseline |
+| items-stretch | align-items: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_align-self.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_align-self.md
@ -0,0 +1,11 @@
+---
+title: Align Self
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| self-auto | align-self: auto |
+| self-start | align-self: flex-start |
+| self-end | align-self: flex-end |
+| self-center | align-self: center |
+| self-stretch | align-self: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_justify-content.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_justify-content.md
@ -0,0 +1,12 @@
+---
+title: Jsutify Content
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-start | justify-content: flex-start |
+| justify-end | justify-content: flex-end |
+| justify-center | justify-content: center |
+| justify-between | justify-content: space-between |
+| justify-around | justify-content: space-around |
+| justify-evenly | justify-content: space-evenly |
--- a/packages/amis-ui/scss/helper/box-alignment/_justify-items.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_justify-items.md
@ -0,0 +1,11 @@
+---
+title: Justify Items
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-items-auto | justify-items: auto |
+| justify-items-start | justify-items: start |
+| justify-items-end | justify-items: end |
+| justify-items-center | justify-items: center |
+| justify-items-stretch | justify-items: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_justify-self.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_justify-self.md
@ -0,0 +1,11 @@
+---
+title: Jsutify Self
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| justify-self-auto | justify-self: auto |
+| justify-self-start | justify-self: start |
+| justify-self-end | justify-self: end |
+| justify-self-center | justify-self: center |
+| justify-self-stretch | justify-self: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_place-content.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_place-content.md
@ -0,0 +1,13 @@
+---
+title: Place Content
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-content-center | place-content: center |
+| place-content-start | place-content: start |
+| place-content-end | place-content: end |
+| place-content-between | place-content: space-between |
+| place-content-around | place-content: space-around |
+| place-content-evenly | place-content: space-evenly |
+| place-content-stretch | place-content: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_place-items.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_place-items.md
@ -0,0 +1,11 @@
+---
+title: Place Items
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-items-auto | place-items: auto |
+| place-items-start | place-items: start |
+| place-items-end | place-items: end |
+| place-items-center | place-items: center |
+| place-items-stretch | place-items: stretch |
--- a/packages/amis-ui/scss/helper/box-alignment/_place-self.md
+++ b/packages/amis-ui/scss/helper/box-alignment/_place-self.md
@ -0,0 +1,11 @@
+---
+title: Place Self
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| place-self-auto | place-self: auto |
+| place-self-start | place-self: start |
+| place-self-end | place-self: end |
+| place-self-center | place-self: center |
+| place-self-stretch | place-self: stretch |
--- a/packages/amis-ui/scss/helper/effect/_box-shadow.md
+++ b/packages/amis-ui/scss/helper/effect/_box-shadow.md
@ -0,0 +1,16 @@
+---
+title: Box Shadow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
+| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
+| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) |
+| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
+| shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04) |
+| shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) |
+| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) |
+| shadow-none | box-shadow: none |
+
+还有 hover、active、focus 扩展，比如 `hover:shadow-sm`
--- a/packages/amis-ui/scss/helper/effect/_opacity.md
+++ b/packages/amis-ui/scss/helper/effect/_opacity.md
@ -0,0 +1,21 @@
+---
+title: Opacity
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| opacity-0 | opacity: 0 |
+| opacity-5 | opacity: 0.05 |
+| opacity-10 | opacity: 0.1 |
+| opacity-20 | opacity: 0.2 |
+| opacity-25 | opacity: 0.25 |
+| opacity-30 | opacity: 0.3 |
+| opacity-40 | opacity: 0.4 |
+| opacity-50 | opacity: 0.5 |
+| opacity-60 | opacity: 0.6 |
+| opacity-70 | opacity: 0.7 |
+| opacity-75 | opacity: 0.75 |
+| opacity-80 | opacity: 0.8 |
+| opacity-90 | opacity: 0.9 |
+| opacity-95 | opacity: 0.95 |
+| opacity-100 | opacity: 1 |
--- a/packages/amis-ui/scss/helper/flex/_direction.md
+++ b/packages/amis-ui/scss/helper/flex/_direction.md
@ -0,0 +1,10 @@
+---
+title: Flex Direction
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-row | flex-direction: row |
+| flex-row-reverse | flex-direction: row-reverse |
+| flex-col | flex-direction: column |
+| flex-col-reverse | flex-direction: column-reverse |
--- a/packages/amis-ui/scss/helper/flex/_flex.md
+++ b/packages/amis-ui/scss/helper/flex/_flex.md
@ -0,0 +1,10 @@
+---
+title: Flex
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-1 | flex: 1 1 0% |
+| flex-auto | flex: 1 1 auto |
+| flex-initial | flex: 0 1 auto |
+| flex-none | flex: none |
--- a/packages/amis-ui/scss/helper/flex/_grow.md
+++ b/packages/amis-ui/scss/helper/flex/_grow.md
@ -0,0 +1,8 @@
+---
+title: Flex Grow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-grow-0 | flex-grow: 0 |
+| flex-grow | flex-grow: 1 |
--- a/packages/amis-ui/scss/helper/flex/_order.md
+++ b/packages/amis-ui/scss/helper/flex/_order.md
@ -0,0 +1,20 @@
+---
+title: Flex Order
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| order-1 | order: 1 |
+| order-2 | order: 2 |
+| order-3 | order: 3 |
+| order-4 | order: 4 |
+| order-5 | order: 5 |
+| order-6 | order: 6 |
+| order-7 | order: 7 |
+| order-8 | order: 8 |
+| order-9 | order: 9 |
+| order-10 | order: 10 |
+| order-11 | order: 11 |
+| order-12 | order: 12 |
+| order-first | order: -9999 |
+| order-last | order: 9999 |
--- a/packages/amis-ui/scss/helper/flex/_shrink.md
+++ b/packages/amis-ui/scss/helper/flex/_shrink.md
@ -0,0 +1,8 @@
+---
+title: Flex Shrink
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-shrink-0 | flex-shrink: 0 |
+| flex-shrink | flex-shrink: 1 |
--- a/packages/amis-ui/scss/helper/flex/_wrap.md
+++ b/packages/amis-ui/scss/helper/flex/_wrap.md
@ -0,0 +1,9 @@
+---
+title: Flex Wrap
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| flex-wrap | flex-wrap: wrap |
+| flex-wrap-reverse | flex-wrap: wrap-reverse |
+| flex-nowrap | flex-wrap: nowrap |
--- a/packages/amis-ui/scss/helper/grid/_auto-columns.md
+++ b/packages/amis-ui/scss/helper/grid/_auto-columns.md
@ -0,0 +1,10 @@
+---
+title: Grid Auto Columns
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| auto-cols-auto | grid-auto-columns: auto |
+| auto-cols-min | grid-auto-columns: min-content |
+| auto-cols-max | grid-auto-columns: max-content |
+| auto-cols-fr | grid-auto-columns: minmax(0, 1fr) |
--- a/packages/amis-ui/scss/helper/grid/_auto-flow.md
+++ b/packages/amis-ui/scss/helper/grid/_auto-flow.md
@ -0,0 +1,10 @@
+---
+title: Grid Auto Flow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-flow-row | grid-auto-flow: row |
+| grid-flow-col | grid-auto-flow: column |
+| grid-flow-row-dense | grid-auto-flow: row dense |
+| grid-flow-col-dense | grid-auto-flow: column dense |
--- a/packages/amis-ui/scss/helper/grid/_auto-rows.md
+++ b/packages/amis-ui/scss/helper/grid/_auto-rows.md
@ -0,0 +1,10 @@
+---
+title: Grid Auto Flow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| auto-rows-auto | grid-auto-rows: auto |
+| auto-rows-min | grid-auto-rows: min-content |
+| auto-rows-max | grid-auto-rows: max-content |
+| auto-rows-fr | grid-auto-rows: minmax(0, 1fr) |
--- a/packages/amis-ui/scss/helper/grid/_column-start-end.md
+++ b/packages/amis-ui/scss/helper/grid/_column-start-end.md
@ -0,0 +1,48 @@
+---
+title: Grid Row Start / End
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| col-auto | grid-column: auto |
+| col-span-1 | grid-column: span 1/span 1 |
+| col-span-2 | grid-column: span 2/span 2 |
+| col-span-3 | grid-column: span 3/span 3 |
+| col-span-4 | grid-column: span 4/span 4 |
+| col-span-5 | grid-column: span 5/span 5 |
+| col-span-6 | grid-column: span 6/span 6 |
+| col-span-7 | grid-column: span 7/span 7 |
+| col-span-8 | grid-column: span 8/span 8 |
+| col-span-9 | grid-column: span 9/span 9 |
+| col-span-10 | grid-column: span 10/span 10 |
+| col-span-11 | grid-column: span 11/span 1 |
+| col-span-12 | grid-column: span 12/span 12 |
+| col-span-full | grid-column: 1/-1 |
+| col-start-1 | grid-column-start: 1 |
+| col-start-2 | grid-column-start: 2 |
+| col-start-3 | grid-column-start: 3 |
+| col-start-4 | grid-column-start: 4 |
+| col-start-5 | grid-column-start: 5 |
+| col-start-6 | grid-column-start: 6 |
+| col-start-7 | grid-column-start: 7 |
+| col-start-8 | grid-column-start: 8 |
+| col-start-9 | grid-column-start: 9 |
+| col-start-10 | grid-column-start: 10 |
+| col-start-11 | grid-column-start: 11 |
+| col-start-12 | grid-column-start: 12 |
+| col-start-13 | grid-column-start: 13 |
+| col-start-auto | grid-column-start: auto |
+| col-end-1 | grid-column-end: 1 |
+| col-end-2 | grid-column-end: 2 |
+| col-end-3 | grid-column-end: 3 |
+| col-end-4 | grid-column-end: 4 |
+| col-end-5 | grid-column-end: 5 |
+| col-end-6 | grid-column-end: 6 |
+| col-end-7 | grid-column-end: 7 |
+| col-end-8 | grid-column-end: 8 |
+| col-end-9 | grid-column-end: 9 |
+| col-end-10 | grid-column-end: 10 |
+| col-end-11 | grid-column-end: 11 |
+| col-end-12 | grid-column-end: 12 |
+| col-end-13 | grid-column-end: 13 |
+| col-end-auto | grid-column-end: auto |
--- a/packages/amis-ui/scss/helper/grid/_columns.md
+++ b/packages/amis-ui/scss/helper/grid/_columns.md
@ -0,0 +1,19 @@
+---
+title: Grid Template Columns
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
+| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
+| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
+| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
+| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)) |
+| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
+| grid-cols-7 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
+| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)) |
+| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)) |
+| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)) |
+| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)) |
+| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
+| grid-cols-none | grid-template-columns: none |
--- a/packages/amis-ui/scss/helper/grid/_gap.md
+++ b/packages/amis-ui/scss/helper/grid/_gap.md
@ -0,0 +1,117 @@
+---
+title: Gap
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| gap-px | gap: 0.0625rem |
+| gap-x-px | column-gap: 0.0625rem |
+| gap-y-px | row-gap: 0.0625rem |
+| gap-0 | gap: 0 |
+| gap-x-0 | column-gap: 0 |
+| gap-y-0 | row-gap: 0 |
+| gap-none | gap: 0 |
+| gap-x-none | column-gap: 0 |
+| gap-y-none | row-gap: 0 |
+| gap-0\.5 | gap: 0.125rem |
+| gap-x-0\.5 | column-gap: 0.125rem |
+| gap-y-0\.5 | row-gap: 0.125rem |
+| gap-1 | gap: 0.25rem |
+| gap-x-1 | column-gap: 0.25rem |
+| gap-y-1 | row-gap: 0.25rem |
+| gap-1\.5 | gap: 0.375rem |
+| gap-x-1\.5 | column-gap: 0.375rem |
+| gap-y-1\.5 | row-gap: 0.375rem |
+| gap-2 | gap: 0.5rem |
+| gap-x-2 | column-gap: 0.5rem |
+| gap-y-2 | row-gap: 0.5rem |
+| gap-2\.5 | gap: 0.625rem |
+| gap-x-2\.5 | column-gap: 0.625rem |
+| gap-y-2\.5 | row-gap: 0.625rem |
+| gap-3 | gap: 0.75rem |
+| gap-x-3 | column-gap: 0.75rem |
+| gap-y-3 | row-gap: 0.75rem |
+| gap-3\.5 | gap: 0.875rem |
+| gap-x-3\.5 | column-gap: 0.875rem |
+| gap-y-3\.5 | row-gap: 0.875rem |
+| gap-4 | gap: 1rem |
+| gap-x-4 | column-gap: 1rem |
+| gap-y-4 | row-gap: 1rem |
+| gap-5 | gap: 1.25rem |
+| gap-x-5 | column-gap: 1.25rem |
+| gap-y-5 | row-gap: 1.25rem |
+| gap-6 | gap: 1.5rem |
+| gap-x-6 | column-gap: 1.5rem |
+| gap-y-6 | row-gap: 1.5rem |
+| gap-7 | gap: 1.75rem |
+| gap-x-7 | column-gap: 1.75rem |
+| gap-y-7 | row-gap: 1.75rem |
+| gap-8 | gap: 2rem |
+| gap-x-8 | column-gap: 2rem |
+| gap-y-8 | row-gap: 2rem |
+| gap-9 | gap: 2.25rem |
+| gap-x-9 | column-gap: 2.25rem |
+| gap-y-9 | row-gap: 2.25rem |
+| gap-10 | gap: 2.5rem |
+| gap-x-10 | column-gap: 2.5rem |
+| gap-y-10 | row-gap: 2.5rem |
+| gap-11 | gap: 2.75rem |
+| gap-x-11 | column-gap: 2.75rem |
+| gap-y-11 | row-gap: 2.75rem |
+| gap-12 | gap: 3rem |
+| gap-x-12 | column-gap: 3rem |
+| gap-y-12 | row-gap: 3rem |
+| gap-14 | gap: 3.5rem |
+| gap-x-14 | column-gap: 3.5rem |
+| gap-y-14 | row-gap: 3.5rem |
+| gap-16 | gap: 4rem |
+| gap-x-16 | column-gap: 4rem |
+| gap-y-16 | row-gap: 4rem |
+| gap-18 | gap: 4.5rem |
+| gap-x-18 | column-gap: 4.5rem |
+| gap-y-18 | row-gap: 4.5rem |
+| gap-20 | gap: 5rem |
+| gap-x-20 | column-gap: 5rem |
+| gap-y-20 | row-gap: 5rem |
+| gap-24 | gap: 6rem |
+| gap-x-24 | column-gap: 6rem |
+| gap-y-24 | row-gap: 6rem |
+| gap-28 | gap: 7rem |
+| gap-x-28 | column-gap: 7rem |
+| gap-y-28 | row-gap: 7rem |
+| gap-32 | gap: 8rem |
+| gap-x-32 | column-gap: 8rem |
+| gap-y-32 | row-gap: 8rem |
+| gap-36 | gap: 9rem |
+| gap-x-36 | column-gap: 9rem |
+| gap-y-36 | row-gap: 9rem |
+| gap-40 | gap: 10rem |
+| gap-x-40 | column-gap: 10rem |
+| gap-y-40 | row-gap: 10rem |
+| gap-44 | gap: 11rem |
+| gap-x-44 | column-gap: 11rem |
+| gap-y-44 | row-gap: 11rem |
+| gap-48 | gap: 12rem |
+| gap-x-48 | column-gap: 12rem |
+| gap-y-48 | row-gap: 12rem |
+| gap-52 | gap: 13rem |
+| gap-x-52 | column-gap: 13rem |
+| gap-y-52 | row-gap: 13rem |
+| gap-56 | gap: 14rem |
+| gap-x-56 | column-gap: 14rem |
+| gap-y-56 | row-gap: 14rem |
+| gap-60 | gap: 15rem |
+| gap-x-60 | column-gap: 15rem |
+| gap-y-60 | row-gap: 15rem |
+| gap-64 | gap: 16rem |
+| gap-x-64 | column-gap: 16rem |
+| gap-y-64 | row-gap: 16rem |
+| gap-72 | gap: 18rem |
+| gap-x-72 | column-gap: 18rem |
+| gap-y-72 | row-gap: 18rem |
+| gap-80 | gap: 20rem |
+| gap-x-80 | column-gap: 20rem |
+| gap-y-80 | row-gap: 20rem |
+| gap-96 | gap: 24rem |
+| gap-x-96 | column-gap: 24rem |
+| gap-y-96 | row-gap: 24rem |
--- a/packages/amis-ui/scss/helper/grid/_row-start-end.md
+++ b/packages/amis-ui/scss/helper/grid/_row-start-end.md
@ -0,0 +1,48 @@
+---
+title: Grid Row Start / End
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| row-auto | grid-row: auto |
+| row-span-1 | grid-row: span 1/span 1 |
+| row-span-2 | grid-row: span 2/span 2 |
+| row-span-3 | grid-row: span 3/span 3 |
+| row-span-4 | grid-row: span 4/span 4 |
+| row-span-5 | grid-row: span 5/span 5 |
+| row-span-6 | grid-row: span 6/span 6 |
+| row-span-7 | grid-row: span 7/span 7 |
+| row-span-8 | grid-row: span 8/span 8 |
+| row-span-9 | grid-row: span 9/span 9 |
+| row-span-10 | grid-row: span 10/span 10 |
+| row-span-11 | grid-row: span 11/span 1 |
+| row-span-12 | grid-row: span 12/span 12 |
+| row-span-full | grid-row: 1/-1 |
+| row-start-1 | grid-row-start: 1 |
+| row-start-2 | grid-row-start: 2 |
+| row-start-3 | grid-row-start: 3 |
+| row-start-4 | grid-row-start: 4 |
+| row-start-5 | grid-row-start: 5 |
+| row-start-6 | grid-row-start: 6 |
+| row-start-7 | grid-row-start: 7 |
+| row-start-8 | grid-row-start: 8 |
+| row-start-9 | grid-row-start: 9 |
+| row-start-10 | grid-row-start: 10 |
+| row-start-11 | grid-row-start: 11 |
+| row-start-12 | grid-row-start: 12 |
+| row-start-13 | grid-row-start: 13 |
+| row-start-auto | grid-row-start: auto |
+| row-end-1 | grid-row-end: 1 |
+| row-end-2 | grid-row-end: 2 |
+| row-end-3 | grid-row-end: 3 |
+| row-end-4 | grid-row-end: 4 |
+| row-end-5 | grid-row-end: 5 |
+| row-end-6 | grid-row-end: 6 |
+| row-end-7 | grid-row-end: 7 |
+| row-end-8 | grid-row-end: 8 |
+| row-end-9 | grid-row-end: 9 |
+| row-end-10 | grid-row-end: 10 |
+| row-end-11 | grid-row-end: 11 |
+| row-end-12 | grid-row-end: 12 |
+| row-end-13 | grid-row-end: 13 |
+| row-end-auto | grid-row-end: auto |
--- a/packages/amis-ui/scss/helper/grid/_rows.md
+++ b/packages/amis-ui/scss/helper/grid/_rows.md
@ -0,0 +1,13 @@
+---
+title: Grid Template Rows
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) |
+| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)) |
+| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) |
+| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)) |
+| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)) |
+| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) |
+| grid-rows-none | grid-template-rows: none |
--- a/packages/amis-ui/scss/helper/layout/_box-sizing.md
+++ b/packages/amis-ui/scss/helper/layout/_box-sizing.md
@ -0,0 +1,35 @@
+---
+title: Box Sizing
+---
+
+Box Sizing 相关样式，主要区别在于设置宽高的时候，是否包含了 padding 和 border 的大小。
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| box-border  | box-sizing: border-box;  |
+| box-content | box-sizing: content-box; |
+
+## 用法
+
+比如这个例子：左侧是 box-border 类型，整体高宽 128px。而右侧只是内容区域是 128px + 边框(2 * 4px) + padding （2 * 16px） 一共160px。
+
+```html
+<div class="flex space-x-6">
+  <div class="box-border h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
+    <div class="h-full w-full bg-red-400"></div>
+  </div>
+
+  <div class="box-content h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
+    <div class="h-full w-full bg-red-400"></div>
+  </div>
+</div>
+```
+
+## 响应式设计
+
+不支持 [「响应式设计前缀」](../../../docs/style/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_clear.md
+++ b/packages/amis-ui/scss/helper/layout/_clear.md
@ -0,0 +1,27 @@
+---
+title: Clear
+---
+
+清除浮动相关样式。
+
+| Class       | Properties    |
+| ----------- | ------------- |
+| clear-right | clear: right; |
+| clear-left  | clear: left;  |
+| clear-none  | clear: none;  |
+| clear-both  | clear: both;  |
+
+## 用法
+
+请前往以下链接查看属性含义。
+
+https://www.w3school.com.cn/cssref/pr_class_clear.asp
+
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_display.md
+++ b/packages/amis-ui/scss/helper/layout/_display.md
@ -0,0 +1,41 @@
+---
+title: Display
+---
+
+布局相关样式。
+
+
+| Class              | Properties                   |
+| ------------------ | ---------------------------- |
+| block              | display: block;              |
+| inline-block       | display: inline-block;       |
+| inline             | display: inline;             |
+| flex               | display: flex;               |
+| inline-flex        | display: inline-flex;        |
+| table              | display: table;              |
+| table-cell         | display: table-cell;         |
+| table-column       | display: table-column;       |
+| table-column-group | display: table-column-group; |
+| table-footer-group | display: table-footer-group; |
+| table-header-group | display: table-header-group; |
+| table-row-group    | display: table-row-group;    |
+| table-row          | display: table-row;          |
+| flow-root          | display: flow-root;          |
+| grid               | display: grid;               |
+| inline-grid        | display: inline-grid;        |
+| contents           | display: contents;           |
+| hidden             | display: none;               |
+
+## 用法
+css 相关的知识点就不介绍了，请参考：
+
+https://www.w3school.com.cn/cssref/pr_class_display.asp
+https://tailwindcss.com/docs/display
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_float.md
+++ b/packages/amis-ui/scss/helper/layout/_float.md
@ -0,0 +1,47 @@
+---
+title: Floats
+---
+
+浮动相关样式。
+
+| Class       | Properties    |
+| ----------- | ------------- |
+| float-right | float: right; |
+| float-left  | float: left;  |
+| float-none  | float: none;  |
+
+## 左浮
+
+```html
+<img class="w-32 m-4 pc:float-left ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 右浮
+
+```html
+<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 不浮动
+
+```html
+<img class="w-32 m-4 pc:float-none ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+
+
+## 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+```html
+<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_overflow.md
+++ b/packages/amis-ui/scss/helper/layout/_overflow.md
@ -0,0 +1,34 @@
+---
+title: Overflow
+---
+
+内容超出相关样式。
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| overflow-auto  | overflow: auto;  |
+| overflow-hidden  | overflow: hidden;  |
+| overflow-visible  | overflow: visible;  |
+| overflow-scroll  | overflow: scroll;  |
+| overflow-x-auto  | overflow-x: auto;  |
+| overflow-y-auto  | overflow-y: auto;  |
+| overflow-x-hidden  | overflow-x: hidden;  |
+| overflow-y-hidden  | overflow-y: hidden;  |
+| overflow-x-visible  | overflow-x: visible;  |
+| overflow-y-visible  | overflow-y: visible;  |
+| overflow-x-scroll  | overflow-x: scroll;  |
+| overflow-y-scroll  | overflow-y: scroll;  |
+
+## 用法
+
+请前往一下文档查看属性含义。
+
+https://www.w3school.com.cn/cssref/pr_pos_overflow.asp
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_position.md
+++ b/packages/amis-ui/scss/helper/layout/_position.md
@ -0,0 +1,27 @@
+---
+title: Position
+---
+
+定位相关样式。
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| static  | position: static; |
+| fixed  | position: fixed; |
+| absolute  | position: absolute; |
+| relative  | position: relative; |
+| sticky  | position: sticky; |
+
+## 用法
+
+请前往一下文档查看属性含义。
+
+https://www.w3school.com.cn/cssref/pr_class_position.asp
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md
+++ b/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md
@ -0,0 +1,150 @@
+---
+title: Top / Right / Bottom / Left
+---
+
+用来控制位置的样式集。
+
+| Class        | Properties                                                                        |
+| ------------ | --------------------------------------------------------------------------------- |
+| inset-0      | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px;                         |
+| -inset-0     | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px;                         |
+| inset-y-0    | top: 0px;<br/>bottom: 0px;                                                        |
+| inset-x-0    | right: 0px;<br/>left: 0px;                                                        |
+| -inset-y-0   | top: 0px;<br/>bottom: 0px;                                                        |
+| -inset-x-0   | right: 0px;<br/>left: 0px;                                                        |
+| top-0        | top: 0px;                                                                         |
+| right-0      | right: 0px;                                                                       |
+| bottom-0     | bottom: 0px;                                                                      |
+| left-0       | left: 0px;                                                                        |
+| -top-0       | top: 0px;                                                                         |
+| -right-0     | right: 0px;                                                                       |
+| -bottom-0    | bottom: 0px;                                                                      |
+| -left-0      | left: 0px;                                                                        |
+| inset-0.5    | top: 0.125rem;<br/>right: 0.125rem;<br/>bottom: 0.125rem;<br/>left: 0.125rem;     |
+| -inset-0.5   | top: -0.125rem;<br/>right: -0.125rem;<br/>bottom: -0.125rem;<br/>left: -0.125rem; |
+| inset-y-0.5  | top: 0.125rem;<br/>bottom: 0.125rem;                                              |
+| inset-x-0.5  | right: 0.125rem;<br/>left: 0.125rem;                                              |
+| -inset-y-0.5 | top: -0.125rem;<br/>bottom: -0.125rem;                                            |
+| -inset-x-0.5 | right: -0.125rem;<br/>left: -0.125rem;                                            |
+| top-0.5      | top: 0.125rem;                                                                    |
+| right-0.5    | right: 0.125rem;                                                                  |
+| bottom-0.5   | bottom: 0.125rem;                                                                 |
+| left-0.5     | left: 0.125rem;                                                                   |
+| -top-0.5     | top: -0.125rem;                                                                   |
+| -right-0.5   | right: -0.125rem;                                                                 |
+| -bottom-0.5  | bottom: -0.125rem;                                                                |
+| -left-0.5    | left: -0.125rem;                                                                  |
+
+按以下尺寸表依次类推
+
+| 尺寸 | 大小           |
+| ---- | -------------- |
+| 0    | 0              |
+| 0.5  | 0.125rem;      |
+| 1    | 0.25rem        |
+| 1.5  | 0.375rem       |
+| 1.5  | 0.375rem       |
+| 2    | 0.5rem         |
+| 2.5  | 0.625rem       |
+| 3    | 0.75rem        |
+| 3.5  | 0.875rem       |
+| 4    | 1rem           |
+| 5    | 1.25rem        |
+| 6    | 1.5rem         |
+| 7    | 1.75rem        |
+| 8    | 2rem           |
+| 9    | 2.25rem        |
+| 10   | 2.5rem         |
+| 11   | 2.75rem        |
+| 12   | 3rem           |
+| 14   | 3.5rem         |
+| 16   | 4rem           |
+| 20   | 5rem           |
+| 24   | 6rem           |
+| 28   | 7rem           |
+| 32   | 8rem           |
+| 36   | 9rem           |
+| 40   | 10rem          |
+| 44   | 11rem          |
+| 48   | 12rem          |
+| 52   | 13rem          |
+| 56   | 14rem          |
+| 60   | 15rem          |
+| 64   | 16rem          |
+| 68   | 17rem          |
+| 72   | 18rem          |
+| 76   | 19rem          |
+| 80   | 20rem          |
+| 96   | 24rem          |
+| auto | auto           |
+| 1/2  | 50%            |
+| 1/3  | 33.333333%     |
+| 2/3  | 66.666667%     |
+| 1/4  | 25%;           |
+| 2/4  | 50%;           |
+| 3/4  | 75%;           |
+| full | 100%;          |
+| px   | 0.0625rem(1px) |
+
+## 用法
+
+结合 relative 和 absolute 定位 和位置样式 `{top|right|bottom|left|inset}-xxx`，可以很方便的实现各种组件布局。
+
+```html
+<div class="grid grid-cols-4 m:grid-cols-2 gap-4">
+
+<!-- Span top edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-x-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">1</div>
+</div>
+
+<!-- Span right edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-y-0 right-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">2</div>
+</div>
+
+<!-- Span bottom edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-x-0 bottom-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">3</div>
+</div>
+
+<!-- Span left edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-y-0 left-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">4</div>
+</div>
+
+<!-- Fill entire parent -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-0 bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">5</div>
+</div>
+
+<!-- Pin to top left corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute left-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">6</div>
+</div>
+
+<!-- Pin to top right corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute top-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">7</div>
+</div>
+
+<!-- Pin to bottom right corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute bottom-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">8</div>
+</div>
+
+<!-- Pin to bottom left corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute bottom-0 left-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">9</div>
+</div>
+
+</div>
+```
+
+## 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_visibility.md
+++ b/packages/amis-ui/scss/helper/layout/_visibility.md
@ -0,0 +1,21 @@
+---
+title: Visibility
+---
+
+显示与隐藏。
+
+| Class     | Properties           |
+| --------- | -------------------- |
+| visible   | visibility: visible; |
+| invisible | visibility: hidden;  |
+
+## 用法
+
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/layout/_z-index.md
+++ b/packages/amis-ui/scss/helper/layout/_z-index.md
@ -0,0 +1,37 @@
+---
+title: Z-Index
+---
+
+Utilities for controlling the stack order of an element.
+
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| z-0  | z-index: 0  |
+| z-10  | z-index: 10  |
+| z-20  | z-index: 20  |
+| z-30  | z-index: 30  |
+| z-40  | z-index: 40  |
+| z-50  | z-index: 50  |
+| z-auto  | z-index: auto  |
+
+## 用法
+
+```html
+<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
+  <div class="z-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
+  <div class="z-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
+  <div class="z-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
+  <div class="z-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
+  <div class="z-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
+</div>
+```
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
--- a/packages/amis-ui/scss/helper/sizing/_height.md
+++ b/packages/amis-ui/scss/helper/sizing/_height.md
@ -0,0 +1,103 @@
+---
+title: Height
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| h-px | height: 0.0625rem |
+| h-0 | height: 0 |
+| h-none | height: 0 |
+| h-0\.5 | height: 0.125rem |
+| h-1 | height: 0.25rem |
+| h-1\.5 | height: 0.375rem |
+| h-2 | height: 0.5rem |
+| h-2\.5 | height: 0.625rem |
+| h-3 | height: 0.75rem |
+| h-3\.5 | height: 0.875rem |
+| h-4 | height: 1rem |
+| h-5 | height: 1.25rem |
+| h-6 | height: 1.5rem |
+| h-7 | height: 1.75rem |
+| h-8 | height: 2rem |
+| h-9 | height: 2.25rem |
+| h-10 | height: 2.5rem |
+| h-11 | height: 2.75rem |
+| h-12 | height: 3rem |
+| h-14 | height: 3.5rem |
+| h-16 | height: 4rem |
+| h-18 | height: 4.5rem |
+| h-20 | height: 5rem |
+| h-24 | height: 6rem |
+| h-28 | height: 7rem |
+| h-32 | height: 8rem |
+| h-36 | height: 9rem |
+| h-40 | height: 10rem |
+| h-44 | height: 11rem |
+| h-48 | height: 12rem |
+| h-52 | height: 13rem |
+| h-56 | height: 14rem |
+| h-60 | height: 15rem |
+| h-64 | height: 16rem |
+| h-72 | height: 18rem |
+| h-80 | height: 20rem |
+| h-96 | height: 24rem |
+| h-auto | height: auto |
+| h-1\/2 | height: 50% |
+| h-1\/3 | height: 33.333333% |
+| h-2\/3 | height: 66.666667% |
+| h-1\/4 | height: 25% |
+| h-2\/4 | height: 50% |
+| h-3\/4 | height: 75% |
+| h-1\/5 | height: 20% |
+| h-2\/5 | height: 40% |
+| h-3\/5 | height: 60% |
+| h-4\/5 | height: 80% |
+| h-1\/6 | height: 16.666667% |
+| h-2\/6 | height: 33.333333% |
+| h-3\/6 | height: 50% |
+| h-4\/6 | height: 66.666667% |
+| h-5\/6 | height: 83.333333% |
+| h-full | height: 100% |
+| h-screen | height: 100vh |
+| min-h-0 | min-height: 0px |
+| min-h-full | min-height: 100% |
+| min-h-screen | min-height: 100vh |
+| max-h-px | max-height: 0.0625rem |
+| max-h-0 | max-height: 0 |
+| max-h-none | max-height: 0 |
+| max-h-0\.5 | max-height: 0.125rem |
+| max-h-1 | max-height: 0.25rem |
+| max-h-1\.5 | max-height: 0.375rem |
+| max-h-2 | max-height: 0.5rem |
+| max-h-2\.5 | max-height: 0.625rem |
+| max-h-3 | max-height: 0.75rem |
+| max-h-3\.5 | max-height: 0.875rem |
+| max-h-4 | max-height: 1rem |
+| max-h-5 | max-height: 1.25rem |
+| max-h-6 | max-height: 1.5rem |
+| max-h-7 | max-height: 1.75rem |
+| max-h-8 | max-height: 2rem |
+| max-h-9 | max-height: 2.25rem |
+| max-h-10 | max-height: 2.5rem |
+| max-h-11 | max-height: 2.75rem |
+| max-h-12 | max-height: 3rem |
+| max-h-14 | max-height: 3.5rem |
+| max-h-16 | max-height: 4rem |
+| max-h-18 | max-height: 4.5rem |
+| max-h-20 | max-height: 5rem |
+| max-h-24 | max-height: 6rem |
+| max-h-28 | max-height: 7rem |
+| max-h-32 | max-height: 8rem |
+| max-h-36 | max-height: 9rem |
+| max-h-40 | max-height: 10rem |
+| max-h-44 | max-height: 11rem |
+| max-h-48 | max-height: 12rem |
+| max-h-52 | max-height: 13rem |
+| max-h-56 | max-height: 14rem |
+| max-h-60 | max-height: 15rem |
+| max-h-64 | max-height: 16rem |
+| max-h-72 | max-height: 18rem |
+| max-h-80 | max-height: 20rem |
+| max-h-96 | max-height: 24rem |
+| max-h-full | max-height: 100% |
+| max-h-screen | max-height: 100vh |
--- a/packages/amis-ui/scss/helper/sizing/_width.md
+++ b/packages/amis-ui/scss/helper/sizing/_width.md
@ -0,0 +1,98 @@
+---
+title: Width
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| w-px | width: 0.0625rem |
+| w-0 | width: 0 |
+| w-none | width: 0 |
+| w-0\.5 | width: 0.125rem |
+| w-1 | width: 0.25rem |
+| w-1\.5 | width: 0.375rem |
+| w-2 | width: 0.5rem |
+| w-2\.5 | width: 0.625rem |
+| w-3 | width: 0.75rem |
+| w-3\.5 | width: 0.875rem |
+| w-4 | width: 1rem |
+| w-5 | width: 1.25rem |
+| w-6 | width: 1.5rem |
+| w-7 | width: 1.75rem |
+| w-8 | width: 2rem |
+| w-9 | width: 2.25rem |
+| w-10 | width: 2.5rem |
+| w-11 | width: 2.75rem |
+| w-12 | width: 3rem |
+| w-14 | width: 3.5rem |
+| w-16 | width: 4rem |
+| w-18 | width: 4.5rem |
+| w-20 | width: 5rem |
+| w-24 | width: 6rem |
+| w-28 | width: 7rem |
+| w-32 | width: 8rem |
+| w-36 | width: 9rem |
+| w-40 | width: 10rem |
+| w-44 | width: 11rem |
+| w-48 | width: 12rem |
+| w-52 | width: 13rem |
+| w-56 | width: 14rem |
+| w-60 | width: 15rem |
+| w-64 | width: 16rem |
+| w-72 | width: 18rem |
+| w-80 | width: 20rem |
+| w-96 | width: 24rem |
+| w-auto | width: auto |
+| w-1x | width: 1em |
+| w-2x | width: 2em |
+| w-3x | width: 3em |
+| w-1\/2 | width: 50% |
+| w-1\/3 | width: 33.333333% |
+| w-2\/3 | width: 66.666667% |
+| w-1\/4 | width: 25% |
+| w-2\/4 | width: 50% |
+| w-3\/4 | width: 75% |
+| w-1\/5 | width: 20% |
+| w-2\/5 | width: 40% |
+| w-3\/5 | width: 60% |
+| w-4\/5 | width: 80% |
+| w-1\/6 | width: 16.666667% |
+| w-2\/6 | width: 33.333333% |
+| w-3\/6 | width: 50% |
+| w-4\/6 | width: 66.666667% |
+| w-5\/6 | width: 83.333333% |
+| w-1\/12 | width: 8.333333% |
+| w-2\/12 | width: 16.666667% |
+| w-3\/12 | width: 25% |
+| w-4\/12 | width: 33.333333% |
+| w-5\/12 | width: 41.666667% |
+| w-6\/12 | width: 50% |
+| w-7\/12 | width: 58.333333% |
+| w-8\/12 | width: 66.666667% |
+| w-9\/12 | width: 75% |
+| w-10\/12 | width: 83.333333% |
+| w-11\/12 | width: 91.666667% |
+| w-full | width: 100% |
+| w-screen | width: 100vw |
+| w-min | width: min-content |
+| w-max | width: max-content |
+| min-w-0 | min-width: 0px |
+| min-w-full | min-width: 100% |
+| min-w-min | min-width: min-content |
+| min-w-max | min-width: max-content |
+| max-w-none | max-width: none |
+| max-w-0 | max-width: 0rem |
+| max-w-xs | max-width: 20rem |
+| max-w-sm | max-width: 24rem |
+| max-w-md | max-width: 28rem |
+| max-w-lg | max-width: 32rem |
+| max-w-xl | max-width: 36rem |
+| max-w-2xl | max-width: 42rem |
+| max-w-3xl | max-width: 48rem |
+| max-w-4xl | max-width: 56rem |
+| max-w-5xl | max-width: 64rem |
+| max-w-6xl | max-width: 72rem |
+| max-w-7xl | max-width: 80rem |
+| max-w-full | max-width: 100% |
+| max-w-min | max-width: min-content |
+| max-w-max | max-width: max-content |
+| max-w-prose | max-width: 65ch |
--- a/packages/amis-ui/scss/helper/spacing/_margin.md
+++ b/packages/amis-ui/scss/helper/spacing/_margin.md
@ -0,0 +1,527 @@
+---
+title: Margin
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| m-px | margin: 0.0625rem |
+| m-0 | margin: 0 |
+| m-none | margin: 0 |
+| m-0\.5 | margin: 0.125rem |
+| m-1 | margin: 0.25rem |
+| m-1\.5 | margin: 0.375rem |
+| m-2 | margin: 0.5rem |
+| m-2\.5 | margin: 0.625rem |
+| m-3 | margin: 0.75rem |
+| m-3\.5 | margin: 0.875rem |
+| m-4 | margin: 1rem |
+| m-5 | margin: 1.25rem |
+| m-6 | margin: 1.5rem |
+| m-7 | margin: 1.75rem |
+| m-8 | margin: 2rem |
+| m-9 | margin: 2.25rem |
+| m-10 | margin: 2.5rem |
+| m-11 | margin: 2.75rem |
+| m-12 | margin: 3rem |
+| m-14 | margin: 3.5rem |
+| m-16 | margin: 4rem |
+| m-18 | margin: 4.5rem |
+| m-20 | margin: 5rem |
+| m-24 | margin: 6rem |
+| m-28 | margin: 7rem |
+| m-32 | margin: 8rem |
+| m-36 | margin: 9rem |
+| m-40 | margin: 10rem |
+| m-44 | margin: 11rem |
+| m-48 | margin: 12rem |
+| m-52 | margin: 13rem |
+| m-56 | margin: 14rem |
+| m-60 | margin: 15rem |
+| m-64 | margin: 16rem |
+| m-72 | margin: 18rem |
+| m-80 | margin: 20rem |
+| m-96 | margin: 24rem |
+| m-auto | margin: auto |
+| -m-px | margin: -0.0625rem |
+| -m-0 | margin: 0 |
+| -m-none | margin: 0 |
+| -m-0\.5 | margin: -0.125rem |
+| -m-1 | margin: -0.25rem |
+| -m-1\.5 | margin: -0.375rem |
+| -m-2 | margin: -0.5rem |
+| -m-2\.5 | margin: -0.625rem |
+| -m-3 | margin: -0.75rem |
+| -m-3\.5 | margin: -0.875rem |
+| -m-4 | margin: -1rem |
+| -m-5 | margin: -1.25rem |
+| -m-6 | margin: -1.5rem |
+| -m-7 | margin: -1.75rem |
+| -m-8 | margin: -2rem |
+| -m-9 | margin: -2.25rem |
+| -m-10 | margin: -2.5rem |
+| -m-11 | margin: -2.75rem |
+| -m-12 | margin: -3rem |
+| -m-14 | margin: -3.5rem |
+| -m-16 | margin: -4rem |
+| -m-18 | margin: -4.5rem |
+| -m-20 | margin: -5rem |
+| -m-24 | margin: -6rem |
+| -m-28 | margin: -7rem |
+| -m-32 | margin: -8rem |
+| -m-36 | margin: -9rem |
+| -m-40 | margin: -10rem |
+| -m-44 | margin: -11rem |
+| -m-48 | margin: -12rem |
+| -m-52 | margin: -13rem |
+| -m-56 | margin: -14rem |
+| -m-60 | margin: -15rem |
+| -m-64 | margin: -16rem |
+| -m-72 | margin: -18rem |
+| -m-80 | margin: -20rem |
+| -m-96 | margin: -24rem |
+| mx-px | margin-left: 0.0625rem; margin-right: 0.0625rem |
+| mx-0 | margin-left: 0; margin-right: 0 |
+| mx-none | margin-left: 0; margin-right: 0 |
+| mx-0\.5 | margin-left: 0.125rem; margin-right: 0.125rem |
+| mx-1 | margin-left: 0.25rem; margin-right: 0.25rem |
+| mx-1\.5 | margin-left: 0.375rem; margin-right: 0.375rem |
+| mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
+| mx-2\.5 | margin-left: 0.625rem; margin-right: 0.625rem |
+| mx-3 | margin-left: 0.75rem; margin-right: 0.75rem |
+| mx-3\.5 | margin-left: 0.875rem; margin-right: 0.875rem |
+| mx-4 | margin-left: 1rem; margin-right: 1rem |
+| mx-5 | margin-left: 1.25rem; margin-right: 1.25rem |
+| mx-6 | margin-left: 1.5rem; margin-right: 1.5rem |
+| mx-7 | margin-left: 1.75rem; margin-right: 1.75rem |
+| mx-8 | margin-left: 2rem; margin-right: 2rem |
+| mx-9 | margin-left: 2.25rem; margin-right: 2.25rem |
+| mx-10 | margin-left: 2.5rem; margin-right: 2.5rem |
+| mx-11 | margin-left: 2.75rem; margin-right: 2.75rem |
+| mx-12 | margin-left: 3rem; margin-right: 3rem |
+| mx-14 | margin-left: 3.5rem; margin-right: 3.5rem |
+| mx-16 | margin-left: 4rem; margin-right: 4rem |
+| mx-18 | margin-left: 4.5rem; margin-right: 4.5rem |
+| mx-20 | margin-left: 5rem; margin-right: 5rem |
+| mx-24 | margin-left: 6rem; margin-right: 6rem |
+| mx-28 | margin-left: 7rem; margin-right: 7rem |
+| mx-32 | margin-left: 8rem; margin-right: 8rem |
+| mx-36 | margin-left: 9rem; margin-right: 9rem |
+| mx-40 | margin-left: 10rem; margin-right: 10rem |
+| mx-44 | margin-left: 11rem; margin-right: 11rem |
+| mx-48 | margin-left: 12rem; margin-right: 12rem |
+| mx-52 | margin-left: 13rem; margin-right: 13rem |
+| mx-56 | margin-left: 14rem; margin-right: 14rem |
+| mx-60 | margin-left: 15rem; margin-right: 15rem |
+| mx-64 | margin-left: 16rem; margin-right: 16rem |
+| mx-72 | margin-left: 18rem; margin-right: 18rem |
+| mx-80 | margin-left: 20rem; margin-right: 20rem |
+| mx-96 | margin-left: 24rem; margin-right: 24rem |
+| mx-auto | margin-left: auto; margin-right: auto |
+| -mx-px | margin-left: -0.0625rem; margin-right: -0.0625rem |
+| -mx-0 | margin-left: 0; margin-right: 0 |
+| -mx-none | margin-left: 0; margin-right: 0 |
+| -mx-0\.5 | margin-left: -0.125rem; margin-right: -0.125rem |
+| -mx-1 | margin-left: -0.25rem; margin-right: -0.25rem |
+| -mx-1\.5 | margin-left: -0.375rem; margin-right: -0.375rem |
+| -mx-2 | margin-left: -0.5rem; margin-right: -0.5rem |
+| -mx-2\.5 | margin-left: -0.625rem; margin-right: -0.625rem |
+| -mx-3 | margin-left: -0.75rem; margin-right: -0.75rem |
+| -mx-3\.5 | margin-left: -0.875rem; margin-right: -0.875rem |
+| -mx-4 | margin-left: -1rem; margin-right: -1rem |
+| -mx-5 | margin-left: -1.25rem; margin-right: -1.25rem |
+| -mx-6 | margin-left: -1.5rem; margin-right: -1.5rem |
+| -mx-7 | margin-left: -1.75rem; margin-right: -1.75rem |
+| -mx-8 | margin-left: -2rem; margin-right: -2rem |
+| -mx-9 | margin-left: -2.25rem; margin-right: -2.25rem |
+| -mx-10 | margin-left: -2.5rem; margin-right: -2.5rem |
+| -mx-11 | margin-left: -2.75rem; margin-right: -2.75rem |
+| -mx-12 | margin-left: -3rem; margin-right: -3rem |
+| -mx-14 | margin-left: -3.5rem; margin-right: -3.5rem |
+| -mx-16 | margin-left: -4rem; margin-right: -4rem |
+| -mx-18 | margin-left: -4.5rem; margin-right: -4.5rem |
+| -mx-20 | margin-left: -5rem; margin-right: -5rem |
+| -mx-24 | margin-left: -6rem; margin-right: -6rem |
+| -mx-28 | margin-left: -7rem; margin-right: -7rem |
+| -mx-32 | margin-left: -8rem; margin-right: -8rem |
+| -mx-36 | margin-left: -9rem; margin-right: -9rem |
+| -mx-40 | margin-left: -10rem; margin-right: -10rem |
+| -mx-44 | margin-left: -11rem; margin-right: -11rem |
+| -mx-48 | margin-left: -12rem; margin-right: -12rem |
+| -mx-52 | margin-left: -13rem; margin-right: -13rem |
+| -mx-56 | margin-left: -14rem; margin-right: -14rem |
+| -mx-60 | margin-left: -15rem; margin-right: -15rem |
+| -mx-64 | margin-left: -16rem; margin-right: -16rem |
+| -mx-72 | margin-left: -18rem; margin-right: -18rem |
+| -mx-80 | margin-left: -20rem; margin-right: -20rem |
+| -mx-96 | margin-left: -24rem; margin-right: -24rem |
+| my-px | margin-top: 0.0625rem; margin-bottom: 0.0625rem |
+| my-0 | margin-top: 0; margin-bottom: 0 |
+| my-none | margin-top: 0; margin-bottom: 0 |
+| my-0\.5 | margin-top: 0.125rem; margin-bottom: 0.125rem |
+| my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
+| my-1\.5 | margin-top: 0.375rem; margin-bottom: 0.375rem |
+| my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
+| my-2\.5 | margin-top: 0.625rem; margin-bottom: 0.625rem |
+| my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
+| my-3\.5 | margin-top: 0.875rem; margin-bottom: 0.875rem |
+| my-4 | margin-top: 1rem; margin-bottom: 1rem |
+| my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem |
+| my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem |
+| my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem |
+| my-8 | margin-top: 2rem; margin-bottom: 2rem |
+| my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem |
+| my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
+| my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem |
+| my-12 | margin-top: 3rem; margin-bottom: 3rem |
+| my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem |
+| my-16 | margin-top: 4rem; margin-bottom: 4rem |
+| my-18 | margin-top: 4.5rem; margin-bottom: 4.5rem |
+| my-20 | margin-top: 5rem; margin-bottom: 5rem |
+| my-24 | margin-top: 6rem; margin-bottom: 6rem |
+| my-28 | margin-top: 7rem; margin-bottom: 7rem |
+| my-32 | margin-top: 8rem; margin-bottom: 8rem |
+| my-36 | margin-top: 9rem; margin-bottom: 9rem |
+| my-40 | margin-top: 10rem; margin-bottom: 10rem |
+| my-44 | margin-top: 11rem; margin-bottom: 11rem |
+| my-48 | margin-top: 12rem; margin-bottom: 12rem |
+| my-52 | margin-top: 13rem; margin-bottom: 13rem |
+| my-56 | margin-top: 14rem; margin-bottom: 14rem |
+| my-60 | margin-top: 15rem; margin-bottom: 15rem |
+| my-64 | margin-top: 16rem; margin-bottom: 16rem |
+| my-72 | margin-top: 18rem; margin-bottom: 18rem |
+| my-80 | margin-top: 20rem; margin-bottom: 20rem |
+| my-96 | margin-top: 24rem; margin-bottom: 24rem |
+| my-auto | margin-top: auto; margin-bottom: auto |
+| -my-px | margin-top: -0.0625rem; margin-bottom: -0.0625rem |
+| -my-0 | margin-top: 0; margin-bottom: 0 |
+| -my-none | margin-top: 0; margin-bottom: 0 |
+| -my-0\.5 | margin-top: -0.125rem; margin-bottom: -0.125rem |
+| -my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
+| -my-1\.5 | margin-top: -0.375rem; margin-bottom: -0.375rem |
+| -my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
+| -my-2\.5 | margin-top: -0.625rem; margin-bottom: -0.625rem |
+| -my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
+| -my-3\.5 | margin-top: -0.875rem; margin-bottom: -0.875rem |
+| -my-4 | margin-top: -1rem; margin-bottom: -1rem |
+| -my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem |
+| -my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem |
+| -my-7 | margin-top: -1.75rem; margin-bottom: -1.75rem |
+| -my-8 | margin-top: -2rem; margin-bottom: -2rem |
+| -my-9 | margin-top: -2.25rem; margin-bottom: -2.25rem |
+| -my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
+| -my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem |
+| -my-12 | margin-top: -3rem; margin-bottom: -3rem |
+| -my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem |
+| -my-16 | margin-top: -4rem; margin-bottom: -4rem |
+| -my-18 | margin-top: -4.5rem; margin-bottom: -4.5rem |
+| -my-20 | margin-top: -5rem; margin-bottom: -5rem |
+| -my-24 | margin-top: -6rem; margin-bottom: -6rem |
+| -my-28 | margin-top: -7rem; margin-bottom: -7rem |
+| -my-32 | margin-top: -8rem; margin-bottom: -8rem |
+| -my-36 | margin-top: -9rem; margin-bottom: -9rem |
+| -my-40 | margin-top: -10rem; margin-bottom: -10rem |
+| -my-44 | margin-top: -11rem; margin-bottom: -11rem |
+| -my-48 | margin-top: -12rem; margin-bottom: -12rem |
+| -my-52 | margin-top: -13rem; margin-bottom: -13rem |
+| -my-56 | margin-top: -14rem; margin-bottom: -14rem |
+| -my-60 | margin-top: -15rem; margin-bottom: -15rem |
+| -my-64 | margin-top: -16rem; margin-bottom: -16rem |
+| -my-72 | margin-top: -18rem; margin-bottom: -18rem |
+| -my-80 | margin-top: -20rem; margin-bottom: -20rem |
+| -my-96 | margin-top: -24rem; margin-bottom: -24rem |
+| mt-px | margin-top: 0.0625rem |
+| mt-0 | margin-top: 0 |
+| mt-none | margin-top: 0 |
+| mt-0\.5 | margin-top: 0.125rem |
+| mt-1 | margin-top: 0.25rem |
+| mt-1\.5 | margin-top: 0.375rem |
+| mt-2 | margin-top: 0.5rem |
+| mt-2\.5 | margin-top: 0.625rem |
+| mt-3 | margin-top: 0.75rem |
+| mt-3\.5 | margin-top: 0.875rem |
+| mt-4 | margin-top: 1rem |
+| mt-5 | margin-top: 1.25rem |
+| mt-6 | margin-top: 1.5rem |
+| mt-7 | margin-top: 1.75rem |
+| mt-8 | margin-top: 2rem |
+| mt-9 | margin-top: 2.25rem |
+| mt-10 | margin-top: 2.5rem |
+| mt-11 | margin-top: 2.75rem |
+| mt-12 | margin-top: 3rem |
+| mt-14 | margin-top: 3.5rem |
+| mt-16 | margin-top: 4rem |
+| mt-18 | margin-top: 4.5rem |
+| mt-20 | margin-top: 5rem |
+| mt-24 | margin-top: 6rem |
+| mt-28 | margin-top: 7rem |
+| mt-32 | margin-top: 8rem |
+| mt-36 | margin-top: 9rem |
+| mt-40 | margin-top: 10rem |
+| mt-44 | margin-top: 11rem |
+| mt-48 | margin-top: 12rem |
+| mt-52 | margin-top: 13rem |
+| mt-56 | margin-top: 14rem |
+| mt-60 | margin-top: 15rem |
+| mt-64 | margin-top: 16rem |
+| mt-72 | margin-top: 18rem |
+| mt-80 | margin-top: 20rem |
+| mt-96 | margin-top: 24rem |
+| -mt-px | margin-top: -0.0625rem |
+| -mt-0 | margin-top: 0 |
+| -mt-none | margin-top: 0 |
+| -mt-0\.5 | margin-top: -0.125rem |
+| -mt-1 | margin-top: -0.25rem |
+| -mt-1\.5 | margin-top: -0.375rem |
+| -mt-2 | margin-top: -0.5rem |
+| -mt-2\.5 | margin-top: -0.625rem |
+| -mt-3 | margin-top: -0.75rem |
+| -mt-3\.5 | margin-top: -0.875rem |
+| -mt-4 | margin-top: -1rem |
+| -mt-5 | margin-top: -1.25rem |
+| -mt-6 | margin-top: -1.5rem |
+| -mt-7 | margin-top: -1.75rem |
+| -mt-8 | margin-top: -2rem |
+| -mt-9 | margin-top: -2.25rem |
+| -mt-10 | margin-top: -2.5rem |
+| -mt-11 | margin-top: -2.75rem |
+| -mt-12 | margin-top: -3rem |
+| -mt-14 | margin-top: -3.5rem |
+| -mt-16 | margin-top: -4rem |
+| -mt-18 | margin-top: -4.5rem |
+| -mt-20 | margin-top: -5rem |
+| -mt-24 | margin-top: -6rem |
+| -mt-28 | margin-top: -7rem |
+| -mt-32 | margin-top: -8rem |
+| -mt-36 | margin-top: -9rem |
+| -mt-40 | margin-top: -10rem |
+| -mt-44 | margin-top: -11rem |
+| -mt-48 | margin-top: -12rem |
+| -mt-52 | margin-top: -13rem |
+| -mt-56 | margin-top: -14rem |
+| -mt-60 | margin-top: -15rem |
+| -mt-64 | margin-top: -16rem |
+| -mt-72 | margin-top: -18rem |
+| -mt-80 | margin-top: -20rem |
+| -mt-96 | margin-top: -24rem |
+| mr-px | margin-right: 0.0625rem |
+| mr-0 | margin-right: 0 |
+| mr-none | margin-right: 0 |
+| mr-0\.5 | margin-right: 0.125rem |
+| mr-1 | margin-right: 0.25rem |
+| mr-1\.5 | margin-right: 0.375rem |
+| mr-2 | margin-right: 0.5rem |
+| mr-2\.5 | margin-right: 0.625rem |
+| mr-3 | margin-right: 0.75rem |
+| mr-3\.5 | margin-right: 0.875rem |
+| mr-4 | margin-right: 1rem |
+| mr-5 | margin-right: 1.25rem |
+| mr-6 | margin-right: 1.5rem |
+| mr-7 | margin-right: 1.75rem |
+| mr-8 | margin-right: 2rem |
+| mr-9 | margin-right: 2.25rem |
+| mr-10 | margin-right: 2.5rem |
+| mr-11 | margin-right: 2.75rem |
+| mr-12 | margin-right: 3rem |
+| mr-14 | margin-right: 3.5rem |
+| mr-16 | margin-right: 4rem |
+| mr-18 | margin-right: 4.5rem |
+| mr-20 | margin-right: 5rem |
+| mr-24 | margin-right: 6rem |
+| mr-28 | margin-right: 7rem |
+| mr-32 | margin-right: 8rem |
+| mr-36 | margin-right: 9rem |
+| mr-40 | margin-right: 10rem |
+| mr-44 | margin-right: 11rem |
+| mr-48 | margin-right: 12rem |
+| mr-52 | margin-right: 13rem |
+| mr-56 | margin-right: 14rem |
+| mr-60 | margin-right: 15rem |
+| mr-64 | margin-right: 16rem |
+| mr-72 | margin-right: 18rem |
+| mr-80 | margin-right: 20rem |
+| mr-96 | margin-right: 24rem |
+| -mr-px | margin-right: -0.0625rem |
+| -mr-0 | margin-right: 0 |
+| -mr-none | margin-right: 0 |
+| -mr-0\.5 | margin-right: -0.125rem |
+| -mr-1 | margin-right: -0.25rem |
+| -mr-1\.5 | margin-right: -0.375rem |
+| -mr-2 | margin-right: -0.5rem |
+| -mr-2\.5 | margin-right: -0.625rem |
+| -mr-3 | margin-right: -0.75rem |
+| -mr-3\.5 | margin-right: -0.875rem |
+| -mr-4 | margin-right: -1rem |
+| -mr-5 | margin-right: -1.25rem |
+| -mr-6 | margin-right: -1.5rem |
+| -mr-7 | margin-right: -1.75rem |
+| -mr-8 | margin-right: -2rem |
+| -mr-9 | margin-right: -2.25rem |
+| -mr-10 | margin-right: -2.5rem |
+| -mr-11 | margin-right: -2.75rem |
+| -mr-12 | margin-right: -3rem |
+| -mr-14 | margin-right: -3.5rem |
+| -mr-16 | margin-right: -4rem |
+| -mr-18 | margin-right: -4.5rem |
+| -mr-20 | margin-right: -5rem |
+| -mr-24 | margin-right: -6rem |
+| -mr-28 | margin-right: -7rem |
+| -mr-32 | margin-right: -8rem |
+| -mr-36 | margin-right: -9rem |
+| -mr-40 | margin-right: -10rem |
+| -mr-44 | margin-right: -11rem |
+| -mr-48 | margin-right: -12rem |
+| -mr-52 | margin-right: -13rem |
+| -mr-56 | margin-right: -14rem |
+| -mr-60 | margin-right: -15rem |
+| -mr-64 | margin-right: -16rem |
+| -mr-72 | margin-right: -18rem |
+| -mr-80 | margin-right: -20rem |
+| -mr-96 | margin-right: -24rem |
+| mb-px | margin-bottom: 0.0625rem |
+| mb-0 | margin-bottom: 0 |
+| mb-none | margin-bottom: 0 |
+| mb-0\.5 | margin-bottom: 0.125rem |
+| mb-1 | margin-bottom: 0.25rem |
+| mb-1\.5 | margin-bottom: 0.375rem |
+| mb-2 | margin-bottom: 0.5rem |
+| mb-2\.5 | margin-bottom: 0.625rem |
+| mb-3 | margin-bottom: 0.75rem |
+| mb-3\.5 | margin-bottom: 0.875rem |
+| mb-4 | margin-bottom: 1rem |
+| mb-5 | margin-bottom: 1.25rem |
+| mb-6 | margin-bottom: 1.5rem |
+| mb-7 | margin-bottom: 1.75rem |
+| mb-8 | margin-bottom: 2rem |
+| mb-9 | margin-bottom: 2.25rem |
+| mb-10 | margin-bottom: 2.5rem |
+| mb-11 | margin-bottom: 2.75rem |
+| mb-12 | margin-bottom: 3rem |
+| mb-14 | margin-bottom: 3.5rem |
+| mb-16 | margin-bottom: 4rem |
+| mb-18 | margin-bottom: 4.5rem |
+| mb-20 | margin-bottom: 5rem |
+| mb-24 | margin-bottom: 6rem |
+| mb-28 | margin-bottom: 7rem |
+| mb-32 | margin-bottom: 8rem |
+| mb-36 | margin-bottom: 9rem |
+| mb-40 | margin-bottom: 10rem |
+| mb-44 | margin-bottom: 11rem |
+| mb-48 | margin-bottom: 12rem |
+| mb-52 | margin-bottom: 13rem |
+| mb-56 | margin-bottom: 14rem |
+| mb-60 | margin-bottom: 15rem |
+| mb-64 | margin-bottom: 16rem |
+| mb-72 | margin-bottom: 18rem |
+| mb-80 | margin-bottom: 20rem |
+| mb-96 | margin-bottom: 24rem |
+| -mb-px | margin-bottom: -0.0625rem |
+| -mb-0 | margin-bottom: 0 |
+| -mb-none | margin-bottom: 0 |
+| -mb-0\.5 | margin-bottom: -0.125rem |
+| -mb-1 | margin-bottom: -0.25rem |
+| -mb-1\.5 | margin-bottom: -0.375rem |
+| -mb-2 | margin-bottom: -0.5rem |
+| -mb-2\.5 | margin-bottom: -0.625rem |
+| -mb-3 | margin-bottom: -0.75rem |
+| -mb-3\.5 | margin-bottom: -0.875rem |
+| -mb-4 | margin-bottom: -1rem |
+| -mb-5 | margin-bottom: -1.25rem |
+| -mb-6 | margin-bottom: -1.5rem |
+| -mb-7 | margin-bottom: -1.75rem |
+| -mb-8 | margin-bottom: -2rem |
+| -mb-9 | margin-bottom: -2.25rem |
+| -mb-10 | margin-bottom: -2.5rem |
+| -mb-11 | margin-bottom: -2.75rem |
+| -mb-12 | margin-bottom: -3rem |
+| -mb-14 | margin-bottom: -3.5rem |
+| -mb-16 | margin-bottom: -4rem |
+| -mb-18 | margin-bottom: -4.5rem |
+| -mb-20 | margin-bottom: -5rem |
+| -mb-24 | margin-bottom: -6rem |
+| -mb-28 | margin-bottom: -7rem |
+| -mb-32 | margin-bottom: -8rem |
+| -mb-36 | margin-bottom: -9rem |
+| -mb-40 | margin-bottom: -10rem |
+| -mb-44 | margin-bottom: -11rem |
+| -mb-48 | margin-bottom: -12rem |
+| -mb-52 | margin-bottom: -13rem |
+| -mb-56 | margin-bottom: -14rem |
+| -mb-60 | margin-bottom: -15rem |
+| -mb-64 | margin-bottom: -16rem |
+| -mb-72 | margin-bottom: -18rem |
+| -mb-80 | margin-bottom: -20rem |
+| -mb-96 | margin-bottom: -24rem |
+| ml-px | margin-left: 0.0625rem |
+| ml-0 | margin-left: 0 |
+| ml-none | margin-left: 0 |
+| ml-0\.5 | margin-left: 0.125rem |
+| ml-1 | margin-left: 0.25rem |
+| ml-1\.5 | margin-left: 0.375rem |
+| ml-2 | margin-left: 0.5rem |
+| ml-2\.5 | margin-left: 0.625rem |
+| ml-3 | margin-left: 0.75rem |
+| ml-3\.5 | margin-left: 0.875rem |
+| ml-4 | margin-left: 1rem |
+| ml-5 | margin-left: 1.25rem |
+| ml-6 | margin-left: 1.5rem |
+| ml-7 | margin-left: 1.75rem |
+| ml-8 | margin-left: 2rem |
+| ml-9 | margin-left: 2.25rem |
+| ml-10 | margin-left: 2.5rem |
+| ml-11 | margin-left: 2.75rem |
+| ml-12 | margin-left: 3rem |
+| ml-14 | margin-left: 3.5rem |
+| ml-16 | margin-left: 4rem |
+| ml-18 | margin-left: 4.5rem |
+| ml-20 | margin-left: 5rem |
+| ml-24 | margin-left: 6rem |
+| ml-28 | margin-left: 7rem |
+| ml-32 | margin-left: 8rem |
+| ml-36 | margin-left: 9rem |
+| ml-40 | margin-left: 10rem |
+| ml-44 | margin-left: 11rem |
+| ml-48 | margin-left: 12rem |
+| ml-52 | margin-left: 13rem |
+| ml-56 | margin-left: 14rem |
+| ml-60 | margin-left: 15rem |
+| ml-64 | margin-left: 16rem |
+| ml-72 | margin-left: 18rem |
+| ml-80 | margin-left: 20rem |
+| ml-96 | margin-left: 24rem |
+| -ml-px | margin-left: -0.0625rem |
+| -ml-0 | margin-left: 0 |
+| -ml-none | margin-left: 0 |
+| -ml-0\.5 | margin-left: -0.125rem |
+| -ml-1 | margin-left: -0.25rem |
+| -ml-1\.5 | margin-left: -0.375rem |
+| -ml-2 | margin-left: -0.5rem |
+| -ml-2\.5 | margin-left: -0.625rem |
+| -ml-3 | margin-left: -0.75rem |
+| -ml-3\.5 | margin-left: -0.875rem |
+| -ml-4 | margin-left: -1rem |
+| -ml-5 | margin-left: -1.25rem |
+| -ml-6 | margin-left: -1.5rem |
+| -ml-7 | margin-left: -1.75rem |
+| -ml-8 | margin-left: -2rem |
+| -ml-9 | margin-left: -2.25rem |
+| -ml-10 | margin-left: -2.5rem |
+| -ml-11 | margin-left: -2.75rem |
+| -ml-12 | margin-left: -3rem |
+| -ml-14 | margin-left: -3.5rem |
+| -ml-16 | margin-left: -4rem |
+| -ml-18 | margin-left: -4.5rem |
+| -ml-20 | margin-left: -5rem |
+| -ml-24 | margin-left: -6rem |
+| -ml-28 | margin-left: -7rem |
+| -ml-32 | margin-left: -8rem |
+| -ml-36 | margin-left: -9rem |
+| -ml-40 | margin-left: -10rem |
+| -ml-44 | margin-left: -11rem |
+| -ml-48 | margin-left: -12rem |
+| -ml-52 | margin-left: -13rem |
+| -ml-56 | margin-left: -14rem |
+| -ml-60 | margin-left: -15rem |
+| -ml-64 | margin-left: -16rem |
+| -ml-72 | margin-left: -18rem |
+| -ml-80 | margin-left: -20rem |
+| -ml-96 | margin-left: -24rem |
--- a/packages/amis-ui/scss/helper/spacing/_padding.md
+++ b/packages/amis-ui/scss/helper/spacing/_padding.md
@ -0,0 +1,265 @@
+---
+title: Padding
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| p-px | padding: 0.0625rem |
+| p-0 | padding: 0 |
+| p-none | padding: 0 |
+| p-0\.5 | padding: 0.125rem |
+| p-1 | padding: 0.25rem |
+| p-1\.5 | padding: 0.375rem |
+| p-2 | padding: 0.5rem |
+| p-2\.5 | padding: 0.625rem |
+| p-3 | padding: 0.75rem |
+| p-3\.5 | padding: 0.875rem |
+| p-4 | padding: 1rem |
+| p-5 | padding: 1.25rem |
+| p-6 | padding: 1.5rem |
+| p-7 | padding: 1.75rem |
+| p-8 | padding: 2rem |
+| p-9 | padding: 2.25rem |
+| p-10 | padding: 2.5rem |
+| p-11 | padding: 2.75rem |
+| p-12 | padding: 3rem |
+| p-14 | padding: 3.5rem |
+| p-16 | padding: 4rem |
+| p-18 | padding: 4.5rem |
+| p-20 | padding: 5rem |
+| p-24 | padding: 6rem |
+| p-28 | padding: 7rem |
+| p-32 | padding: 8rem |
+| p-36 | padding: 9rem |
+| p-40 | padding: 10rem |
+| p-44 | padding: 11rem |
+| p-48 | padding: 12rem |
+| p-52 | padding: 13rem |
+| p-56 | padding: 14rem |
+| p-60 | padding: 15rem |
+| p-64 | padding: 16rem |
+| p-72 | padding: 18rem |
+| p-80 | padding: 20rem |
+| p-96 | padding: 24rem |
+| px-px | padding-left: 0.0625rem; padding-right: 0.0625rem |
+| px-0 | padding-left: 0; padding-right: 0 |
+| px-none | padding-left: 0; padding-right: 0 |
+| px-0\.5 | padding-left: 0.125rem; padding-right: 0.125rem |
+| px-1 | padding-left: 0.25rem; padding-right: 0.25rem |
+| px-1\.5 | padding-left: 0.375rem; padding-right: 0.375rem |
+| px-2 | padding-left: 0.5rem; padding-right: 0.5rem |
+| px-2\.5 | padding-left: 0.625rem; padding-right: 0.625rem |
+| px-3 | padding-left: 0.75rem; padding-right: 0.75rem |
+| px-3\.5 | padding-left: 0.875rem; padding-right: 0.875rem |
+| px-4 | padding-left: 1rem; padding-right: 1rem |
+| px-5 | padding-left: 1.25rem; padding-right: 1.25rem |
+| px-6 | padding-left: 1.5rem; padding-right: 1.5rem |
+| px-7 | padding-left: 1.75rem; padding-right: 1.75rem |
+| px-8 | padding-left: 2rem; padding-right: 2rem |
+| px-9 | padding-left: 2.25rem; padding-right: 2.25rem |
+| px-10 | padding-left: 2.5rem; padding-right: 2.5rem |
+| px-11 | padding-left: 2.75rem; padding-right: 2.75rem |
+| px-12 | padding-left: 3rem; padding-right: 3rem |
+| px-14 | padding-left: 3.5rem; padding-right: 3.5rem |
+| px-16 | padding-left: 4rem; padding-right: 4rem |
+| px-18 | padding-left: 4.5rem; padding-right: 4.5rem |
+| px-20 | padding-left: 5rem; padding-right: 5rem |
+| px-24 | padding-left: 6rem; padding-right: 6rem |
+| px-28 | padding-left: 7rem; padding-right: 7rem |
+| px-32 | padding-left: 8rem; padding-right: 8rem |
+| px-36 | padding-left: 9rem; padding-right: 9rem |
+| px-40 | padding-left: 10rem; padding-right: 10rem |
+| px-44 | padding-left: 11rem; padding-right: 11rem |
+| px-48 | padding-left: 12rem; padding-right: 12rem |
+| px-52 | padding-left: 13rem; padding-right: 13rem |
+| px-56 | padding-left: 14rem; padding-right: 14rem |
+| px-60 | padding-left: 15rem; padding-right: 15rem |
+| px-64 | padding-left: 16rem; padding-right: 16rem |
+| px-72 | padding-left: 18rem; padding-right: 18rem |
+| px-80 | padding-left: 20rem; padding-right: 20rem |
+| px-96 | padding-left: 24rem; padding-right: 24rem |
+| py-px | padding-top: 0.0625rem; padding-bottom: 0.0625rem |
+| py-0 | padding-top: 0; padding-bottom: 0 |
+| py-none | padding-top: 0; padding-bottom: 0 |
+| py-0\.5 | padding-top: 0.125rem; padding-bottom: 0.125rem |
+| py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem |
+| py-1\.5 | padding-top: 0.375rem; padding-bottom: 0.375rem |
+| py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem |
+| py-2\.5 | padding-top: 0.625rem; padding-bottom: 0.625rem |
+| py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem |
+| py-3\.5 | padding-top: 0.875rem; padding-bottom: 0.875rem |
+| py-4 | padding-top: 1rem; padding-bottom: 1rem |
+| py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem |
+| py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem |
+| py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem |
+| py-8 | padding-top: 2rem; padding-bottom: 2rem |
+| py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem |
+| py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem |
+| py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem |
+| py-12 | padding-top: 3rem; padding-bottom: 3rem |
+| py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem |
+| py-16 | padding-top: 4rem; padding-bottom: 4rem |
+| py-18 | padding-top: 4.5rem; padding-bottom: 4.5rem |
+| py-20 | padding-top: 5rem; padding-bottom: 5rem |
+| py-24 | padding-top: 6rem; padding-bottom: 6rem |
+| py-28 | padding-top: 7rem; padding-bottom: 7rem |
+| py-32 | padding-top: 8rem; padding-bottom: 8rem |
+| py-36 | padding-top: 9rem; padding-bottom: 9rem |
+| py-40 | padding-top: 10rem; padding-bottom: 10rem |
+| py-44 | padding-top: 11rem; padding-bottom: 11rem |
+| py-48 | padding-top: 12rem; padding-bottom: 12rem |
+| py-52 | padding-top: 13rem; padding-bottom: 13rem |
+| py-56 | padding-top: 14rem; padding-bottom: 14rem |
+| py-60 | padding-top: 15rem; padding-bottom: 15rem |
+| py-64 | padding-top: 16rem; padding-bottom: 16rem |
+| py-72 | padding-top: 18rem; padding-bottom: 18rem |
+| py-80 | padding-top: 20rem; padding-bottom: 20rem |
+| py-96 | padding-top: 24rem; padding-bottom: 24rem |
+| pt-px | padding-top: 0.0625rem |
+| pt-0 | padding-top: 0 |
+| pt-none | padding-top: 0 |
+| pt-0\.5 | padding-top: 0.125rem |
+| pt-1 | padding-top: 0.25rem |
+| pt-1\.5 | padding-top: 0.375rem |
+| pt-2 | padding-top: 0.5rem |
+| pt-2\.5 | padding-top: 0.625rem |
+| pt-3 | padding-top: 0.75rem |
+| pt-3\.5 | padding-top: 0.875rem |
+| pt-4 | padding-top: 1rem |
+| pt-5 | padding-top: 1.25rem |
+| pt-6 | padding-top: 1.5rem |
+| pt-7 | padding-top: 1.75rem |
+| pt-8 | padding-top: 2rem |
+| pt-9 | padding-top: 2.25rem |
+| pt-10 | padding-top: 2.5rem |
+| pt-11 | padding-top: 2.75rem |
+| pt-12 | padding-top: 3rem |
+| pt-14 | padding-top: 3.5rem |
+| pt-16 | padding-top: 4rem |
+| pt-18 | padding-top: 4.5rem |
+| pt-20 | padding-top: 5rem |
+| pt-24 | padding-top: 6rem |
+| pt-28 | padding-top: 7rem |
+| pt-32 | padding-top: 8rem |
+| pt-36 | padding-top: 9rem |
+| pt-40 | padding-top: 10rem |
+| pt-44 | padding-top: 11rem |
+| pt-48 | padding-top: 12rem |
+| pt-52 | padding-top: 13rem |
+| pt-56 | padding-top: 14rem |
+| pt-60 | padding-top: 15rem |
+| pt-64 | padding-top: 16rem |
+| pt-72 | padding-top: 18rem |
+| pt-80 | padding-top: 20rem |
+| pt-96 | padding-top: 24rem |
+| pr-px | padding-right: 0.0625rem |
+| pr-0 | padding-right: 0 |
+| pr-none | padding-right: 0 |
+| pr-0\.5 | padding-right: 0.125rem |
+| pr-1 | padding-right: 0.25rem |
+| pr-1\.5 | padding-right: 0.375rem |
+| pr-2 | padding-right: 0.5rem |
+| pr-2\.5 | padding-right: 0.625rem |
+| pr-3 | padding-right: 0.75rem |
+| pr-3\.5 | padding-right: 0.875rem |
+| pr-4 | padding-right: 1rem |
+| pr-5 | padding-right: 1.25rem |
+| pr-6 | padding-right: 1.5rem |
+| pr-7 | padding-right: 1.75rem |
+| pr-8 | padding-right: 2rem |
+| pr-9 | padding-right: 2.25rem |
+| pr-10 | padding-right: 2.5rem |
+| pr-11 | padding-right: 2.75rem |
+| pr-12 | padding-right: 3rem |
+| pr-14 | padding-right: 3.5rem |
+| pr-16 | padding-right: 4rem |
+| pr-18 | padding-right: 4.5rem |
+| pr-20 | padding-right: 5rem |
+| pr-24 | padding-right: 6rem |
+| pr-28 | padding-right: 7rem |
+| pr-32 | padding-right: 8rem |
+| pr-36 | padding-right: 9rem |
+| pr-40 | padding-right: 10rem |
+| pr-44 | padding-right: 11rem |
+| pr-48 | padding-right: 12rem |
+| pr-52 | padding-right: 13rem |
+| pr-56 | padding-right: 14rem |
+| pr-60 | padding-right: 15rem |
+| pr-64 | padding-right: 16rem |
+| pr-72 | padding-right: 18rem |
+| pr-80 | padding-right: 20rem |
+| pr-96 | padding-right: 24rem |
+| pb-px | padding-bottom: 0.0625rem |
+| pb-0 | padding-bottom: 0 |
+| pb-none | padding-bottom: 0 |
+| pb-0\.5 | padding-bottom: 0.125rem |
+| pb-1 | padding-bottom: 0.25rem |
+| pb-1\.5 | padding-bottom: 0.375rem |
+| pb-2 | padding-bottom: 0.5rem |
+| pb-2\.5 | padding-bottom: 0.625rem |
+| pb-3 | padding-bottom: 0.75rem |
+| pb-3\.5 | padding-bottom: 0.875rem |
+| pb-4 | padding-bottom: 1rem |
+| pb-5 | padding-bottom: 1.25rem |
+| pb-6 | padding-bottom: 1.5rem |
+| pb-7 | padding-bottom: 1.75rem |
+| pb-8 | padding-bottom: 2rem |
+| pb-9 | padding-bottom: 2.25rem |
+| pb-10 | padding-bottom: 2.5rem |
+| pb-11 | padding-bottom: 2.75rem |
+| pb-12 | padding-bottom: 3rem |
+| pb-14 | padding-bottom: 3.5rem |
+| pb-16 | padding-bottom: 4rem |
+| pb-18 | padding-bottom: 4.5rem |
+| pb-20 | padding-bottom: 5rem |
+| pb-24 | padding-bottom: 6rem |
+| pb-28 | padding-bottom: 7rem |
+| pb-32 | padding-bottom: 8rem |
+| pb-36 | padding-bottom: 9rem |
+| pb-40 | padding-bottom: 10rem |
+| pb-44 | padding-bottom: 11rem |
+| pb-48 | padding-bottom: 12rem |
+| pb-52 | padding-bottom: 13rem |
+| pb-56 | padding-bottom: 14rem |
+| pb-60 | padding-bottom: 15rem |
+| pb-64 | padding-bottom: 16rem |
+| pb-72 | padding-bottom: 18rem |
+| pb-80 | padding-bottom: 20rem |
+| pb-96 | padding-bottom: 24rem |
+| pl-px | padding-left: 0.0625rem |
+| pl-0 | padding-left: 0 |
+| pl-none | padding-left: 0 |
+| pl-0\.5 | padding-left: 0.125rem |
+| pl-1 | padding-left: 0.25rem |
+| pl-1\.5 | padding-left: 0.375rem |
+| pl-2 | padding-left: 0.5rem |
+| pl-2\.5 | padding-left: 0.625rem |
+| pl-3 | padding-left: 0.75rem |
+| pl-3\.5 | padding-left: 0.875rem |
+| pl-4 | padding-left: 1rem |
+| pl-5 | padding-left: 1.25rem |
+| pl-6 | padding-left: 1.5rem |
+| pl-7 | padding-left: 1.75rem |
+| pl-8 | padding-left: 2rem |
+| pl-9 | padding-left: 2.25rem |
+| pl-10 | padding-left: 2.5rem |
+| pl-11 | padding-left: 2.75rem |
+| pl-12 | padding-left: 3rem |
+| pl-14 | padding-left: 3.5rem |
+| pl-16 | padding-left: 4rem |
+| pl-18 | padding-left: 4.5rem |
+| pl-20 | padding-left: 5rem |
+| pl-24 | padding-left: 6rem |
+| pl-28 | padding-left: 7rem |
+| pl-32 | padding-left: 8rem |
+| pl-36 | padding-left: 9rem |
+| pl-40 | padding-left: 10rem |
+| pl-44 | padding-left: 11rem |
+| pl-48 | padding-left: 12rem |
+| pl-52 | padding-left: 13rem |
+| pl-56 | padding-left: 14rem |
+| pl-60 | padding-left: 15rem |
+| pl-64 | padding-left: 16rem |
+| pl-72 | padding-left: 18rem |
+| pl-80 | padding-left: 20rem |
+| pl-96 | padding-left: 24rem |
--- a/packages/amis-ui/scss/helper/spacing/_space-between.md
+++ b/packages/amis-ui/scss/helper/spacing/_space-between.md
@ -0,0 +1,155 @@
+---
+title: Space Between
+---
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| space-x-px | margin-left: 0.0625rem |
+| space-x-px.space-x-reverse | margin-right: 0.0625rem |
+| space-x-0 | margin-left: 0 |
+| space-x-0.space-x-reverse | margin-right: 0 |
+| space-x-none | margin-left: 0 |
+| space-x-none.space-x-reverse | margin-right: 0 |
+| space-x-0\.5 | margin-left: 0.125rem |
+| space-x-0\.5.space-x-reverse | margin-right: 0.125rem |
+| space-x-1 | margin-left: 0.25rem |
+| space-x-1.space-x-reverse | margin-right: 0.25rem |
+| space-x-1\.5 | margin-left: 0.375rem |
+| space-x-1\.5.space-x-reverse | margin-right: 0.375rem |
+| space-x-2 | margin-left: 0.5rem |
+| space-x-2.space-x-reverse | margin-right: 0.5rem |
+| space-x-2\.5 | margin-left: 0.625rem |
+| space-x-2\.5.space-x-reverse | margin-right: 0.625rem |
+| space-x-3 | margin-left: 0.75rem |
+| space-x-3.space-x-reverse | margin-right: 0.75rem |
+| space-x-3\.5 | margin-left: 0.875rem |
+| space-x-3\.5.space-x-reverse | margin-right: 0.875rem |
+| space-x-4 | margin-left: 1rem |
+| space-x-4.space-x-reverse | margin-right: 1rem |
+| space-x-5 | margin-left: 1.25rem |
+| space-x-5.space-x-reverse | margin-right: 1.25rem |
+| space-x-6 | margin-left: 1.5rem |
+| space-x-6.space-x-reverse | margin-right: 1.5rem |
+| space-x-7 | margin-left: 1.75rem |
+| space-x-7.space-x-reverse | margin-right: 1.75rem |
+| space-x-8 | margin-left: 2rem |
+| space-x-8.space-x-reverse | margin-right: 2rem |
+| space-x-9 | margin-left: 2.25rem |
+| space-x-9.space-x-reverse | margin-right: 2.25rem |
+| space-x-10 | margin-left: 2.5rem |
+| space-x-10.space-x-reverse | margin-right: 2.5rem |
+| space-x-11 | margin-left: 2.75rem |
+| space-x-11.space-x-reverse | margin-right: 2.75rem |
+| space-x-12 | margin-left: 3rem |
+| space-x-12.space-x-reverse | margin-right: 3rem |
+| space-x-14 | margin-left: 3.5rem |
+| space-x-14.space-x-reverse | margin-right: 3.5rem |
+| space-x-16 | margin-left: 4rem |
+| space-x-16.space-x-reverse | margin-right: 4rem |
+| space-x-18 | margin-left: 4.5rem |
+| space-x-18.space-x-reverse | margin-right: 4.5rem |
+| space-x-20 | margin-left: 5rem |
+| space-x-20.space-x-reverse | margin-right: 5rem |
+| space-x-24 | margin-left: 6rem |
+| space-x-24.space-x-reverse | margin-right: 6rem |
+| space-x-28 | margin-left: 7rem |
+| space-x-28.space-x-reverse | margin-right: 7rem |
+| space-x-32 | margin-left: 8rem |
+| space-x-32.space-x-reverse | margin-right: 8rem |
+| space-x-36 | margin-left: 9rem |
+| space-x-36.space-x-reverse | margin-right: 9rem |
+| space-x-40 | margin-left: 10rem |
+| space-x-40.space-x-reverse | margin-right: 10rem |
+| space-x-44 | margin-left: 11rem |
+| space-x-44.space-x-reverse | margin-right: 11rem |
+| space-x-48 | margin-left: 12rem |
+| space-x-48.space-x-reverse | margin-right: 12rem |
+| space-x-52 | margin-left: 13rem |
+| space-x-52.space-x-reverse | margin-right: 13rem |
+| space-x-56 | margin-left: 14rem |
+| space-x-56.space-x-reverse | margin-right: 14rem |
+| space-x-60 | margin-left: 15rem |
+| space-x-60.space-x-reverse | margin-right: 15rem |
+| space-x-64 | margin-left: 16rem |
+| space-x-64.space-x-reverse | margin-right: 16rem |
+| space-x-72 | margin-left: 18rem |
+| space-x-72.space-x-reverse | margin-right: 18rem |
+| space-x-80 | margin-left: 20rem |
+| space-x-80.space-x-reverse | margin-right: 20rem |
+| space-x-96 | margin-left: 24rem |
+| space-x-96.space-x-reverse | margin-right: 24rem |
+| space-y-px | margin-top: 0.0625rem |
+| space-y-px.space-y-reverse | margin-bottom: 0.0625rem |
+| space-y-0 | margin-top: 0 |
+| space-y-0.space-y-reverse | margin-bottom: 0 |
+| space-y-none | margin-top: 0 |
+| space-y-none.space-y-reverse | margin-bottom: 0 |
+| space-y-0\.5 | margin-top: 0.125rem |
+| space-y-0\.5.space-y-reverse | margin-bottom: 0.125rem |
+| space-y-1 | margin-top: 0.25rem |
+| space-y-1.space-y-reverse | margin-bottom: 0.25rem |
+| space-y-1\.5 | margin-top: 0.375rem |
+| space-y-1\.5.space-y-reverse | margin-bottom: 0.375rem |
+| space-y-2 | margin-top: 0.5rem |
+| space-y-2.space-y-reverse | margin-bottom: 0.5rem |
+| space-y-2\.5 | margin-top: 0.625rem |
+| space-y-2\.5.space-y-reverse | margin-bottom: 0.625rem |
+| space-y-3 | margin-top: 0.75rem |
+| space-y-3.space-y-reverse | margin-bottom: 0.75rem |
+| space-y-3\.5 | margin-top: 0.875rem |
+| space-y-3\.5.space-y-reverse | margin-bottom: 0.875rem |
+| space-y-4 | margin-top: 1rem |
+| space-y-4.space-y-reverse | margin-bottom: 1rem |
+| space-y-5 | margin-top: 1.25rem |
+| space-y-5.space-y-reverse | margin-bottom: 1.25rem |
+| space-y-6 | margin-top: 1.5rem |
+| space-y-6.space-y-reverse | margin-bottom: 1.5rem |
+| space-y-7 | margin-top: 1.75rem |
+| space-y-7.space-y-reverse | margin-bottom: 1.75rem |
+| space-y-8 | margin-top: 2rem |
+| space-y-8.space-y-reverse | margin-bottom: 2rem |
+| space-y-9 | margin-top: 2.25rem |
+| space-y-9.space-y-reverse | margin-bottom: 2.25rem |
+| space-y-10 | margin-top: 2.5rem |
+| space-y-10.space-y-reverse | margin-bottom: 2.5rem |
+| space-y-11 | margin-top: 2.75rem |
+| space-y-11.space-y-reverse | margin-bottom: 2.75rem |
+| space-y-12 | margin-top: 3rem |
+| space-y-12.space-y-reverse | margin-bottom: 3rem |
+| space-y-14 | margin-top: 3.5rem |
+| space-y-14.space-y-reverse | margin-bottom: 3.5rem |
+| space-y-16 | margin-top: 4rem |
+| space-y-16.space-y-reverse | margin-bottom: 4rem |
+| space-y-18 | margin-top: 4.5rem |
+| space-y-18.space-y-reverse | margin-bottom: 4.5rem |
+| space-y-20 | margin-top: 5rem |
+| space-y-20.space-y-reverse | margin-bottom: 5rem |
+| space-y-24 | margin-top: 6rem |
+| space-y-24.space-y-reverse | margin-bottom: 6rem |
+| space-y-28 | margin-top: 7rem |
+| space-y-28.space-y-reverse | margin-bottom: 7rem |
+| space-y-32 | margin-top: 8rem |
+| space-y-32.space-y-reverse | margin-bottom: 8rem |
+| space-y-36 | margin-top: 9rem |
+| space-y-36.space-y-reverse | margin-bottom: 9rem |
+| space-y-40 | margin-top: 10rem |
+| space-y-40.space-y-reverse | margin-bottom: 10rem |
+| space-y-44 | margin-top: 11rem |
+| space-y-44.space-y-reverse | margin-bottom: 11rem |
+| space-y-48 | margin-top: 12rem |
+| space-y-48.space-y-reverse | margin-bottom: 12rem |
+| space-y-52 | margin-top: 13rem |
+| space-y-52.space-y-reverse | margin-bottom: 13rem |
+| space-y-56 | margin-top: 14rem |
+| space-y-56.space-y-reverse | margin-bottom: 14rem |
+| space-y-60 | margin-top: 15rem |
+| space-y-60.space-y-reverse | margin-bottom: 15rem |
+| space-y-64 | margin-top: 16rem |
+| space-y-64.space-y-reverse | margin-bottom: 16rem |
+| space-y-72 | margin-top: 18rem |
+| space-y-72.space-y-reverse | margin-bottom: 18rem |
+| space-y-80 | margin-top: 20rem |
+| space-y-80.space-y-reverse | margin-bottom: 20rem |
+| space-y-96 | margin-top: 24rem |
+| space-y-96.space-y-reverse | margin-bottom: 24rem |
--- a/packages/amis-ui/scss/helper/typography/_font-family.md
+++ b/packages/amis-ui/scss/helper/typography/_font-family.md
@ -0,0 +1,9 @@
+---
+title: Font Family
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| font-sans | ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
+| font-serif | font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif |
+| font-mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace |
--- a/packages/amis-ui/scss/helper/typography/_font-size.md
+++ b/packages/amis-ui/scss/helper/typography/_font-size.md
@ -0,0 +1,19 @@
+---
+title: Font Size
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-xs | font-size: 0.75rem; line-height: 1rem |
+| text-sm | font-size: 0.875rem; line-height: 1.25rem |
+| text-base | font-size: 1rem; line-height: 1.5rem |
+| text-md | font-size: 1.125rem; line-height: 1.75rem |
+| text-lg | font-size: 1.25rem; line-height: 1.75rem |
+| text-xl | font-size: 1.5rem; line-height: 2rem |
+| text-2xl | font-size: 1.875rem; line-height: 2.25rem |
+| text-3xl | font-size: 2.25rem; line-height: 2.5rem |
+| text-4xl | font-size: 3rem; line-height: 1 |
+| text-5xl | font-size: 3.75rem; line-height: 1 |
+| text-6xl | font-size: 4.5rem; line-height: 1 |
+| text-7xl | font-size: 6rem; line-height: 1 |
+| text-8xl | font-size: 8rem; line-height: 1 |
--- a/packages/amis-ui/scss/helper/typography/_font-style.md
+++ b/packages/amis-ui/scss/helper/typography/_font-style.md
@ -0,0 +1,8 @@
+---
+title: Font Style
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| italic | font-style: italic |
+| not-italic | font-style: normal |
--- a/packages/amis-ui/scss/helper/typography/_font-weight.md
+++ b/packages/amis-ui/scss/helper/typography/_font-weight.md
@ -0,0 +1,15 @@
+---
+title: Font Weight
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| font-thin | font-weight: 100 |
+| font-extralight | font-weight: 200 |
+| font-light | font-weight: 300 |
+| font-normal | font-weight: 400 |
+| font-medium | font-weight: 500 |
+| font-semibold | font-weight: 600 |
+| font-bold | font-weight: 700 |
+| font-extrabold | font-weight: 800 |
+| font-black | font-weight: 900 |
--- a/packages/amis-ui/scss/helper/typography/_letter-spacing.md
+++ b/packages/amis-ui/scss/helper/typography/_letter-spacing.md
@ -0,0 +1,12 @@
+---
+title: Letter Spacing
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| tracking-tighter | letter-spacing: -0.05em |
+| tracking-tight | letter-spacing: -0.025em |
+| tracking-normal | letter-spacing: 0em |
+| tracking-wide | letter-spacing: 0.025 |
+| tracking-wider | letter-spacing: 0.05em |
+| tracking-widest | letter-spacing: 0.1em |
--- a/packages/amis-ui/scss/helper/typography/_line-height.md
+++ b/packages/amis-ui/scss/helper/typography/_line-height.md
@ -0,0 +1,20 @@
+---
+title: Line Height
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| leading-3 | line-height: 0.75rem |
+| leading-4 | line-height: 1rem |
+| leading-5 | line-height: 1.25rem |
+| leading-6 | line-height: 1.5rem |
+| leading-7 | line-height: 1.75rem |
+| leading-8 | line-height: 2rem |
+| leading-9 | line-height: 2.25rem |
+| leading-10 | line-height: 2.5rem |
+| leading-none | line-height: 1 |
+| leading-tight | line-height: 1.25 |
+| leading-snug | line-height: 1.375 |
+| leading-normal | line-height: 1.5 |
+| leading-relaxed | line-height: 1.625 |
+| leading-loose | line-height: 2 |
--- a/packages/amis-ui/scss/helper/typography/_list-style-type.md
+++ b/packages/amis-ui/scss/helper/typography/_list-style-type.md
@ -0,0 +1,11 @@
+---
+title: List Style Type
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| list-none | list-style-type: none |
+| list-disc | list-style-type: disc |
+| list-decimal | list-style-type: decimal |
+| list-inside | list-style-position: inside |
+| list-outside | list-style-position: outside |
--- a/packages/amis-ui/scss/helper/typography/_text-align.md
+++ b/packages/amis-ui/scss/helper/typography/_text-align.md
@ -0,0 +1,10 @@
+---
+title: Text Align
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-left | text-align: left |
+| text-center | text-align: center |
+| text-right | text-align: right |
+| text-justify | text-align: justify |
--- a/packages/amis-ui/scss/helper/typography/_text-color.md
+++ b/packages/amis-ui/scss/helper/typography/_text-color.md
@ -0,0 +1,110 @@
+---
+title: Text Color
+---
+
+| Class       | Properties               | 示例效果               |
+| ----------- | ------------------------ | ------------------------ |
+| text-transparent | color: transparent | <span style="color: #transparent">AaBbCcDd</span>|
+| text-current | color: currentColor | <span style="color: #currentColor">AaBbCcDd</span>|
+| text-black | color: #000 | <span style="color: #000">AaBbCcDd</span>|
+| text-white | color: #fff | <span style="color: #fff">AaBbCcDd</span>|
+| text-primary | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
+| text-secondary | color: #6c757d | <span style="color: #6c757d">AaBbCcDd</span>|
+| text-success | color: #28a745 | <span style="color: #28a745">AaBbCcDd</span>|
+| text-info | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
+| text-warning | color: #fad733 | <span style="color: #fad733">AaBbCcDd</span>|
+| text-danger | color: #dc3545 | <span style="color: #dc3545">AaBbCcDd</span>|
+| text-light | color: #f8f9fa | <span style="color: #f8f9fa">AaBbCcDd</span>|
+| text-dark | color: #343a40 | <span style="color: #343a40">AaBbCcDd</span>|
+| text-gray-50 | color: #f9fafb | <span style="color: #f9fafb">AaBbCcDd</span>|
+| text-gray-100 | color: #f3f4f6 | <span style="color: #f3f4f6">AaBbCcDd</span>|
+| text-gray-200 | color: #e5e7eb | <span style="color: #e5e7eb">AaBbCcDd</span>|
+| text-gray-300 | color: #d1d5db | <span style="color: #d1d5db">AaBbCcDd</span>|
+| text-gray-400 | color: #9ca3af | <span style="color: #9ca3af">AaBbCcDd</span>|
+| text-gray-500 | color: #6b7280 | <span style="color: #6b7280">AaBbCcDd</span>|
+| text-gray-600 | color: #4b5563 | <span style="color: #4b5563">AaBbCcDd</span>|
+| text-gray-700 | color: #374151 | <span style="color: #374151">AaBbCcDd</span>|
+| text-gray-800 | color: #1f2937 | <span style="color: #1f2937">AaBbCcDd</span>|
+| text-gray-900 | color: #111827 | <span style="color: #111827">AaBbCcDd</span>|
+| text-red-50 | color: #fef2f2 | <span style="color: #fef2f2">AaBbCcDd</span>|
+| text-red-100 | color: #fee2e2 | <span style="color: #fee2e2">AaBbCcDd</span>|
+| text-red-200 | color: #fecaca | <span style="color: #fecaca">AaBbCcDd</span>|
+| text-red-300 | color: #fca5a5 | <span style="color: #fca5a5">AaBbCcDd</span>|
+| text-red-400 | color: #f87171 | <span style="color: #f87171">AaBbCcDd</span>|
+| text-red-500 | color: #ef4444 | <span style="color: #ef4444">AaBbCcDd</span>|
+| text-red-600 | color: #dc2626 | <span style="color: #dc2626">AaBbCcDd</span>|
+| text-red-700 | color: #b91c1c | <span style="color: #b91c1c">AaBbCcDd</span>|
+| text-red-800 | color: #991b1b | <span style="color: #991b1b">AaBbCcDd</span>|
+| text-red-900 | color: #7f1d1d | <span style="color: #7f1d1d">AaBbCcDd</span>|
+| text-yellow-50 | color: #fffbeb | <span style="color: #fffbeb">AaBbCcDd</span>|
+| text-yellow-100 | color: #fef3c7 | <span style="color: #fef3c7">AaBbCcDd</span>|
+| text-yellow-200 | color: #fde68a | <span style="color: #fde68a">AaBbCcDd</span>|
+| text-yellow-300 | color: #fcd34d | <span style="color: #fcd34d">AaBbCcDd</span>|
+| text-yellow-400 | color: #fbbf24 | <span style="color: #fbbf24">AaBbCcDd</span>|
+| text-yellow-500 | color: #f59e0b | <span style="color: #f59e0b">AaBbCcDd</span>|
+| text-yellow-600 | color: #d97706 | <span style="color: #d97706">AaBbCcDd</span>|
+| text-yellow-700 | color: #b45309 | <span style="color: #b45309">AaBbCcDd</span>|
+| text-yellow-800 | color: #92400e | <span style="color: #92400e">AaBbCcDd</span>|
+| text-yellow-900 | color: #78350f | <span style="color: #78350f">AaBbCcDd</span>|
+| text-green-50 | color: #ecfdf5 | <span style="color: #ecfdf5">AaBbCcDd</span>|
+| text-green-100 | color: #d1fae5 | <span style="color: #d1fae5">AaBbCcDd</span>|
+| text-green-200 | color: #a7f3d0 | <span style="color: #a7f3d0">AaBbCcDd</span>|
+| text-green-300 | color: #6ee7b7 | <span style="color: #6ee7b7">AaBbCcDd</span>|
+| text-green-400 | color: #34d399 | <span style="color: #34d399">AaBbCcDd</span>|
+| text-green-500 | color: #10b981 | <span style="color: #10b981">AaBbCcDd</span>|
+| text-green-600 | color: #059669 | <span style="color: #059669">AaBbCcDd</span>|
+| text-green-700 | color: #047857 | <span style="color: #047857">AaBbCcDd</span>|
+| text-green-800 | color: #065f46 | <span style="color: #065f46">AaBbCcDd</span>|
+| text-green-900 | color: #064e3b | <span style="color: #064e3b">AaBbCcDd</span>|
+| text-blue-50 | color: #eff6ff | <span style="color: #eff6ff">AaBbCcDd</span>|
+| text-blue-100 | color: #dbeafe | <span style="color: #dbeafe">AaBbCcDd</span>|
+| text-blue-200 | color: #bfdbfe | <span style="color: #bfdbfe">AaBbCcDd</span>|
+| text-blue-300 | color: #93c5fd | <span style="color: #93c5fd">AaBbCcDd</span>|
+| text-blue-400 | color: #60a5fa | <span style="color: #60a5fa">AaBbCcDd</span>|
+| text-blue-500 | color: #3b82f6 | <span style="color: #3b82f6">AaBbCcDd</span>|
+| text-blue-600 | color: #2563eb | <span style="color: #2563eb">AaBbCcDd</span>|
+| text-blue-700 | color: #1d4ed8 | <span style="color: #1d4ed8">AaBbCcDd</span>|
+| text-blue-800 | color: #1e40af | <span style="color: #1e40af">AaBbCcDd</span>|
+| text-blue-900 | color: #1e3a8a | <span style="color: #1e3a8a">AaBbCcDd</span>|
+| text-cyan-50 | color: #ecfeff | <span style="color: #ecfeff">AaBbCcDd</span>|
+| text-cyan-100 | color: #cffafe | <span style="color: #cffafe">AaBbCcDd</span>|
+| text-cyan-200 | color: #a5f3fc | <span style="color: #a5f3fc">AaBbCcDd</span>|
+| text-cyan-300 | color: #67e8f9 | <span style="color: #67e8f9">AaBbCcDd</span>|
+| text-cyan-400 | color: #22d3ee | <span style="color: #22d3ee">AaBbCcDd</span>|
+| text-cyan-500 | color: #06b6d4 | <span style="color: #06b6d4">AaBbCcDd</span>|
+| text-cyan-600 | color: #0891b2 | <span style="color: #0891b2">AaBbCcDd</span>|
+| text-cyan-700 | color: #0e7490 | <span style="color: #0e7490">AaBbCcDd</span>|
+| text-cyan-800 | color: #155e75 | <span style="color: #155e75">AaBbCcDd</span>|
+| text-cyan-900 | color: #164e63 | <span style="color: #164e63">AaBbCcDd</span>|
+| text-indigo-50 | color: #eef2ff | <span style="color: #eef2ff">AaBbCcDd</span>|
+| text-indigo-100 | color: #e0e7ff | <span style="color: #e0e7ff">AaBbCcDd</span>|
+| text-indigo-200 | color: #c7d2fe | <span style="color: #c7d2fe">AaBbCcDd</span>|
+| text-indigo-300 | color: #a5b4fc | <span style="color: #a5b4fc">AaBbCcDd</span>|
+| text-indigo-400 | color: #818cf8 | <span style="color: #818cf8">AaBbCcDd</span>|
+| text-indigo-500 | color: #6366f1 | <span style="color: #6366f1">AaBbCcDd</span>|
+| text-indigo-600 | color: #4f46e5 | <span style="color: #4f46e5">AaBbCcDd</span>|
+| text-indigo-700 | color: #4338ca | <span style="color: #4338ca">AaBbCcDd</span>|
+| text-indigo-800 | color: #3730a3 | <span style="color: #3730a3">AaBbCcDd</span>|
+| text-indigo-900 | color: #312e81 | <span style="color: #312e81">AaBbCcDd</span>|
+| text-purple-50 | color: #f5f3ff | <span style="color: #f5f3ff">AaBbCcDd</span>|
+| text-purple-100 | color: #ede9fe | <span style="color: #ede9fe">AaBbCcDd</span>|
+| text-purple-200 | color: #ddd6fe | <span style="color: #ddd6fe">AaBbCcDd</span>|
+| text-purple-300 | color: #c4b5fd | <span style="color: #c4b5fd">AaBbCcDd</span>|
+| text-purple-400 | color: #a78bfa | <span style="color: #a78bfa">AaBbCcDd</span>|
+| text-purple-500 | color: #8b5cf6 | <span style="color: #8b5cf6">AaBbCcDd</span>|
+| text-purple-600 | color: #7c3aed | <span style="color: #7c3aed">AaBbCcDd</span>|
+| text-purple-700 | color: #6d28d9 | <span style="color: #6d28d9">AaBbCcDd</span>|
+| text-purple-800 | color: #5b21b6 | <span style="color: #5b21b6">AaBbCcDd</span>|
+| text-purple-900 | color: #4c1d95 | <span style="color: #4c1d95">AaBbCcDd</span>|
+| text-pink-50 | color: #fdf2f8 | <span style="color: #fdf2f8">AaBbCcDd</span>|
+| text-pink-100 | color: #fce7f3 | <span style="color: #fce7f3">AaBbCcDd</span>|
+| text-pink-200 | color: #fbcfe8 | <span style="color: #fbcfe8">AaBbCcDd</span>|
+| text-pink-300 | color: #f9a8d4 | <span style="color: #f9a8d4">AaBbCcDd</span>|
+| text-pink-400 | color: #f472b6 | <span style="color: #f472b6">AaBbCcDd</span>|
+| text-pink-500 | color: #ec4899 | <span style="color: #ec4899">AaBbCcDd</span>|
+| text-pink-600 | color: #db2777 | <span style="color: #db2777">AaBbCcDd</span>|
+| text-pink-700 | color: #be185d | <span style="color: #be185d">AaBbCcDd</span>|
+| text-pink-800 | color: #9d174d | <span style="color: #9d174d">AaBbCcDd</span>|
+| text-pink-900 | color: #831843 | <span style="color: #831843">AaBbCcDd</span>|
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:text-black`
--- a/packages/amis-ui/scss/helper/typography/_text-decoration.md
+++ b/packages/amis-ui/scss/helper/typography/_text-decoration.md
@ -0,0 +1,9 @@
+---
+title: Text Decoration
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| underline | text-decoration: underline |
+| line-through | text-decoration: line-through |
+| no-underline | text-decoration: none |
--- a/packages/amis-ui/scss/helper/typography/_text-overflow.md
+++ b/packages/amis-ui/scss/helper/typography/_text-overflow.md
@ -0,0 +1,9 @@
+---
+title: Text OverFlow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
+| overflow-ellipsis | text-overflow: ellipsis |
+| overflow-clip | text-overflow: clip |
--- a/packages/amis-ui/scss/helper/typography/_text-transform.md
+++ b/packages/amis-ui/scss/helper/typography/_text-transform.md
@ -0,0 +1,10 @@
+---
+title: Text Transform
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| uppercase | text-transform: uppercase |
+| lowercase | text-transform: lowercase |
+| capitalize | text-transform: capitalize |
+| normal-case | text-transform: none |
--- a/packages/amis-ui/scss/helper/typography/_vertical-align.md
+++ b/packages/amis-ui/scss/helper/typography/_vertical-align.md
@ -0,0 +1,12 @@
+---
+title: Vertial Align
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| align-baseline | vertical-align: baseline |
+| align-top | vertical-align: top |
+| align-middle | vertical-align: middle |
+| align-bottom | vertical-align: bottom |
+| align-text-top | vertical-align: text-top |
+| align-text-bottom | vertical-align: text-bottom |
--- a/packages/amis-ui/scss/helper/typography/_whitespace.md
+++ b/packages/amis-ui/scss/helper/typography/_whitespace.md
@ -0,0 +1,11 @@
+---
+title: Whitespace
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| white-space-normal | align: normal |
+| white-space-nowrap | white-space: nowrap |
+| white-space-pre | white-space: pre |
+| white-space-pre-line | white-space: pre-line |
+| white-space-pre-wrap | white-space: pre-wrap |
--- a/packages/amis-ui/scss/helper/typography/_word-break.md
+++ b/packages/amis-ui/scss/helper/typography/_word-break.md
@ -0,0 +1,9 @@
+---
+title: Word Break
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| break-normal | overflow-wrap: normal; word-break: normal |
+| break-words | overflow-wrap: break-word |
+| break-all | word-break: break-all |
--- a/packages/amis/src/renderers/Icon.tsx
+++ b/packages/amis/src/renderers/Icon.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import {Renderer, RendererProps, filter, IconCheckedSchema} from 'amis-core';
 import {BaseSchema, SchemaTpl} from '../Schema';
 import {BadgeObject, withBadge} from 'amis-ui';
-import {getIcon} from 'amis-ui/lib/components/icons';
+import {getIcon} from 'amis-ui';
 import {isObject} from 'lodash';

 /**
--- a/packages/amis/tsconfig.json
+++ b/packages/amis/tsconfig.json
@ -3,6 +3,7 @@
  "compilerOptions": {
    "outDir": "lib",
    "rootDir": "./",
+    "experimentalDecorators": true,
    "typeRoots": [
      "../../types",
      "./node_modules/@types",
--- a/scripts/fis3plugin.ts
+++ b/scripts/fis3plugin.ts
@ -0,0 +1,62 @@
+import MagicString from 'magic-string';
+import {createFilter} from 'rollup-pluginutils';
+import type {Plugin} from 'vite';
+
+export default function fis3replace(
+  options: {
+    include?: any;
+    exclude?: any;
+    sourcemap?: boolean;
+    sourceMap?: boolean;
+  } = {}
+): Plugin {
+  const filter = createFilter(options.include, options.exclude);
+
+  return {
+    name: 'fis3',
+    enforce: 'pre',
+    apply: 'serve',
+
+    transform(code: string, id: string) {
+      if (!filter(id)) return null;
+
+      const magicString = new MagicString(code);
+
+      let hasReplacements = false;
+      let start;
+      let end;
+
+      code = code.replace(
+        /(__uri|__inline)\(\s*('|")(.*?)\2\s*\)/g,
+        (_, directive, quote, target, index) => {
+          hasReplacements = true;
+
+          start = index;
+          end = start + _.length;
+
+          if (directive === '__uri') {
+            let replacement = `new URL(${quote}${target}${quote}, import.meta.url).href`;
+            magicString.overwrite(start, end, replacement);
+          } else if (directive === '__inline') {
+            let varname = target
+              .replace(/[^a-zA-Z0-9]/g, '')
+              .replace(/^\d+/, '');
+
+            magicString.prepend(`import ${varname} from '${target}?inline';\n`);
+            magicString.overwrite(start, end, `${varname}`);
+          }
+
+          return _;
+        }
+      );
+
+      if (!hasReplacements) return null;
+
+      const result: any = {code: magicString.toString()};
+      if (options.sourceMap !== false && options.sourcemap !== false)
+        result.map = magicString.generateMap({hires: true});
+
+      return result;
+    }
+  };
+}
--- a/scripts/markdownPlugin.ts
+++ b/scripts/markdownPlugin.ts
@ -0,0 +1,251 @@
+import type {Plugin} from 'vite';
+import * as marked from 'marked';
+import * as prism from 'prismjs';
+import * as yaml from 'js-yaml';
+let loadLanguages = require('prismjs/components/');
+loadLanguages([
+  'bash',
+  'javascript',
+  'java',
+  'python',
+  'jsx',
+  'tsx',
+  'css',
+  'markup',
+  'json'
+]);
+const rYml = /^\s*---([\s\S]*?)---\s/;
+const renderer = new marked.Renderer();
+(marked as any).setOptions({
+  renderer: renderer,
+  gfm: true,
+  tables: true,
+  breaks: false,
+  pedantic: false,
+  smartLists: true,
+  smartypants: false
+});
+
+// Synchronous highlighting with prism.js
+(marked as any).setOptions({
+  highlight: function (code: string, lang: string) {
+    if (lang) {
+      return prism.highlight(code, prism.languages[lang], lang);
+    } else {
+      return code;
+    }
+  }
+});
+
+// renderer.table = function(header, body) {
+//   return '<table class="table table-striped">\n'
+//     + '<thead>\n'
+//     + header
+//     + '</thead>\n'
+//     + '<tbody>\n'
+//     + body
+//     + '</tbody>\n'
+//     + '</table>\n';
+// };
+
+renderer.link = function (href: string, title: string, text: string) {
+  if ((this as any).options.sanitize) {
+    try {
+      var prot = decodeURIComponent(unescape(href))
+        .replace(/[^\w:]/g, '')
+        .toLowerCase();
+    } catch (e) {
+      return '';
+    }
+    if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
+      return '';
+    }
+  }
+  if (href && href[0] === '#') {
+    href =
+      '#' +
+      encodeURIComponent(
+        href
+          .substring(1)
+          .toLowerCase()
+          .replace(/[^\u4e00-\u9fa5_a-zA-Z0-9]+/g, '-')
+      );
+  }
+
+  var out = '<a href="' + href + '"';
+  if (title) {
+    out += ' title="' + title + '"';
+  }
+  out += '>' + text + '</a>';
+  return out;
+};
+
+function markdown2js(content: string, file: string) {
+  var m = rYml.exec(content);
+  var info: any = {};
+  if (m && m[1]) {
+    info = (yaml as any).load(m[1]);
+    content = content.substring(m[0].length);
+  }
+
+  var toc: any = {
+    label: '目录',
+    type: 'toc',
+    children: [],
+    level: 0
+  };
+  var stack = [toc];
+
+  renderer.heading = function (text, level) {
+    var escapedText = encodeURIComponent(
+      text.toLowerCase().replace(/[^\u4e00-\u9fa5_a-zA-Z0-9]+/g, '-')
+    );
+
+    if (level < 5) {
+      var menu = {
+        label: text,
+        fragment: escapedText,
+        fullPath: '#' + escapedText,
+        level: level
+      };
+
+      while (stack.length && stack[0].level >= level) {
+        stack.shift();
+      }
+
+      stack[0].children = stack[0].children || [];
+      stack[0].children.push(menu);
+
+      stack.unshift(menu);
+    }
+
+    var anchor =
+      '<a class="anchor" name="' +
+      escapedText +
+      '" href="#' +
+      escapedText +
+      '" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>';
+
+    return '<h' + level + '>' + anchor + text + '</h' + level + '>';
+
+    // return '<h' + level + '><a name="' +
+    //   escapedText +
+    //   '" class="anchor" href="#' +
+    //   escapedText +
+    //   '"><span class="header-link"></span></a>' +
+    //   text + '</h' + level + '>';
+  };
+
+  const placeholder: any = {};
+  let index = 1;
+
+  content = content
+    .replace(/\!\!\!include\s*\(([^\)]+?)\)\!\!\!/g, (_, val) => {
+      // todo
+      // const result =  null;
+
+      // if (result) {
+      //   // 暂时不支持嵌套 include
+      //   return result.file.getContent();
+      // }
+
+      return _;
+    })
+    .replace(
+      /```(schema|html)(?::(.*?))?\n([\s\S]*?)```/g,
+      function (_, lang, attr, code) {
+        const setting: any = {};
+        attr &&
+          attr.split(/\s+/).forEach(function (item: string) {
+            var parts = item.split('=');
+
+            if (parts[1] && /^('|").*\1/.test(parts[1])) {
+              parts[1] = parts[1].substring(1, parts[1].length - 1);
+            }
+
+            setting[parts[0]] = parts[1] ? decodeURIComponent(parts[1]) : '';
+
+            if (parts[0] === 'height') {
+              setting.height = parseInt(setting.height, 10) /*编辑器的高度*/;
+              attr = attr.replace(item, `height="${setting.height}"`);
+            }
+          });
+
+        // placeholder[index] = `<iframe class="doc-iframe" width="100%" height="${setting.height || 200}px" frameBorder="0" src="/play?code=${encodeURIComponent(code)}&scope=${encodeURIComponent(setting.scope)}"></iframe>`;
+        if (lang === 'html') {
+          if (~code.indexOf('<html') || ~code.indexOf('<link')) {
+            return _;
+          }
+
+          placeholder[
+            index
+          ] = `<!--amis-preview-start--><div class="amis-doc"><div class="preview">${code}</div><pre><code class="lang-html">${prism.highlight(
+            code
+              .replace(/"data:(\w+\/\w+);.*?"/g, '"data:$1; ..."')
+              .replace(/<svg([^>]*)>[\s\S]*?<\/svg>/g, '<svg$1>...</svg>')
+              .replace(/class="([^"]*?)\.\.\.([^"]*?)"/g, 'class="$1..."'),
+            prism.languages[lang],
+            lang
+          )}</code></pre></div><!--amis-preview-end-->`;
+        } else {
+          placeholder[
+            index
+          ] = `<!--amis-preview-start--><div class="amis-preview" style="min-height: ${setting.height}px"><script type="text/schema" ${attr}>${code}</script></div><!--amis-preview-end-->`;
+        }
+
+        return `[[${index++}]]`;
+      }
+    );
+
+  content = (marked as any)
+    .parse(content)
+    .replace(/<p>\[\[(\d+)\]\]<\/p>/g, function (_: string, id: string) {
+      return placeholder[id] || '';
+    });
+
+  // content = global.fis ? fis.compile.partial(content, file, 'html') : content;
+  // + `\n\n<div class="m-t-lg b-l b-info b-3x wrapper bg-light dk">文档内容有误？欢迎大家一起来编写，文档地址：<i class="fa fa-github"></i><a href="https://github.com/baidu/amis/tree/master${file.subpath}">${file.subpath}</a>。</div>`;
+  info.html =
+    '<div class="markdown-body">' +
+    content.replace(
+      /<\!\-\-amis\-preview\-(start|end)\-\-\>/g,
+      function (_, type) {
+        return type === 'start' ? '</div>' : '<div class="markdown-body">';
+      }
+    ) +
+    '</div>';
+  info.toc = toc;
+
+  return 'export default ' + JSON.stringify(info, null, 2) + ';';
+}
+
+export default function markdownPlugin(options: {} = {}): Plugin {
+  return {
+    name: 'markdown-as-js',
+    enforce: 'pre',
+    apply: 'serve',
+    transform(code: string, id: string) {
+      // if (id.endsWith('.scss') && /\/_[^\/]+\.scss$/.test(id)) {
+      //   const markdowns: Array<string> = [];
+
+      //   code.replace(
+      //     /\/\*\!markdown\n([\s\S]+?)\*\//g,
+      //     (_: string, md: string) => {
+      //       markdowns.push(md.trim());
+      //       return _;
+      //     }
+      //   );
+
+      //   if (markdowns.length) {
+      //     return {code: markdown2js(markdowns.join('\n'), id) as string};
+      //   }
+
+      //   return null;
+      // }
+
+      if (!id.endsWith('.md')) return null;
+
+      return {code: markdown2js(code, id) as string};
+    }
+  };
+}
--- a/scripts/mockApiPlugin.ts
+++ b/scripts/mockApiPlugin.ts
@ -0,0 +1,42 @@
+import type {Plugin} from 'vite';
+// @ts-ignore
+import handler from '../mock/index';
+import express, {query} from 'express';
+import setPrototypeOf from 'setprototypeof';
+import path from 'path';
+const app = express();
+
+function initExpress(req: any, res: any, next: any, callback: () => void) {
+  if (app.enabled('x-powered-by')) res.setHeader('X-Powered-By', 'Express');
+  (req as any).res = res;
+  res.req = req;
+  (req as any).next = next;
+
+  setPrototypeOf(req, app.request);
+  setPrototypeOf(res, app.response);
+
+  res.locals = res.locals || Object.create(null);
+
+  query({})(req as any, res, callback);
+}
+
+export default function mockApiPlugin(options: {} = {}): Plugin {
+  return {
+    name: 'mock-api',
+    enforce: 'pre' as 'pre',
+    apply: 'serve' as 'serve',
+    configureServer(server) {
+      server.middlewares.use('/api', (req, res, next) => {
+        initExpress(req, res, next, () => {
+          handler(req, res);
+        });
+      });
+
+      server.middlewares.use('/schema.json', (req, res, next) => {
+        initExpress(req, res, next, () => {
+          res.sendFile(path.resolve(__dirname, '../packages/amis/schema.json'));
+        });
+      });
+    }
+  };
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -28,6 +28,14 @@
    }
  },
  "types": ["typePatches"],
-  "references": [{"path": "packages/amis"}],
-  "include": ["**.ts", "**.tsx", "packages/amis-ui/src/custom.d.ts"]
+  "references": [],
+  "include": [
+    "**.ts",
+    "**.tsx",
+    "**.jsx",
+    "scripts/fis3plugin.ts",
+    "scripts/markdownPlugin.ts",
+    "scripts/mockApiPlugin.ts",
+    "packages/amis-ui/src/custom.d.ts"
+  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,79 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import svgr from 'vite-plugin-svgr';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
+import replace from '@rollup/plugin-replace';
+import fis3 from './scripts/fis3plugin';
+import markdown from './scripts/markdownPlugin';
+import mockApi from './scripts/mockApiPlugin';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    fis3(),
+    markdown(),
+    mockApi(),
+
+    react({
+      babel: {
+        parserOpts: {
+          plugins: ['decorators-legacy', 'classProperties']
+        }
+      }
+    }),
+    svgr({
+      exportAsDefault: true,
+      svgrOptions: {
+        svgProps: {
+          className: 'icon'
+        },
+        prettier: false,
+        dimensions: false
+      }
+    }),
+    monacoEditorPlugin({}),
+    replace({
+      preventAssignment: true,
+      __buildDate__: () => JSON.stringify(new Date()),
+      __buildVersion: JSON.stringify('dev')
+    })
+  ],
+  optimizeDeps: {
+    include: ['amis-formula/lib/doc'],
+    esbuildOptions: {
+      target: 'esnext'
+    }
+  },
+  server: {
+    port: 8888
+  },
+  resolve: {
+    alias: [
+      {
+        find: 'amis-formula/lib',
+        replacement: path.resolve(__dirname, './packages/amis-formula/src')
+      },
+      {
+        find: 'amis-formula',
+        replacement: path.resolve(__dirname, './packages/amis-formula/src')
+      },
+      {
+        find: 'amis-ui/lib',
+        replacement: path.resolve(__dirname, './packages/amis-ui/src')
+      },
+      {
+        find: 'amis-ui',
+        replacement: path.resolve(__dirname, './packages/amis-ui/src')
+      },
+      {
+        find: 'amis-core',
+        replacement: path.resolve(__dirname, './packages/amis-core/src')
+      },
+      {
+        find: 'amis',
+        replacement: path.resolve(__dirname, './packages/amis/src')
+      }
+    ]
+  }
+});