Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into...

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into OpenHarmony-3.1-Release

Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into...
Merge branch 'OpenHarmony-3.1-Release' of https://gitee.com/bmeangel/docs into OpenHarmony-3.1-Release
d892ddf4 · wangjiangying · 0df3642a · 928eb863 · d892ddf4 · d892ddf4
33 changed file
--- a/en/application-dev/reference/apis/js-apis-screenshot.md
+++ b/en/application-dev/reference/apis/js-apis-screenshot.md
 # Screenshot
-Provides APIs for you to set information such as the region to capture and the size of the screen region when capturing a screen.
+The **Screenshot** module provides APIs for you to set information such as the region to capture and the size of the screen region when capturing a screen.
 > **NOTE**
 >
@@ -57,7 +57,7 @@ Describes the size of the screen region to capture.
 save(options?: ScreenshotOptions, callback: AsyncCallback&lt;image.PixelMap&gt;): void
-Takes a screenshot and saves it as a **PixelMap** object. This method uses a callback to return the result.
+Takes a screenshot and saves it as a **PixelMap** object. This API uses an asynchronous callback to return the result.
 **System capability**: SystemCapability.WindowManager.WindowManager.Core
@@ -67,7 +67,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal
 | Name  | Type                                   | Mandatory| Description                                                        |
 | -------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
-| options  | [ScreenshotOptions](#screenshotoptions) | No  | Consists of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set them separately.|
+| options  | [ScreenshotOptions](#screenshotoptions) | No  | Screenshot settings consist of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set the parameters separately.|
 | callback | AsyncCallback&lt;image.PixelMap&gt;     | Yes  | Callback used to return a **PixelMap** object.                                  |
 **Example**
@@ -98,7 +98,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a cal
 save(options?: ScreenshotOptions): Promise&lt;image.PixelMap&gt;
-Takes a screenshot and saves it as a **PixelMap** object. This method uses a promise to return the result.
+Takes a screenshot and saves it as a **PixelMap** object. This API uses a promise to return the result.
 **System capability**: SystemCapability.WindowManager.WindowManager.Core
@@ -108,7 +108,7 @@ Takes a screenshot and saves it as a **PixelMap** object. This method uses a pro
 | Name | Type                                   | Mandatory| Description                                                        |
 | ------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
-| options | [ScreenshotOptions](#screenshotoptions) | No  | Consists of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set them separately.|
+| options | [ScreenshotOptions](#screenshotoptions) | No  | Screenshot settings consist of **screenRect**, **imageSize**, **rotation**, and **displayId**. You can set the parameters separately.|
 **Return value**

--- a/en/application-dev/ui/ui-js-animate-transform.md
+++ b/en/application-dev/ui/ui-js-animate-transform.md
@@ -586,16 +586,4 @@ You can set multiple transform attributes at the same time to apply different tr
 > 
 > - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
 > 
 > - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
-## Samples
\ No newline at end of file
-The following samples are provided to help you better understand how to develop animations with the **transform** attribute: 
- [`JsAnimation`: Animation App (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
- [`JsAnimationStyle`: JS Animation and Custom Font Styles (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
- [`Clock`: Clock (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
- [Animation Styles (JavaScaript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
- [Common Image Operations](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageJsDemo)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-building-ui-component.md
+++ b/en/application-dev/ui/ui-js-building-ui-component.md
@@ -19,18 +19,3 @@ Components can be classified into the following types based on their functions.
 | Canvas | canvas |
 | Grid | grid-container, grid-row, grid-col |
 | SVG | svg, rect, circle, ellipse, path, line, polyline, polygon, text, tspan, textPath, animate, animateMotion, animateTransform |
-## Samples
-The following samples are provided to help you better understand how to develop components: 
- [`JsPanel`: Content Display Panel (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`: JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`: Refresh Container (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`:  JavaScript Bubble (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`: User Registration (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`: Heart Rate Detection (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`: Badge (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [`JsVideo`: JsVideo (API 8)](https://gitee.com/openharmony/app_samples/tree/master/media/JsVideo)
- [Rating (JavaScript)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
- [Simple Video Player](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)
--- a/en/application-dev/ui/ui-js-component-tabs.md
+++ b/en/application-dev/ui/ui-js-component-tabs.md
@@ -319,11 +319,4 @@ export default {
 }
 ```
 ![en-us_image_tab.gif](figures/en-us_image_tab.gif)
\ No newline at end of file
-## Samples
-The following sample is provided to help you better understand how to develop the **&lt;tabs&gt;** component:
-[`Tabs`: Tabs (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-components-canvas.md
+++ b/en/application-dev/ui/ui-js-components-canvas.md
@@ -140,9 +140,3 @@ export default {
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
 > The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.
-## Samples
-The following sample is provided to help you better understand how to develop the **\<canvas>** component:
-[`JsCanvas`: \<canvas> (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)
--- a/en/application-dev/ui/ui-js-components-chart.md
+++ b/en/application-dev/ui/ui-js-components-chart.md
@@ -615,9 +615,4 @@ export default {
 ```
 ![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;chart&gt;** component:
-[`Chart`: chart (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-components-dialog.md
+++ b/en/application-dev/ui/ui-js-components-dialog.md
@@ -328,9 +328,4 @@ export default {
 ```
 ![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;dialog&gt;** component:
-[`JsDialog`: JS Dialog Box (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-components-list.md
+++ b/en/application-dev/ui/ui-js-components-list.md
@@ -318,9 +318,4 @@ export default {
 ```
 ![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;list&gt;** component:
-[`JsList`: JSList Offerings (API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-components-stepper.md
+++ b/en/application-dev/ui/ui-js-components-stepper.md
@@ -411,9 +411,4 @@ export default {
 }
 ```
 ![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;stepper&gt;** component:
-[`StepNavigator`: StepNavigator (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
\ No newline at end of file
--- a/en/application-dev/ui/ui-js-components-swiper.md
+++ b/en/application-dev/ui/ui-js-components-swiper.md
@@ -368,9 +368,4 @@ export default {
 }
 ```
 ![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;swiper&gt;** component:
- [`Swiper`: Swiper (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
--- a/en/application-dev/ui/ui-js-components-text.md
+++ b/en/application-dev/ui/ui-js-components-text.md
@@ -286,9 +286,4 @@ export default {
 }
 ```
 ![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)
-## Samples
\ No newline at end of file
-The following sample is provided to help you better understand how to develop the **&lt;text&gt;** component:
- [`JsTextComponents`:  JavaScript Basic Components (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
--- a/zh-cn/application-dev/quick-start/Readme-CN.md
+++ b/zh-cn/application-dev/quick-start/Readme-CN.md
@@ -9,6 +9,5 @@
 - 开发基础知识
  - [应用包结构说明(FA模型)](package-structure.md)
  - [应用包结构说明(Stage模型)](stage-structure.md)
-  - [资源文件的分类](basic-resource-file-categories.md)
  - [SysCap说明](syscap.md)
--- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
 # 基于JS扩展的类Web开发范式
- 组件
+- 组件通用信息
-    - 通用
+    - [通用属性](js-components-common-attributes.md)
-        - [通用属性](js-components-common-attributes.md)
+    - [通用样式](js-components-common-styles.md)
-        - [通用样式](js-components-common-styles.md)
+    - [通用事件](js-components-common-events.md)
-        - [通用事件](js-components-common-events.md)
+    - [通用方法](js-components-common-methods.md)
-        - [通用方法](js-components-common-methods.md)
+    - [动画样式](js-components-common-animation.md)
-        - [动画样式](js-components-common-animation.md)
+    - [渐变样式](js-components-common-gradient.md)
-        - [渐变样式](js-components-common-gradient.md)
+    - [转场样式](js-components-common-transition.md)
-        - [转场样式](js-components-common-transition.md)
+    - [媒体查询](js-components-common-mediaquery.md)
-        - [媒体查询](js-components-common-mediaquery.md)
+    - [自定义字体样式](js-components-common-customizing-font.md)
-        - [自定义字体样式](js-components-common-customizing-font.md)
+    - [原子布局](js-components-common-atomic-layout.md)
-        - [原子布局](js-components-common-atomic-layout.md)
+- 容器组件
-    - 容器组件
+    - [badge](js-components-container-badge.md)
-        - [badge](js-components-container-badge.md)
+    - [dialog](js-components-container-dialog.md)
-        - [dialog](js-components-container-dialog.md)
+    - [div](js-components-container-div.md)
-        - [div](js-components-container-div.md)
+    - [form](js-components-container-form.md)
-        - [form](js-components-container-form.md)
+    - [list](js-components-container-list.md)
-        - [list](js-components-container-list.md)
+    - [list-item](js-components-container-list-item.md)
-        - [list-item](js-components-container-list-item.md)
+    - [list-item-group](js-components-container-list-item-group.md)
-        - [list-item-group](js-components-container-list-item-group.md)
+    - [panel](js-components-container-panel.md)
-        - [panel](js-components-container-panel.md)
+    - [popup](js-components-container-popup.md)
-        - [popup](js-components-container-popup.md)
+    - [refresh](js-components-container-refresh.md)
-        - [refresh](js-components-container-refresh.md)
+    - [stack](js-components-container-stack.md)
-        - [stack](js-components-container-stack.md)
+    - [stepper](js-components-container-stepper.md)
-        - [stepper](js-components-container-stepper.md)
+    - [stepper-item](js-components-container-stepper-item.md)
-        - [stepper-item](js-components-container-stepper-item.md)
+    - [swiper](js-components-container-swiper.md)
-        - [swiper](js-components-container-swiper.md)
+    - [tabs](js-components-container-tabs.md)
-        - [tabs](js-components-container-tabs.md)
+    - [tab-bar](js-components-container-tab-bar.md)
-        - [tab-bar](js-components-container-tab-bar.md)
+    - [tab-content](js-components-container-tab-content.md)
-        - [tab-content](js-components-container-tab-content.md)
+- 基础组件
-    - 基础组件
+    - [button](js-components-basic-button.md)
-        - [button](js-components-basic-button.md)
+    - [chart](js-components-basic-chart.md)
-        - [chart](js-components-basic-chart.md)
+    - [divider](js-components-basic-divider.md)
-        - [divider](js-components-basic-divider.md)
+    - [image](js-components-basic-image.md)
-        - [image](js-components-basic-image.md)
+    - [image-animator](js-components-basic-image-animator.md)
-        - [image-animator](js-components-basic-image-animator.md)
+    - [input](js-components-basic-input.md)
-        - [input](js-components-basic-input.md)
+    - [label](js-components-basic-label.md)
-        - [label](js-components-basic-label.md)
+    - [marquee](js-components-basic-marquee.md)
-        - [marquee](js-components-basic-marquee.md)
+    - [menu](js-components-basic-menu.md)
-        - [menu](js-components-basic-menu.md)
+    - [option](js-components-basic-option.md)
-        - [option](js-components-basic-option.md)
+    - [picker](js-components-basic-picker.md)
-        - [picker](js-components-basic-picker.md)
+    - [picker-view](js-components-basic-picker-view.md)
-        - [picker-view](js-components-basic-picker-view.md)
+    - [piece](js-components-basic-piece.md)
-        - [piece](js-components-basic-piece.md)
+    - [progress](js-components-basic-progress.md)
-        - [progress](js-components-basic-progress.md)
+    - [qrcode](js-components-basic-qrcode.md)
-        - [qrcode](js-components-basic-qrcode.md)
+    - [rating](js-components-basic-rating.md)
-        - [rating](js-components-basic-rating.md)
+    - [richtext](js-components-basic-richtext.md)
-        - [richtext](js-components-basic-richtext.md)
+    - [search](js-components-basic-search.md)
-        - [search](js-components-basic-search.md)
+    - [select](js-components-basic-select.md)
-        - [select](js-components-basic-select.md)
+    - [slider](js-components-basic-slider.md)
-        - [slider](js-components-basic-slider.md)
+    - [span](js-components-basic-span.md)
-        - [span](js-components-basic-span.md)
+    - [switch](js-components-basic-switch.md)
-        - [switch](js-components-basic-switch.md)
+    - [text](js-components-basic-text.md)
-        - [text](js-components-basic-text.md)
+    - [textarea](js-components-basic-textarea.md)
-        - [textarea](js-components-basic-textarea.md)
+    - [toolbar](js-components-basic-toolbar.md)
-        - [toolbar](js-components-basic-toolbar.md)
+    - [toolbar-item](js-components-basic-toolbar-item.md)
-        - [toolbar-item](js-components-basic-toolbar-item.md)
+    - [toggle](js-components-basic-toggle.md)
-        - [toggle](js-components-basic-toggle.md)
+    - [web](js-components-basic-web.md)
-        - [web](js-components-basic-web.md)
+- 媒体组件
-    - 媒体组件
+    - [video](js-components-media-video.md)
-        - [video](js-components-media-video.md)
+- 画布组件
-    - 画布组件
+    - [canvas组件](js-components-canvas-canvas.md)
-        - [canvas组件](js-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
-        - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
+    - [Image对象](js-components-canvas-image.md)
-        - [Image对象](js-components-canvas-image.md)
+    - [CanvasGradient对象](js-components-canvas-canvasgradient.md)
-        - [CanvasGradient对象](js-components-canvas-canvasgradient.md)
+    - [ImageData对象](js-components-canvas-imagedata.md)
-        - [ImageData对象](js-components-canvas-imagedata.md)
+    - [Path2D对象](js-components-canvas-path2d.md)
-        - [Path2D对象](js-components-canvas-path2d.md)
+    - [ImageBitmap对象](js-components-canvas-imagebitmap.md)
-        - [ImageBitmap对象](js-components-canvas-imagebitmap.md)
+    - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
-        - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
+    - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
-        - [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
+- 栅格组件
-    - 栅格组件
+    - [基本概念](js-components-grid-basic-concepts.md)
-        - [基本概念](js-components-grid-basic-concepts.md)
+    - [grid-container](js-components-grid-container.md)
-        - [grid-container](js-components-grid-container.md)
+    - [grid-row](js-components-grid-row.md)
-        - [grid-row](js-components-grid-row.md)
+    - [grid-col](js-components-grid-col.md)
-        - [grid-col](js-components-grid-col.md)
+- svg组件
-    - svg组件
+    - [通用属性](js-components-svg-common-attributes.md)
-        - [通用属性](js-components-svg-common-attributes.md)
+    - [svg](js-components-svg.md)
-        - [svg](js-components-svg.md)
+    - [rect](js-components-svg-rect.md)
-        - [rect](js-components-svg-rect.md)
+    - [circle](js-components-svg-circle.md)
-        - [circle](js-components-svg-circle.md)
+    - [ellipse](js-components-svg-ellipse.md)
-        - [ellipse](js-components-svg-ellipse.md)
+    - [path](js-components-svg-path.md)
-        - [path](js-components-svg-path.md)
+    - [line](js-components-svg-line.md)
-        - [line](js-components-svg-line.md)
+    - [polyline](js-components-svg-polyline.md)
-        - [polyline](js-components-svg-polyline.md)
+    - [polygon](js-components-svg-polygon.md)
-        - [polygon](js-components-svg-polygon.md)
+    - [text](js-components-svg-text.md)
-        - [text](js-components-svg-text.md)
+    - [tspan](js-components-svg-tspan.md)
-        - [tspan](js-components-svg-tspan.md)
+    - [textPath](js-components-svg-textpath.md)
-        - [textPath](js-components-svg-textpath.md)
+    - [animate](js-components-svg-animate.md)
-        - [animate](js-components-svg-animate.md)
+    - [animateMotion](js-components-svg-animatemotion.md)
-        - [animateMotion](js-components-svg-animatemotion.md)
+    - [animateTransform](js-components-svg-animatetransform.md)
-        - [animateTransform](js-components-svg-animatetransform.md)
 - 自定义组件
    - [基本用法](js-components-custom-basic-usage.md)
    - [自定义事件](js-components-custom-events.md)
@@ -99,5 +100,4 @@
    - [事件参数](js-components-custom-event-parameter.md)
    - [slot插槽](js-components-custom-slot.md)
    - [生命周期定义](js-components-custom-lifecycle.md)
- 附录
+- [数据类型说明](js-appendix-types.md)
-    - [类型说明](js-appendix-types.md)
--- a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -1776,7 +1776,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
  ```
  <!-- xxx.hml -->
  <div>
-    <canvas  style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+    <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
  </div>
  ```
@@ -1812,7 +1812,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
  ```
  <!-- xxx.hml -->
  <div>
-    <canvas  style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+    <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
  </div>
  ```

--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
@@ -49,6 +49,8 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
  <list>
    <list-item type="description">
      <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
+    </list-item>
+    <list-item>
      <text onclick="jump">Click on picture to Jump to ths details</text>
    </list-item>
  </list>
@@ -61,7 +63,8 @@ import router from '@system.router';
 export default {
  jump() {
    router.push({
-      uri: 'detailpage',
+      // 路径要与config.json配置里面的相同
+      uri: 'pages/detailpage',
    });
  },
 }

--- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
 # 基于TS扩展的声明式开发范式
- 组件
+- 组件通用信息
-    - 通用
+    - 通用事件
-        - 通用事件
+        - [点击事件](ts-universal-events-click.md)
-            - [点击事件](ts-universal-events-click.md)
+        - [触摸事件](ts-universal-events-touch.md)
-            - [触摸事件](ts-universal-events-touch.md)
+        - [挂载卸载事件](ts-universal-events-show-hide.md)
-            - [挂载卸载事件](ts-universal-events-show-hide.md)
+        - [拖拽事件](ts-universal-events-drag-drop.md)
-            - [拖拽事件](ts-universal-events-drag-drop.md)
+        - [按键事件](ts-universal-events-key.md)
-            - [按键事件](ts-universal-events-key.md)
+        - [焦点事件](ts-universal-focus-event.md)
-            - [焦点事件](ts-universal-focus-event.md)
+        - [鼠标事件](ts-universal-mouse-key.md)
-            - [鼠标事件](ts-universal-mouse-key.md)
+        - [组件区域变化事件](ts-universal-component-area-change-event.md)
-            - [组件区域变化事件](ts-universal-component-area-change-event.md)
+    - 通用属性
-        - 通用属性
+        - [尺寸设置](ts-universal-attributes-size.md)
-            - [尺寸设置](ts-universal-attributes-size.md)
+        - [位置设置](ts-universal-attributes-location.md)
-            - [位置设置](ts-universal-attributes-location.md)
+        - [布局约束](ts-universal-attributes-layout-constraints.md)
-            - [布局约束](ts-universal-attributes-layout-constraints.md)
+        - [Flex布局](ts-universal-attributes-flex-layout.md)
-            - [Flex布局](ts-universal-attributes-flex-layout.md)
+        - [边框设置](ts-universal-attributes-border.md)
-            - [边框设置](ts-universal-attributes-border.md)
+        - [背景设置](ts-universal-attributes-background.md)
-            - [背景设置](ts-universal-attributes-background.md)
+        - [透明度设置](ts-universal-attributes-opacity.md)
-            - [透明度设置](ts-universal-attributes-opacity.md)
+        - [显隐控制](ts-universal-attributes-visibility.md)
-            - [显隐控制](ts-universal-attributes-visibility.md)
+        - [禁用控制](ts-universal-attributes-enable.md)
-            - [禁用控制](ts-universal-attributes-enable.md)
+        - [浮层](ts-universal-attributes-overlay.md)
-            - [浮层](ts-universal-attributes-overlay.md)
+        - [Z序控制](ts-universal-attributes-z-order.md)
-            - [Z序控制](ts-universal-attributes-z-order.md)
+        - [图形变换](ts-universal-attributes-transformation.md)
-            - [图形变换](ts-universal-attributes-transformation.md)
+        - [图像效果](ts-universal-attributes-image-effect.md)
-            - [图像效果](ts-universal-attributes-image-effect.md)
+        - [形状裁剪](ts-universal-attributes-sharp-clipping.md)
-            - [形状裁剪](ts-universal-attributes-sharp-clipping.md)
+        - [文本样式设置](ts-universal-attributes-text-style.md)
-            - [文本样式设置](ts-universal-attributes-text-style.md)
+        - [栅格设置](ts-universal-attributes-grid.md)
-            - [栅格设置](ts-universal-attributes-grid.md)
+        - [颜色渐变](ts-universal-attributes-gradient-color.md)
-            - [颜色渐变](ts-universal-attributes-gradient-color.md)
+        - [Popup控制](ts-universal-attributes-popup.md)
-            - [Popup控制](ts-universal-attributes-popup.md)
+        - [Menu控制](ts-universal-attributes-menu.md)
-            - [Menu控制](ts-universal-attributes-menu.md)
+        - [点击控制](ts-universal-attributes-click.md)
-            - [点击控制](ts-universal-attributes-click.md)
+        - [焦点控制](ts-universal-attributes-focus.md)
-            - [焦点控制](ts-universal-attributes-focus.md)
+        - [悬浮态效果](ts-universal-attributes-hover-effect.md)
-            - [悬浮态效果](ts-universal-attributes-hover-effect.md)
+        - [组件标识](ts-universal-attributes-component-id.md)
-            - [组件标识](ts-universal-attributes-component-id.md)
+        - [触摸热区设置](ts-universal-attributes-touch-target.md)
-            - [触摸热区设置](ts-universal-attributes-touch-target.md)
+        - [多态样式](ts-universal-attributes-polymorphic-style.md)
-            - [多态样式](ts-universal-attributes-polymorphic-style.md)
+    - 手势处理
-        - 手势处理
+        - [绑定手势方法](ts-gesture-settings.md)
-            - [绑定手势方法](ts-gesture-settings.md)
+        - 基础手势
-            - 基础手势
+            - [TapGesture](ts-basic-gestures-tapgesture.md)
-                - [TapGesture](ts-basic-gestures-tapgesture.md)
+            - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
-                - [LongPressGesture](ts-basic-gestures-longpressgesture.md)
+            - [PanGesture](ts-basic-gestures-pangesture.md)
-                - [PanGesture](ts-basic-gestures-pangesture.md)
+            - [PinchGesture](ts-basic-gestures-pinchgesture.md)
-                - [PinchGesture](ts-basic-gestures-pinchgesture.md)
+            - [RotationGesture](ts-basic-gestures-rotationgesture.md)
-                - [RotationGesture](ts-basic-gestures-rotationgesture.md)
+            - [SwipeGesture](ts-basic-gestures-swipegesture.md)
-                - [SwipeGesture](ts-basic-gestures-swipegesture.md)
+        - [组合手势](ts-combined-gestures.md)
-            - [组合手势](ts-combined-gestures.md)
+- 基础组件
-    - 基础组件
+    - [Blank](ts-basic-components-blank.md)
-        - [Blank](ts-basic-components-blank.md)
+    - [Button](ts-basic-components-button.md)
-        - [Button](ts-basic-components-button.md)
+    - [Checkbox](ts-basic-components-checkbox.md)
-        - [Checkbox](ts-basic-components-checkbox.md)
+    - [CheckboxGroup](ts-basic-components-checkboxgroup.md)
-        - [CheckboxGroup](ts-basic-components-checkboxgroup.md)
+    - [DataPanel](ts-basic-components-datapanel.md)
-        - [DataPanel](ts-basic-components-datapanel.md)
+    - [DatePicker](ts-basic-components-datepicker.md)
-        - [DatePicker](ts-basic-components-datepicker.md)
+    - [Divider](ts-basic-components-divider.md)
-        - [Divider](ts-basic-components-divider.md)
+    - [Gauge](ts-basic-components-gauge.md)
-        - [Gauge](ts-basic-components-gauge.md)
+    - [Image](ts-basic-components-image.md)
-        - [Image](ts-basic-components-image.md)
+    - [ImageAnimator](ts-basic-components-imageanimator.md)
-        - [ImageAnimator](ts-basic-components-imageanimator.md)
+    - [LoadingProgress](ts-basic-components-loadingprogress.md)
-        - [LoadingProgress](ts-basic-components-loadingprogress.md)
+    - [Marquee](ts-basic-components-marquee.md)
-        - [Marquee](ts-basic-components-marquee.md)
+    - [Navigation](ts-basic-components-navigation.md)
-        - [Navigation](ts-basic-components-navigation.md)
+    - [Progress](ts-basic-components-progress.md)
-        - [Progress](ts-basic-components-progress.md)
+    - [QRCode](ts-basic-components-qrcode.md)
-        - [QRCode](ts-basic-components-qrcode.md)
+    - [Radio](ts-basic-components-radio.md)
-        - [Radio](ts-basic-components-radio.md)
+    - [Rating](ts-basic-components-rating.md)
-        - [Rating](ts-basic-components-rating.md)
+    - [RichText](ts-basic-components-richtext.md)
-        - [RichText](ts-basic-components-richtext.md)
+    - [ScrollBar](ts-basic-components-scrollbar.md)
-        - [ScrollBar](ts-basic-components-scrollbar.md)
+    - [Search](ts-basic-components-search.md)
-        - [Search](ts-basic-components-search.md)
+    - [Select](ts-basic-components-select.md)
-        - [Select](ts-basic-components-select.md)
+    - [Slider](ts-basic-components-slider.md)
-        - [Slider](ts-basic-components-slider.md)
+    - [Span](ts-basic-components-span.md)
-        - [Span](ts-basic-components-span.md)
+    - [Stepper](ts-basic-components-stepper.md)
-        - [Stepper](ts-basic-components-stepper.md)
+    - [StepperItem](ts-basic-components-stepperitem.md)
-        - [StepperItem](ts-basic-components-stepperitem.md)
+    - [Text](ts-basic-components-text.md)
-        - [Text](ts-basic-components-text.md)
+    - [TextArea](ts-basic-components-textarea.md)
-        - [TextArea](ts-basic-components-textarea.md)
+    - [TextClock](ts-basic-components-textclock.md)
-        - [TextClock](ts-basic-components-textclock.md)
+    - [TextInput](ts-basic-components-textinput.md)
-        - [TextInput](ts-basic-components-textinput.md)
+    - [TextPicker](ts-basic-components-textpicker.md)
-        - [TextPicker](ts-basic-components-textpicker.md)
+    - [TextTimer](ts-basic-components-texttimer.md)
-        - [TextTimer](ts-basic-components-texttimer.md)
+    - [TimePicker](ts-basic-components-timepicker.md)
-        - [TimePicker](ts-basic-components-timepicker.md)
+    - [Toggle](ts-basic-components-toggle.md)
-        - [Toggle](ts-basic-components-toggle.md)
+    - [Web](ts-basic-components-web.md)
-        - [Web](ts-basic-components-web.md)
+    - [Xcomponent](ts-basic-components-xcomponent.md)
-        - [Xcomponent](ts-basic-components-xcomponent.md)
+- 容器组件
-    - 容器组件
+    - [AlphabetIndexer](ts-container-alphabet-indexer.md)
-        - [AlphabetIndexer](ts-container-alphabet-indexer.md)
+    - [Badge](ts-container-badge.md)
-        - [Badge](ts-container-badge.md)
+    - [Column](ts-container-column.md)
-        - [Column](ts-container-column.md)
+    - [ColumnSplit](ts-container-columnsplit.md)
-        - [ColumnSplit](ts-container-columnsplit.md)
+    - [Counter](ts-container-counter.md)
-        - [Counter](ts-container-counter.md)
+    - [Flex](ts-container-flex.md)
-        - [Flex](ts-container-flex.md)
+    - [GridContainer](ts-container-gridcontainer.md)
-        - [GridContainer](ts-container-gridcontainer.md)
+    - [Grid](ts-container-grid.md)
-        - [Grid](ts-container-grid.md)
+    - [GridItem](ts-container-griditem.md)
-        - [GridItem](ts-container-griditem.md)
+    - [List](ts-container-list.md)
-        - [List](ts-container-list.md)
+    - [ListItem](ts-container-listitem.md)
-        - [ListItem](ts-container-listitem.md)
+    - [Navigator](ts-container-navigator.md)
-        - [Navigator](ts-container-navigator.md)
+    - [Panel](ts-container-panel.md)
-        - [Panel](ts-container-panel.md)
+    - [Refresh](ts-container-refresh.md)
-        - [Refresh](ts-container-refresh.md)
+    - [Row](ts-container-row.md)
-        - [Row](ts-container-row.md)
+    - [RowSplit](ts-container-rowsplit.md)
-        - [RowSplit](ts-container-rowsplit.md)
+    - [Scroll](ts-container-scroll.md)
-        - [Scroll](ts-container-scroll.md)
+    - [SideBarContainer](ts-container-sidebarcontainer.md)
-        - [SideBarContainer](ts-container-sidebarcontainer.md)
+    - [Stack](ts-container-stack.md)
-        - [Stack](ts-container-stack.md)
+    - [Swiper](ts-container-swiper.md)
-        - [Swiper](ts-container-swiper.md)
+    - [Tabs](ts-container-tabs.md)
-        - [Tabs](ts-container-tabs.md)
+    - [TabContent](ts-container-tabcontent.md)
-        - [TabContent](ts-container-tabcontent.md)
+- 媒体组件
-    - 媒体组件
+    - [Video](ts-media-components-video.md)
-        - [Video](ts-media-components-video.md)
+- 绘制组件
-    - 绘制组件
+    - [Circle](ts-drawing-components-circle.md)
-        - [Circle](ts-drawing-components-circle.md)
+    - [Ellipse](ts-drawing-components-ellipse.md)
-        - [Ellipse](ts-drawing-components-ellipse.md)
+    - [Line](ts-drawing-components-line.md)
-        - [Line](ts-drawing-components-line.md)
+    - [Polyline](ts-drawing-components-polyline.md)
-        - [Polyline](ts-drawing-components-polyline.md)
+    - [Polygon](ts-drawing-components-polygon.md)
-        - [Polygon](ts-drawing-components-polygon.md)
+    - [Path](ts-drawing-components-path.md)
-        - [Path](ts-drawing-components-path.md)
+    - [Rect](ts-drawing-components-rect.md)
-        - [Rect](ts-drawing-components-rect.md)
+    - [Shape](ts-drawing-components-shape.md)
-        - [Shape](ts-drawing-components-shape.md)
+- 画布组件
-    - 画布组件
+    - [Canvas](ts-components-canvas-canvas.md)
-        - [Canvas](ts-components-canvas-canvas.md)
+    - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
-        - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
+    - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
-        - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
+    - [Lottie](ts-components-canvas-lottie.md)
-        - [Lottie](ts-components-canvas-lottie.md)
+    - [Path2D对象](ts-components-canvas-path2d.md)
-        - [Path2D对象](ts-components-canvas-path2d.md)
+    - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
-        - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
+    - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
-        - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
+    - [ImageData对象](ts-components-canvas-imagedata.md)
-        - [ImageData对象](ts-components-canvas-imagedata.md)
 - 动画
    - [属性动画](ts-animatorproperty.md)
    - [显式动画](ts-explicit-animation.md)

--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -21,44 +21,44 @@
 Swiper(value:{controller?: SwiperController})
 - 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
+  | 参数名        | 参数类型                                  | 必填   | 默认值  | 参数描述                 |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
-  | controller | [SwiperController](#swipercontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件翻页。 | 
+  | controller | [SwiperController](#swipercontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件翻页。 |
 ## 属性
-| 名称 | 参数类型 | 默认值 | 描述 | 
+| 名称                          | 参数类型                                     | 默认值        | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
-| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 | 
+| index                       | number                                   | 0          | 设置当前在容器中显示的子组件的索引值。                      |
-| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 | 
+| autoPlay                    | boolean                                  | false      | 子组件是否自动播放，自动播放状态下，导航点不可操作。               |
-| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 | 
+| interval                    | number                                   | 3000       | 使用自动播放时播放的时间间隔，单位为毫秒。                    |
-| indicator | boolean | true | 是否启用导航点指示器。 | 
+| indicator                   | boolean                                  | true       | 是否启用导航点指示器。                              |
-| loop | boolean | true | 是否开启循环。 | 
+| loop                        | boolean                                  | true       | 是否开启循环。<br> 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 |
-| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | 
+| duration                    | number                                   | 400        | 子组件切换的动画时长，单位为毫秒。                        |
-| vertical | boolean | false | 是否为纵向滑动。 | 
+| vertical                    | boolean                                  | false      | 是否为纵向滑动。                                 |
-| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
+| itemSpace                   | Length                                   | 0          | 设置子组件与子组件之间间隙。                           |
-| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 | 
+| cachedCount<sup>8+</sup>    | number                                   | 1          | 设置预加载子组件个数。                              |
-| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
+| disableSwipe<sup>8+</sup>   | boolean                                  | false      | 禁用组件滑动切换功能。                              |
-| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
+| curve<sup>8+</sup>          | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
-| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
+| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | -          | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
 ## SwiperController
 Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
-| 接口名称 | 功能描述 | 
+| 接口名称                | 功能描述   |
-| -------- | -------- |
+| ------------------- | ------ |
-| showNext():void | 翻至下一页。 | 
+| showNext():void     | 翻至下一页。 |
-| showPrevious():void | 翻至上一页。 | 
+| showPrevious():void | 翻至上一页。 |
 ## 事件
-| 名称 | 功能描述 | 
+| 名称                                       | 功能描述               |
-| -------- | -------- |
+| ---------------------------------------- | ------------------ |
-| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 | 
+| onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
 ## 示例

--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
@@ -11,7 +11,7 @@
 | 名称 | 参数类型 | 默认值 | 参数描述 |
 | -------- | -------- | -------- | -------- |
-| show | options:&nbsp;{&nbsp;paramObject1\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
+| show | options:&nbsp;{&nbsp;paramObject1&nbsp;\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
 - paramObject1参数
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |

--- a/zh-cn/application-dev/security/accesstoken-overview.md
+++ b/zh-cn/application-dev/security/accesstoken-overview.md
@@ -112,7 +112,7 @@ ATM(AccessTokenManager)是OpenHarmony上基于AccessToken构建的统一的应
 在权限B的ACL使能为TRUE的情况下，此时，开发者可以使用ACL方式来申请权限B。
-ACL方式的工作流程可以参考[ACL方式使用说明](#ACL方式使用说明)。
+ACL方式的工作流程可以参考[ACL方式使用说明](#acl方式使用说明)。
 权限的ACL使能情况可查阅[权限定义列表](permission-list.md)。
 ### ACL方式使用说明

--- a/zh-cn/application-dev/ui/Readme-CN.md
+++ b/zh-cn/application-dev/ui/Readme-CN.md
@@ -80,10 +80,9 @@
            - [目录结构](ts-framework-directory.md)
            - [应用代码文件访问规则](ts-framework-file-access-rules.md)
        - [js标签配置](ts-framework-js-tag.md)
-        - 资源访问
+        - 资源管理
-            - [访问应用资源](ts-application-resource-access.md)
+            - [资源文件的分类](ui-ts-basic-resource-file-categories.md)
-            - [访问系统资源](ts-system-resource-access.md)
+            - [资源访问](ts-resource-access.md)
-            - [媒体资源类型说明](ts-media-resource-type.md)
        - [像素单位](ts-pixel-units.md)
        - [类型定义](ts-types.md)
    - 声明式语法

--- a/zh-cn/application-dev/ui/figures/create-resource-file-1.png
+++ b/zh-cn/application-dev/ui/figures/create-resource-file-1.png
--- a/zh-cn/application-dev/ui/figures/create-resource-file-2.png
+++ b/zh-cn/application-dev/ui/figures/create-resource-file-2.png
--- a/zh-cn/application-dev/ui/figures/create-resource-file-3.png
+++ b/zh-cn/application-dev/ui/figures/create-resource-file-3.png
--- a/zh-cn/application-dev/ui/js-framework-syntax-css.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md
 # CSS语法参考
-CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。
+CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。请参考[通用样式](../reference/arkui-js/js-components-common-styles.md)了解基于JS扩展的类Web开发范式支持的组件样式。
 ## 尺寸单位

--- a/zh-cn/application-dev/ui/ts-component-based-component.md
+++ b/zh-cn/application-dev/ui/ts-component-based-component.md
@@ -12,7 +12,7 @@
 - 数据驱动更新：由状态变量的数据驱动，实现UI自动更新。
-对组件化的深入描述，请参考深入理解组件化。
+对组件化的深入描述，请参考[深入理解组件化](ts-custom-component-initialization.md)。
 > **说明：**

--- a/zh-cn/application-dev/ui/ts-component-based-styles.md
+++ b/zh-cn/application-dev/ui/ts-component-based-styles.md
@@ -4,7 +4,7 @@
 @Styles装饰器将新的属性函数添加到基本组件上，如Text、Column、Button等。当前@Styles仅支持通用属性。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
-@Styles可以定义在组件内或组件外，在组件外定义时需带上function关键字，组件内定义时不需要。
+@Styles可以定义在组件内或组件外，在组件外定义时需在方法前添加function关键字，组件内定义时不需要添加function关键字。
 ```

--- a/zh-cn/application-dev/ui/ts-media-resource-type.md
+++ b/zh-cn/application-dev/ui/ts-media-resource-type.md
-# 媒体资源类型说明
- 图片资源类型说明
-  | 格式 | 文件后缀名 | 
-  | -------- | -------- |
-  | JPEG | .jpg | 
-  | PNG | .png | 
-  | GIF | .gif | 
-  | SVG | .svg | 
-  | WEBP | .webp | 
-  | BMP | .bmp |
- 音视频资源类型说明
-  | 格式 | 支持的文件类型 | 
-  | -------- | -------- |
-  | H.263 | .3gp <br>.mp4 | 
-  | H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 | 
-  | MPEG-4 SP | .3gp | 
-  | VP8 | .webm <br> .mkv | 
--- a/zh-cn/application-dev/ui/ts-application-resource-access.md
+++ b/zh-cn/application-dev/ui/ts-application-resource-access.md
-# 访问应用资源
+# 资源访问
-## 资源定义
+## 访问应用资源
-应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
+在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
- 一级目录为base目录、限定词目录以及rawfile目录
+引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
-  - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
-  - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
-  - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
- 二级目录为资源目录
+> **说明：**
-  - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
+> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
-  - 当前支持的文件和资源类型如下：
-       | 文件名         | 资源类型         |
-       | ----------- | ------------ |
-       | color.json  | 颜色资源。        |
-       | float.json  | 间距、圆角、字体等资源。 |
-       | string.json | 字符串资源。       |
-       | plural.json | 字符串资源。       |
-       | media目录     | 图片资源。        |
+在xxx.ets文件中，可以使用在resources目录中定义的资源。
-## 资源引用
+```ts
+Text($r('app.string.string_hello'))
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
-在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
+Text($r('app.string.string_world'))
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
-引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
+Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
+    .fontColor($r('app.color.color_hello'))
+    .fontSize($r('app.float.font_hello'))
+}
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+Text($r('app.plural.eat_apple', 5, 5))       // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
-> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
+    .fontColor($r('app.color.color_world'))
+    .fontSize($r('app.float.font_world'))
+}
+Image($r('app.media.my_background_image'))  // media资源的$r引用
+Image($rawfile('test.png'))                 // rawfile$r引用rawfile目录下图片
-## 示例
+Image($rawfile('newDir/newTest.png'))       // rawfile$r引用rawfile目录下图片
+```
+## 访问系统资源
-base目录中部分自定义资源如下所示：
+系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
+开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
+```ts
+Text('Hello')
+    .fontColor($r('sys.color.ohos_id_color_emphasize'))
+    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
+    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
+    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
+Image($r('sys.media.ohos_app_icon'))
+    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
+    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
+    .height(200)
+    .width(300)
 ```
-    resources
+## 资源文件示例
-      ├─ base 
-      │    ├─ element 
-      │    │   ├─ color.json
-      │    │   ├─ string.json
-      │    │   └─ float.json
-      │    └─ media
-      │       └─ my_background_image.png
-      └─ rawfile
-           ├─ test.png
-           └─ newDir
-               └─ newTest.png  
-```
 color.json文件的内容如下：
@@ -133,35 +141,7 @@ plural.json文件的内容如下：
 }
 ```
-  在ets文件中，可以使用在resources目录中定义的资源。
-```
-Text($r('app.string.string_hello'))
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-Text($r('app.string.string_world'))
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-Text($r('app.string.message_arrive', "five of the clock")) //引用string资源，$r的第二个参数用于替换%s
-    .fontColor($r('app.color.color_hello'))
-    .fontSize($r('app.float.font_hello'))
-}
-Text($r('app.plural.eat_apple', 5, 5)) //plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
-    .fontColor($r('app.color.color_world'))
-    .fontSize($r('app.float.font_world'))
-}
-Image($r('app.media.my_background_image')) //media资源的$r引用
-Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
-Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
-```
 ## 相关实例

--- a/zh-cn/application-dev/ui/ts-system-resource-access.md
+++ b/zh-cn/application-dev/ui/ts-system-resource-access.md
-# 访问系统资源
-系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
-开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
-```
-Text('Hello')
-    .fontColor($r('sys.color.ohos_id_color_emphasize'))
-    .fontSize($r('sys.float.ohos_id_text_size_headline1'))
-    .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
-    .backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
-Image($r('sys.media.ohos_app_icon'))
-    .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
-    .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
-    .height(200)
-    .width(300)
-```
--- a/zh-cn/application-dev/quick-start/basic-resource-file-categories.md
+++ b/zh-cn/application-dev/quick-start/basic-resource-file-categories.md
@@ -71,11 +71,62 @@ base目录与限定词目录下面可以创建资源组目录（包括element、
  **表3** 资源组目录说明
-| 资源组目录     | 目录说明                                     | 资源文件                                     |
+| 资源组目录   | 目录说明                                     | 资源文件                                     |
-| --------- | ---------------------------------------- | ---------------------------------------- |
+| ------- | ---------------------------------------- | ---------------------------------------- |
-| element   | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
+| element | 表示元素资源，以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean，布尔型<br/>-&nbsp;color，颜色<br/>-&nbsp;float，浮点型<br/>-&nbsp;intarray，整型数组<br/>-&nbsp;integer，整型<br/>-&nbsp;pattern，样式<br/>-&nbsp;plural，复数形式<br/>-&nbsp;strarray，字符串数组<br/>-&nbsp;string，字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
-| media     | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。              | 文件名可自定义，例如：icon.png。                     |
+| media   | 表示媒体资源，包括图片、音频、视频等非文本格式的文件。              | 文件名可自定义，例如：icon.png。                     |
-| animation | 表示动画资源，采用XML文件格式。                        | 文件名可自定义，例如：zoom_in.xml。                  |
+| profile | 表示其他类型文件，以原始文件形式保存。                      | 文件名可自定义。                                 |
-| layout    | 表示布局资源，采用XML文件格式。                        | 文件名可自定义，例如：home_layout.xml。              |
-| graphic   | 表示可绘制资源，采用XML文件格式。                       | 文件名可自定义，例如：notifications_dark.xml。       |
+### 媒体资源类型说明
-| profile   | 表示其他类型文件，以原始文件形式保存。                      | 文件名可自定义。                                 |
+表1 图片资源类型说明
+| 格式   | 文件后缀名 |
+| ---- | ----- |
+| JPEG | .jpg  |
+| PNG  | .png  |
+| GIF  | .gif  |
+| SVG  | .svg  |
+| WEBP | .webp |
+| BMP  | .bmp  |
+表2 音视频资源类型说明
+| 格式                                   | 支持的文件类型         |
+| ------------------------------------ | --------------- |
+| H.263                                | .3gp <br>.mp4   |
+| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4   |
+| MPEG-4 SP                            | .3gp            |
+| VP8                                  | .webm <br> .mkv |
+## 创建资源文件
+在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。
+同时，DevEco Studio也提供了创建资源目录和资源文件的界面。
+- 创建资源目录及资源文件
+  在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。
+  文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。
+  目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+  ![create-resource-file-1](figures/create-resource-file-1.png)
+- 创建资源目录
+  在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。
+  选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
+  ![create-resource-file-2](figures/create-resource-file-2.png)
+- 创建资源文件
+  在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。
+  例如，在element目录下可新建Element Resource File。
+  ![create-resource-file-3](figures/create-resource-file-3.png)
\ No newline at end of file
--- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
@@ -440,9 +440,6 @@
           .fontWeight(FontWeight.Bold)
           .layoutWeight(1)
         Flex({ alignItems: ItemAlign.Center }) {
-           Circle({width: 6, height: 6})
-             .margin({right: 12})
-             .fill(colorValue)
           Text(name)
             .fontSize(17.4)
             .flexGrow(1)