update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>

en/application-dev/ui/Readme-EN.md → en/application-dev/device/ui/Readme-CN.md

 # UI
 
-- JavaScript-based Web-Like Development Paradigm
+- [ArkUI Overview](arkui-overview.md)
+- JavaScript-based Web-like Development Paradigm
     - [Overview](ui-js-overview.md)
     - Framework
         - [File Organization](js-framework-file.md)
@@ -25,26 +26,27 @@
         - [Developing Animations](ui-js-building-ui-animation.md)
         - [Defining Events](ui-js-building-ui-event.md)
         - [Defining Page Routes](ui-js-building-ui-routes.md)
-     - Common Component Development Guidelines
-        - [Text](ui-js-components-text.md)
-        - [Input](ui-js-components-input.md)
-        - [Button](ui-js-components-button.md)
-        - [List](ui-js-components-list.md)
-        - [Picker](ui-js-components-picker.md)
-        - [Dialog](ui-js-components-dialog.md)
-        - [Form](ui-js-components-form.md)
-        - [Stepper](ui-js-components-stepper.md)
-        - [Tabs](ui-js-component-tabs.md)
-        - [Image](ui-js-components-images.md)
+    - Common Component Development Guidelines
+        - [<text> Development](ui-js-components-text.md)
+        -   [<input> Development](ui-js-components-input.md)
+        -   [<button> Development](ui-js-components-button.md)
+        -   [<list> Development](ui-js-components-list.md)
+        -   [<picker> Development](ui-js-components-picker.md)
+        -   [<dialog> Development](ui-js-components-dialog.md)
+        -   [<form> Development](ui-js-components-form.md)
+        -   [<stepper> Development](ui-js-components-stepper.md)
+        -   [<tabs> Development](ui-js-component-tabs.md)
+        -   [<image> Development](ui-js-components-images.md)
     - Animation Development Guidelines
         - CSS Animation
             - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
             - [Defining Animations with the transform Attribute](ui-js-animate-transform.md)
             - [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)
+            - [Defining Animations for SVG Components](ui-js-animate-svg.md)
         - JS Animation
             - [Component Animation](ui-js-animate-component.md)
             - Interpolator Animation
-                 - [Animation Effect](ui-js-animate-dynamic-effects.md)
+                - [Animation Effect](ui-js-animate-dynamic-effects.md)
                 - [Animation Frame](ui-js-animate-frame.md)
     - [Custom Components](ui-js-custom-components.md)
 - TypeScript-based Declarative Development Paradigm
@@ -65,9 +67,9 @@
         - General UI Description Specifications
             - [Basic Concepts](ts-general-ui-concepts.md)
             - Declarative UI Description Specifications
-                - [Parameterless Configuration](ts-parameterless-configuration.md)
+                - [Configuration Without Parameters](ts-parameterless-configuration.md)
                 - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
-                - [Attribution Configuration](ts-attribution-configuration.md)
+                - [Attribute Configuration](ts-attribution-configuration.md)
                 - [Event Configuration](ts-event-configuration.md)
                 - [Child Component Configuration](ts-child-component-configuration.md)
             - Componentization
@@ -77,6 +79,7 @@
                 - [@Builder](ts-component-based-builder.md)
                 - [@Extend](ts-component-based-extend.md)
                 - [@CustomDialog](ts-component-based-customdialog.md)
+                - [@Styles](ts-component-based-styles.md)
         - About UI State Management
             - [Basic Concepts](ts-ui-state-mgmt-concepts.md)
             - Managing Component States
@@ -88,19 +91,21 @@
                 - [PersistentStorage](ts-application-states-apis-persistentstorage.md)
                 - [Environment](ts-application-states-apis-environment.md)
             - Managing Other States
-                - [@observed and @objectLink](ts-other-states-observed-objectlink.md)
+                - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
                 - [@Consume and @Provide](ts-other-states-consume-provide.md)
                 - [@Watch](ts-other-states-watch.md)
-        - About Rendering Control Syntax
-            - [if/else](ts-rending-control-syntax-if-else.md)
-            - [ForEach](ts-rending-control-syntax-foreach.md)
-            - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
+            - About Rendering Control Syntax
+                - [if/else](ts-rending-control-syntax-if-else.md)
+                - [ForEach](ts-rending-control-syntax-foreach.md)
+                - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
         - About @Component
             - [build Function](ts-function-build.md)
-            - [Custom Component Initialization](ts-custom-component-initialization.md)
+            - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
             - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
-            - [Example: Component Creation and Re-Initialization](ts-component-creation-re-initialization.md)
-        - [Syntactic Sugar](ts-syntactic-sugar.md)
+            - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
+        - [About Syntactic Sugar](ts-syntactic-sugar.md)
+    - Common Component Development Guidelines
+        - [<web> Development](ui-ts-components-web.md)
     - Experiencing the Declarative UI
         - [Creating a Declarative UI Project](ui-ts-creating-project.md)
         - [Getting to Know Components](ui-ts-components.md)
@@ -110,4 +115,3 @@
         - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
         - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
         - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
-

en/application-dev/device/ui/arkui-overview.md

+# ArkUI Overview
+
+
+## Introduction
+
+ArkUI is a UI development framework that provides what you'll need to develop application UIs.
+
+
+## Basic Concepts
+
+- Component: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components.
+
+- Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions.
+
+
+## Key Capabilities
+
+- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
+
+- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
+
+- Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation.
+
+- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
+
+- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
+
+- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
+
+
+## Development Paradigms
+
+ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+
+
+### Web-like Development Paradigm
+
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
+
+
+### Declarative Development Paradigm
+
+The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable.
+
+
+### Web-like Development Paradigm vs. Declarative Development Paradigm
+
+  | Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience | 
+| -------- | -------- | -------- | -------- | -------- |
+| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers | 
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | 
+
+
+### Framework Structure
+
+![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png)
+
+As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of the ArkUI framework. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.