!8306 issue修改+website更新卡片

Merge pull request !8306 from LiAn/OpenHarmony-3.1-Release

en/application-dev/Readme-EN.md

@@ -40,8 +40,8 @@
     - [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
     - [Codelabs](https://gitee.com/openharmony/codelabs/blob/master)
 - API References
-    - [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
     - [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
+    - [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
     - APIs
       - [JS and TS APIs](reference/apis/Readme-EN.md)
       - Native APIs

en/application-dev/application-dev-guide-for-gitee.md

@@ -53,8 +53,8 @@ To make you better understand how functions work together and jumpstart your app
 API references encompass all components and APIs available in OpenHarmony, helping you use and integrate APIs more effectively.
 
 They are organized as follows:
--   [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
 -   [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
+-   [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
 -   APIs
     - [JS and TS APIs](reference/apis/Readme-EN.md)
     - Native APIs

en/application-dev/application-dev-guide.md

@@ -53,8 +53,8 @@ To make you better understand how functions work together and jumpstart your app
 API references encompass all components and APIs available in OpenHarmony, helping you use and integrate APIs more effectively.
 
 They are organized as follows:
--   [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/js-components-common-attributes.md)
 -   [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/ts-universal-events-click.md)
+-   [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/js-components-common-attributes.md)
 -   [JS and TS APIs](reference/apis/js-apis-DataUriUtils.md)
 -   Native APIs
     -   [Standard Libraries](reference/native-lib/third_party_libc/musl.md)

en/application-dev/website.md

@@ -35,6 +35,77 @@
         - [Test Framework Usage](ability/ability-delegator.md)
   - UI    
     - [ArkUI Overview](ui/arkui-overview.md)
+    - TypeScript-based Declarative Development Paradigm
+      - [Overview](ui/ui-ts-overview.md)
+      - Framework Overview
+        - File Organization
+          - [Directory Structure](ui/ts-framework-directory.md)
+          - [Rules for Accessing Application Code Files](ui/ts-framework-file-access-rules.md)
+        - ["js" Tag](ui/ts-framework-js-tag.md)
+        - Resource Access
+          - [Accessing Application Resources](ui/ts-application-resource-access.md)
+          - [Accessing System Resources](ui/ts-system-resource-access.md)
+          - [Media Resource Types](ui/ts-media-resource-type.md)
+        - [Pixel Units](ui/ts-pixel-units.md)
+        - [Types](ui/ts-types.md)
+      - Declarative Syntax
+        - [Overview](ui/ts-syntax-intro.md)
+        - General UI Description Specifications
+          - [Basic Concepts](ui/ts-general-ui-concepts.md)
+          - Declarative UI Description Specifications
+            - [Parameterless Configuration](ui/ts-parameterless-configuration.md)
+            - [Configuration with Mandatory Parameters](ui/ts-configuration-with-mandatory-parameters.md)
+            - [Attribution Configuration](ui/ts-attribution-configuration.md)
+            - [Event Configuration](ui/ts-event-configuration.md)
+            - [Child Component Configuration](ui/ts-child-component-configuration.md)
+          - Componentization
+            - [@Component](ui/ts-component-based-component.md)
+            - [@Entry](ui/ts-component-based-entry.md)
+            - [@Preview](ui/ts-component-based-preview.md)
+            - [@Builder](ui/ts-component-based-builder.md)
+            - [@Extend](ui/ts-component-based-extend.md)
+            - [@CustomDialog](ui/ts-component-based-customdialog.md)
+            - [@Styles](ui/ts-component-based-styles.md)
+        - About UI State Management
+          - [Basic Concepts](ui/ts-ui-state-mgmt-concepts.md)
+          - Managing Component States
+            - [@State](ui/ts-component-states-state.md)
+            - [@Prop](ui/ts-component-states-prop.md)
+            - [@Link](ui/ts-component-states-link.md)
+          - Managing Application States
+            - [AppStorage](ui/ts-application-states-appstorage.md)
+            - [PersistentStorage](ui/ts-application-states-apis-persistentstorage.md)
+            - [Environment](ui/ts-application-states-apis-environment.md)
+          - Managing Other States
+            - [@observed and @objectLink](ui/ts-other-states-observed-objectlink.md)
+            - [@Consume and @Provide](ui/ts-other-states-consume-provide.md)
+            - [@Watch](ui/ts-other-states-watch.md)
+        - About Rendering Control Syntax
+          - [if/else](ui/ts-rending-control-syntax-if-else.md)
+          - [ForEach](ui/ts-rending-control-syntax-foreach.md)
+          - [LazyForEach](ui/ts-rending-control-syntax-lazyforeach.md)
+        - About @Component
+          - [build Function](ui/ts-function-build.md)
+          - [Custom Component Initialization](ui/ts-custom-component-initialization.md)
+          - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
+          - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
+        - [Syntactic Sugar](ui/ts-syntactic-sugar.md)
+      - Common Component Development Guidelines
+        - [Button](ui/ui-ts-basic-components-button.md)
+        - [Web](ui/ui-ts-components-web.md)
+      - Common Layout Development Guidelines
+        - [Flex Layout](ui/ui-ts-layout-flex.md)
+        - [Grid Layout](ui/ui-ts-layout-grid-container.md)
+        - [Media Query](ui/ui-ts-layout-mediaquery.md)
+      - Experiencing the Declarative UI
+        - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
+        - [Getting to Know Components](ui/ui-ts-components.md)
+        - [Creating a Simple Page](ui/ui-ts-creating-simple-page.md)
+      - Defining Page Layout and Connection
+        - [Building a Food Data Model](ui/ui-ts-building-data-model.md)
+        - [Building a Food Category List Layout](ui/ui-ts-building-category-list-layout.md)
+        - [Building a Food Category Grid Layout](ui/ui-ts-building-category-grid-layout.md)
+        - [Implementing Page Redirection and Data Transmission](ui/ui-ts-page-redirection-data-transmission.md)
     - JavaScript-based Web-Like Development Paradigm
       - [Overview](ui/ui-js-overview.md)
       - Framework
@@ -107,78 +178,6 @@
             - [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
             - [Animation Frame](ui/ui-js-animate-frame.md)
       - [Custom Components](ui/ui-js-custom-components.md)
-    - TypeScript-based Declarative Development Paradigm
-      - [Overview](ui/ui-ts-overview.md)
-      - Framework Overview
-        - File Organization
-          - [Directory Structure](ui/ts-framework-directory.md)
-          - [Rules for Accessing Application Code Files](ui/ts-framework-file-access-rules.md)
-        - ["js" Tag](ui/ts-framework-js-tag.md)
-        - Resource Access
-          - [Accessing Application Resources](ui/ts-application-resource-access.md)
-          - [Accessing System Resources](ui/ts-system-resource-access.md)
-          - [Media Resource Types](ui/ts-media-resource-type.md)
-        - [Pixel Units](ui/ts-pixel-units.md)
-        - [Types](ui/ts-types.md)
-      - Declarative Syntax
-        - [Overview](ui/ts-syntax-intro.md)
-        - General UI Description Specifications
-          - [Basic Concepts](ui/ts-general-ui-concepts.md)
-          - Declarative UI Description Specifications
-            - [Parameterless Configuration](ui/ts-parameterless-configuration.md)
-            - [Configuration with Mandatory Parameters](ui/ts-configuration-with-mandatory-parameters.md)
-            - [Attribution Configuration](ui/ts-attribution-configuration.md)
-            - [Event Configuration](ui/ts-event-configuration.md)
-            - [Child Component Configuration](ui/ts-child-component-configuration.md)
-          - Componentization
-            - [@Component](ui/ts-component-based-component.md)
-            - [@Entry](ui/ts-component-based-entry.md)
-            - [@Preview](ui/ts-component-based-preview.md)
-            - [@Builder](ui/ts-component-based-builder.md)
-            - [@Extend](ui/ts-component-based-extend.md)
-            - [@CustomDialog](ui/ts-component-based-customdialog.md)
-            - [@Styles](ui/ts-component-based-styles.md)
-        - About UI State Management
-          - [Basic Concepts](ui/ts-ui-state-mgmt-concepts.md)
-          - Managing Component States
-            - [@State](ui/ts-component-states-state.md)
-            - [@Prop](ui/ts-component-states-prop.md)
-            - [@Link](ui/ts-component-states-link.md)
-          - Managing Application States
-            - [AppStorage](ui/ts-application-states-appstorage.md)
-            - [PersistentStorage](ui/ts-application-states-apis-persistentstorage.md)
-            - [Environment](ui/ts-application-states-apis-environment.md)
-          - Managing Other States
-            - [@observed and @objectLink](ui/ts-other-states-observed-objectlink.md)
-            - [@Consume and @Provide](ui/ts-other-states-consume-provide.md)
-            - [@Watch](ui/ts-other-states-watch.md)
-        - About Rendering Control Syntax
-          - [if/else](ui/ts-rending-control-syntax-if-else.md)
-          - [ForEach](ui/ts-rending-control-syntax-foreach.md)
-          - [LazyForEach](ui/ts-rending-control-syntax-lazyforeach.md)
-        - About @Component
-          - [build Function](ui/ts-function-build.md)
-          - [Custom Component Initialization](ui/ts-custom-component-initialization.md)
-          - [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
-          - [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
-        - [Syntactic Sugar](ui/ts-syntactic-sugar.md)
-      - Common Component Development Guidelines
-        - [Button](ui/ui-ts-basic-components-button.md)
-        - [Web](ui/ui-ts-components-web.md)
-      - Common Layout Development Guidelines
-        - [Flex Layout](ui/ui-ts-layout-flex.md)
-        - [Grid Layout](ui/ui-ts-layout-grid-container.md)
-        - [Media Query](ui/ui-ts-layout-mediaquery.md)
-      - Experiencing the Declarative UI
-        - [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
-        - [Getting to Know Components](ui/ui-ts-components.md)
-        - [Creating a Simple Page](ui/ui-ts-creating-simple-page.md)
-      - Defining Page Layout and Connection
-        - [Building a Food Data Model](ui/ui-ts-building-data-model.md)
-        - [Building a Food Category List Layout](ui/ui-ts-building-category-list-layout.md)
-        - [Building a Food Category Grid Layout](ui/ui-ts-building-category-grid-layout.md)
-        - [Implementing Page Redirection and Data Transmission](ui/ui-ts-page-redirection-data-transmission.md)
-
   - Common Event and Notification
     - [Common Event and Notification Overview](notification/notification-brief.md)
     - Common Event
@@ -299,109 +298,7 @@
   - [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
   - [Codelabs](https://gitee.com/openharmony/codelabs)
 - API References
-  - Component Reference (JavaScript-based Web-like Development Paradigm)
-    - Components
-      - Common
-        - [Universal Attributes](reference/arkui-js/js-components-common-attributes.md)
-        - [Universal Styles](reference/arkui-js/js-components-common-styles.md)
-        - [Universal Events](reference/arkui-js/js-components-common-events.md)
-        - [Universal Methods](reference/arkui-js/js-components-common-methods.md)
-        - [Animation Styles](reference/arkui-js/js-components-common-animation.md)
-        - [Gradient Styles](reference/arkui-js/js-components-common-gradient.md)
-        - [Transition Styles](reference/arkui-js/js-components-common-transition.md)
-        - [Media Query](reference/arkui-js/js-components-common-mediaquery.md)
-        - [Custom Font Styles](reference/arkui-js/js-components-common-customizing-font.md)
-        - [Atomic Layout](reference/arkui-js/js-components-common-atomic-layout.md)
-      - Container Components
-        - [badge](reference/arkui-js/js-components-container-badge.md)
-        - [dialog](reference/arkui-js/js-components-container-dialog.md)
-        - [div](reference/arkui-js/js-components-container-div.md)
-        - [form](reference/arkui-js/js-components-container-form.md)
-        - [list](reference/arkui-js/js-components-container-list.md)
-        - [list-item](reference/arkui-js/js-components-container-list-item.md)
-        - [list-item-group](reference/arkui-js/js-components-container-list-item-group.md)
-        - [panel](reference/arkui-js/js-components-container-panel.md)
-        - [popup](reference/arkui-js/js-components-container-popup.md)
-        - [refresh](reference/arkui-js/js-components-container-refresh.md)
-        - [stack](reference/arkui-js/js-components-container-stack.md)
-        - [stepper](reference/arkui-js/js-components-container-stepper.md)
-        - [stepper-item](reference/arkui-js/js-components-container-stepper-item.md)
-        - [swiper](reference/arkui-js/js-components-container-swiper.md)
-        - [tabs](reference/arkui-js/js-components-container-tabs.md)
-        - [tab-bar](reference/arkui-js/js-components-container-tab-bar.md)
-        - [tab-content](reference/arkui-js/js-components-container-tab-content.md)
-      - Basic Components
-        - [button](reference/arkui-js/js-components-basic-button.md)
-        - [chart](reference/arkui-js/js-components-basic-chart.md)
-        - [divider](reference/arkui-js/js-components-basic-divider.md)
-        - [image](reference/arkui-js/js-components-basic-image.md)
-        - [image-animator](reference/arkui-js/js-components-basic-image-animator.md)
-        - [input](reference/arkui-js/js-components-basic-input.md)
-        - [label](reference/arkui-js/js-components-basic-label.md)
-        - [marquee](reference/arkui-js/js-components-basic-marquee.md)
-        - [menu](reference/arkui-js/js-components-basic-menu.md)
-        - [option](reference/arkui-js/js-components-basic-option.md)
-        - [picker](reference/arkui-js/js-components-basic-picker.md)
-        - [picker-view](reference/arkui-js/js-components-basic-picker-view.md)
-        - [piece](reference/arkui-js/js-components-basic-piece.md)
-        - [progress](reference/arkui-js/js-components-basic-progress.md)
-        - [qrcode](reference/arkui-js/js-components-basic-qrcode.md)
-        - [rating](reference/arkui-js/js-components-basic-rating.md)
-        - [richtext](reference/arkui-js/js-components-basic-richtext.md)
-        - [search](reference/arkui-js/js-components-basic-search.md)
-        - [select](reference/arkui-js/js-components-basic-select.md)
-        - [slider](reference/arkui-js/js-components-basic-slider.md)
-        - [span](reference/arkui-js/js-components-basic-span.md)
-        - [switch](reference/arkui-js/js-components-basic-switch.md)
-        - [text](reference/arkui-js/js-components-basic-text.md)
-        - [textarea](reference/arkui-js/js-components-basic-textarea.md)
-        - [toolbar](reference/arkui-js/js-components-basic-toolbar.md)
-        - [toolbar-item](reference/arkui-js/js-components-basic-toolbar-item.md)
-        - [toggle](reference/arkui-js/js-components-basic-toggle.md)
-        - [web](reference/arkui-js/js-components-basic-web.md)
-      - Media Components
-        - [video](reference/arkui-js/js-components-media-video.md)
-      - Canvas Components
-        - [canvas](reference/arkui-js/js-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D](reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)
-        - [Image](reference/arkui-js/js-components-canvas-image.md)
-        - [CanvasGradient](reference/arkui-js/js-components-canvas-canvasgradient.md)
-        - [ImageData](reference/arkui-js/js-components-canvas-imagedata.md)
-        - [Path2D](reference/arkui-js/js-components-canvas-path2d.md)
-        - [ImageBitmap](reference/arkui-js/js-components-canvas-imagebitmap.md)
-        - [OffscreenCanvas](reference/arkui-js/js-components-canvas-offscreencanvas.md)
-        - [OffscreenCanvasRenderingContext2D](reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)
-      - Grid
-        - [Basic Concepts](reference/arkui-js/js-components-grid-basic-concepts.md)
-        - [grid-container](reference/arkui-js/js-components-grid-container.md)
-        - [grid-row](reference/arkui-js/js-components-grid-row.md)
-        - [grid-col](reference/arkui-js/js-components-grid-col.md)
-      - SVG Components
-        - [Universal Attributes](reference/arkui-js/js-components-svg-common-attributes.md)
-        - [svg](reference/arkui-js/js-components-svg.md)
-        - [rect](reference/arkui-js/js-components-svg-rect.md)
-        - [circle](reference/arkui-js/js-components-svg-circle.md)
-        - [ellipse](reference/arkui-js/js-components-svg-ellipse.md)
-        - [path](reference/arkui-js/js-components-svg-path.md)
-        - [line](reference/arkui-js/js-components-svg-line.md)
-        - [polyline](reference/arkui-js/js-components-svg-polyline.md)
-        - [polygon](reference/arkui-js/js-components-svg-polygon.md)
-        - [text](reference/arkui-js/js-components-svg-text.md)
-        - [tspan](reference/arkui-js/js-components-svg-tspan.md)
-        - [textPath](reference/arkui-js/js-components-svg-textpath.md)
-        - [animate](reference/arkui-js/js-components-svg-animate.md)
-        - [animateMotion](reference/arkui-js/js-components-svg-animatemotion.md)
-        - [animateTransform](reference/arkui-js/js-components-svg-animatetransform.md)
-    - Custom Components
-      - [Basic Usage](reference/arkui-js/js-components-custom-basic-usage.md)
-      - [Custom Events](reference/arkui-js/js-components-custom-events.md)
-      - [props](reference/arkui-js/js-components-custom-props.md)
-      - [Event Parameter](reference/arkui-js/js-components-custom-event-parameter.md)
-      - [slot](reference/arkui-js/js-components-custom-slot.md)
-      - [Lifecycle Definition](reference/arkui-js/js-components-custom-lifecycle.md)
-    - [Type Attributes](reference/arkui-js/js-appendix-types.md)
   - Component Reference (TypeScript-based Declarative Development Paradigm)
-    - Components
     - Universal Components
       - Universal Events
         - [Click Event](reference/arkui-ts/ts-universal-events-click.md)
@@ -547,6 +444,106 @@
         - [Text Picker Dialog Box](reference/arkui-ts/ts-methods-textpicker-dialog.md)
       - [Menu](reference/arkui-ts/ts-methods-menu.md)
     - [Built-in Enums](reference/arkui-ts/ts-appendix-enums.md)
+  - Component Reference (JavaScript-based Web-like Development Paradigm)
+    - Common
+      - [Universal Attributes](reference/arkui-js/js-components-common-attributes.md)
+      - [Universal Styles](reference/arkui-js/js-components-common-styles.md)
+      - [Universal Events](reference/arkui-js/js-components-common-events.md)
+      - [Universal Methods](reference/arkui-js/js-components-common-methods.md)
+      - [Animation Styles](reference/arkui-js/js-components-common-animation.md)
+      - [Gradient Styles](reference/arkui-js/js-components-common-gradient.md)
+      - [Transition Styles](reference/arkui-js/js-components-common-transition.md)
+      - [Media Query](reference/arkui-js/js-components-common-mediaquery.md)
+      - [Custom Font Styles](reference/arkui-js/js-components-common-customizing-font.md)
+      - [Atomic Layout](reference/arkui-js/js-components-common-atomic-layout.md)
+    - Container Components
+      - [badge](reference/arkui-js/js-components-container-badge.md)
+      - [dialog](reference/arkui-js/js-components-container-dialog.md)
+      - [div](reference/arkui-js/js-components-container-div.md)
+      - [form](reference/arkui-js/js-components-container-form.md)
+      - [list](reference/arkui-js/js-components-container-list.md)
+      - [list-item](reference/arkui-js/js-components-container-list-item.md)
+      - [list-item-group](reference/arkui-js/js-components-container-list-item-group.md)
+      - [panel](reference/arkui-js/js-components-container-panel.md)
+      - [popup](reference/arkui-js/js-components-container-popup.md)
+      - [refresh](reference/arkui-js/js-components-container-refresh.md)
+      - [stack](reference/arkui-js/js-components-container-stack.md)
+      - [stepper](reference/arkui-js/js-components-container-stepper.md)
+      - [stepper-item](reference/arkui-js/js-components-container-stepper-item.md)
+      - [swiper](reference/arkui-js/js-components-container-swiper.md)
+      - [tabs](reference/arkui-js/js-components-container-tabs.md)
+      - [tab-bar](reference/arkui-js/js-components-container-tab-bar.md)
+      - [tab-content](reference/arkui-js/js-components-container-tab-content.md)
+    - Basic Components
+      - [button](reference/arkui-js/js-components-basic-button.md)
+      - [chart](reference/arkui-js/js-components-basic-chart.md)
+      - [divider](reference/arkui-js/js-components-basic-divider.md)
+      - [image](reference/arkui-js/js-components-basic-image.md)
+      - [image-animator](reference/arkui-js/js-components-basic-image-animator.md)
+      - [input](reference/arkui-js/js-components-basic-input.md)
+      - [label](reference/arkui-js/js-components-basic-label.md)
+      - [marquee](reference/arkui-js/js-components-basic-marquee.md)
+      - [menu](reference/arkui-js/js-components-basic-menu.md)
+      - [option](reference/arkui-js/js-components-basic-option.md)
+      - [picker](reference/arkui-js/js-components-basic-picker.md)
+      - [picker-view](reference/arkui-js/js-components-basic-picker-view.md)
+      - [piece](reference/arkui-js/js-components-basic-piece.md)
+      - [progress](reference/arkui-js/js-components-basic-progress.md)
+      - [qrcode](reference/arkui-js/js-components-basic-qrcode.md)
+      - [rating](reference/arkui-js/js-components-basic-rating.md)
+      - [richtext](reference/arkui-js/js-components-basic-richtext.md)
+      - [search](reference/arkui-js/js-components-basic-search.md)
+      - [select](reference/arkui-js/js-components-basic-select.md)
+      - [slider](reference/arkui-js/js-components-basic-slider.md)
+      - [span](reference/arkui-js/js-components-basic-span.md)
+      - [switch](reference/arkui-js/js-components-basic-switch.md)
+      - [text](reference/arkui-js/js-components-basic-text.md)
+      - [textarea](reference/arkui-js/js-components-basic-textarea.md)
+      - [toolbar](reference/arkui-js/js-components-basic-toolbar.md)
+      - [toolbar-item](reference/arkui-js/js-components-basic-toolbar-item.md)
+      - [toggle](reference/arkui-js/js-components-basic-toggle.md)
+      - [web](reference/arkui-js/js-components-basic-web.md)
+    - Media Components
+      - [video](reference/arkui-js/js-components-media-video.md)
+    - Canvas Components
+      - [canvas](reference/arkui-js/js-components-canvas-canvas.md)
+      - [CanvasRenderingContext2D](reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)
+      - [Image](reference/arkui-js/js-components-canvas-image.md)
+      - [CanvasGradient](reference/arkui-js/js-components-canvas-canvasgradient.md)
+      - [ImageData](reference/arkui-js/js-components-canvas-imagedata.md)
+      - [Path2D](reference/arkui-js/js-components-canvas-path2d.md)
+      - [ImageBitmap](reference/arkui-js/js-components-canvas-imagebitmap.md)
+      - [OffscreenCanvas](reference/arkui-js/js-components-canvas-offscreencanvas.md)
+      - [OffscreenCanvasRenderingContext2D](reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)
+    - Grid
+      - [Basic Concepts](reference/arkui-js/js-components-grid-basic-concepts.md)
+      - [grid-container](reference/arkui-js/js-components-grid-container.md)
+      - [grid-row](reference/arkui-js/js-components-grid-row.md)
+      - [grid-col](reference/arkui-js/js-components-grid-col.md)
+    - SVG Components
+      - [Universal Attributes](reference/arkui-js/js-components-svg-common-attributes.md)
+      - [svg](reference/arkui-js/js-components-svg.md)
+      - [rect](reference/arkui-js/js-components-svg-rect.md)
+      - [circle](reference/arkui-js/js-components-svg-circle.md)
+      - [ellipse](reference/arkui-js/js-components-svg-ellipse.md)
+      - [path](reference/arkui-js/js-components-svg-path.md)
+      - [line](reference/arkui-js/js-components-svg-line.md)
+      - [polyline](reference/arkui-js/js-components-svg-polyline.md)
+      - [polygon](reference/arkui-js/js-components-svg-polygon.md)
+      - [text](reference/arkui-js/js-components-svg-text.md)
+      - [tspan](reference/arkui-js/js-components-svg-tspan.md)
+      - [textPath](reference/arkui-js/js-components-svg-textpath.md)
+      - [animate](reference/arkui-js/js-components-svg-animate.md)
+      - [animateMotion](reference/arkui-js/js-components-svg-animatemotion.md)
+      - [animateTransform](reference/arkui-js/js-components-svg-animatetransform.md)
+    - Custom Components
+      - [Basic Usage](reference/arkui-js/js-components-custom-basic-usage.md)
+      - [Custom Events](reference/arkui-js/js-components-custom-events.md)
+      - [props](reference/arkui-js/js-components-custom-props.md)
+      - [Event Parameter](reference/arkui-js/js-components-custom-event-parameter.md)
+      - [slot](reference/arkui-js/js-components-custom-slot.md)
+      - [Lifecycle Definition](reference/arkui-js/js-components-custom-lifecycle.md)
+    - [Type Attributes](reference/arkui-js/js-appendix-types.md)
 - APIs
     - Ability Framework    
       - [@ohos.ability.dataUriUtils](reference/apis/js-apis-DataUriUtils.md)

zh-cn/application-dev/Readme-CN.md

@@ -40,8 +40,9 @@
     - [示例代码](https://gitee.com/openharmony/app_samples/blob/master/README_zh.md)
     - [Codelabs](https://gitee.com/openharmony/codelabs/blob/master/README.md)
 - API参考
-    - [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/Readme-CN.md)
     - [组件参考（基于TS扩展的声明式开发范式）](reference/arkui-ts/Readme-CN.md)
+    - [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/Readme-CN.md)
+    - [JS服务卡片UI组件参考](reference/js-service-widget-ui/Readme-CN.md)
     - 接口
       - [JS及TS API参考](reference/apis/Readme-CN.md)
       - Native API

zh-cn/application-dev/application-dev-guide-for-gitee.md

@@ -54,8 +54,9 @@ DevEco Studio工具是OpenHarmony应用开发的推荐IDE工具。
 API参考提供了OpenHarmony全量组件和接口的参考文档，可以帮助开发者快速查找到指定接口的详细描述和调用方法。
 
 内容包括：
-- [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/Readme-CN.md)
 - [组件参考（基于TS扩展的声明式开发范式）](reference/arkui-ts/Readme-CN.md)
+- [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/Readme-CN.md)
+- [JS服务卡片UI组件参考](reference/js-service-widget-ui/Readme-CN.md)
 - 接口参考
     - [JS及TS API参考](reference/apis/Readme-CN.md)
     - Native API

zh-cn/application-dev/application-dev-guide.md

@@ -54,8 +54,9 @@ DevEco Studio工具是OpenHarmony应用开发的推荐IDE工具。
 API参考提供了OpenHarmony全量组件和接口的参考文档，可以帮助开发者快速查找到指定接口的详细描述和调用方法。
 
 内容包括：
--   [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/js-components-common-attributes.md)
 -   [组件参考（基于TS扩展的声明式开发范式）](reference/arkui-ts/ts-universal-events-click.md)
+-   [组件参考（基于JS扩展的类Web开发范式）](reference/arkui-js/js-components-common-attributes.md)
+-   [JS服务卡片UI组件参考](reference/js-service-widget-ui/js-service-widget-file.md)
 -   [接口参考（JS及TS API）](reference/apis/js-apis-DataUriUtils.md)
 -   接口参考（Native API）
     -   [OpenHarmony Native API](reference/native-apis/_o_h___native_x_component.md)

zh-cn/application-dev/reference/Readme-CN.md

 # 开发参考
 
--   [基于JS扩展的类Web开发范式](arkui-js/Readme-CN.md)
--   [基于TS扩展的声明式开发范式](arkui-ts/Readme-CN.md)
+-   [组件参考（基于TS扩展的声明式开发范式）](arkui-ts/Readme-CN.md)
+-   [组件参考（基于JS扩展的类Web开发范式）](arkui-js/Readme-CN.md)
+-   [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
 -   [接口参考（JS及TS API）](apis/Readme-CN.md)
 -   接口参考（Native API）
     -   [OpenHarmony Native API](./native-apis/Readme-CN.md)

zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md

-# JS服务卡片页面开发
+# JS服务卡片UI组件参考
 
-- JS服务卡片页面框架说明
+- JS服务卡片UI框架说明
     - [文件组织](js-service-widget-file.md)
     - [配置文件](js-service-widget-config-file.md)
     - 语法

zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md

@@ -4,7 +4,7 @@
 
 ## 推荐使用数据懒加载
 
-开发者在使用长列表时，如果直接采用循环渲染方式，如下所示，会一次性加载所有的列表元素，一方面会导致页面启动时间过长，影响用户体验，另一方面也会增加服务器的压力和流量，加重手机系统负担。
+开发者在使用长列表时，如果直接采用循环渲染方式，如下所示，会一次性加载所有的列表元素，一方面会导致页面启动时间过长，影响用户体验，另一方面也会增加服务器的压力和流量，加重系统负担。
 
 ```ts
 @Entry

zh-cn/application-dev/website.md

@@ -35,78 +35,6 @@
       - [测试框架使用指导](ability/ability-delegator.md)
   - UI开发
     - [方舟开发框架（ArkUI）概述](ui/arkui-overview.md)
-    - 基于JS扩展的类Web开发范式
-      - [概述](ui/ui-js-overview.md)
-      - 框架说明
-        - [文件组织](ui/js-framework-file.md)
-        - [js标签配置](ui/js-framework-js-tag.md)
-        - [app.js](ui/js-framework-js-file.md)
-        - 语法
-          - [HML语法参考](ui/js-framework-syntax-hml.md)
-          - [CSS语法参考](ui/js-framework-syntax-css.md)
-          - [JS语法参考](ui/js-framework-syntax-js.md)
-        - [生命周期](ui/js-framework-lifecycle.md)
-        - [资源限定与访问](ui/js-framework-resource-restriction.md)
-        - [多语言支持](ui/js-framework-multiple-languages.md)
-      - 构建用户界面
-        - [组件介绍](ui/ui-js-building-ui-component.md)
-        - 构建布局
-          - [布局说明](ui/ui-js-building-ui-layout-intro.md)
-          - [添加标题行和文本区域](ui/ui-js-building-ui-layout-text.md)
-          - [添加图片区域](ui/ui-js-building-ui-layout-image.md)
-          - [添加留言区域](ui/ui-js-building-ui-layout-comment.md)
-          - [添加容器](ui/ui-js-building-ui-layout-external-container.md)
-        - [添加交互](ui/ui-js-building-ui-interactions.md)
-        - [动画](ui/ui-js-building-ui-animation.md)
-        - [手势事件](ui/ui-js-building-ui-event.md)
-        - [页面路由](ui/ui-js-building-ui-routes.md)
-      - 常见组件开发指导
-        - 容器组件
-          - [List开发指导](ui/ui-js-components-list.md)
-          - [Dialog开发指导](ui/ui-js-components-dialog.md)
-          - [Form开发指导](ui/ui-js-components-form.md)
-          - [Stepper开发指导](ui/ui-js-components-stepper.md)
-          - [Tabs开发指导](ui/ui-js-component-tabs.md)
-          - [Swiper开发指导](ui/ui-js-components-swiper.md)
-        - 基础组件
-          - [Text开发指导](ui/ui-js-components-text.md)
-          - [Input开发指导](ui/ui-js-components-input.md)
-          - [Button开发指导](ui/ui-js-components-button.md)
-          - [Picker开发指导](ui/ui-js-components-picker.md)
-          - [Image开发指导](ui/ui-js-components-images.md)
-          - [Image-animator开发指导](ui/ui-js-components-image-animator.md)
-          - [Rating开发指导](ui/ui-js-components-rating.md)
-          - [Slider开发指导](ui/ui-js-components-slider.md)
-          - [Chart开发指导](ui/ui-js-components-chart.md)
-          - [Switch开发指导](ui/ui-js-components-switch.md)
-          - [Toolbar开发指导](ui/ui-js-components-toolbar.md)
-          - [Menu开发指导](ui/ui-js-components-menu.md)
-          - [Marquee开发指导](ui/ui-js-components-marquee.md)
-          - [Qrcode开发指导](ui/ui-js-components-qrcode.md)
-          - [Search开发指导](ui/ui-js-components-search.md)
-        - Canvas开发指导
-          - [Canvas对象](ui/ui-js-components-canvas.md)
-          - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
-          - [Path2D对象](ui/ui-js-components-path2d.md)
-          - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui/ui-js-components-grid.md)
-        - Svg开发指导
-          - [基础知识](ui/ui-js-components-svg-overview.md)
-          - [绘制图形](ui/ui-js-components-svg-graphics.md)
-          - [绘制路径](ui/ui-js-components-svg-path.md)
-          - [绘制文本](ui/ui-js-components-svg-text.md)
-      - 动效开发指导
-        - CSS动画
-          - [属性样式动画](ui/ui-js-animate-attribute-style.md)
-          - [transform样式动画](ui/ui-js-animate-transform.md)
-          - [background-position样式动画](ui/ui-js-animate-background-position-style.md)
-          - [svg动画](ui/ui-js-animate-svg.md)
-        - JS动画
-          - [组件动画](ui/ui-js-animate-component.md)
-          - 插值器动画
-            - [动画动效](ui/ui-js-animate-dynamic-effects.md)
-            - [动画帧](ui/ui-js-animate-frame.md)
-      - [自定义组件](ui/ui-js-custom-components.md)
     - 基于TS扩展的声明式开发范式
       - [概述](ui/ui-ts-overview.md)
       - 框架说明
@@ -179,6 +107,78 @@
         - [构建食物分类Grid布局](ui/ui-ts-building-category-grid-layout.md)
         - [页面跳转与数据传递](ui/ui-ts-page-redirection-data-transmission.md)
       - [性能提升的推荐方案](ui/ts-performance-improvement-recommendation.md)
+    - 基于JS扩展的类Web开发范式
+      - [概述](ui/ui-js-overview.md)
+      - 框架说明
+        - [文件组织](ui/js-framework-file.md)
+        - [js标签配置](ui/js-framework-js-tag.md)
+        - [app.js](ui/js-framework-js-file.md)
+        - 语法
+          - [HML语法参考](ui/js-framework-syntax-hml.md)
+          - [CSS语法参考](ui/js-framework-syntax-css.md)
+          - [JS语法参考](ui/js-framework-syntax-js.md)
+        - [生命周期](ui/js-framework-lifecycle.md)
+        - [资源限定与访问](ui/js-framework-resource-restriction.md)
+        - [多语言支持](ui/js-framework-multiple-languages.md)
+      - 构建用户界面
+        - [组件介绍](ui/ui-js-building-ui-component.md)
+        - 构建布局
+          - [布局说明](ui/ui-js-building-ui-layout-intro.md)
+          - [添加标题行和文本区域](ui/ui-js-building-ui-layout-text.md)
+          - [添加图片区域](ui/ui-js-building-ui-layout-image.md)
+          - [添加留言区域](ui/ui-js-building-ui-layout-comment.md)
+          - [添加容器](ui/ui-js-building-ui-layout-external-container.md)
+        - [添加交互](ui/ui-js-building-ui-interactions.md)
+        - [动画](ui/ui-js-building-ui-animation.md)
+        - [手势事件](ui/ui-js-building-ui-event.md)
+        - [页面路由](ui/ui-js-building-ui-routes.md)
+      - 常见组件开发指导
+        - 容器组件
+          - [List开发指导](ui/ui-js-components-list.md)
+          - [Dialog开发指导](ui/ui-js-components-dialog.md)
+          - [Form开发指导](ui/ui-js-components-form.md)
+          - [Stepper开发指导](ui/ui-js-components-stepper.md)
+          - [Tabs开发指导](ui/ui-js-component-tabs.md)
+          - [Swiper开发指导](ui/ui-js-components-swiper.md)
+        - 基础组件
+          - [Text开发指导](ui/ui-js-components-text.md)
+          - [Input开发指导](ui/ui-js-components-input.md)
+          - [Button开发指导](ui/ui-js-components-button.md)
+          - [Picker开发指导](ui/ui-js-components-picker.md)
+          - [Image开发指导](ui/ui-js-components-images.md)
+          - [Image-animator开发指导](ui/ui-js-components-image-animator.md)
+          - [Rating开发指导](ui/ui-js-components-rating.md)
+          - [Slider开发指导](ui/ui-js-components-slider.md)
+          - [Chart开发指导](ui/ui-js-components-chart.md)
+          - [Switch开发指导](ui/ui-js-components-switch.md)
+          - [Toolbar开发指导](ui/ui-js-components-toolbar.md)
+          - [Menu开发指导](ui/ui-js-components-menu.md)
+          - [Marquee开发指导](ui/ui-js-components-marquee.md)
+          - [Qrcode开发指导](ui/ui-js-components-qrcode.md)
+          - [Search开发指导](ui/ui-js-components-search.md)
+        - Canvas开发指导
+          - [Canvas对象](ui/ui-js-components-canvas.md)
+          - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
+          - [Path2D对象](ui/ui-js-components-path2d.md)
+          - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
+        - [栅格布局](ui/ui-js-components-grid.md)
+        - Svg开发指导
+          - [基础知识](ui/ui-js-components-svg-overview.md)
+          - [绘制图形](ui/ui-js-components-svg-graphics.md)
+          - [绘制路径](ui/ui-js-components-svg-path.md)
+          - [绘制文本](ui/ui-js-components-svg-text.md)
+      - 动效开发指导
+        - CSS动画
+          - [属性样式动画](ui/ui-js-animate-attribute-style.md)
+          - [transform样式动画](ui/ui-js-animate-transform.md)
+          - [background-position样式动画](ui/ui-js-animate-background-position-style.md)
+          - [svg动画](ui/ui-js-animate-svg.md)
+        - JS动画
+          - [组件动画](ui/ui-js-animate-component.md)
+          - 插值器动画
+            - [动画动效](ui/ui-js-animate-dynamic-effects.md)
+            - [动画帧](ui/ui-js-animate-frame.md)
+      - [自定义组件](ui/ui-js-custom-components.md)
   - 公共事件与通知
     - [公共事件与通知概述](notification/notification-brief.md)
     - [公共事件开发指导](notification/common-event.md)
@@ -301,111 +301,8 @@
   - [示例代码](https://gitee.com/openharmony/app_samples/blob/master/README_zh.md)
   - [Codelabs](https://gitee.com/openharmony/codelabs/blob/master/README.md)
 - API参考
-  - 组件参考（基于JS扩展的类Web开发范式）
-    - 组件
-      - 通用
-        - [通用属性](reference/arkui-js/js-components-common-attributes.md)
-        - [通用样式](reference/arkui-js/js-components-common-styles.md)
-        - [通用事件](reference/arkui-js/js-components-common-events.md)
-        - [通用方法](reference/arkui-js/js-components-common-methods.md)
-        - [动画样式](reference/arkui-js/js-components-common-animation.md)
-        - [渐变样式](reference/arkui-js/js-components-common-gradient.md)
-        - [转场样式](reference/arkui-js/js-components-common-transition.md)
-        - [媒体查询](reference/arkui-js/js-components-common-mediaquery.md)
-        - [自定义字体样式](reference/arkui-js/js-components-common-customizing-font.md)
-        - [原子布局](reference/arkui-js/js-components-common-atomic-layout.md)
-      - 容器组件
-        - [badge](reference/arkui-js/js-components-container-badge.md)
-        - [dialog](reference/arkui-js/js-components-container-dialog.md)
-        - [div](reference/arkui-js/js-components-container-div.md)
-        - [form](reference/arkui-js/js-components-container-form.md)
-        - [list](reference/arkui-js/js-components-container-list.md)
-        - [list-item](reference/arkui-js/js-components-container-list-item.md)
-        - [list-item-group](reference/arkui-js/js-components-container-list-item-group.md)
-        - [panel](reference/arkui-js/js-components-container-panel.md)
-        - [popup](reference/arkui-js/js-components-container-popup.md)
-        - [refresh](reference/arkui-js/js-components-container-refresh.md)
-        - [stack](reference/arkui-js/js-components-container-stack.md)
-        - [stepper](reference/arkui-js/js-components-container-stepper.md)
-        - [stepper-item](reference/arkui-js/js-components-container-stepper-item.md)
-        - [swiper](reference/arkui-js/js-components-container-swiper.md)
-        - [tabs](reference/arkui-js/js-components-container-tabs.md)
-        - [tab-bar](reference/arkui-js/js-components-container-tab-bar.md)
-        - [tab-content](reference/arkui-js/js-components-container-tab-content.md)
-      - 基础组件
-        - [button](reference/arkui-js/js-components-basic-button.md)
-        - [chart](reference/arkui-js/js-components-basic-chart.md)
-        - [divider](reference/arkui-js/js-components-basic-divider.md)
-        - [image](reference/arkui-js/js-components-basic-image.md)
-        - [image-animator](reference/arkui-js/js-components-basic-image-animator.md)
-        - [input](reference/arkui-js/js-components-basic-input.md)
-        - [label](reference/arkui-js/js-components-basic-label.md)
-        - [marquee](reference/arkui-js/js-components-basic-marquee.md)
-        - [menu](reference/arkui-js/js-components-basic-menu.md)
-        - [option](reference/arkui-js/js-components-basic-option.md)
-        - [picker](reference/arkui-js/js-components-basic-picker.md)
-        - [picker-view](reference/arkui-js/js-components-basic-picker-view.md)
-        - [piece](reference/arkui-js/js-components-basic-piece.md)
-        - [progress](reference/arkui-js/js-components-basic-progress.md)
-        - [qrcode](reference/arkui-js/js-components-basic-qrcode.md)
-        - [rating](reference/arkui-js/js-components-basic-rating.md)
-        - [richtext](reference/arkui-js/js-components-basic-richtext.md)
-        - [search](reference/arkui-js/js-components-basic-search.md)
-        - [select](reference/arkui-js/js-components-basic-select.md)
-        - [slider](reference/arkui-js/js-components-basic-slider.md)
-        - [span](reference/arkui-js/js-components-basic-span.md)
-        - [switch](reference/arkui-js/js-components-basic-switch.md)
-        - [text](reference/arkui-js/js-components-basic-text.md)
-        - [textarea](reference/arkui-js/js-components-basic-textarea.md)
-        - [toolbar](reference/arkui-js/js-components-basic-toolbar.md)
-        - [toolbar-item](reference/arkui-js/js-components-basic-toolbar-item.md)
-        - [toggle](reference/arkui-js/js-components-basic-toggle.md)
-        - [web](reference/arkui-js/js-components-basic-web.md)
-      - 媒体组件
-        - [video](reference/arkui-js/js-components-media-video.md)
-      - 画布组件
-        - [canvas组件](reference/arkui-js/js-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D对象](reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)
-        - [Image对象](reference/arkui-js/js-components-canvas-image.md)
-        - [CanvasGradient对象](reference/arkui-js/js-components-canvas-canvasgradient.md)
-        - [ImageData对象](reference/arkui-js/js-components-canvas-imagedata.md)
-        - [Path2D对象](reference/arkui-js/js-components-canvas-path2d.md)
-        - [ImageBitmap对象](reference/arkui-js/js-components-canvas-imagebitmap.md)
-        - [OffscreenCanvas对象](reference/arkui-js/js-components-canvas-offscreencanvas.md)
-        - [OffscreenCanvasRenderingContext2D对象](reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)
-      - 栅格组件
-        - [基本概念](reference/arkui-js/js-components-grid-basic-concepts.md)
-        - [grid-container](reference/arkui-js/js-components-grid-container.md)
-        - [grid-row](reference/arkui-js/js-components-grid-row.md)
-        - [grid-col](reference/arkui-js/js-components-grid-col.md)
-      - svg组件
-        - [通用属性](reference/arkui-js/js-components-svg-common-attributes.md)
-        - [svg](reference/arkui-js/js-components-svg.md)
-        - [rect](reference/arkui-js/js-components-svg-rect.md)
-        - [circle](reference/arkui-js/js-components-svg-circle.md)
-        - [ellipse](reference/arkui-js/js-components-svg-ellipse.md)
-        - [path](reference/arkui-js/js-components-svg-path.md)
-        - [line](reference/arkui-js/js-components-svg-line.md)
-        - [polyline](reference/arkui-js/js-components-svg-polyline.md)
-        - [polygon](reference/arkui-js/js-components-svg-polygon.md)
-        - [text](reference/arkui-js/js-components-svg-text.md)
-        - [tspan](reference/arkui-js/js-components-svg-tspan.md)
-        - [textPath](reference/arkui-js/js-components-svg-textpath.md)
-        - [animate](reference/arkui-js/js-components-svg-animate.md)
-        - [animateMotion](reference/arkui-js/js-components-svg-animatemotion.md)
-        - [animateTransform](reference/arkui-js/js-components-svg-animatetransform.md)
-    - 自定义组件
-      - [基本用法](reference/arkui-js/js-components-custom-basic-usage.md)
-      - [自定义事件](reference/arkui-js/js-components-custom-events.md)
-      - [Props](reference/arkui-js/js-components-custom-props.md)
-      - [事件参数](reference/arkui-js/js-components-custom-event-parameter.md)
-      - [slot插槽](reference/arkui-js/js-components-custom-slot.md)
-      - [生命周期定义](reference/arkui-js/js-components-custom-lifecycle.md)
-    - 附录
-      - [类型说明](reference/arkui-js/js-appendix-types.md)
   - 组件参考（基于TS扩展的声明式开发范式）
-    - 组件
-      - 通用
+    - 组件通用信息
       - 通用事件
         - [点击事件](reference/arkui-ts/ts-universal-events-click.md)
         - [触摸事件](reference/arkui-ts/ts-universal-events-touch.md)
@@ -550,6 +447,148 @@
         - [文本选择弹窗](reference/arkui-ts/ts-methods-textpicker-dialog.md)
       - [菜单](reference/arkui-ts/ts-methods-menu.md)
     - [文档中涉及到的内置枚举值](reference/arkui-ts/ts-appendix-enums.md)
+  - 组件参考（基于JS扩展的类Web开发范式）
+    - 组件通用信息
+      - [通用属性](reference/arkui-js/js-components-common-attributes.md)
+      - [通用样式](reference/arkui-js/js-components-common-styles.md)
+      - [通用事件](reference/arkui-js/js-components-common-events.md)
+      - [通用方法](reference/arkui-js/js-components-common-methods.md)
+      - [动画样式](reference/arkui-js/js-components-common-animation.md)
+      - [渐变样式](reference/arkui-js/js-components-common-gradient.md)
+      - [转场样式](reference/arkui-js/js-components-common-transition.md)
+      - [媒体查询](reference/arkui-js/js-components-common-mediaquery.md)
+      - [自定义字体样式](reference/arkui-js/js-components-common-customizing-font.md)
+      - [原子布局](reference/arkui-js/js-components-common-atomic-layout.md)
+    - 容器组件
+      - [badge](reference/arkui-js/js-components-container-badge.md)
+      - [dialog](reference/arkui-js/js-components-container-dialog.md)
+      - [div](reference/arkui-js/js-components-container-div.md)
+      - [form](reference/arkui-js/js-components-container-form.md)
+      - [list](reference/arkui-js/js-components-container-list.md)
+      - [list-item](reference/arkui-js/js-components-container-list-item.md)
+      - [list-item-group](reference/arkui-js/js-components-container-list-item-group.md)
+      - [panel](reference/arkui-js/js-components-container-panel.md)
+      - [popup](reference/arkui-js/js-components-container-popup.md)
+      - [refresh](reference/arkui-js/js-components-container-refresh.md)
+      - [stack](reference/arkui-js/js-components-container-stack.md)
+      - [stepper](reference/arkui-js/js-components-container-stepper.md)
+      - [stepper-item](reference/arkui-js/js-components-container-stepper-item.md)
+      - [swiper](reference/arkui-js/js-components-container-swiper.md)
+      - [tabs](reference/arkui-js/js-components-container-tabs.md)
+      - [tab-bar](reference/arkui-js/js-components-container-tab-bar.md)
+      - [tab-content](reference/arkui-js/js-components-container-tab-content.md)
+    - 基础组件
+      - [button](reference/arkui-js/js-components-basic-button.md)
+      - [chart](reference/arkui-js/js-components-basic-chart.md)
+      - [divider](reference/arkui-js/js-components-basic-divider.md)
+      - [image](reference/arkui-js/js-components-basic-image.md)
+      - [image-animator](reference/arkui-js/js-components-basic-image-animator.md)
+      - [input](reference/arkui-js/js-components-basic-input.md)
+      - [label](reference/arkui-js/js-components-basic-label.md)
+      - [marquee](reference/arkui-js/js-components-basic-marquee.md)
+      - [menu](reference/arkui-js/js-components-basic-menu.md)
+      - [option](reference/arkui-js/js-components-basic-option.md)
+      - [picker](reference/arkui-js/js-components-basic-picker.md)
+      - [picker-view](reference/arkui-js/js-components-basic-picker-view.md)
+      - [piece](reference/arkui-js/js-components-basic-piece.md)
+      - [progress](reference/arkui-js/js-components-basic-progress.md)
+      - [qrcode](reference/arkui-js/js-components-basic-qrcode.md)
+      - [rating](reference/arkui-js/js-components-basic-rating.md)
+      - [richtext](reference/arkui-js/js-components-basic-richtext.md)
+      - [search](reference/arkui-js/js-components-basic-search.md)
+      - [select](reference/arkui-js/js-components-basic-select.md)
+      - [slider](reference/arkui-js/js-components-basic-slider.md)
+      - [span](reference/arkui-js/js-components-basic-span.md)
+      - [switch](reference/arkui-js/js-components-basic-switch.md)
+      - [text](reference/arkui-js/js-components-basic-text.md)
+      - [textarea](reference/arkui-js/js-components-basic-textarea.md)
+      - [toolbar](reference/arkui-js/js-components-basic-toolbar.md)
+      - [toolbar-item](reference/arkui-js/js-components-basic-toolbar-item.md)
+      - [toggle](reference/arkui-js/js-components-basic-toggle.md)
+      - [web](reference/arkui-js/js-components-basic-web.md)
+    - 媒体组件
+      - [video](reference/arkui-js/js-components-media-video.md)
+    - 画布组件
+      - [canvas组件](reference/arkui-js/js-components-canvas-canvas.md)
+      - [CanvasRenderingContext2D对象](reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md)
+      - [Image对象](reference/arkui-js/js-components-canvas-image.md)
+      - [CanvasGradient对象](reference/arkui-js/js-components-canvas-canvasgradient.md)
+      - [ImageData对象](reference/arkui-js/js-components-canvas-imagedata.md)
+      - [Path2D对象](reference/arkui-js/js-components-canvas-path2d.md)
+      - [ImageBitmap对象](reference/arkui-js/js-components-canvas-imagebitmap.md)
+      - [OffscreenCanvas对象](reference/arkui-js/js-components-canvas-offscreencanvas.md)
+      - [OffscreenCanvasRenderingContext2D对象](reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)
+    - 栅格组件
+      - [基本概念](reference/arkui-js/js-components-grid-basic-concepts.md)
+      - [grid-container](reference/arkui-js/js-components-grid-container.md)
+      - [grid-row](reference/arkui-js/js-components-grid-row.md)
+      - [grid-col](reference/arkui-js/js-components-grid-col.md)
+    - svg组件
+      - [通用属性](reference/arkui-js/js-components-svg-common-attributes.md)
+      - [svg](reference/arkui-js/js-components-svg.md)
+      - [rect](reference/arkui-js/js-components-svg-rect.md)
+      - [circle](reference/arkui-js/js-components-svg-circle.md)
+      - [ellipse](reference/arkui-js/js-components-svg-ellipse.md)
+      - [path](reference/arkui-js/js-components-svg-path.md)
+      - [line](reference/arkui-js/js-components-svg-line.md)
+      - [polyline](reference/arkui-js/js-components-svg-polyline.md)
+      - [polygon](reference/arkui-js/js-components-svg-polygon.md)
+      - [text](reference/arkui-js/js-components-svg-text.md)
+      - [tspan](reference/arkui-js/js-components-svg-tspan.md)
+      - [textPath](reference/arkui-js/js-components-svg-textpath.md)
+      - [animate](reference/arkui-js/js-components-svg-animate.md)
+      - [animateMotion](reference/arkui-js/js-components-svg-animatemotion.md)
+      - [animateTransform](reference/arkui-js/js-components-svg-animatetransform.md)
+    - 自定义组件
+      - [基本用法](reference/arkui-js/js-components-custom-basic-usage.md)
+      - [自定义事件](reference/arkui-js/js-components-custom-events.md)
+      - [Props](reference/arkui-js/js-components-custom-props.md)
+      - [事件参数](reference/arkui-js/js-components-custom-event-parameter.md)
+      - [slot插槽](reference/arkui-js/js-components-custom-slot.md)
+      - [生命周期定义](reference/arkui-js/js-components-custom-lifecycle.md)
+    - [数据类型说明](reference/arkui-js/js-appendix-types.md)
+  - JS服务卡片UI组件参考
+    - JS服务卡片UI框架说明
+        - [文件组织](js-service-widget-file.md)
+        - [配置文件](js-service-widget-config-file.md)
+        - 语法
+            - [HML语法参考](js-service-widget-syntax-hml.md)
+            - [CSS语法参考](js-service-widget-syntax-css.md)
+            - [配置数据和事件](js-service-widget-configuration.md)
+        - [多语言支持](js-service-widget-multiple-languages.md)
+        - [低版本兼容](js-service-widget-version-compatibility.md)
+    - 组件
+        - 通用
+            - [通用属性](js-service-widget-common-attributes.md)
+            - [通用样式](js-service-widget-common-styles.md)
+            - [通用事件](js-service-widget-common-events.md)
+            - [渐变样式](js-service-widget-common-gradient.md)
+            - [媒体查询](js-service-widget-common-mediaquery.md)
+            - [自定义字体样式](js-service-widget-common-customizing-font.md)
+            - [无障碍](js-service-widget-common-accessibility.md)
+            - [原子布局](js-service-widget-common-atomic-layout.md)
+        - 容器组件
+            - [div](js-service-widget-container-div.md)
+            - [list](js-service-widget-container-list.md)
+            - [list-item](js-service-widget-container-list-item.md)
+            - [stack](js-service-widget-container-stack.md)
+            - [swiper](js-service-widget-container-swiper.md)
+        - 基础组件
+            - [button](js-service-widget-basic-button.md)
+            - [calendar](js-service-widget-basic-calendar.md)
+            - [chart](js-service-widget-basic-chart.md)
+            - [clock](js-service-widget-basic-clock.md)
+            - [divider](js-service-widget-basic-divider.md)
+            - [image](js-service-widget-basic-image.md)
+            - [input](js-service-widget-basic-input.md)
+            - [progress](js-service-widget-basic-progress.md)
+            - [span](js-service-widget-basic-span.md)
+            - [text](js-service-widget-basic-text.md)
+    - 自定义组件
+        - [自定义组件基本用法](js-service-widget-custom-basic-usage.md)
+        - [自定义事件](js-service-widget-custom-events.md)
+        - [Props](js-service-widget-custom-props.md)
+    - [数据类型说明](js-service-widget-appendix-types.md)
   - 接口参考（JS及TS API）
     - Ability框架
       - [@ohos.ability.dataUriUtils (DataUriUtils模块)](reference/apis/js-apis-DataUriUtils.md)