Merge pull request #25 from webzard-io/improve

expand components property spec
2025-04-06 21:40:23 +08:00 · 2022-02-15 13:34:33 +08:00 · 2022-02-15 13:34:33 +08:00 · 3b15fc4e33
commit 3b15fc4e33
parent 19f09a7067
56 changed files with 883 additions and 611 deletions
--- a/packages/arco-lib/.gitignore
+++ b/packages/arco-lib/.gitignore
@ -1,6 +1,20 @@
 node_modules
 .DS_Store
+*.local
+
+.vscode
+.idea
+
+# log
+*.log
+*.log.*
+
+# dist
+lib
 dist
 dist-ssr
-*.local
-lib
+tsconfig.tsbuildinfo
+typings
+
+# jest test coverage
+coverage
--- a/packages/arco-lib/package.json
+++ b/packages/arco-lib/package.json
@ -30,7 +30,7 @@
    "prepublish": "npm run build && npm run typings"
  },
  "dependencies": {
-    "@arco-design/web-react": "^2.26.1",
+    "@arco-design/web-react": "^2.29.0",
    "@emotion/css": "^11.5.0",
    "@sinclair/typebox": "^0.21.2",
    "@sunmao-ui/core": "^0.3.6",
@ -43,10 +43,10 @@
  },
  "devDependencies": {
    "@sunmao-ui/editor": "0.3.9",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
    "@types/lodash": "^4.14.170",
    "@types/lodash-es": "^4.17.5",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "@vitejs/plugin-react": "^1.0.0",
--- a/packages/arco-lib/src/components/Alert.tsx
+++ b/packages/arco-lib/src/components/Alert.tsx
@ -39,7 +39,7 @@ const exampleProperties: Static<typeof AlertPropsSchema> = {
  closable: true,
  title: "info",
  content: "Here is an example text",
-  visible: "true",
+  visible: true,
  showIcon: true,
  banner: false,
  type: "info",
@ -52,6 +52,9 @@ const options = {
    name: "alert",
    displayName: "Alert",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    },
  },
  spec: {
    properties: AlertPropsSchema,
--- a/packages/arco-lib/src/components/Avatar.tsx
+++ b/packages/arco-lib/src/components/Avatar.tsx
@ -7,13 +7,12 @@ import { AvatarPropsSchema as BaseAvatarPropsSchema } from "../generated/types/A

 const AvatarPropsSchema = Type.Object({
  ...BaseAvatarPropsSchema,
-  className: Type.Optional(Type.String()),
 });
 const AvatarStateSchema = Type.Object({});

 const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = (props) => {
  const { slotsElements, customStyle } = props;
-  const { className, ...cProps } = getComponentProps(props);
+  const { ...cProps } = getComponentProps(props);

  return (
    <BaseAvatar className={css(customStyle?.content)} {...cProps}>
@ -23,10 +22,10 @@ const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = (props) => {
 };

 const exampleProperties: Static<typeof AvatarPropsSchema> = {
-  className: "avatar",
  shape: "circle",
  autoFixFontSize: false,
  triggerType: "button",
+  size:50
 };

 const options = {
@ -36,6 +35,9 @@ const options = {
    name: "avatar",
    displayName: "Avatar",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: AvatarPropsSchema,
--- a/packages/arco-lib/src/components/Badge.tsx
+++ b/packages/arco-lib/src/components/Badge.tsx
@ -1,6 +1,6 @@
 import { Badge as BaseBadge } from "@arco-design/web-react";
 import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { BadgePropsSchema as BaseBadgePropsSchema } from "../generated/types/Badge";
@ -9,7 +9,7 @@ const BadgePropsSchema = Type.Object(BaseBadgePropsSchema);
 const BadgeStateSchema = Type.Object({});

 const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
-  const { className, ...cProps } = getComponentProps(props);
+  const { ...cProps } = getComponentProps(props);
  const { customStyle, slotsElements } = props;

  // TODO need to be optimized
@ -22,17 +22,17 @@ const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
  }

  return (
-    <BaseBadge className={cx(className, css(customStyle?.content))} {...cProps}>
+    <BaseBadge className={css(customStyle?.content)} {...cProps}>
      {slotsElements.content}
    </BaseBadge>
  );
 };
 const exampleProperties: Static<typeof BadgePropsSchema> = {
  // TODO handle dotStyle and color
-  className: "",
  text: "",
  dot: true,
  count: 1,
+  color: "red",
  maxCount: 99,
  offset: [6, -2],
  status: "default",
@ -45,6 +45,9 @@ const options = {
    name: "badge",
    displayName: "Badge",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: BadgePropsSchema,
--- a/packages/arco-lib/src/components/Button.tsx
+++ b/packages/arco-lib/src/components/Button.tsx
@ -49,6 +49,9 @@ const options = {
    name: "button",
    displayName: "Button",
    exampleProperties,
+    annotations: {
+      category: "Input",
+    }
  },
  spec: {
    properties: ButtonPropsSchema,
--- a/packages/arco-lib/src/components/Checkbox.tsx
+++ b/packages/arco-lib/src/components/Checkbox.tsx
@ -205,6 +205,9 @@ const options = {
    name: "checkbox",
    displayName: "Checkbox",
    exampleProperties,
+    annotations: {
+      category: "Input",
+    }
  },
  spec: {
    properties: CheckboxPropsSchema,
--- a/packages/arco-lib/src/components/Divider.tsx
+++ b/packages/arco-lib/src/components/Divider.tsx
@ -1,6 +1,6 @@
 import { Divider as BaseDivider } from "@arco-design/web-react";
 import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { DividerPropsSchema as BaseDividerPropsSchema } from "../generated/types/Divider";
@ -36,6 +36,9 @@ const options = {
    name: "divider",
    displayName: "Divider",
    exampleProperties,
+    annotations: {
+      category: "Layout",
+    }
  },
  spec: {
    properties: DividerPropsSchema,
--- a/packages/arco-lib/src/components/Dropdown.tsx
+++ b/packages/arco-lib/src/components/Dropdown.tsx
@ -88,6 +88,9 @@ const options = {
    name: "dropdown",
    displayName: "Dropdown",
    exampleProperties,
+    annotations: {
+      category: "Input",
+    }
  },
  spec: {
    properties: DropdownPropsSchema,
--- a/packages/arco-lib/src/components/Icon.tsx
+++ b/packages/arco-lib/src/components/Icon.tsx
@ -26,6 +26,9 @@ export const Icon = implementRuntimeComponent({
      name: "IconArrowUp",
      spin: false,
    },
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: IconPropsSchema,
--- a/packages/arco-lib/src/components/Image.tsx
+++ b/packages/arco-lib/src/components/Image.tsx
@ -27,7 +27,7 @@ const ImageImpl: ComponentImpl<Static<typeof ImagePropsSchema>> = (
  );
 };
 const exampleProperties: Static<typeof ImagePropsSchema> = {
-  src :'https://camo.githubusercontent.com/e90098399ac24211c2fbb2c97111caaaeea182ba4df4a889798c3af3f9c3478f/68747470733a2f2f62616467656e2e6e65742f6769746875622f73746172732f7765627a6172642d696f2f73756e6d616f2d7569',
+  src :'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
  title:"stars",
  description:"sunmao-ui's stars",
  footerPosition:'inner',
@ -41,7 +41,10 @@ const options = {
    ...FALLBACK_METADATA,
    name: "image",
    displayName: "Image",
-    exampleProperties
+    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: ImagePropsSchema,
--- a/packages/arco-lib/src/components/Input.tsx
+++ b/packages/arco-lib/src/components/Input.tsx
@ -1,6 +1,6 @@
 import { Input as BaseInput } from "@arco-design/web-react";
 import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { InputPropsSchema as BaseInputPropsSchema } from "../generated/types/Input";
@ -8,7 +8,6 @@ import { useEffect, useState } from "react";

 const InputPropsSchema = Type.Object({
  ...BaseInputPropsSchema,
-  className: Type.Optional(Type.String()),
 });
 const InputStateSchema = Type.Object({
  value: Type.String(),
@ -16,7 +15,7 @@ const InputStateSchema = Type.Object({

 const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {
  const { slotsElements, customStyle, callbackMap, mergeState } = props;
-  const { className, defaultValue, ...cProps } = getComponentProps(props);
+  const { defaultValue, ...cProps } = getComponentProps(props);
  const [value, setValue] = useState(defaultValue);
  useEffect(() => {
    mergeState({
@ -26,7 +25,7 @@ const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {

  return (
    <BaseInput
-      className={cx(className, css(customStyle?.input))}
+      className={css(customStyle?.input)}
      addAfter={slotsElements.addAfter}
      addBefore={slotsElements.addBefore}
      prefix={slotsElements.prefix}
@ -44,7 +43,6 @@ const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {
 };

 const exampleProperties: Static<typeof InputPropsSchema> = {
-  className: "",
  allowClear: false,
  disabled: false,
  readOnly: false,
@ -52,7 +50,6 @@ const exampleProperties: Static<typeof InputPropsSchema> = {
  placeholder: "please input",
  error: false,
  size: "default",
-  showWordLimit: false,
 };

 const options = {
@ -62,6 +59,9 @@ const options = {
    name: "input",
    displayName: "Input",
    exampleProperties,
+    annotations: {
+      category: "Input",
+    },
  },
  spec: {
    properties: InputPropsSchema,
--- a/packages/arco-lib/src/components/Layout.tsx
+++ b/packages/arco-lib/src/components/Layout.tsx
@ -23,43 +23,6 @@ const LayoutImpl: ComponentImpl<Static<typeof LayoutPropsSchema>> = (props) => {
    </BaseLayout>
  );
 };
-const layoutExampleProperties: Static<typeof LayoutPropsSchema> = {
-  about: "",
-  accessKey: "",
-  autoCapitalize: "",
-  autoCorrect: "",
-  autoSave: "",
-  color: "",
-  contextMenu: "",
-  datatype: "",
-  defaultChecked: false,
-  dir: "",
-  hasSider: false,
-  hidden: false,
-  id: "",
-  inputMode: "text",
-  is: "",
-  itemID: "",
-  itemProp: "",
-  itemRef: "",
-  itemScope: false,
-  itemType: "",
-  lang: "",
-  placeholder: "",
-  prefix: "",
-  property: "",
-  radioGroup: "",
-  resource: "",
-  security: "",
-  slot: "",
-  suppressContentEditableWarning: false,
-  suppressHydrationWarning: false,
-  title: "",
-  translate: "yes",
-  typeof: "",
-  unselectable: "on",
-  vocab: "",
-};

 export const Layout = implementRuntimeComponent({
  version: "arco/v1",
@ -67,7 +30,10 @@ export const Layout = implementRuntimeComponent({
    ...FALLBACK_METADATA,
    name: "layout",
    displayName: "Layout",
-    exampleProperties: layoutExampleProperties,
+    exampleProperties: {},
+    annotations: {
+      category: "Layout",
+    },
  },
  spec: {
    properties: LayoutPropsSchema,
@ -92,42 +58,6 @@ const HeaderImpl: ComponentImpl<Static<typeof HeaderPropsSchema>> = (props) => {
    </BaseLayout.Header>
  );
 };
-const headerExampleProperties: Static<typeof HeaderPropsSchema> = {
-  about: "",
-  accessKey: "",
-  autoCapitalize: "",
-  autoCorrect: "",
-  autoSave: "",
-  color: "",
-  contextMenu: "",
-  datatype: "",
-  defaultChecked: false,
-  dir: "",
-  hidden: false,
-  id: "",
-  inputMode: "text",
-  is: "",
-  itemID: "",
-  itemProp: "",
-  itemRef: "",
-  itemScope: false,
-  itemType: "",
-  lang: "",
-  placeholder: "",
-  prefix: "",
-  property: "",
-  radioGroup: "",
-  resource: "",
-  security: "",
-  slot: "",
-  suppressContentEditableWarning: false,
-  suppressHydrationWarning: false,
-  title: "",
-  translate: "yes",
-  typeof: "",
-  unselectable: "on",
-  vocab: "",
-};

 export const Header = implementRuntimeComponent({
  version: "arco/v1",
@ -135,7 +65,10 @@ export const Header = implementRuntimeComponent({
    ...FALLBACK_METADATA,
    name: "header",
    displayName: "Header",
-    exampleProperties: headerExampleProperties,
+    exampleProperties: {},
+    annotations: {
+      category: "Layout",
+    },
  },
  spec: {
    properties: HeaderPropsSchema,
@ -161,50 +94,16 @@ const FooterImpl: ComponentImpl<Static<typeof FooterPropsSchema>> = (props) => {
  );
 };

-const footerExampleProperties = {
-  defaultChecked: false,
-  suppressContentEditableWarning: false,
-  suppressHydrationWarning: false,
-  accessKey: "",
-  contextMenu: "",
-  dir: "",
-  hidden: false,
-  id: "",
-  lang: "",
-  placeholder: "",
-  slot: "",
-  title: "",
-  translate: "yes",
-  radioGroup: "",
-  about: "",
-  datatype: "",
-  prefix: "",
-  property: "",
-  resource: "",
-  typeof: "",
-  vocab: "",
-  autoCapitalize: "",
-  autoCorrect: "",
-  autoSave: "",
-  color: "",
-  itemProp: "",
-  itemScope: false,
-  itemType: "",
-  itemID: "",
-  itemRef: "",
-  security: "",
-  unselectable: "on",
-  inputMode: "text",
-  is: "",
-};
-
 export const Footer = implementRuntimeComponent({
  version: "arco/v1",
  metadata: {
    ...FALLBACK_METADATA,
    name: "footer",
    displayName: "Footer",
-    exampleProperties: footerExampleProperties,
+    exampleProperties: {},
+    annotations: {
+      category: "Layout",
+    },
  },
  spec: {
    properties: FooterPropsSchema,
@ -232,42 +131,6 @@ const ContentImpl: ComponentImpl<Static<typeof ContentPropsSchema>> = (
  );
 };

-const contentExampleProperties = {
-  defaultChecked: false,
-  suppressContentEditableWarning: false,
-  suppressHydrationWarning: false,
-  accessKey: "",
-  contextMenu: "",
-  dir: "",
-  hidden: false,
-  id: "",
-  lang: "",
-  placeholder: "",
-  slot: "",
-  title: "",
-  translate: "yes",
-  radioGroup: "",
-  about: "",
-  datatype: "",
-  prefix: "",
-  property: "",
-  resource: "",
-  typeof: "",
-  vocab: "",
-  autoCapitalize: "",
-  autoCorrect: "",
-  autoSave: "",
-  color: "",
-  itemProp: "",
-  itemScope: false,
-  itemType: "",
-  itemID: "",
-  itemRef: "",
-  security: "",
-  unselectable: "on",
-  inputMode: "text",
-  is: "",
-};

 export const Content = implementRuntimeComponent({
  version: "arco/v1",
@ -275,7 +138,10 @@ export const Content = implementRuntimeComponent({
    ...FALLBACK_METADATA,
    name: "content",
    displayName: "Content",
-    exampleProperties: contentExampleProperties,
+    exampleProperties: {},
+    annotations: {
+      category: "Layout",
+    },
  },
  spec: {
    properties: ContentPropsSchema,
@ -305,9 +171,9 @@ const sideExampleProperties: Static<typeof SiderPropsSchema> = {
  breakpoint: "xl",
  collapsed: false,
  collapsible: false,
-  defaultCollapsed: false,
  reverseArrow: false,
  theme: "dark",
+  collapsedWidth: 48,
 };

 export const Sider = implementRuntimeComponent({
@ -317,6 +183,9 @@ export const Sider = implementRuntimeComponent({
    name: "sider",
    displayName: "Sider",
    exampleProperties: sideExampleProperties,
+    annotations: {
+      category: "Layout",
+    },
  },
  spec: {
    properties: SiderPropsSchema,
--- a/packages/arco-lib/src/components/Link.tsx
+++ b/packages/arco-lib/src/components/Link.tsx
@ -34,6 +34,9 @@ const options = {
    ...FALLBACK_METADATA,
    name: "link",
    displayName: "Link",
+    annotations: {
+      category: "Input",
+    },
    exampleProperties,
  },
  spec: {
--- a/packages/arco-lib/src/components/Menu.tsx
+++ b/packages/arco-lib/src/components/Menu.tsx
@ -5,17 +5,18 @@ import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { MenuPropsSchema as BaseMenuPropsSchema } from "../generated/types/Menu";
 import { useEffect, useState } from "react";
+import { Category } from "src/constants/category";

 const MenuPropsSchema = Type.Object({
  ...BaseMenuPropsSchema,
-  items: Type.Optional(
-    Type.Array(
-      Type.Object({
-        key: Type.String(),
-        text: Type.String(),
-        disabled: Type.Optional(Type.Boolean()),
-      })
-    )
+  items: Type.Array(
+    Type.Object({
+      key: Type.String(),
+      text: Type.String(),
+      disabled: Type.Optional(Type.Boolean()),
+    }),{
+      category:Category.Data
+    }
  ),
 });
 const MenuStateSchema = Type.Object({
@ -51,9 +52,6 @@ const MenuImpl: ComponentImpl<Static<typeof MenuPropsSchema>> = (props) => {
 };

 const exampleProperties: Static<typeof MenuPropsSchema> = {
-  prefixCls: "",
-  isMenu: false,
-  inDropdown: false,
  theme: "dark",
  mode: "vertical",
  autoOpen: false,
--- a/packages/arco-lib/src/components/Modal.tsx
+++ b/packages/arco-lib/src/components/Modal.tsx
@ -75,6 +75,9 @@ export const Modal = implementRuntimeComponent({
    exampleProperties,
    name: "modal",
    displayName: "Modal",
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: ModalPropsSchema,
--- a/packages/arco-lib/src/components/Pagination.tsx
+++ b/packages/arco-lib/src/components/Pagination.tsx
@ -48,7 +48,6 @@ const exampleProperties: Static<typeof PaginationPropsSchema> = {
  hideOnSinglePage: true,
  size: "default",
  sizeCanChange: true,
-  pageSizeChangeResetCurrent: true,
  simple: false,
  showJumper: false,
 };
@ -60,6 +59,9 @@ const options = {
    name: "pagination",
    displayName: "Pagination",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: PaginationPropsSchema,
--- a/packages/arco-lib/src/components/Popover.tsx
+++ b/packages/arco-lib/src/components/Popover.tsx
@ -59,7 +59,6 @@ const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSchema>> = (
 const exampleProperties: Static<typeof PopoverPropsSchema> = {
  color: "#eee",
  position: "bottom",
-  mini: false,
  unmountOnExit: true,
  disabled: false,
  controlled: false,
@ -75,6 +74,9 @@ const options = {
    name: "popover",
    displayName: "Popover",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: PopoverPropsSchema,
--- a/packages/arco-lib/src/components/Progress.tsx
+++ b/packages/arco-lib/src/components/Progress.tsx
@ -40,6 +40,9 @@ const options = {
    name: "progress",
    displayName: "Progress",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: ProgressPropsSchema,
--- a/packages/arco-lib/src/components/Radio.tsx
+++ b/packages/arco-lib/src/components/Radio.tsx
@ -1,6 +1,6 @@
 import { Radio as BaseRadio } from "@arco-design/web-react";
 import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css, cx } from "@emotion/css";
+import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { RadioPropsSchema as BaseRadioPropsSchema } from "../generated/types/Radio";
@ -55,9 +55,12 @@ const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = (props) => {
 };

 const exampleProperties: Static<typeof RadioPropsSchema> = {
-  options: [],
+  options: [
+    { label: 'A', value: 'a',disabled: false },
+    { label: 'B', value: 'b',disabled: true },
+  ],
  type: "radio",
-  defaultCheckedValue:'',
+  defaultCheckedValue:'b',
  direction: "horizontal",
  size: "default",
 };
@ -69,6 +72,9 @@ const options = {
    name: "radio",
    displayName: "Radio",
    exampleProperties,
+    annotations: {
+      category: "Input",
+    }
  },
  spec: {
    properties: RadioPropsSchema,
--- a/packages/arco-lib/src/components/Select.tsx
+++ b/packages/arco-lib/src/components/Select.tsx
@ -1,37 +1,19 @@
 import { Select as BaseSelect } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
-import {
-  FALLBACK_METADATA,
-  getComponentProps,
-} from "../sunmao-helper";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { SelectPropsSchema as BaseSelectPropsSchema } from "../generated/types/Select";
 import { useEffect, useState } from "react";

 const SelectPropsSchema = Type.Object({
  ...BaseSelectPropsSchema,
-  options: Type.Optional(
-    Type.Array(
-      Type.Object({
-        value: Type.String(),
-        text: Type.String(),
-        disabled: Type.Optional(Type.Boolean()),
-      })
-    )
-  ),
-  defaultValue: Type.Optional(Type.String()),
 });
 const SelectStateSchema = Type.Object({
  value: Type.String(),
 });

-const SelectImpl: ComponentImpl<Static<typeof SelectPropsSchema>> = (
-  props
-) => {
+const SelectImpl: ComponentImpl<Static<typeof SelectPropsSchema>> = (props) => {
  const { customStyle, callbackMap, mergeState, defaultValue = "" } = props;
  const { options = [], ...cProps } = getComponentProps(props);
  const [value, setValue] = useState<string>(defaultValue);
@ -66,7 +48,6 @@ const exampleProperties: Static<typeof SelectPropsSchema> = {
  animation: false,
  bordered: false,
  defaultActiveFirstOption: false,
-  defaultPopupVisible: false,
  defaultValue: "",
  disabled: false,
  error: false,
@ -91,7 +72,10 @@ export const Select = implementRuntimeComponent({
    ...FALLBACK_METADATA,
    name: "select",
    displayName: "Select",
-    exampleProperties
+    exampleProperties,
+    annotations: {
+      category: "Input",
+    }
  },
  spec: {
    properties: SelectPropsSchema,
--- a/packages/arco-lib/src/components/Skeleton.tsx
+++ b/packages/arco-lib/src/components/Skeleton.tsx
@ -35,6 +35,9 @@ const options = {
    name: "skeleton",
    displayName: "Skeleton",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: SkeletonPropsSchema,
--- a/packages/arco-lib/src/components/Space.tsx
+++ b/packages/arco-lib/src/components/Space.tsx
@ -5,16 +5,11 @@ import { Type, Static } from "@sinclair/typebox";
 import {
  FALLBACK_METADATA,
  getComponentProps,
-  StringUnion,
 } from "../sunmao-helper";
 import { SpacePropsSchema as BaseSpacePropsSchema } from "../generated/types/Space";

 const SpacePropsSchema = Type.Object({
  ...BaseSpacePropsSchema,
-  size: Type.Union([
-    Type.Optional(StringUnion(["mini", "small", "medium", "large"])),
-    Type.Number(),
-  ]),
 });
 const SpaceStateSchema = Type.Object({});

@ -40,6 +35,9 @@ export const Space = implementRuntimeComponent({
  metadata: {
    ...FALLBACK_METADATA,
    exampleProperties,
+    annotations: {
+      category: "Layout",
+    },
    name: "space",
    displayName: "Space",
  },
--- a/packages/arco-lib/src/components/Steps.tsx
+++ b/packages/arco-lib/src/components/Steps.tsx
@ -57,6 +57,9 @@ const options = {
    name: "steps",
    displayName: "Steps",
    exampleProperties,
+    annotations: {
+      category: "Display",
+    }
  },
  spec: {
    properties: StepsPropsSchema,
--- a/packages/arco-lib/src/components/Table.tsx
+++ b/packages/arco-lib/src/components/Table.tsx
@ -202,7 +202,7 @@ const TableImpl: ComponentImpl<Static<typeof TablePropsSchema>> = (props) => {
      pagination={{
        total: sortedData!.length,
        current: currentPage,
-        pageSize
+        pageSize,
      }}
      data={currentPageData}
      onChange={handleChange}
@ -240,12 +240,14 @@ export const exampleProperties: Static<typeof TablePropsSchema> = {
      dataIndex: "salary",
      sorter: true,
      filter: false,
+      type: "text",
    },
    {
      title: "Time",
      dataIndex: "time",
      sorter: true,
      filter: false,
+      type: "text",
    },
    {
      title: "Link",
@ -295,6 +297,9 @@ export const Table = implementRuntimeComponent({
  metadata: {
    ...FALLBACK_METADATA,
    exampleProperties,
+    annotations: {
+      category: "Display",
+    },
    name: "table",
    displayName: "Table",
  },
--- a/packages/arco-lib/src/constants/category.ts
+++ b/packages/arco-lib/src/constants/category.ts
@ -0,0 +1,6 @@
+export const enum Category{
+    Layout='Layout',
+    Style='Style',
+    Data='Data',
+    General='General'
+}
--- a/packages/arco-lib/src/generated/types/Alert.ts
+++ b/packages/arco-lib/src/generated/types/Alert.ts
@ -1,13 +1,33 @@
 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const AlertPropsSchema = {
-    disabled: Type.Boolean(),
-    closable: Type.Boolean(),
-    type: StringUnion(['info', 'success', 'warning', 'error']),
-    showIcon: Type.Boolean(),
-    banner: Type.Boolean(),
-    content:Type.String(),
-    title:Type.String(),
-    visible:Type.String(),
+    disabled: Type.Boolean({
+        category:Category.General
+    }),
+    closable: Type.Boolean({
+        category:Category.General
+    }),
+    type: StringUnion(['info', 'success', 'warning', 'error'], {
+        category: Category.Style
+    }),
+    showIcon: Type.Boolean({
+        category: Category.Style
+    }),
+    banner: Type.Boolean({
+        category: Category.Style,
+        description:'Whether to show as banner on top of the page'
+    }),
+    content: Type.String({
+        weight: 1,
+        category:Category.General
+    }),
+    title: Type.String({
+        weight: 0,
+        category:Category.General
+    }),
+    visible: Type.Boolean({
+        category: Category.Layout
+    }),
 }
--- a/packages/arco-lib/src/generated/types/Avatar.ts
+++ b/packages/arco-lib/src/generated/types/Avatar.ts
@ -1,9 +1,21 @@

 import { Type } from "@sinclair/typebox";
+import { Category } from "src/constants/category";
 import { StringUnion } from '../../sunmao-helper';

 export const AvatarPropsSchema = {
-  'shape': StringUnion(['circle', 'square']),
-  'autoFixFontSize': Type.Boolean(),
-  'triggerType': StringUnion(['button', 'mask'])
+  shape: StringUnion(['circle', 'square'], {
+    category: Category.Style
+  }),
+  size:Type.Number({
+    category: Category.Style
+  }),
+  autoFixFontSize: Type.Boolean({
+    category: Category.Layout,
+    description:'Whether to automatically adjust the font size according to the size of the avatar'
+  }),
+  triggerType: StringUnion(['button', 'mask'],{
+    category: Category.General,
+    description:'Clickable avatar interaction type'
+  })
 };
--- a/packages/arco-lib/src/generated/types/Badge.ts
+++ b/packages/arco-lib/src/generated/types/Badge.ts
@ -1,13 +1,30 @@

 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const BadgePropsSchema = {
-    text:Type.String(),
-    count:Type.Number(),
-    dot: Type.Boolean(),
-    maxCount: Type.Number(),
-    offset: Type.Tuple([Type.Number(), Type.Number()]),
-    color: StringUnion(['red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'arcoblue', 'purple', 'pinkpurple', 'magenta', 'gray']),
-    status: StringUnion(['default', 'processing', 'success', 'warning', 'error']),
+    text:Type.String({
+        category:Category.General,
+        description:'Set the display text of the status dot'
+    }),
+    count:Type.Number({
+        category:Category.General,
+    }),
+    dot: Type.Boolean({
+        category:Category.Style,
+    }),
+    maxCount: Type.Number({
+        category:Category.General,
+    }),
+    offset: Type.Tuple([Type.Number(), Type.Number()],{
+        category:Category.Layout,
+    }),
+    color: StringUnion(['red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'arcoblue', 'purple', 'pinkpurple', 'magenta', 'gray'],{
+        description:'Set the badge color in dot mode',
+        category:Category.Style,
+    }),
+    status: StringUnion(['default', 'processing', 'success', 'warning', 'error'],{
+        category:Category.Style,
+    }),
 }
--- a/packages/arco-lib/src/generated/types/Button.ts
+++ b/packages/arco-lib/src/generated/types/Button.ts
@ -1,19 +1,45 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

 export const ButtonPropsSchema = {
-  'text': Type.String(),
-  'htmlType': StringUnion(['button', 'submit', 'reset']),
-  'type': StringUnion(['default', 'primary', 'secondary', 'dashed', 'text', 'outline']),
-  'status': StringUnion(['default', 'warning', 'danger', 'success']),
-  'size': StringUnion(['default', 'mini', 'small', 'large']),
-  'shape': StringUnion(['circle', 'round', 'square']),
-  'href': Type.String(),
-  'target': Type.String(),
-  'disabled': Type.Boolean(),
-  'loading': Type.Boolean(),
-  'loadingFixedWidth': Type.Boolean(),
-  'iconOnly': Type.Boolean(),
-  'long': Type.Boolean()
+  text: Type.String({
+    category:Category.General,
+  }),
+  htmlType: StringUnion(['button', 'submit', 'reset'],{
+    category:Category.General,
+  }),
+  type: StringUnion(['default', 'primary', 'secondary', 'dashed', 'text', 'outline'], {
+    category: Category.Style
+  }),
+  status: StringUnion(['default', 'warning', 'danger', 'success'], {
+    category: Category.Style
+  }),
+  size: StringUnion(['default', 'mini', 'small', 'large'], {
+    category: Category.Style
+  }),
+  shape: StringUnion(['circle', 'round', 'square'], {
+    category: Category.Style
+  }),
+  href: Type.String({
+    category:Category.General,
+  }),
+  target: Type.String({
+    category:Category.General,
+  }),
+  disabled: Type.Boolean(),
+  loading: Type.Boolean({
+    category:Category.Style
+  }),
+  loadingFixedWidth: Type.Boolean({
+    category:Category.Style,
+    description:'The width of the button remains unchanged on loading'
+  }),
+  iconOnly: Type.Boolean({
+    category:Category.Style
+  }),
+  long: Type.Boolean({
+    category: Category.Style
+  })
 };
--- a/packages/arco-lib/src/generated/types/Cascader.ts
+++ b/packages/arco-lib/src/generated/types/Cascader.ts
@ -1,23 +1,57 @@

 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

-export const CascaderValueSchema = Type.Array(Type.Union([Type.String(), Type.Array(Type.String())]))
+export const CascaderValueSchema = Type.Array(Type.Union([Type.String(), Type.Array(Type.String())]), {
+    category: Category.Data
+})

 export const CascaderPropsSchema = {
-    expandTrigger: StringUnion(['click', 'hover']),
-    changeOnSelect: Type.Boolean(),
-    multiple: Type.Boolean(),
-    showSearch: Type.Boolean(),
-    placeholder: Type.String(),
-    bordered: Type.Boolean(),
-    size: StringUnion(['mini', 'small', 'default', 'large']),
-    disabled: Type.Boolean(),
-    error: Type.Boolean(),
-    loading: Type.Boolean(),
-    allowClear: Type.Boolean(),
-    allowCreate: Type.Boolean(),
-    maxTagCount: Type.Number(),
+    options: Type.Array(Type.Array(Type.String()), {
+        weight: 0,
+        description: `An array of arrays`,
+        category: Category.Data
+    }),
+    expandTrigger: StringUnion(['click', 'hover'],{
+        category:Category.General
+    }),
+    multiple: Type.Boolean({
+        category: Category.General
+    }),
+    showSearch: Type.Boolean({
+        category: Category.General
+    }),
+    placeholder: Type.String({
+        weight: 1,
+        category: Category.General
+    }),
+    disabled: Type.Boolean({
+        category: Category.General
+    }),
+    error: Type.Boolean({
+        category: Category.General
+    }),
+    changeOnSelect: Type.Boolean({
+        category: Category.General
+    }),
+    loading: Type.Boolean({
+        category: Category.Style
+    }),
+    bordered: Type.Boolean({
+        category: Category.Style
+    }),
+    size: StringUnion(['mini', 'small', 'default', 'large'], {
+        category: Category.Style
+    }),
+    allowClear: Type.Boolean({
+        category: Category.General
+    }),
+    allowCreate: Type.Boolean({
+        category: Category.General
+    }),
+    maxTagCount: Type.Number({
+        category: Category.General
+    }),
    defaultValue: CascaderValueSchema,
-    options: Type.Array(Type.Array(Type.String())),
 }
--- a/packages/arco-lib/src/generated/types/Checkbox.ts
+++ b/packages/arco-lib/src/generated/types/Checkbox.ts
@ -1,19 +1,30 @@
 import {Type} from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const CheckboxOptionSchema = Type.Array(
  Type.Object({
-    'label': Type.String(),
-    'value': Type.String(),
-    'disabled': Type.Boolean(),
-    'indeterminate': Type.Boolean(),
-  })
+    label: Type.String(),
+    value: Type.String(),
+    disabled: Type.Boolean(),
+    indeterminate: Type.Boolean(),
+  }),{
+    category:Category.Data
+  }
 );

 export const CheckboxPropsSchema = {
-  'options': CheckboxOptionSchema,
-  'direction': StringUnion(['horizontal', 'vertical']),
-  'defaultCheckedValues': Type.Array(Type.String()),
-  'showCheckAll': Type.Boolean(),
-  'checkAllText': Type.String(),
+  options: CheckboxOptionSchema,
+  direction: StringUnion(['horizontal', 'vertical'],{
+    category:Category.Layout
+  }),
+  defaultCheckedValues: Type.Array(Type.String(),{
+    category:Category.Data
+  }),
+  showCheckAll: Type.Boolean({
+    category:Category.General
+  }),
+  checkAllText: Type.String({
+    category:Category.Data
+  }),
 };
--- a/packages/arco-lib/src/generated/types/Collapse.ts
+++ b/packages/arco-lib/src/generated/types/Collapse.ts
@ -1,20 +1,45 @@

 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const CollapsePropsSchema = {
-    defaultActiveKey: Type.Array(Type.String()),
-    accordion: Type.Boolean(),
-    expandIconPosition: StringUnion(['left', 'right']),
-    bordered: Type.Boolean(),
-    lazyload: Type.Boolean(),
-    destroyOnHide: Type.Boolean(),
+    defaultActiveKey: Type.Array(Type.String(), {
+        category: Category.General
+    }),
+    accordion: Type.Boolean({
+        category: Category.Style
+    }),
+    expandIconPosition: StringUnion(['left', 'right'], {
+        category: Category.Style
+    }),
+    bordered: Type.Boolean({
+        category: Category.Style
+    }),
+    lazyload: Type.Boolean({
+        category: Category.General
+    }),
+    destroyOnHide: Type.Boolean({
+        category: Category.General
+    }),
 }

 export const CollapseItemPropsSchema = {
-    name: Type.String(),
-    disabled: Type.Boolean(),
-    showExpandIcon: Type.Boolean(),
-    destroyOnHide: Type.Boolean(),
-    header: Type.String()
+    name: Type.String({
+        category: Category.General,
+        weight: 0
+    }),
+    disabled: Type.Boolean({
+        category: Category.General
+    }),
+    showExpandIcon: Type.Boolean({
+        category: Category.General
+    }),
+    destroyOnHide: Type.Boolean({
+        category: Category.General
+    }),
+    header: Type.String({
+        category: Category.General,
+        weight: 1
+    })
 }
--- a/packages/arco-lib/src/generated/types/Divider.ts
+++ b/packages/arco-lib/src/generated/types/Divider.ts
@ -1,7 +1,12 @@

+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const DividerPropsSchema = {
-  'type': StringUnion(['vertical', 'horizontal']),
-  'orientation': StringUnion(['center', 'left', 'right'])
+  type: StringUnion(['vertical', 'horizontal'], {
+    category: Category.Layout
+  }),
+  orientation: StringUnion(['center', 'left', 'right'], {
+    category: Category.Layout
+  })
 };
--- a/packages/arco-lib/src/generated/types/Dropdown.ts
+++ b/packages/arco-lib/src/generated/types/Dropdown.ts
@ -1,16 +1,32 @@

 import { Type } from "@sinclair/typebox";
+import { Category } from "src/constants/category";
 import { StringUnion } from '../../sunmao-helper';

 export const DropdownPropsSchema = {
-  'dropdownType': StringUnion(['default', 'button']),
-  'position': StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br']),
-  'trigger': StringUnion(['hover', 'click']),
-  'disabled': Type.Boolean(),
-  'unmountOnExit': Type.Boolean(),
-  'defaultPopupVisible': Type.Boolean(),
-  'list': Type.Array(Type.Object({
+  dropdownType: StringUnion(['default', 'button'], {
+    category: Category.Style
+  }),
+  position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br'], {
+    category: Category.Layout
+  }),
+  trigger: StringUnion(['hover', 'click'], {
+    category: Category.General
+  }),
+  disabled: Type.Boolean({
+    category: Category.General
+  }),
+  unmountOnExit: Type.Boolean({
+    category: Category.General
+  }),
+  defaultPopupVisible: Type.Boolean({
+    category: Category.General
+  }),
+  list: Type.Array(Type.Object({
    key: Type.String(),
    label: Type.String(),
-  }))
+  }), {
+    category: Category.General,
+    weight: 0
+  })
 };
--- a/packages/arco-lib/src/generated/types/Image.ts
+++ b/packages/arco-lib/src/generated/types/Image.ts
@ -1,12 +1,25 @@

 import { Type } from "@sinclair/typebox";
+import { Category } from "src/constants/category";
 import { StringUnion } from '../../sunmao-helper';

 export const ImagePropsSchema = {
-  'src': Type.String(),
-  'title': Type.String(),
-  'description': Type.String(),
-  'footerPosition': StringUnion(['inner', 'outer']),
-  'simple': Type.Boolean(),
-  'preview': Type.Boolean()
+  src: Type.String({
+    category: Category.General
+  }),
+  title: Type.String({
+    category: Category.General
+  }),
+  description: Type.String({
+    category: Category.General
+  }),
+  footerPosition: StringUnion(['inner', 'outer'], {
+    category: Category.Layout
+  }),
+  simple: Type.Boolean({
+    category: Category.Style
+  }),
+  preview: Type.Boolean({
+    category: Category.General
+  })
 };
--- a/packages/arco-lib/src/generated/types/Input.ts
+++ b/packages/arco-lib/src/generated/types/Input.ts
@ -1,14 +1,30 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

 export const InputPropsSchema = {
-  'allowClear': Type.Boolean(),
-  'disabled': Type.Boolean(),
-  'readOnly': Type.Boolean(),
-  'defaultValue': Type.String(),
-  'placeholder': Type.String(),
-  'error': Type.Boolean(),
-  'size': StringUnion(['default', 'mini', 'small', 'large']),
-  'showWordLimit': Type.Boolean()
+  defaultValue: Type.String({
+    category:Category.General,
+    weight: 0
+  }),
+  placeholder: Type.String({
+    category:Category.General,
+    weight: 1
+  }),
+  allowClear: Type.Boolean({
+    category:Category.General,
+  }),
+  disabled: Type.Boolean({
+    category:Category.General,
+  }),
+  readOnly: Type.Boolean({
+    category:Category.General,
+  }),
+  error: Type.Boolean({
+    category:Category.General,
+  }),
+  size: StringUnion(['default', 'mini', 'small', 'large'], {
+    category: Category.Style
+  }),
 };
--- a/packages/arco-lib/src/generated/types/Layout.ts
+++ b/packages/arco-lib/src/generated/types/Layout.ts
@ -1,157 +1,31 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

-export const LayoutPropsSchema = {
-  'hasSider': Type.Boolean(),
-  'defaultChecked': Type.Boolean(),
-  'suppressContentEditableWarning': Type.Boolean(),
-  'suppressHydrationWarning': Type.Boolean(),
-  'accessKey': Type.String(),
-  'contextMenu': Type.String(),
-  'dir': Type.String(),
-  'hidden': Type.Boolean(),
-  'id': Type.String(),
-  'lang': Type.String(),
-  'placeholder': Type.String(),
-  'slot': Type.String(),
-  'title': Type.String(),
-  'translate': StringUnion(['yes', 'no']),
-  'radioGroup': Type.String(),
-  'about': Type.String(),
-  'datatype': Type.String(),
-  'prefix': Type.String(),
-  'property': Type.String(),
-  'resource': Type.String(),
-  'typeof': Type.String(),
-  'vocab': Type.String(),
-  'autoCapitalize': Type.String(),
-  'autoCorrect': Type.String(),
-  'autoSave': Type.String(),
-  'color': Type.String(),
-  'itemProp': Type.String(),
-  'itemScope': Type.Boolean(),
-  'itemType': Type.String(),
-  'itemID': Type.String(),
-  'itemRef': Type.String(),
-  'security': Type.String(),
-  'unselectable': StringUnion(['on', 'off']),
-  'inputMode': StringUnion(['text', 'none', 'search', 'tel', 'url', 'email', 'numeric', 'decimal']),
-  'is': Type.String()
-};
-export const HeaderPropsSchema = {
-  'defaultChecked': Type.Boolean(),
-  'suppressContentEditableWarning': Type.Boolean(),
-  'suppressHydrationWarning': Type.Boolean(),
-  'accessKey': Type.String(),
-  'contextMenu': Type.String(),
-  'dir': Type.String(),
-  'hidden': Type.Boolean(),
-  'id': Type.String(),
-  'lang': Type.String(),
-  'placeholder': Type.String(),
-  'slot': Type.String(),
-  'title': Type.String(),
-  'translate': StringUnion(['yes', 'no']),
-  'radioGroup': Type.String(),
-  'about': Type.String(),
-  'datatype': Type.String(),
-  'prefix': Type.String(),
-  'property': Type.String(),
-  'resource': Type.String(),
-  'typeof': Type.String(),
-  'vocab': Type.String(),
-  'autoCapitalize': Type.String(),
-  'autoCorrect': Type.String(),
-  'autoSave': Type.String(),
-  'color': Type.String(),
-  'itemProp': Type.String(),
-  'itemScope': Type.Boolean(),
-  'itemType': Type.String(),
-  'itemID': Type.String(),
-  'itemRef': Type.String(),
-  'security': Type.String(),
-  'unselectable': StringUnion(['on', 'off']),
-  'inputMode': StringUnion(['text', 'none', 'search', 'tel', 'url', 'email', 'numeric', 'decimal']),
-  'is': Type.String()
-};
-export const FooterPropsSchema = {
-  'defaultChecked': Type.Boolean(),
-  'suppressContentEditableWarning': Type.Boolean(),
-  'suppressHydrationWarning': Type.Boolean(),
-  'accessKey': Type.String(),
-  'contextMenu': Type.String(),
-  'dir': Type.String(),
-  'hidden': Type.Boolean(),
-  'id': Type.String(),
-  'lang': Type.String(),
-  'placeholder': Type.String(),
-  'slot': Type.String(),
-  'title': Type.String(),
-  'translate': StringUnion(['yes', 'no']),
-  'radioGroup': Type.String(),
-  'about': Type.String(),
-  'datatype': Type.String(),
-  'prefix': Type.String(),
-  'property': Type.String(),
-  'resource': Type.String(),
-  'typeof': Type.String(),
-  'vocab': Type.String(),
-  'autoCapitalize': Type.String(),
-  'autoCorrect': Type.String(),
-  'autoSave': Type.String(),
-  'color': Type.String(),
-  'itemProp': Type.String(),
-  'itemScope': Type.Boolean(),
-  'itemType': Type.String(),
-  'itemID': Type.String(),
-  'itemRef': Type.String(),
-  'security': Type.String(),
-  'unselectable': StringUnion(['on', 'off']),
-  'inputMode': StringUnion(['text', 'none', 'search', 'tel', 'url', 'email', 'numeric', 'decimal']),
-  'is': Type.String()
-};
-export const ContentPropsSchema = {
-  'defaultChecked': Type.Boolean(),
-  'suppressContentEditableWarning': Type.Boolean(),
-  'suppressHydrationWarning': Type.Boolean(),
-  'accessKey': Type.String(),
-  'contextMenu': Type.String(),
-  'dir': Type.String(),
-  'hidden': Type.Boolean(),
-  'id': Type.String(),
-  'lang': Type.String(),
-  'placeholder': Type.String(),
-  'slot': Type.String(),
-  'title': Type.String(),
-  'translate': StringUnion(['yes', 'no']),
-  'radioGroup': Type.String(),
-  'about': Type.String(),
-  'datatype': Type.String(),
-  'prefix': Type.String(),
-  'property': Type.String(),
-  'resource': Type.String(),
-  'typeof': Type.String(),
-  'vocab': Type.String(),
-  'autoCapitalize': Type.String(),
-  'autoCorrect': Type.String(),
-  'autoSave': Type.String(),
-  'color': Type.String(),
-  'itemProp': Type.String(),
-  'itemScope': Type.Boolean(),
-  'itemType': Type.String(),
-  'itemID': Type.String(),
-  'itemRef': Type.String(),
-  'security': Type.String(),
-  'unselectable': StringUnion(['on', 'off']),
-  'inputMode': StringUnion(['text', 'none', 'search', 'tel', 'url', 'email', 'numeric', 'decimal']),
-  'is': Type.String()
-};
+
+export const LayoutPropsSchema = {};
+export const HeaderPropsSchema = {};
+export const FooterPropsSchema = {};
+export const ContentPropsSchema = {};
 export const SiderPropsSchema = {
-  'theme': StringUnion(['dark', 'light']),
-  'collapsed': Type.Boolean(),
-  'collapsible': Type.Boolean(),
-  'defaultCollapsed': Type.Boolean(),
-  'reverseArrow': Type.Boolean(),
-  'breakpoint': StringUnion(['xxl', 'xl', 'lg', 'md', 'sm', 'xs'])
+  theme: StringUnion(['dark', 'light'],{
+    category:Category.Style
+  }),
+  collapsed: Type.Boolean({
+    category:Category.Style
+  }),
+  collapsible: Type.Boolean({
+    category:Category.Style
+  }),
+  collapsedWidth: Type.Number({
+    category:Category.Style
+  }),
+  reverseArrow: Type.Boolean({
+    category:Category.Style
+  }),
+  breakpoint: StringUnion(['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],{
+    Description:'Breakpoint in responsive layout',
+    category:Category.Layout
+  })
 };
--- a/packages/arco-lib/src/generated/types/Link.ts
+++ b/packages/arco-lib/src/generated/types/Link.ts
@ -1,10 +1,24 @@
 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'
+

 export const LinkPropsSchema = {
-    disabled: Type.Boolean(),
-    hoverable: Type.Boolean(),
-    status: StringUnion(['success', 'warning', 'error']),
-    href: Type.String(),
-    content: Type.String()
+    href: Type.String({
+        category: Category.General,
+        weight: 0
+    }),
+    content: Type.String({
+        category: Category.General,
+        weight: 1
+    }),
+    hoverable: Type.Boolean({
+        category: Category.Style
+    }),
+    status: StringUnion(['success', 'warning', 'error'], {
+        category: Category.Style
+    }),
+    disabled: Type.Boolean({
+        category: Category.General
+    }),
 }
--- a/packages/arco-lib/src/generated/types/Mentions.ts
+++ b/packages/arco-lib/src/generated/types/Mentions.ts
@ -1,15 +1,37 @@
 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';


 export const MentionsPropsSchema = {
-  placeholder:Type.String(),
-  disabled:Type.Boolean(),
-  error:Type.Boolean(),
-  allowClear:Type.Boolean(),
-  defaultValue: Type.String(),
-  options: Type.Array(Type.String()),
-  prefix: Type.String(),
-  split: Type.String(),
-  position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br'])
+  options: Type.Array(Type.String(), {
+    weight: 0,
+    category:Category.Data
+  }),
+  defaultValue: Type.String({
+    weight: 1,
+    category:Category.Data
+  }),
+  prefix: Type.String({
+    category:Category.General,
+  }),
+  placeholder: Type.String({
+    category:Category.General,
+
+  }),
+  disabled: Type.Boolean({
+    category:Category.General,
+  }),
+  error: Type.Boolean({
+    category:Category.General,
+  }),
+  allowClear: Type.Boolean({
+    category:Category.General,
+  }),
+  split: Type.String({
+    category:Category.General,
+  }),
+  position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br'], {
+    category: Category.Layout
+  })
 }
--- a/packages/arco-lib/src/generated/types/Menu.ts
+++ b/packages/arco-lib/src/generated/types/Menu.ts
@ -1,18 +1,31 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

+// TODO properties can be further optimised and supplemented
 export const MenuPropsSchema = {
-  'prefixCls': Type.String(),
-  'isMenu': Type.Boolean(),
-  'inDropdown': Type.Boolean(),
-  'theme': StringUnion(['dark', 'light']),
-  'mode': StringUnion(['vertical', 'horizontal', 'pop', 'popButton']),
-  'autoOpen': Type.Boolean(),
-  'collapse': Type.Boolean(),
-  'accordion': Type.Boolean(),
-  'selectable': Type.Boolean(),
-  'ellipsis': Type.Boolean(),
-  'autoScrollIntoView': Type.Boolean(),
-  'hasCollapseButton': Type.Boolean()
+  theme: StringUnion(['dark', 'light'], {
+    title:'theme',
+    category: Category.Style
+  }),
+  mode: StringUnion(['vertical', 'horizontal', 'pop', 'popButton'], {
+    category: Category.Style
+  }),
+  autoOpen: Type.Boolean({
+    description: 'Whether to expand all multi-level menus by default'
+  }),
+  collapse: Type.Boolean({
+    category: Category.Style
+  }),
+  accordion: Type.Boolean({
+    category: Category.Style
+  }),
+  selectable: Type.Boolean(),
+  ellipsis: Type.Boolean({
+    category: Category.Style,
+    description: 'Whether the horizontal menu automatically collapses when it overflows'
+  }),
+  autoScrollIntoView: Type.Boolean(),
+  hasCollapseButton: Type.Boolean()
 };
--- a/packages/arco-lib/src/generated/types/Modal.ts
+++ b/packages/arco-lib/src/generated/types/Modal.ts
@ -1,13 +1,34 @@

 import { Type } from '@sinclair/typebox';
+import { Category } from '../../constants/category'
+

 export const ModalPropsSchema = {
-    title:Type.String(),
-    mask:Type.Boolean(),
-    simple:Type.Boolean(),
-    okText:Type.String(),
-    cancelText:Type.String(),
-    closable:Type.Boolean(),
-    maskClosable:Type.Boolean(),
-    confirmLoading:Type.Boolean(),
+    title: Type.String({
+        category:Category.General,
+        weight:0
+    }),
+    mask: Type.Boolean({
+        category: Category.Style
+    }),
+    simple: Type.Boolean({
+        category: Category.Style
+    }),
+    okText: Type.String({
+        category:Category.General,
+        weight:1
+    }),
+    cancelText: Type.String({
+        category:Category.General,
+        weight:2
+    }),
+    closable: Type.Boolean({
+        category:Category.General,
+    }),
+    maskClosable: Type.Boolean({
+        category:Category.General,
+    }),
+    confirmLoading: Type.Boolean({
+        category: Category.Style
+    }),
 }
--- a/packages/arco-lib/src/generated/types/Pagination.ts
+++ b/packages/arco-lib/src/generated/types/Pagination.ts
@ -1,17 +1,38 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'

 export const PaginationPropsSchema = {
-  pageSize: Type.Number(),
-  total: Type.Number(),
-  defaultCurrent: Type.Number(),
-  defaultPageSize: Type.Number(),
-  disabled: Type.Boolean(),
-  hideOnSinglePage: Type.Boolean(),
-  size: StringUnion(['mini', 'small', 'default', 'large']),
-  sizeCanChange: Type.Boolean(),
-  pageSizeChangeResetCurrent: Type.Boolean(),
-  simple: Type.Boolean(),
-  showJumper: Type.Boolean(),
+  pageSize: Type.Number({
+    category:Category.General,
+  }),
+  total: Type.Number({
+    category:Category.General,
+  }),
+  defaultCurrent: Type.Number({
+    category:Category.General,
+  }),
+  defaultPageSize: Type.Number({
+    category:Category.General,
+  }),
+  disabled: Type.Boolean({
+    category:Category.General,
+  }),
+  hideOnSinglePage: Type.Boolean({
+    category:Category.Style
+  }),
+  size: StringUnion(['mini', 'small', 'default', 'large'], {
+    category: Category.Style
+  }),
+  sizeCanChange: Type.Boolean({
+    category:Category.General,
+  }),
+  simple: Type.Boolean({
+    category: Category.Style
+  }),
+  showJumper: Type.Boolean({
+    category:Category.General,
+    description: 'Whether to display quick jump'
+  }),
 };
--- a/packages/arco-lib/src/generated/types/Popover.ts
+++ b/packages/arco-lib/src/generated/types/Popover.ts
@ -1,14 +1,29 @@

 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'
+

 export const PopoverPropsSchema = {
-    title: Type.String(),
-    disabled: Type.Boolean(),
-    color: Type.String(),
-    position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb']),
-    mini: Type.Boolean(),
-    unmountOnExit: Type.Boolean(),
-    controlled: Type.Boolean(),
-    trigger: StringUnion(["click", "hover", "focus", "contextMenu"])
+    title: Type.String({
+        category: Category.General,
+    }),
+    disabled: Type.Boolean({
+        category: Category.General,
+    }),
+    color: Type.String({
+        category: Category.Style
+    }),
+    position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'], {
+        category: Category.Style
+    }),
+    unmountOnExit: Type.Boolean({
+        category: Category.General,
+    }),
+    controlled: Type.Boolean({
+        category: Category.General,
+    }),
+    trigger: StringUnion(["click", "hover", "focus", "contextMenu"], {
+        category: Category.General,
+    })
 }
--- a/packages/arco-lib/src/generated/types/Progress.ts
+++ b/packages/arco-lib/src/generated/types/Progress.ts
@ -1,16 +1,34 @@

 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'


 export const ProgressPropsSchema = {
-    percent: Type.Number(),
-    type: StringUnion(['line', 'circle']),
-    animation: Type.Boolean(),
-    status: StringUnion(['success', 'error', 'normal', 'warning']),
-    color: Type.Union([Type.String(), Type.Object({ key: Type.String() })]),
-    trailColor:Type.String(),
+    percent: Type.Number({
+        category:Category.General
+    }),
+    type: StringUnion(['line', 'circle'],{
+        category:Category.Style
+    }),
+    animation: Type.Boolean({
+        category:Category.Style
+    }),
+    status: StringUnion(['success', 'error', 'normal', 'warning'],{
+        category:Category.Style
+    }),
+    color: Type.String({
+        category:Category.Style,
+        description:"Please input a color name such as 'red' or a color code such as '#c10'"
+    }),
+    trailColor:Type.String({
+        category:Category.Style
+    }),
    showText:Type.Boolean(),
-    width:Type.Number(),
-    size:StringUnion(['small' , 'default' , 'mini' , 'large']),
+    width:Type.Number({
+        category:Category.Style
+    }),
+    size:StringUnion(['small' , 'default' , 'mini' , 'large'],{
+        category:Category.Style
+    }),
 }
--- a/packages/arco-lib/src/generated/types/Radio.ts
+++ b/packages/arco-lib/src/generated/types/Radio.ts
@ -1,17 +1,29 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'
+

 const RadioItemSchema = Type.Object({
-  'value': Type.String(),
-  'label': Type.String(),
-  'disabled': Type.Boolean()
+  value: Type.String(),
+  label: Type.String(),
+  disabled: Type.Boolean()
 });

 export const RadioPropsSchema = {
-  options: Type.Array(RadioItemSchema),
-  defaultCheckedValue: Type.String(),
-  type: StringUnion(['radio', 'button']),
-  direction: StringUnion(['horizontal', 'vertical']),
-  size: StringUnion(['small', 'default', 'large', 'mini']),
+  options: Type.Array(RadioItemSchema, {
+    category: Category.Data
+  }),
+  defaultCheckedValue: Type.String({
+    category: Category.Data
+  }),
+  type: StringUnion(['radio', 'button'], {
+    category: Category.Style
+  }),
+  direction: StringUnion(['horizontal', 'vertical'], {
+    category: Category.Style
+  }),
+  size: StringUnion(['small', 'default', 'large', 'mini'], {
+    category: Category.Style
+  }),
 };
--- a/packages/arco-lib/src/generated/types/Select.ts
+++ b/packages/arco-lib/src/generated/types/Select.ts
@ -1,22 +1,69 @@

 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category'
+

 export const SelectPropsSchema = {
-  'inputValue': Type.String(),
-  'mode': StringUnion(['multiple', 'tags']),
-  'labelInValue': Type.Boolean(),
-  'defaultActiveFirstOption': Type.Boolean(),
-  'unmountOnExit': Type.Boolean(),
-  'defaultPopupVisible': Type.Boolean(),
-  'popupVisible': Type.Boolean(),
-  'placeholder': Type.String(),
-  'bordered': Type.Boolean(),
-  'size': StringUnion(['default', 'mini', 'small', 'large']),
-  'disabled': Type.Boolean(),
-  'error': Type.Boolean(),
-  'loading': Type.Boolean(),
-  'allowClear': Type.Boolean(),
-  'allowCreate': Type.Boolean(),
-  'animation': Type.Boolean()
+  options: Type.Array(
+    Type.Object({
+      value: Type.String(),
+      text: Type.String(),
+      disabled: Type.Optional(Type.Boolean()),
+    }),
+    {
+      category: Category.Data,
+    }
+  ),
+  defaultValue: Type.String({
+    category: Category.Data,
+  }),
+  inputValue: Type.String({
+    category: Category.General,
+    weight: 0
+  }),
+  mode: StringUnion(['multiple', 'tags'], {
+    category: Category.General,
+  }),
+  labelInValue: Type.Boolean({
+    category: Category.General,
+  }),
+  defaultActiveFirstOption: Type.Boolean({
+    category: Category.Style,
+    description: 'Whether to highlight the first option by default'
+  }),
+  unmountOnExit: Type.Boolean({
+    category: Category.General,
+  }),
+  popupVisible: Type.Boolean({
+    category: Category.General,
+  }),
+  placeholder: Type.String({
+    category: Category.General,
+    weight: 1
+  }),
+  bordered: Type.Boolean({
+    category: Category.Style
+  }),
+  size: StringUnion(['default', 'mini', 'small', 'large'], {
+    category: Category.Style
+  }),
+  disabled: Type.Boolean({
+    category: Category.General,
+  }),
+  error: Type.Boolean({
+    category: Category.Style
+  }),
+  loading: Type.Boolean({
+    category: Category.Style
+  }),
+  allowClear: Type.Boolean({
+    category: Category.General,
+  }),
+  allowCreate: Type.Boolean({
+    category: Category.General,
+  }),
+  animation: Type.Boolean({
+    category: Category.Style
+  })
 };
--- a/packages/arco-lib/src/generated/types/Skeleton.ts
+++ b/packages/arco-lib/src/generated/types/Skeleton.ts
@ -1,5 +1,7 @@
 import { Type } from "@sinclair/typebox";
 import { StringUnion } from "../../sunmao-helper";
+import { Category } from '../../constants/category'
+

 export const SkeletonTextPropsSchema = {
  rows: Type.Number(),
@ -21,8 +23,17 @@ export const SkeletonImagePropsSchema = {
 };

 export const SkeletonPropsSchema = {
-  animation: Type.Boolean(),
-  loading: Type.Boolean(),
-  image: Type.Union([Type.Boolean(), Type.Object(SkeletonImagePropsSchema)]),
-  text: Type.Union([Type.Boolean(), Type.Object(SkeletonTextPropsSchema)])
+  animation: Type.Boolean({
+    category:Category.Style
+  }),
+  loading: Type.Boolean({
+    category:Category.Style
+  }),
+  // TODO remove union type
+  image: Type.Union([Type.Boolean(), Type.Object(SkeletonImagePropsSchema)],{
+    category:Category.General
+  }),
+  text: Type.Union([Type.Boolean(), Type.Object(SkeletonTextPropsSchema)],{
+    category:Category.General
+  })
 };
--- a/packages/arco-lib/src/generated/types/Space.ts
+++ b/packages/arco-lib/src/generated/types/Space.ts
@ -1,9 +1,22 @@

 import { Type } from "@sinclair/typebox";
+import { Category } from "src/constants/category";
 import { StringUnion } from '../../sunmao-helper';

 export const SpacePropsSchema = {
-  'align': StringUnion(['start', 'end', 'center', 'baseline']),
-  'direction': StringUnion(['vertical', 'horizontal']),
-  'wrap': Type.Boolean()
+  align: StringUnion(['start', 'end', 'center', 'baseline'], {
+    category: Category.Layout
+  }),
+  direction: StringUnion(['vertical', 'horizontal'], {
+    category: Category.Layout
+  }),
+  wrap: Type.Boolean({
+    category: Category.Layout
+  }),
+  size: Type.Union([
+    Type.Optional(StringUnion(["mini", "small", "medium", "large"])),
+    Type.Number(),
+  ],{
+    category: Category.Style
+  }),
 };
--- a/packages/arco-lib/src/generated/types/Table.ts
+++ b/packages/arco-lib/src/generated/types/Table.ts
@ -2,17 +2,26 @@
 import { Type } from "@sinclair/typebox";
 import { StringUnion } from '../../sunmao-helper';
 import { EventHandlerSchema, ModuleSchema } from '@sunmao-ui/runtime'
+import { Category } from '../../constants/category';

 export const ColumnSchema = Type.Object({
-  title: Type.String({ title: 'title' }),
-  dataIndex: Type.String({ 
-    title: 'dataIndex',
-    description:'The key corresponding to the column data in the data item is used to display the value'
+  title: Type.String({
+    title: 'title',
+    category: Category.General
+  }),
+  dataIndex: Type.String({
+    title: 'dataIndex',
+    description: 'The key corresponding to the column data in the data item is used to display the value'
+  }),
+  sorter: Type.Boolean({
+    title: 'Show sorter button'
+  }),
+  filter: Type.Boolean({
+    title: 'Show filter button'
  }),
-  sorter: Type.Boolean(),
  sortDirections: Type.Optional(Type.Array(StringUnion(["descend", "ascend"]))),
  defaultSortOrder: Type.Optional(StringUnion(["descend", "ascend"])),
-  type: Type.Optional(Type.KeyOf(
+  type: Type.KeyOf(
    Type.Object({
      text: Type.String(),
      image: Type.String(),
@ -20,22 +29,18 @@ export const ColumnSchema = Type.Object({
      button: Type.String(),
      module: Type.String(),
    })
-  )),
+  ),
  btnCfg: Type.Optional(Type.Object({
    text: Type.String(),
    handlers: Type.Array(EventHandlerSchema),
  })),
  module: Type.Optional(ModuleSchema),
-  filter: Type.Boolean({
-    title: 'filter'
-  }),
 })

 export const TablePropsSchema = Type.Object({
  data: Type.Array(Type.Any(), {
    title: 'data',
    widget: 'CodeEditor',
-    description: 'display data',
    category: 'Data',
    weight: 0
  }),
@ -49,20 +54,20 @@ export const TablePropsSchema = Type.Object({
  tableLayoutFixed: Type.Boolean({
    title: 'tableLayoutFixed',
    description: "The table's table-layout property is set to fixed. After set to fixed, the width of the table will not be stretched by the content beyond 100%",
-    category: 'Layout',
+    category: Category.Layout,
    weight: 1
  }),
  borderCell: Type.Boolean({
    title: 'borderCell',
    description: 'Whether to display the table cell border',
-    category: 'Style',
+    category: Category.Style,
    weight: 1
  }),
  stripe: Type.Boolean({
    title: 'stripe',
    widget: 'boolean',
    description: 'Whether to show stripe style',
-    category: 'Style',
+    category: Category.Style,
    weight: 2
  }),
  pagination: Type.Object({
@ -71,18 +76,18 @@ export const TablePropsSchema = Type.Object({
  size: StringUnion(['default', 'middle', 'small', 'mini'], {
    title: 'size',
    description: 'table size',
-    category: 'Style',
+    category: Category.Style,
    weight: 0
  }),
  pagePosition: StringUnion(['br', 'bl', 'tr', 'tl', 'topCenter', 'bottomCenter'], {
    title: 'pagePosition',
    description: '',
-    category: 'Style',
+    category: Category.Layout,
    weight: 10
  }),
  rowSelectionType: StringUnion(["checkbox", "radio", "default"], {
    title: 'rowSelectionType',
-    category: 'Basic',
-    weight: 3
+    weight: 3,
+    category: Category.Style
  }),
 });
--- a/packages/arco-lib/src/generated/types/Timeline.ts
+++ b/packages/arco-lib/src/generated/types/Timeline.ts
@ -1,5 +1,7 @@
 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
+import { Category } from '../../constants/category';
+

 export const TimelineItemPropsSchema = {
    label: Type.String(),
@ -11,12 +13,22 @@ export const TimelineItemPropsSchema = {
 }

 export const TimelinePropsSchema = {
-    reverse: Type.Boolean(),
-    direction: StringUnion(['horizontal', 'vertical']),
-    mode: StringUnion(['left', 'right', 'alternate']),
-    labelPosition: StringUnion(['relative', 'same']),
    items: Type.Array(Type.Object(
        TimelineItemPropsSchema
-    ))
+    ),{
+        category:Category.Data
+    }),
+    reverse: Type.Boolean({
+        category:Category.Style
+    }),
+    direction: StringUnion(['horizontal', 'vertical'],{
+        category:Category.Style
+    }),
+    mode: StringUnion(['left', 'right', 'alternate'],{
+        category:Category.Style
+    }),
+    labelPosition: StringUnion(['relative', 'same'],{
+        category:Category.Style
+    }),
 }

--- a/packages/arco-lib/src/generated/types/Tooltip.ts
+++ b/packages/arco-lib/src/generated/types/Tooltip.ts
@ -1,14 +1,32 @@

 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const TooltipPropsSchema = {
-    color: Type.String(),
-    position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb']),
-    mini: Type.Boolean(),
-    unmountOnExit: Type.Boolean(),
-    disabled: Type.Boolean(),
-    content: Type.String(),
-    controlled: Type.Boolean(),
-    trigger: StringUnion(["click", "hover"]),
+    color: Type.String({
+        category: Category.Style
+    }),
+    position: StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'], {
+        category: Category.Style
+    }),
+    mini: Type.Boolean({
+        category: Category.Style
+    }),
+    disabled: Type.Boolean({
+        category: Category.General
+    }),
+    content: Type.String({
+        category:Category.General,
+        weight: 0
+    }),
+    controlled: Type.Boolean({
+        category: Category.General
+    }),
+    trigger: StringUnion(["click", "hover"],{
+        category: Category.General
+    }),
+    unmountOnExit: Type.Boolean({
+        category: Category.General
+    }),
 }
--- a/packages/arco-lib/src/generated/types/TreeSelect.ts
+++ b/packages/arco-lib/src/generated/types/TreeSelect.ts
@ -1,29 +1,61 @@

 import { Type } from '@sinclair/typebox';
+import { Category } from 'src/constants/category';
 import { StringUnion } from '../../sunmao-helper';

 export const TreeSelectPropsSchema = {
-    defaultValue: Type.Array(Type.String()),
-    multiple: Type.Boolean(),
-    unmountOnExit: Type.Boolean(),
-    treeCheckStrictly: Type.Boolean(),
-    bordered: Type.Boolean(),
-    placeholder: Type.String(),
-    size: StringUnion(['mini', 'small', 'default', 'large']),
-    disabled: Type.Boolean(),
-    showSearch: Type.Boolean(),
-    error: Type.Boolean(),
-    labelInValue: Type.Boolean(),
-    loading: Type.Boolean(),
-    allowClear: Type.Boolean(),
-    maxTagCount: Type.Number(),
-    animation: Type.Boolean(),
    treeData: Type.Array(
        Type.Object({
            key: Type.String(),
            title: Type.String(),
            disabled: Type.Boolean(),
            children: Type.Array(Type.Any())
-        })
-    ),
+        }), {
+        category: Category.Data
+    }),
+    defaultValue: Type.Array(Type.String(), {
+        category: Category.Data
+    }),
+    multiple: Type.Boolean({
+        category: Category.General
+    }),
+    unmountOnExit: Type.Boolean({
+        category: Category.General
+    }),
+    treeCheckStrictly: Type.Boolean({
+        category: Category.General
+    }),
+    bordered: Type.Boolean({
+        category: Category.Style
+    }),
+    placeholder: Type.String({
+        category: Category.General
+    }),
+    size: StringUnion(['mini', 'small', 'default', 'large'], {
+        category: Category.Style
+    }),
+    disabled: Type.Boolean({
+        category: Category.General
+    }),
+    showSearch: Type.Boolean({
+        category: Category.General
+    }),
+    error: Type.Boolean({
+        category: Category.General
+    }),
+    labelInValue: Type.Boolean({
+        category: Category.General
+    }),
+    loading: Type.Boolean({
+        category: Category.Style
+    }),
+    allowClear: Type.Boolean({
+        category: Category.General
+    }),
+    maxTagCount: Type.Number({
+        category: Category.General
+    }),
+    animation: Type.Boolean({
+        category: Category.Style
+    }),
 }
--- a/packages/arco-lib/src/lib.ts
+++ b/packages/arco-lib/src/lib.ts
@ -27,6 +27,8 @@ import { Radio } from './components/Radio';
 import { Table } from "./components/Table";
 import { Pagination } from "./components/Pagination";
 import { Steps } from "./components/Steps";
+import { Alert } from './components/Alert';
+import { Link } from "./components/Link";

 type Component = Parameters<Registry["registerComponent"]>[0];
 type Trait = Parameters<Registry["registerTrait"]>[0];
@ -64,7 +66,9 @@ export const components: Component[] = [
  Skeleton,
  Timeline,
  Radio,
-  Checkbox
+  Checkbox,
+  Alert,
+  Link
 ];
 export const traits: Trait[] = [];
 export const modules: Module[] = [];
--- a/packages/arco-lib/tsconfig.tsbuildinfo
+++ b/packages/arco-lib/tsconfig.tsbuildinfo
--- a/packages/arco-lib/yarn.lock
+++ b/packages/arco-lib/yarn.lock
@ -9,15 +9,15 @@
  dependencies:
    color "^3.1.3"

-"@arco-design/web-react@^2.26.1":
-  version "2.28.1"
-  resolved "https://registry.yarnpkg.com/@arco-design/web-react/-/web-react-2.28.1.tgz#4e36ff9c0517aa71cb6aa0364b3ba5c037bd7f16"
-  integrity sha512-QErEK7/D4L34bkWgGbBvwk2exA7mbipKO6h1fEcTITtMgHyJOqk1vBYhaCMs3jkrZPCV0KdEyKo0j10XCOMZag==
+"@arco-design/web-react@^2.29.0":
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/@arco-design/web-react/-/web-react-2.29.0.tgz#e3a5f4280b6b23e453a9cdaba89d8e5df1b9f00d"
+  integrity sha512-5sWsz1SON32xKMkGNZNhgMukGHp6rgnsP1a614tGUoXNmW/hkYL2JvWGl99AczfkgX5VCNskigzYTe4l6INUAA==
  dependencies:
    "@arco-design/color" "^0.4.0"
    "@babel/runtime" "^7.5.5"
    b-tween "^0.3.3"
-    b-validate "^1.3.0"
+    b-validate "^1.3.4"
    compute-scroll-into-view "^1.0.17"
    dayjs "^1.10.5"
    lodash "^4.17.21"
@ -1508,10 +1508,10 @@ b-tween@^0.3.3:
  resolved "https://registry.yarnpkg.com/b-tween/-/b-tween-0.3.3.tgz#7a93ed199c98cd41a33ba4c711a0fa7e86db3fa2"
  integrity sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==

-b-validate@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/b-validate/-/b-validate-1.3.1.tgz#e595e3b29fd3373be573ceb33bfe6d10c5129149"
-  integrity sha512-MCT3BbvIQtkpDR3p+SzfbCAvAQSZ7USrYCzADzeApbw9ZL8pp2IVAg5UyrzyOH6K4NUvsMzn2W4e9jbnBUFSwQ==
+b-validate@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/b-validate/-/b-validate-1.3.4.tgz#b51791be9176743463261c65bb89b4af84061f32"
+  integrity sha512-7Bj+KFUcxk6c+qc3HiCR20qMOlHJmb7NSrVAS1amryVUT+7GTNqCp2Qk4XZP8XD3MBfZSqon/XlxNhHnxyB8ng==
  dependencies:
    lodash.isequal "^4.5.0"