!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,234 +298,132 @@
   - [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)
-          - [Touch](reference/arkui-ts/ts-universal-events-touch.md)
-          - [Show/Hide Event](reference/arkui-ts/ts-universal-events-show-hide.md)
-          - [Drag/Drop Event](reference/arkui-ts/ts-universal-events-drag-drop.md)
-          - [Key Event](reference/arkui-ts/ts-universal-events-key.md)
-          - [Focus Event](reference/arkui-ts/ts-universal-focus-event.md)
-          - [Mouse Event](reference/arkui-ts/ts-universal-mouse-key.md)
-          - [Component Area Change Event](reference/arkui-ts/ts-universal-component-area-change-event.md)
-        - Universal Attributes
-          - [Size](reference/arkui-ts/ts-universal-attributes-size.md)
-          - [Location](reference/arkui-ts/ts-universal-attributes-location.md)
-          - [Layout Constraints](reference/arkui-ts/ts-universal-attributes-layout-constraints.md)
-          - [Flex Layout](reference/arkui-ts/ts-universal-attributes-flex-layout.md)
-          - [Border Configuration](reference/arkui-ts/ts-universal-attributes-border.md)
-          - [Background](reference/arkui-ts/ts-universal-attributes-background.md)
-          - [Opacity](reference/arkui-ts/ts-universal-attributes-opacity.md)
-          - [Visibility](reference/arkui-ts/ts-universal-attributes-visibility.md)
-          - [Enable/Disable](reference/arkui-ts/ts-universal-attributes-enable.md)
-          - [Overlay](reference/arkui-ts/ts-universal-attributes-overlay.md)
-          - [Z-order Control](reference/arkui-ts/ts-universal-attributes-z-order.md)
-          - [Transformation](reference/arkui-ts/ts-universal-attributes-transformation.md)
-          - [Image Effect Configuration](reference/arkui-ts/ts-universal-attributes-image-effect.md)
-          - [Shape Clipping](reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
-          - [Text Style](reference/arkui-ts/ts-universal-attributes-text-style.md)
-          - [Grid](reference/arkui-ts/ts-universal-attributes-grid.md)
-          - [Gradient Color](reference/arkui-ts/ts-universal-attributes-gradient-color.md)
-          - [Popup Control](reference/arkui-ts/ts-universal-attributes-popup.md)
-          - [Menu Control](reference/arkui-ts/ts-universal-attributes-menu.md)
-          - [Click Control](reference/arkui-ts/ts-universal-attributes-click.md)
-          - [Focus Control](reference/arkui-ts/ts-universal-attributes-focus.md)
-          - [Hover Effect](reference/arkui-ts/ts-universal-attributes-hover-effect.md)
-          - [Component ID](reference/arkui-ts/ts-universal-attributes-component-id.md)
-          - [Touch Target](reference/arkui-ts/ts-universal-attributes-touch-target.md)
-          - [Polymorphic Style](reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
-        - Gesture Processing
-          - [Gesture Binding Methods](reference/arkui-ts/ts-gesture-settings.md)
-          - Basic Gestures
-            - [TapGesture](reference/arkui-ts/ts-basic-gestures-tapgesture.md)
-            - [LongPressGesture](reference/arkui-ts/ts-basic-gestures-longpressgesture.md)
-            - [PanGesture](reference/arkui-ts/ts-basic-gestures-pangesture.md)
-            - [PinchGesture](reference/arkui-ts/ts-basic-gestures-pinchgesture.md)
-            - [RotationGesture](reference/arkui-ts/ts-basic-gestures-rotationgesture.md)
-            - [SwipeGesture](reference/arkui-ts/ts-basic-gestures-swipegesture.md)
-          - [Combined Gestures](reference/arkui-ts/ts-combined-gestures.md)
-      - Basic Components
-        - [Blank](reference/arkui-ts/ts-basic-components-blank.md)
-        - [Button](reference/arkui-ts/ts-basic-components-button.md)
-        - [Checkbox](reference/arkui-ts/ts-basic-components-checkbox.md)
-        - [CheckboxGroup](reference/arkui-ts/ts-basic-components-checkboxgroup.md)
-        - [DataPanel](reference/arkui-ts/ts-basic-components-datapanel.md)
-        - [DatePicker](reference/arkui-ts/ts-basic-components-datepicker.md)
-        - [Divider](reference/arkui-ts/ts-basic-components-divider.md)
-        - [Gauge](reference/arkui-ts/ts-basic-components-gauge.md)
-        - [Image](reference/arkui-ts/ts-basic-components-image.md)
-        - [ImageAnimator](reference/arkui-ts/ts-basic-components-imageanimator.md)
-        - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md)
-        - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md)
-        - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md)
-        - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
-        - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
-        - [Radio](reference/arkui-ts/ts-basic-components-radio.md)
-        - [Rating](reference/arkui-ts/ts-basic-components-rating.md)
-        - [RichText](reference/arkui-ts/ts-basic-components-richtext.md)
-        - [ScrollBar](reference/arkui-ts/ts-basic-components-scrollbar.md)
-        - [Search](reference/arkui-ts/ts-basic-components-search.md)
-        - [Select](reference/arkui-ts/ts-basic-components-select.md)
-        - [Slider](reference/arkui-ts/ts-basic-components-slider.md)
-        - [Span](reference/arkui-ts/ts-basic-components-span.md)
-        - [Stepper](reference/arkui-ts/ts-basic-components-stepper.md)
-        - [StepperItem](reference/arkui-ts/ts-basic-components-stepperitem.md)
-        - [Text](reference/arkui-ts/ts-basic-components-text.md)
-        - [TextArea](reference/arkui-ts/ts-basic-components-textarea.md)
-        - [TextClock](reference/arkui-ts/ts-basic-components-textclock.md)
-        - [TextInput](reference/arkui-ts/ts-basic-components-textinput.md)
-        - [TextPicker](reference/arkui-ts/ts-basic-components-textpicker.md)
-        - [TextTimer](reference/arkui-ts/ts-basic-components-texttimer.md)
-        - [TimePicker](reference/arkui-ts/ts-basic-components-timepicker.md)
-        - [Toggle](reference/arkui-ts/ts-basic-components-toggle.md)
-        - [Web](reference/arkui-ts/ts-basic-components-web.md)
-        - [Xcomponent](reference/arkui-ts/ts-basic-components-xcomponent.md)
-      - Container Components
-        - [AlphabetIndexer](reference/arkui-ts/ts-container-alphabet-indexer.md)
-        - [Badge](reference/arkui-ts/ts-container-badge.md)
-        - [Column](reference/arkui-ts/ts-container-column.md)
-        - [ColumnSplit](reference/arkui-ts/ts-container-columnsplit.md)
-        - [Counter](reference/arkui-ts/ts-container-counter.md)
-        - [Flex](reference/arkui-ts/ts-container-flex.md)
-        - [GridContainer](reference/arkui-ts/ts-container-gridcontainer.md)
-        - [Grid](reference/arkui-ts/ts-container-grid.md)
-        - [GridItem](reference/arkui-ts/ts-container-griditem.md)
-        - [List](reference/arkui-ts/ts-container-list.md)
-        - [ListItem](reference/arkui-ts/ts-container-listitem.md)
-        - [Navigator](reference/arkui-ts/ts-container-navigator.md)     
-        - [Panel](reference/arkui-ts/ts-container-panel.md)
-        - [Refresh](reference/arkui-ts/ts-container-refresh.md)
-        - [Row](reference/arkui-ts/ts-container-row.md)
-        - [RowSplit](reference/arkui-ts/ts-container-rowsplit.md)
-        - [Scroll](reference/arkui-ts/ts-container-scroll.md)
-        - [SideBarContainer](reference/arkui-ts/ts-container-sidebarcontainer.md)
-        - [Stack](reference/arkui-ts/ts-container-stack.md)
-        - [Swiper](reference/arkui-ts/ts-container-swiper.md)
-        - [Tabs](reference/arkui-ts/ts-container-tabs.md)
-        - [TabContent](reference/arkui-ts/ts-container-tabcontent.md)
-      - Media Components
-        - [Video](reference/arkui-ts/ts-media-components-video.md)
-      - Drawing Components
-        - [Circle](reference/arkui-ts/ts-drawing-components-circle.md)
-        - [Ellipse](reference/arkui-ts/ts-drawing-components-ellipse.md)
-        - [Line](reference/arkui-ts/ts-drawing-components-line.md)
-        - [Polyline](reference/arkui-ts/ts-drawing-components-polyline.md)
-        - [Polygon](reference/arkui-ts/ts-drawing-components-polygon.md)
-        - [Path](reference/arkui-ts/ts-drawing-components-path.md)
-        - [Rect](reference/arkui-ts/ts-drawing-components-rect.md)
-        - [Shape](reference/arkui-ts/ts-drawing-components-shape.md)
-      - Canvas Components
-        - [Canvas](reference/arkui-ts/ts-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D](reference/arkui-ts/ts-canvasrenderingcontext2d.md)
-        - [OffscreenCanvasRenderingConxt2D](reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md)
-        - [Lottie](reference/arkui-ts/ts-components-canvas-lottie.md)
-        - [Path2D](reference/arkui-ts/ts-components-canvas-path2d.md)
-        - [CanvasGradient](reference/arkui-ts/ts-components-canvas-canvasgradient.md)
-        - [ImageBitmap](reference/arkui-ts/ts-components-canvas-imagebitmap.md)
-        - [ImageData](reference/arkui-ts/ts-components-canvas-imagedata.md)
+    - Universal Components
+      - Universal Events
+        - [Click Event](reference/arkui-ts/ts-universal-events-click.md)
+        - [Touch](reference/arkui-ts/ts-universal-events-touch.md)
+        - [Show/Hide Event](reference/arkui-ts/ts-universal-events-show-hide.md)
+        - [Drag/Drop Event](reference/arkui-ts/ts-universal-events-drag-drop.md)
+        - [Key Event](reference/arkui-ts/ts-universal-events-key.md)
+        - [Focus Event](reference/arkui-ts/ts-universal-focus-event.md)
+        - [Mouse Event](reference/arkui-ts/ts-universal-mouse-key.md)
+        - [Component Area Change Event](reference/arkui-ts/ts-universal-component-area-change-event.md)
+      - Universal Attributes
+        - [Size](reference/arkui-ts/ts-universal-attributes-size.md)
+        - [Location](reference/arkui-ts/ts-universal-attributes-location.md)
+        - [Layout Constraints](reference/arkui-ts/ts-universal-attributes-layout-constraints.md)
+        - [Flex Layout](reference/arkui-ts/ts-universal-attributes-flex-layout.md)
+        - [Border Configuration](reference/arkui-ts/ts-universal-attributes-border.md)
+        - [Background](reference/arkui-ts/ts-universal-attributes-background.md)
+        - [Opacity](reference/arkui-ts/ts-universal-attributes-opacity.md)
+        - [Visibility](reference/arkui-ts/ts-universal-attributes-visibility.md)
+        - [Enable/Disable](reference/arkui-ts/ts-universal-attributes-enable.md)
+        - [Overlay](reference/arkui-ts/ts-universal-attributes-overlay.md)
+        - [Z-order Control](reference/arkui-ts/ts-universal-attributes-z-order.md)
+        - [Transformation](reference/arkui-ts/ts-universal-attributes-transformation.md)
+        - [Image Effect Configuration](reference/arkui-ts/ts-universal-attributes-image-effect.md)
+        - [Shape Clipping](reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
+        - [Text Style](reference/arkui-ts/ts-universal-attributes-text-style.md)
+        - [Grid](reference/arkui-ts/ts-universal-attributes-grid.md)
+        - [Gradient Color](reference/arkui-ts/ts-universal-attributes-gradient-color.md)
+        - [Popup Control](reference/arkui-ts/ts-universal-attributes-popup.md)
+        - [Menu Control](reference/arkui-ts/ts-universal-attributes-menu.md)
+        - [Click Control](reference/arkui-ts/ts-universal-attributes-click.md)
+        - [Focus Control](reference/arkui-ts/ts-universal-attributes-focus.md)
+        - [Hover Effect](reference/arkui-ts/ts-universal-attributes-hover-effect.md)
+        - [Component ID](reference/arkui-ts/ts-universal-attributes-component-id.md)
+        - [Touch Target](reference/arkui-ts/ts-universal-attributes-touch-target.md)
+        - [Polymorphic Style](reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
+      - Gesture Processing
+        - [Gesture Binding Methods](reference/arkui-ts/ts-gesture-settings.md)
+        - Basic Gestures
+          - [TapGesture](reference/arkui-ts/ts-basic-gestures-tapgesture.md)
+          - [LongPressGesture](reference/arkui-ts/ts-basic-gestures-longpressgesture.md)
+          - [PanGesture](reference/arkui-ts/ts-basic-gestures-pangesture.md)
+          - [PinchGesture](reference/arkui-ts/ts-basic-gestures-pinchgesture.md)
+          - [RotationGesture](reference/arkui-ts/ts-basic-gestures-rotationgesture.md)
+          - [SwipeGesture](reference/arkui-ts/ts-basic-gestures-swipegesture.md)
+        - [Combined Gestures](reference/arkui-ts/ts-combined-gestures.md)
+    - Basic Components
+      - [Blank](reference/arkui-ts/ts-basic-components-blank.md)
+      - [Button](reference/arkui-ts/ts-basic-components-button.md)
+      - [Checkbox](reference/arkui-ts/ts-basic-components-checkbox.md)
+      - [CheckboxGroup](reference/arkui-ts/ts-basic-components-checkboxgroup.md)
+      - [DataPanel](reference/arkui-ts/ts-basic-components-datapanel.md)
+      - [DatePicker](reference/arkui-ts/ts-basic-components-datepicker.md)
+      - [Divider](reference/arkui-ts/ts-basic-components-divider.md)
+      - [Gauge](reference/arkui-ts/ts-basic-components-gauge.md)
+      - [Image](reference/arkui-ts/ts-basic-components-image.md)
+      - [ImageAnimator](reference/arkui-ts/ts-basic-components-imageanimator.md)
+      - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md)
+      - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md)
+      - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md)
+      - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
+      - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
+      - [Radio](reference/arkui-ts/ts-basic-components-radio.md)
+      - [Rating](reference/arkui-ts/ts-basic-components-rating.md)
+      - [RichText](reference/arkui-ts/ts-basic-components-richtext.md)
+      - [ScrollBar](reference/arkui-ts/ts-basic-components-scrollbar.md)
+      - [Search](reference/arkui-ts/ts-basic-components-search.md)
+      - [Select](reference/arkui-ts/ts-basic-components-select.md)
+      - [Slider](reference/arkui-ts/ts-basic-components-slider.md)
+      - [Span](reference/arkui-ts/ts-basic-components-span.md)
+      - [Stepper](reference/arkui-ts/ts-basic-components-stepper.md)
+      - [StepperItem](reference/arkui-ts/ts-basic-components-stepperitem.md)
+      - [Text](reference/arkui-ts/ts-basic-components-text.md)
+      - [TextArea](reference/arkui-ts/ts-basic-components-textarea.md)
+      - [TextClock](reference/arkui-ts/ts-basic-components-textclock.md)
+      - [TextInput](reference/arkui-ts/ts-basic-components-textinput.md)
+      - [TextPicker](reference/arkui-ts/ts-basic-components-textpicker.md)
+      - [TextTimer](reference/arkui-ts/ts-basic-components-texttimer.md)
+      - [TimePicker](reference/arkui-ts/ts-basic-components-timepicker.md)
+      - [Toggle](reference/arkui-ts/ts-basic-components-toggle.md)
+      - [Web](reference/arkui-ts/ts-basic-components-web.md)
+      - [Xcomponent](reference/arkui-ts/ts-basic-components-xcomponent.md)
+    - Container Components
+      - [AlphabetIndexer](reference/arkui-ts/ts-container-alphabet-indexer.md)
+      - [Badge](reference/arkui-ts/ts-container-badge.md)
+      - [Column](reference/arkui-ts/ts-container-column.md)
+      - [ColumnSplit](reference/arkui-ts/ts-container-columnsplit.md)
+      - [Counter](reference/arkui-ts/ts-container-counter.md)
+      - [Flex](reference/arkui-ts/ts-container-flex.md)
+      - [GridContainer](reference/arkui-ts/ts-container-gridcontainer.md)
+      - [Grid](reference/arkui-ts/ts-container-grid.md)
+      - [GridItem](reference/arkui-ts/ts-container-griditem.md)
+      - [List](reference/arkui-ts/ts-container-list.md)
+      - [ListItem](reference/arkui-ts/ts-container-listitem.md)
+      - [Navigator](reference/arkui-ts/ts-container-navigator.md)     
+      - [Panel](reference/arkui-ts/ts-container-panel.md)
+      - [Refresh](reference/arkui-ts/ts-container-refresh.md)
+      - [Row](reference/arkui-ts/ts-container-row.md)
+      - [RowSplit](reference/arkui-ts/ts-container-rowsplit.md)
+      - [Scroll](reference/arkui-ts/ts-container-scroll.md)
+      - [SideBarContainer](reference/arkui-ts/ts-container-sidebarcontainer.md)
+      - [Stack](reference/arkui-ts/ts-container-stack.md)
+      - [Swiper](reference/arkui-ts/ts-container-swiper.md)
+      - [Tabs](reference/arkui-ts/ts-container-tabs.md)
+      - [TabContent](reference/arkui-ts/ts-container-tabcontent.md)
+    - Media Components
+      - [Video](reference/arkui-ts/ts-media-components-video.md)
+    - Drawing Components
+      - [Circle](reference/arkui-ts/ts-drawing-components-circle.md)
+      - [Ellipse](reference/arkui-ts/ts-drawing-components-ellipse.md)
+      - [Line](reference/arkui-ts/ts-drawing-components-line.md)
+      - [Polyline](reference/arkui-ts/ts-drawing-components-polyline.md)
+      - [Polygon](reference/arkui-ts/ts-drawing-components-polygon.md)
+      - [Path](reference/arkui-ts/ts-drawing-components-path.md)
+      - [Rect](reference/arkui-ts/ts-drawing-components-rect.md)
+      - [Shape](reference/arkui-ts/ts-drawing-components-shape.md)
+    - Canvas Components
+      - [Canvas](reference/arkui-ts/ts-components-canvas-canvas.md)
+      - [CanvasRenderingContext2D](reference/arkui-ts/ts-canvasrenderingcontext2d.md)
+      - [OffscreenCanvasRenderingConxt2D](reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md)
+      - [Lottie](reference/arkui-ts/ts-components-canvas-lottie.md)
+      - [Path2D](reference/arkui-ts/ts-components-canvas-path2d.md)
+      - [CanvasGradient](reference/arkui-ts/ts-components-canvas-canvasgradient.md)
+      - [ImageBitmap](reference/arkui-ts/ts-components-canvas-imagebitmap.md)
+      - [ImageData](reference/arkui-ts/ts-components-canvas-imagedata.md)
     - Animation
       - [Attribute Animation](reference/arkui-ts/ts-animatorproperty.md)
       - [Explicit Animation](reference/arkui-ts/ts-explicit-animation.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,235 +301,132 @@
   - [示例代码](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)
-          - [挂载卸载事件](reference/arkui-ts/ts-universal-events-show-hide.md)
-          - [拖拽事件](reference/arkui-ts/ts-universal-events-drag-drop.md)
-          - [按键事件](reference/arkui-ts/ts-universal-events-key.md)
-          - [焦点事件](reference/arkui-ts/ts-universal-focus-event.md)
-          - [鼠标事件](reference/arkui-ts/ts-universal-mouse-key.md)
-          - [组件区域变化事件](reference/arkui-ts/ts-universal-component-area-change-event.md)
-        - 通用属性
-          - [尺寸设置](reference/arkui-ts/ts-universal-attributes-size.md)
-          - [位置设置](reference/arkui-ts/ts-universal-attributes-location.md)
-          - [布局约束](reference/arkui-ts/ts-universal-attributes-layout-constraints.md)
-          - [Flex布局](reference/arkui-ts/ts-universal-attributes-flex-layout.md)
-          - [边框设置](reference/arkui-ts/ts-universal-attributes-border.md)
-          - [背景设置](reference/arkui-ts/ts-universal-attributes-background.md)
-          - [透明度设置](reference/arkui-ts/ts-universal-attributes-opacity.md)
-          - [显隐控制](reference/arkui-ts/ts-universal-attributes-visibility.md)
-          - [禁用控制](reference/arkui-ts/ts-universal-attributes-enable.md)
-          - [浮层](reference/arkui-ts/ts-universal-attributes-overlay.md)
-          - [Z序控制](reference/arkui-ts/ts-universal-attributes-z-order.md)
-          - [图形变换](reference/arkui-ts/ts-universal-attributes-transformation.md)
-          - [图像效果](reference/arkui-ts/ts-universal-attributes-image-effect.md)
-          - [形状裁剪](reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
-          - [文本样式设置](reference/arkui-ts/ts-universal-attributes-text-style.md)
-          - [栅格设置](reference/arkui-ts/ts-universal-attributes-grid.md)
-          - [颜色渐变](reference/arkui-ts/ts-universal-attributes-gradient-color.md)
-          - [Popup控制](reference/arkui-ts/ts-universal-attributes-popup.md)
-          - [Menu控制](reference/arkui-ts/ts-universal-attributes-menu.md)
-          - [点击控制](reference/arkui-ts/ts-universal-attributes-click.md)
-          - [焦点控制](reference/arkui-ts/ts-universal-attributes-focus.md)
-          - [悬浮态效果](reference/arkui-ts/ts-universal-attributes-hover-effect.md)
-          - [组件标识](reference/arkui-ts/ts-universal-attributes-component-id.md)
-          - [触摸热区设置](reference/arkui-ts/ts-universal-attributes-touch-target.md)
-          - [多态样式](reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
-        - 手势处理
-          - [绑定手势方法](reference/arkui-ts/ts-gesture-settings.md)
-          - 基础手势
-            - [TapGesture](reference/arkui-ts/ts-basic-gestures-tapgesture.md)
-            - [LongPressGesture](reference/arkui-ts/ts-basic-gestures-longpressgesture.md)
-            - [PanGesture](reference/arkui-ts/ts-basic-gestures-pangesture.md)
-            - [PinchGesture](reference/arkui-ts/ts-basic-gestures-pinchgesture.md)
-            - [RotationGesture](reference/arkui-ts/ts-basic-gestures-rotationgesture.md)
-            - [SwipeGesture](reference/arkui-ts/ts-basic-gestures-swipegesture.md)
-          - [组合手势](reference/arkui-ts/ts-combined-gestures.md)
-      - 基础组件
-        - [Blank](reference/arkui-ts/ts-basic-components-blank.md)
-        - [Button](reference/arkui-ts/ts-basic-components-button.md)
-        - [Checkbox](reference/arkui-ts/ts-basic-components-checkbox.md)
-        - [CheckboxGroup](reference/arkui-ts/ts-basic-components-checkboxgroup.md)
-        - [DataPanel](reference/arkui-ts/ts-basic-components-datapanel.md)
-        - [DatePicker](reference/arkui-ts/ts-basic-components-datepicker.md)
-        - [Divider](reference/arkui-ts/ts-basic-components-divider.md)
-        - [Gauge](reference/arkui-ts/ts-basic-components-gauge.md)
-        - [Image](reference/arkui-ts/ts-basic-components-image.md)
-        - [ImageAnimator](reference/arkui-ts/ts-basic-components-imageanimator.md)
-        - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md)
-        - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md)
-        - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md)
-        - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
-        - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
-        - [Radio](reference/arkui-ts/ts-basic-components-radio.md)
-        - [Rating](reference/arkui-ts/ts-basic-components-rating.md)
-        - [RichText](reference/arkui-ts/ts-basic-components-richtext.md)
-        - [ScrollBar](reference/arkui-ts/ts-basic-components-scrollbar.md)
-        - [Search](reference/arkui-ts/ts-basic-components-search.md)
-        - [Select](reference/arkui-ts/ts-basic-components-select.md)
-        - [Slider](reference/arkui-ts/ts-basic-components-slider.md)
-        - [Span](reference/arkui-ts/ts-basic-components-span.md)
-        - [Stepper](reference/arkui-ts/ts-basic-components-stepper.md)
-        - [StepperItem](reference/arkui-ts/ts-basic-components-stepperitem.md)
-        - [Text](reference/arkui-ts/ts-basic-components-text.md)
-        - [TextArea](reference/arkui-ts/ts-basic-components-textarea.md)
-        - [TextClock](reference/arkui-ts/ts-basic-components-textclock.md)
-        - [TextInput](reference/arkui-ts/ts-basic-components-textinput.md)
-        - [TextPicker](reference/arkui-ts/ts-basic-components-textpicker.md)
-        - [TextTimer](reference/arkui-ts/ts-basic-components-texttimer.md)
-        - [TimePicker](reference/arkui-ts/ts-basic-components-timepicker.md)
-        - [Toggle](reference/arkui-ts/ts-basic-components-toggle.md)
-        - [Web](reference/arkui-ts/ts-basic-components-web.md)
-        - [XComponent](reference/arkui-ts/ts-basic-components-xcomponent.md)
-      - 容器组件
-        - [AlphabetIndexer](reference/arkui-ts/ts-container-alphabet-indexer.md)
-        - [Badge](reference/arkui-ts/ts-container-badge.md)
-        - [Column](reference/arkui-ts/ts-container-column.md)
-        - [ColumnSplit](reference/arkui-ts/ts-container-columnsplit.md)
-        - [Counter](reference/arkui-ts/ts-container-counter.md)
-        - [Flex](reference/arkui-ts/ts-container-flex.md)
-        - [GridContainer](reference/arkui-ts/ts-container-gridcontainer.md)
-        - [Grid](reference/arkui-ts/ts-container-grid.md)
-        - [GridItem](reference/arkui-ts/ts-container-griditem.md)
-        - [List](reference/arkui-ts/ts-container-list.md)
-        - [ListItem](reference/arkui-ts/ts-container-listitem.md)
-        - [Navigator](reference/arkui-ts/ts-container-navigator.md)
-        - [Panel](reference/arkui-ts/ts-container-panel.md)
-        - [Refresh](reference/arkui-ts/ts-container-refresh.md)
-        - [Row](reference/arkui-ts/ts-container-row.md)
-        - [RowSplit](reference/arkui-ts/ts-container-rowsplit.md)
-        - [Scroll](reference/arkui-ts/ts-container-scroll.md)
-        - [SideBarContainer](reference/arkui-ts/ts-container-sidebarcontainer.md)
-        - [Stack](reference/arkui-ts/ts-container-stack.md)
-        - [Swiper](reference/arkui-ts/ts-container-swiper.md)
-        - [Tabs](reference/arkui-ts/ts-container-tabs.md)
-        - [TabContent](reference/arkui-ts/ts-container-tabcontent.md)
-      - 媒体组件
-        - [Video](reference/arkui-ts/ts-media-components-video.md)
-      - 绘制组件
-        - [Circle](reference/arkui-ts/ts-drawing-components-circle.md)
-        - [Ellipse](reference/arkui-ts/ts-drawing-components-ellipse.md)
-        - [Line](reference/arkui-ts/ts-drawing-components-line.md)
-        - [Polyline](reference/arkui-ts/ts-drawing-components-polyline.md)
-        - [Polygon](reference/arkui-ts/ts-drawing-components-polygon.md)
-        - [Path](reference/arkui-ts/ts-drawing-components-path.md)
-        - [Rect](reference/arkui-ts/ts-drawing-components-rect.md)
-        - [Shape](reference/arkui-ts/ts-drawing-components-shape.md)
-      - 画布组件
-        - [Canvas](reference/arkui-ts/ts-components-canvas-canvas.md)
-        - [CanvasRenderingContext2D对象](reference/arkui-ts/ts-canvasrenderingcontext2d.md)
-        - [OffscreenCanvasRenderingConxt2D对象](reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md)
-        - [Lottie](reference/arkui-ts/ts-components-canvas-lottie.md)
-        - [Path2D对象](reference/arkui-ts/ts-components-canvas-path2d.md)
-        - [CanvasGradient对象](reference/arkui-ts/ts-components-canvas-canvasgradient.md)
-        - [ImageBitmap对象](reference/arkui-ts/ts-components-canvas-imagebitmap.md)
-        - [ImageData对象](reference/arkui-ts/ts-components-canvas-imagedata.md)
+    - 组件通用信息
+      - 通用事件
+        - [点击事件](reference/arkui-ts/ts-universal-events-click.md)
+        - [触摸事件](reference/arkui-ts/ts-universal-events-touch.md)
+        - [挂载卸载事件](reference/arkui-ts/ts-universal-events-show-hide.md)
+        - [拖拽事件](reference/arkui-ts/ts-universal-events-drag-drop.md)
+        - [按键事件](reference/arkui-ts/ts-universal-events-key.md)
+        - [焦点事件](reference/arkui-ts/ts-universal-focus-event.md)
+        - [鼠标事件](reference/arkui-ts/ts-universal-mouse-key.md)
+        - [组件区域变化事件](reference/arkui-ts/ts-universal-component-area-change-event.md)
+      - 通用属性
+        - [尺寸设置](reference/arkui-ts/ts-universal-attributes-size.md)
+        - [位置设置](reference/arkui-ts/ts-universal-attributes-location.md)
+        - [布局约束](reference/arkui-ts/ts-universal-attributes-layout-constraints.md)
+        - [Flex布局](reference/arkui-ts/ts-universal-attributes-flex-layout.md)
+        - [边框设置](reference/arkui-ts/ts-universal-attributes-border.md)
+        - [背景设置](reference/arkui-ts/ts-universal-attributes-background.md)
+        - [透明度设置](reference/arkui-ts/ts-universal-attributes-opacity.md)
+        - [显隐控制](reference/arkui-ts/ts-universal-attributes-visibility.md)
+        - [禁用控制](reference/arkui-ts/ts-universal-attributes-enable.md)
+        - [浮层](reference/arkui-ts/ts-universal-attributes-overlay.md)
+        - [Z序控制](reference/arkui-ts/ts-universal-attributes-z-order.md)
+        - [图形变换](reference/arkui-ts/ts-universal-attributes-transformation.md)
+        - [图像效果](reference/arkui-ts/ts-universal-attributes-image-effect.md)
+        - [形状裁剪](reference/arkui-ts/ts-universal-attributes-sharp-clipping.md)
+        - [文本样式设置](reference/arkui-ts/ts-universal-attributes-text-style.md)
+        - [栅格设置](reference/arkui-ts/ts-universal-attributes-grid.md)
+        - [颜色渐变](reference/arkui-ts/ts-universal-attributes-gradient-color.md)
+        - [Popup控制](reference/arkui-ts/ts-universal-attributes-popup.md)
+        - [Menu控制](reference/arkui-ts/ts-universal-attributes-menu.md)
+        - [点击控制](reference/arkui-ts/ts-universal-attributes-click.md)
+        - [焦点控制](reference/arkui-ts/ts-universal-attributes-focus.md)
+        - [悬浮态效果](reference/arkui-ts/ts-universal-attributes-hover-effect.md)
+        - [组件标识](reference/arkui-ts/ts-universal-attributes-component-id.md)
+        - [触摸热区设置](reference/arkui-ts/ts-universal-attributes-touch-target.md)
+        - [多态样式](reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
+      - 手势处理
+        - [绑定手势方法](reference/arkui-ts/ts-gesture-settings.md)
+        - 基础手势
+          - [TapGesture](reference/arkui-ts/ts-basic-gestures-tapgesture.md)
+          - [LongPressGesture](reference/arkui-ts/ts-basic-gestures-longpressgesture.md)
+          - [PanGesture](reference/arkui-ts/ts-basic-gestures-pangesture.md)
+          - [PinchGesture](reference/arkui-ts/ts-basic-gestures-pinchgesture.md)
+          - [RotationGesture](reference/arkui-ts/ts-basic-gestures-rotationgesture.md)
+          - [SwipeGesture](reference/arkui-ts/ts-basic-gestures-swipegesture.md)
+        - [组合手势](reference/arkui-ts/ts-combined-gestures.md)
+    - 基础组件
+      - [Blank](reference/arkui-ts/ts-basic-components-blank.md)
+      - [Button](reference/arkui-ts/ts-basic-components-button.md)
+      - [Checkbox](reference/arkui-ts/ts-basic-components-checkbox.md)
+      - [CheckboxGroup](reference/arkui-ts/ts-basic-components-checkboxgroup.md)
+      - [DataPanel](reference/arkui-ts/ts-basic-components-datapanel.md)
+      - [DatePicker](reference/arkui-ts/ts-basic-components-datepicker.md)
+      - [Divider](reference/arkui-ts/ts-basic-components-divider.md)
+      - [Gauge](reference/arkui-ts/ts-basic-components-gauge.md)
+      - [Image](reference/arkui-ts/ts-basic-components-image.md)
+      - [ImageAnimator](reference/arkui-ts/ts-basic-components-imageanimator.md)
+      - [LoadingProgress](reference/arkui-ts/ts-basic-components-loadingprogress.md)
+      - [Marquee](reference/arkui-ts/ts-basic-components-marquee.md)
+      - [Navigation](reference/arkui-ts/ts-basic-components-navigation.md)
+      - [Progress](reference/arkui-ts/ts-basic-components-progress.md)
+      - [QRCode](reference/arkui-ts/ts-basic-components-qrcode.md)
+      - [Radio](reference/arkui-ts/ts-basic-components-radio.md)
+      - [Rating](reference/arkui-ts/ts-basic-components-rating.md)
+      - [RichText](reference/arkui-ts/ts-basic-components-richtext.md)
+      - [ScrollBar](reference/arkui-ts/ts-basic-components-scrollbar.md)
+      - [Search](reference/arkui-ts/ts-basic-components-search.md)
+      - [Select](reference/arkui-ts/ts-basic-components-select.md)
+      - [Slider](reference/arkui-ts/ts-basic-components-slider.md)
+      - [Span](reference/arkui-ts/ts-basic-components-span.md)
+      - [Stepper](reference/arkui-ts/ts-basic-components-stepper.md)
+      - [StepperItem](reference/arkui-ts/ts-basic-components-stepperitem.md)
+      - [Text](reference/arkui-ts/ts-basic-components-text.md)
+      - [TextArea](reference/arkui-ts/ts-basic-components-textarea.md)
+      - [TextClock](reference/arkui-ts/ts-basic-components-textclock.md)
+      - [TextInput](reference/arkui-ts/ts-basic-components-textinput.md)
+      - [TextPicker](reference/arkui-ts/ts-basic-components-textpicker.md)
+      - [TextTimer](reference/arkui-ts/ts-basic-components-texttimer.md)
+      - [TimePicker](reference/arkui-ts/ts-basic-components-timepicker.md)
+      - [Toggle](reference/arkui-ts/ts-basic-components-toggle.md)
+      - [Web](reference/arkui-ts/ts-basic-components-web.md)
+      - [XComponent](reference/arkui-ts/ts-basic-components-xcomponent.md)
+    - 容器组件
+      - [AlphabetIndexer](reference/arkui-ts/ts-container-alphabet-indexer.md)
+      - [Badge](reference/arkui-ts/ts-container-badge.md)
+      - [Column](reference/arkui-ts/ts-container-column.md)
+      - [ColumnSplit](reference/arkui-ts/ts-container-columnsplit.md)
+      - [Counter](reference/arkui-ts/ts-container-counter.md)
+      - [Flex](reference/arkui-ts/ts-container-flex.md)
+      - [GridContainer](reference/arkui-ts/ts-container-gridcontainer.md)
+      - [Grid](reference/arkui-ts/ts-container-grid.md)
+      - [GridItem](reference/arkui-ts/ts-container-griditem.md)
+      - [List](reference/arkui-ts/ts-container-list.md)
+      - [ListItem](reference/arkui-ts/ts-container-listitem.md)
+      - [Navigator](reference/arkui-ts/ts-container-navigator.md)
+      - [Panel](reference/arkui-ts/ts-container-panel.md)
+      - [Refresh](reference/arkui-ts/ts-container-refresh.md)
+      - [Row](reference/arkui-ts/ts-container-row.md)
+      - [RowSplit](reference/arkui-ts/ts-container-rowsplit.md)
+      - [Scroll](reference/arkui-ts/ts-container-scroll.md)
+      - [SideBarContainer](reference/arkui-ts/ts-container-sidebarcontainer.md)
+      - [Stack](reference/arkui-ts/ts-container-stack.md)
+      - [Swiper](reference/arkui-ts/ts-container-swiper.md)
+      - [Tabs](reference/arkui-ts/ts-container-tabs.md)
+      - [TabContent](reference/arkui-ts/ts-container-tabcontent.md)
+    - 媒体组件
+      - [Video](reference/arkui-ts/ts-media-components-video.md)
+    - 绘制组件
+      - [Circle](reference/arkui-ts/ts-drawing-components-circle.md)
+      - [Ellipse](reference/arkui-ts/ts-drawing-components-ellipse.md)
+      - [Line](reference/arkui-ts/ts-drawing-components-line.md)
+      - [Polyline](reference/arkui-ts/ts-drawing-components-polyline.md)
+      - [Polygon](reference/arkui-ts/ts-drawing-components-polygon.md)
+      - [Path](reference/arkui-ts/ts-drawing-components-path.md)
+      - [Rect](reference/arkui-ts/ts-drawing-components-rect.md)
+      - [Shape](reference/arkui-ts/ts-drawing-components-shape.md)
+    - 画布组件
+      - [Canvas](reference/arkui-ts/ts-components-canvas-canvas.md)
+      - [CanvasRenderingContext2D对象](reference/arkui-ts/ts-canvasrenderingcontext2d.md)
+      - [OffscreenCanvasRenderingConxt2D对象](reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md)
+      - [Lottie](reference/arkui-ts/ts-components-canvas-lottie.md)
+      - [Path2D对象](reference/arkui-ts/ts-components-canvas-path2d.md)
+      - [CanvasGradient对象](reference/arkui-ts/ts-components-canvas-canvasgradient.md)
+      - [ImageBitmap对象](reference/arkui-ts/ts-components-canvas-imagebitmap.md)
+      - [ImageData对象](reference/arkui-ts/ts-components-canvas-imagedata.md)
     - 动画
       - [属性动画](reference/arkui-ts/ts-animatorproperty.md)
       - [显式动画](reference/arkui-ts/ts-explicit-animation.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)