+
@@ -66,10 +65,11 @@
-
### 相似组件
| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
+| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/docs/miniprogram/_design/Badge.md b/docs/miniprogram/_design/Badge.md
new file mode 100644
index 0000000000..019cf6285e
--- /dev/null
+++ b/docs/miniprogram/_design/Badge.md
@@ -0,0 +1,70 @@
+# 徽标 Badge
+
+## 组件设计指南
+
+### 何时使用
+
+当需要展示特定对象的状态变化或承载运营性质提示时使用。
+
+### 组件搭配使用
+
+##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。
+
+
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
@@ -40,8 +41,6 @@
+
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
-
+
+ 
+
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+
+ 
+ 
-
-
-
+ 
+ 
+
+ 
+
+
+ 
+ 
+ 
+ 
-
-
+
+
+
### 推荐/慎用示例
@@ -76,13 +73,10 @@
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
-
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+ 
-
-
+
+
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+
+ 
+
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
@@ -64,10 +63,11 @@
-
### 相似组件
| 组件名 | 何时使用 |
| :----- | :----------------------------------- |
| [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
| [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
+| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/docs/miniprogram/design/avatar.md b/docs/miniprogram/design/avatar.md
new file mode 100644
index 0000000000..eb7220cc4b
--- /dev/null
+++ b/docs/miniprogram/design/avatar.md
@@ -0,0 +1,61 @@
+
+
+### 何时使用
+
+作为一个用户信息展示，或用来代表某个/某些具体用户。
+
+### 组件搭配使用
+
+##### 头像与[动作面板](./action-sheet ) 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -38,8 +39,6 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
### 推荐/慎用示例
@@ -74,13 +71,10 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ Fab 悬浮按钮
+ +
+ 
+ Link 链接
+ +Dialog 对话框
@@ -29,24 +37,39 @@ spline: explain
- 
- 
+ 
+ 
+ 
+ 
@@ -76,8 +99,22 @@ spline: explain
+ 
+ 
+ 
+ 
@@ -164,7 +201,7 @@ spline: explain
+ 
+ 
@@ -194,6 +238,20 @@ spline: explain
+ 
+ 
+ 
+ 
@@ -208,6 +266,27 @@ spline: explain
+ 
+ 
+ 
+ 
+ 
+ 
@@ -238,13 +317,13 @@ spline: explain
+ 
+ 
+ 
+ 
@@ -268,6 +354,20 @@ spline: explain
+ 
+ 
+ 
+ 
@@ -275,6 +375,13 @@ spline: explain
+ 
+ 
diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md
index 239d87c899..cd9e9f1394 100644
--- a/docs/web/api/back-top.md
+++ b/docs/web/api/back-top.md
@@ -2,30 +2,37 @@
title: BackTop 返回顶部
description: 用于返回页面顶部
isComponent: true
-usage: { title: '', description: '' }
+usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' }
spline: data
---
-### 基础使用
+### 基础的回到顶部
-{{ base }}
+默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms
-### 不同尺寸
+{{ baseList }}
+
+### 可设置不同耗时的回到顶部
+
+{{ baseListSmall }}
+
+### 不同组件尺寸的回到顶部
提供标准（默认）、小两种尺寸。
{{ size }}
-### 不同形状
+### 不同组件形状的回到顶部
提供圆形和方形两种不同形状。
{{ shape }}
-### 不同主题
+### 不同组件主题的回到顶部
+
{{ theme }}
-### 自定义内容
+### 可自定义内容的回到顶部
-{{ custom }}
+{{ custom }}
\ No newline at end of file
diff --git a/docs/web/api/badge.en-US.md b/docs/web/api/badge.en-US.md
new file mode 100644
index 0000000000..5c1c171f5e
--- /dev/null
+++ b/docs/web/api/badge.en-US.md
@@ -0,0 +1,41 @@
+---
+title: Badge
+description: The badge identifier that appears in the upper right corner of an icon or text.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### Badge in the style of a red dot.
+
+It is displayed as a circle and is located in the upper right corner of an icon or after a text title when there is no icon. In scenarios with weak prompts, the number is not displayed and the user needs to manually click to view and clear it.
+
+{{ base }}
+
+### Badge in the style of a number.
+
+The badge containing a number, suitable for scenarios that require strong reminders and directly alerting the user to the number of related information.
+
+{{ number }}
+
+### Customized Badge
+
+The displayed information can be customized, such as displaying as “hot” or “new”.
+
+{{ custom }}
+
+### Badges of different sizes.
+
+Two sizes are provided: standard (default) and small.
+
+{{ size }}
+
+### Badges of different shapes.
+
+wo different shapes of badges are provided: round and square.
+
+{{ shape }}
+
+### Control the offset position of the badge display.
+
+{{ offset }}
diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md
new file mode 100644
index 0000000000..c9b38a74df
--- /dev/null
+++ b/docs/web/api/breadcrumb.en-US.md
@@ -0,0 +1,36 @@
+---
+title: Breadcrumb
+description: Displays the position of the current page in the system hierarchy, and can return to any previous page level.
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+### Basic breadcrumb
+
+Suitable for a wide range of basic uses, the system has more than two levels of hierarchy for switching up any level of content.
+
+{{ base }}
+
+### Breadcrumbs with icons
+
+Can customize each content, unified icon plus text, icon placed in front of the text.
+
+{{ icon }}
+
+### Custom separator breadcrumbs
+
+Customize`separator`the separator character through the separator property, and it is recommended to use an icon instead of a text symbol.
+
+{{ custom }}
+
+
+
+### Using Options to Configure Breadcrumbs
+
+Use the `options` property to configure the content of the breadcrumbs.
+
+{{ options }}
diff --git a/docs/web/api/calendar.en-US.md b/docs/web/api/calendar.en-US.md
new file mode 100644
index 0000000000..daae512754
--- /dev/null
+++ b/docs/web/api/calendar.en-US.md
@@ -0,0 +1,91 @@
+---
+title: Calendar
+description: Container for displaying data or dates in a calendar format.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Event calendar panel
+
+A date display container that can display events within dates. It is commonly used when there is enough space and when it is necessary to carry or display event information.
+
+{{ base }}
+
+### Card mode calendar
+
+Using individual dates as units, nested within a container with limited space to display dates and other information.
+
+{{ card }}
+
+### Function example
+
+#### Specify highlighted dates
+
+Customize specified highlighted dates through component properties. The component defaults to highlighting “today” or “the current month”. The `value` attribute can be used to set this highlighted date.
+
+{{ value }}
+
+#### Switch mode Calendar/Monthly
+
+Specify the display form of the component through component properties. The component is displayed in calendar form by default and provides “Calendar” and “Monthly” mode switching buttons. Developers can switch modes by modifying the `mode` attribute.
+
+{{ mode }}
+
+#### Specify the first day of the week in the first column
+
+Specify the first day of the week in the first column: Specify the first day of the week in the calendar’s first column through component properties. The component defaults to “Monday” in the first column and can be set to other days of the week through the `firstDayOfWeek` attribute (only valid when `mode` is `month`).
+
+{{ first-day-of-week }}
+
+#### Control related configuration
+
+Customize the control of the component through component properties. In some business scenarios, it may be necessary to globally hide or disable controls. This can also be achieved through the `controllerConfig` attribute for local control.
+
+{{ controller-config }}
+
+### Customization
+
+#### Custom calendar range
+
+Specify the value range of the year and month selection box through component properties. By default, the component allows years to be selected from `1970 - ∞` and there is no restriction on months. The range attribute can be used to set the selectable `range` of the calendar.
+
+{{ range }}
+
+#### Customizing the display of weeks
+
+You can customize the display of weeks through the `week` attribute or slot. By default, the weeks in the calendar are displayed as “Monday” to “Sunday”, but in some scenarios, you may want to customize the display.
+
+{{ week }}
+
+### Event example
+
+Use `methods` to define the execution logic of events. Developers can use these events to implement more customized features.
+
+{{ events }}
+
+### Slot example
+
+#### Header slot (top left corner of the component)
+
+Display content in the top left corner of the component. In some business scenarios, you may need to display a title or similar content in the top left corner of the component. In this case, you can use the `head` named slot.
+
+{{ head }}
+
+#### Cell slot - Append content
+
+Append content to the existing cell display. By default, the current date is displayed in the calendar cell. If you need to display additional information, you can use the `cellAppend` named slot.
+
+{{ cell-append }}
+
+#### Cell slot - Custom content
+
+Completely rewrite the content displayed in the cell. Unlike the `cellAppend` named slot, the `cell` named slot allows you to fully customize the cell content.
+
+{{ cell }}
+
+#### Attribute slot
+
+Use the `Props API` to use slots. In some scenarios, you may want to render slot content through the `Props API`. `head`, `cell` and`cellAppend` all have their corresponding `Props API`. The following briefly demonstrates the `Props API` for `head` and `cell`.
+
+{{ slot-props-api }}
diff --git a/docs/web/api/cascader.en-US.md b/docs/web/api/cascader.en-US.md
new file mode 100644
index 0000000000..665c40aab8
--- /dev/null
+++ b/docs/web/api/cascader.en-US.md
@@ -0,0 +1,103 @@
+---
+title: Cascader
+description: Cascading selectors are useful for data sets that have a clear hierarchical structure that the user can view and select through. in general, a cascade selector include:Selectors and cascades.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Single Cascaded Selector
+
+Provide a single cascade selector, after the selection of each level to display the selected content.
+
+{{ base }}
+
+### Multi-selection cascade selector
+
+Provide multi-choice cascading selector, display multi-choice content through label.
+
+{{ multiple }}
+
+### Collapsible Options Multi-selector
+
+In the case of multiple selections, the selected items are collapsed, and the selected items exceeding the value are collapsed.
+
+{{ collapsed }}
+
+### Cascade selectors of different size
+
+Provide large, medium and small three different height, width selector to adapt to different size layout.
+
+{{ size }}
+
+### Filterable Cascade Selector
+
+Enter the Filter option. It is used in business scenarios with specific requirements. Filter text by default.
+
+{{ filterable }}
+
+### Disabling Cascading Selectors
+
+Cascaded selectors that provide a disabled state.
+
+{{ disabled }}
+
+### Display only the last cascade selector
+
+You can display only the label of the last level of the selected item in the input box, rather than the full path of the selected item.
+
+{{ show-all-levels }}
+
+### Cascading selector for selecting any item
+
+When enabled, you can select any level of options.
+
+{{ check-strictly }}
+
+### Cascaded selector in full path mode
+
+The default input/output value type is the value of the leaf node. The full path value is used when `value-type="full"`
+
+{{ value-type }}
+
+### Customize Selected Value Mode
+
+Only valid for multiple-choice conditions.` onlyLeaft`indicates that only leaf nodes are selected in any case;`parentFirst`indicates that only parent nodes are selected when all child nodes are selected;`all`indicates that both parent nodes and child nodes are selected.
+
+{{ value-mode }}
+
+### Different Trigger Methods
+
+Submenus can be loaded by different triggering methods.
+
+{{ trigger }}
+
+### Display when the text is too long
+
+When the data text is too long, use the browser `title` to display the long text.
+
+{{ ellipsis }}
+
+### Limit the number of options
+
+Limits the maximum number of selections for a multi-choice selector. This is typically used when you need to limit the number of multi-choice options.
+
+{{ max }}
+
+### Customizing Data Field Aliases
+
+When using `options` to configure drop-down options, if the data fields are not `label` and `value`, you can use `keys` to define aliases.
+
+{{ keys }}
+
+### Dynamic Loading
+
+The selector contents can be customized according to requirements. It is used in business scenarios with complex logic or specific requirements.
+
+{{ load }}
+
+### Cascading Panels
+
+Cascading panel used alone for combination with other triggers
+
+{{ panel }}
diff --git a/docs/web/api/checkbox.en-US.md b/docs/web/api/checkbox.en-US.md
new file mode 100644
index 0000000000..9e52e71b78
--- /dev/null
+++ b/docs/web/api/checkbox.en-US.md
@@ -0,0 +1,31 @@
+---
+title: Checkbox
+description: A check box is a selection control that allows the user to toggle between checked and unchecked with a single click.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Basic multi-selection box
+
+The simplest form of multi-selection box, often used for multi-selection of data in the form.
+
+{{ base }}
+
+### Linked Multi-check Box
+
+Linked check boxes are check boxes used in conjunction with other components.
+
+{{ link }}
+
+### Grouped Multi-check Box Groups
+
+A group of check boxes that are combined according to certain attributes.
+
+{{ group }}
+
+### Controlled Class Checkbox
+
+The checkbox supports v-model, controlled and uncontrolled usage.
+
+{{ controlled }}
diff --git a/docs/web/api/collapse.en-US.md b/docs/web/api/collapse.en-US.md
new file mode 100644
index 0000000000..74c6b09f58
--- /dev/null
+++ b/docs/web/api/collapse.en-US.md
@@ -0,0 +1,35 @@
+---
+title: Collapse
+description: You can group more or more complex content. The grouped content area can be collapsed, expanded or hidden.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic collapsible panel
+
+Basic collapsible panel, with customizable panel content.
+
+{{ base }}
+
+### Accordion mode collapsible panel
+
+Accordion mode collapsible panel, only one panel can be opened at a time.
+
+{{ mutex }}
+
+### Collapsible panel with settable icons
+
+You can set whether to display the expand icon and the position of the icon display.
+
+{{ icon }}
+
+### Collapsible panel with settable right-side operation
+
+You can customize the right-side operation area of the panel.
+
+{{ rightSlot }}
+
+### Collapsible panel in different modes
+
+{{ other }}
diff --git a/docs/web/api/color-picker.en-US.md b/docs/web/api/color-picker.en-US.md
new file mode 100644
index 0000000000..5512b08338
--- /dev/null
+++ b/docs/web/api/color-picker.en-US.md
@@ -0,0 +1,51 @@
+---
+title: ColorPicker
+description: Used for color selection, supports multiple formats.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Panel Color Selector
+
+There is no trigger and the color picker panel is displayed directly.
+
+{{ panel }}
+
+### Color Picker with Trigger Element
+
+Trigger the display selector panel through the trigger, and transparently transfer all attributes to the panel selector component.
+
+{{ trigger }}
+
+### Color selector for different color modes
+
+Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorMode` to configure.
+
+{{ color-mode }}
+
+### Color picker with transparency adjustment
+
+Set `enableAlpha=true` to enable the transparency of the selector.
+
+{{ enable-alpha }}
+
+### Color Selector with Configurable System Color
+
+You can configure the system preset colors through `swatchColors`. If the value is null or [], the system colors will not be displayed.
+
+{{ swatch-color }}
+
+### Configurable Color Selector for Recently Used Color
+
+The most recently used color can be configured through `recentColors`. A value of [] indicates that the "Most Recently Used Color" in the component is used as the standard. If the value length is greater than 0, the "Most Recently Used Color" is displayed based on this value. A value of null does not display Recent Colors at all.
+
+{{ recent-color }}
+
+### Disabling Color Selector
+
+{{ status-disabled }}
+
+### Read-only Color Selector
+
+{{ status-readonly }}
diff --git a/docs/web/api/comment.en-US.md b/docs/web/api/comment.en-US.md
new file mode 100644
index 0000000000..393680c05d
--- /dev/null
+++ b/docs/web/api/comment.en-US.md
@@ -0,0 +1,43 @@
+---
+title: Comment
+description: Comment is used for feedback, evaluation, discussion, etc. on page content, such as evaluations of articles and discussions on topics.
+isComponent: true
+usage: { title: "", description: "" }
+spline: data
+---
+
+### Basic comments
+
+The most basic comment component, including avatar, author, time, and comment content. Suitable for various scenarios where comments need to be displayed.
+
+{{ base }}
+
+### Comments with operations
+
+A component that allows you to perform related operations on comment content. Suitable for scenarios where a custom operation column is needed.
+
+{{ operation }}
+
+### List comments
+
+Comments displayed in list form.
+
+{{ list }}
+
+### Comments with replies
+
+A component that displays the reply content of a comment. Suitable for scenarios where comments need to be replied to. The author’s name can be followed by the name of the reply object.
+
+{{ reply }}
+
+### Comments with quotes
+
+Comments can quote other content to indicate the reference relationship between the comment and other content.
+
+{{ quote }}
+
+### Comments with reply form
+
+A component for replying to comment content. You can directly enter content in the reply form to reply.
+
+{{ reply-form }}
diff --git a/docs/web/api/date-picker.en-US.md b/docs/web/api/date-picker.en-US.md
new file mode 100644
index 0000000000..f01ca0defa
--- /dev/null
+++ b/docs/web/api/date-picker.en-US.md
@@ -0,0 +1,97 @@
+---
+title: DatePicker
+description: Use to select a specific date or a range of dates.
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### Year Selector
+
+Used for year selection. It is used when the user only needs to enter the year information, and is often used in query scenarios where data is recorded by year, such as annual bills.
+
+{{ year }}
+
+### Month Selector
+
+Used for month selection. Use only when the user needs to enter month information.
+
+{{ month }}
+
+### Quarter Selector
+
+Used for quarterly selection. Use only when the user needs to enter quarterly information.
+
+{{ quarter }}
+
+### Week Selector
+
+Used for week selection. Used when the user only needs to enter year + week information.
+
+{{ week }}
+
+### Date Picker
+
+For selection of specific dates. Use only when the user needs to enter very specific date information.
+
+{{ base }}
+
+### Date Time Selector
+
+For date and time associated selections. Used when the user needs to enter a date including a time.
+
+{{ date-time }}
+
+### Date Range Selector
+
+Used for selection of a certain period of time. Used when the user needs to enter a date range.
+
+{{ date-range }}
+
+### Date picker with shortcut label
+
+with a time stamp that can be set in advance. When the date information is regular and needs to be clicked for quick input.
+
+{{ date-presets-alt }}
+
+### Date selector can be disabled
+
+The date that does not support user selection can be disabled from clicking.
+
+{{ disable-date }}
+
+### Selector for specifying the start of the week
+
+You can specify the day of the week from which a week starts through the `firstDayOfWeek` attribute. This is only valid when a date is selected (`mode = date`). The default value is 1, that is, it starts from Monday. You can set it to start from Sunday as follows.
+
+{{ first-day-of-week }}
+
+### Custom Icon Selector
+
+Prefix and suffix icons can be customized through `prefixIcon` and `suffixIcon`.
+
+{{ custom-icon }}
+
+### Date Selection Panel Used Alone
+
+You can use `DatePickerPanel` and `DateRangePickerPanel` separately. You can assemble your own date picker.
+
+{{ panel }}
+
+## FAQ
+
+### The backend data format is special. How can I format the date quickly?
+
+The `onChange` callback event will return the currently selected date object wrapped in `dayjs`. You can format it with the help of a third-party library or use the provided `dayjs` object for custom conversion.
+
+```js
+