!12933 整改代码规范

Merge pull request !12933 from 田雨/master

zh-cn/application-dev/quick-start/arkts-state-mgmt-concepts.md

@@ -15,8 +15,8 @@ ArkTS提供了多维度的状态管理机制，在ArkUI开发框架中，和UI
 | @Link       | 基本数据类型，类，数组    | 父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。 |
 | @Observed   | 类                        | @Observed应用于类，表示该类中的数据变更被UI页面管理。        |
 | @ObjectLink | 被@Observed所装饰类的对象 | @ObjectLink装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。 |
-| @Consume    | 基本数据类型，类，数组    | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 |
 | @Provide    | 基本数据类型，类，数组    | @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面重新渲染。 |
+| @Consume    | 基本数据类型，类，数组    | @Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。 |
 
 ## 应用级变量的状态管理
 
@@ -25,6 +25,8 @@ AppStorage是整个应用程序状态的中心“数据库”，UI框架会针
 - @StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。
 - @StorageProp：@StorageProp(name)将UI组件数据与AppStorage进行单向同步，AppStorage中值的更改会更新UI组件中的数据，但UI组件无法更改AppStorage中的数据。
 - AppStorage还提供了用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态数据，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
+- LocalStorage是应用程序中每一个Ability的存储器。
+- @LocalStorageLink：组件通过使用@LocalStorageLink(key)装饰的状态变量，key值为LocalStorage中的属性键值，与LocalStorage建立双向数据绑定。
+- @LocalStorageProp：组件通过使用@LocalStorageProp(key)装饰的状态变量，key值为LocalStorage中的属性键值，与LocalStorage建立单向数据绑定。
 - PersistentStorage提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 
 - Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态数据，这些数据描述了应用程序运行的设备环境。 
-

zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md

@@ -156,7 +156,7 @@ struct CountDownComponent {
 
 - 支持多种类型：@Link支持的数据类型与@State相同，即class、number、string、boolean或这些类型的数组；
 - 私有：仅支持组件内访问；
-- 单个数据源：父组件中用于初始化子组件@Link变量的必须是@State变量；
+- 单个数据源：父组件中用于初始化子组件@Link变量的必须是父组件定义的状态变量；
 - 双向通信：子组件对@Link变量的更改将同步修改父组件中的@State变量；
 - 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过`'$'`操作符创建引用。
 
@@ -395,7 +395,7 @@ struct ViewB {
 ```
 
 
-## @Consume和@Provide
+## @Provide和@Consume
 
 @Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染。
 

zh-cn/application-dev/reference/apis/js-apis-animator.md

@@ -40,10 +40,10 @@ create(options: AnimatorOptions): AnimatorResult
     easing: 'friction',
     delay: 0,
     fill: 'forwards',
-    direction: "normal",
+    direction: 'normal',
     iterations: 3,
     begin: 200.0,
-    end: 400.0,
+    end: 400.0
   };
   animator.create(options);
   ```
@@ -83,10 +83,10 @@ let options = {
   easing: 'friction',
   delay: 0,
   fill: 'forwards',
-  direction: "normal",
+  direction: 'normal',
   iterations: 3,
   begin: 200.0,
-  end: 400.0,
+  end: 400.0
 };
 try {
   animator.reset(options);
@@ -283,7 +283,7 @@ export default {
       easing: 'friction',
       delay: 0,
       fill: 'forwards',
-      direction: "normal",
+      direction: 'normal',
       iterations: 2,
       begin: 200.0,
       end: 400.0
@@ -516,7 +516,7 @@ let options = {
   easing: 'friction',
   delay: 0,
   fill: 'forwards',
-  direction: "normal",
+  direction: 'normal',
   iterations: 3,
   begin: 200.0,
   end: 400.0,

zh-cn/application-dev/reference/apis/js-apis-curve.md

@@ -265,7 +265,7 @@ steps(count: number, end: boolean): string
 | 参数名 | 类型    | 必填 | 说明                                                         |
 | ------ | ------- | ----| ------------------------------------------------------------ |
 | count  | number  | 是   | 阶梯的数量，需要为正整数。                                   |
-| end    | boolean | 是   | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false:在起点发生阶跃变化。 |
+| end    | boolean | 是   | 在每个间隔的起点或是终点发生阶跃变化。<br>-true：在终点发生阶跃变化。<br>-false：在起点发生阶跃变化。 |
 
 
 ## Curves.cubicBezier<sup>(deprecated)</sup>
@@ -309,6 +309,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): stri
 ```ts
 // xxx.ets
 import Curves from '@ohos.curves'
+
 @Entry
 @Component
 struct ImageComponent {
@@ -318,16 +319,16 @@ struct ImageComponent {
   build() {
     Column() {
       Text()
-        .margin({top:100})
+        .margin({ top: 100 })
         .width(this.widthSize)
         .height(this.heightSize)
         .backgroundColor(Color.Red)
-        .onClick(()=> {
+        .onClick(() => {
           let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
           this.widthSize = curve.interpolate(0.5) * this.widthSize;
           this.heightSize = curve.interpolate(0.5) * this.heightSize;
         })
-        .animation({duration: 2000 , curve: Curves.stepsCurve(9, true)})
+        .animation({ duration: 2000, curve: Curves.stepsCurve(9, true) })
     }.width("100%").height("100%")
   }
 }

zh-cn/application-dev/reference/apis/js-apis-matrix4.md

@@ -145,11 +145,12 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
 ```ts
 // xxx.ets
 import matrix4 from '@ohos.matrix4'
+
 @Entry
 @Component
 struct Test {
-  private matrix1 = matrix4.identity().translate({x:100})
-  private matrix2 = this.matrix1.copy().scale({x:2})
+  private matrix1 = matrix4.identity().translate({ x: 100 })
+  private matrix2 = this.matrix1.copy().scale({ x: 2 })
 
   build() {
     Column() {
@@ -160,7 +161,7 @@ struct Test {
       Image($r("app.media.bg2"))
         .width("40%")
         .height(100)
-        .margin({top:50})
+        .margin({ top: 50 })
         .transform(this.matrix2)
     }
   }
@@ -199,11 +200,12 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
 ```ts
 // xxx.ets
 import matrix4 from '@ohos.matrix4'
+
 @Entry
 @Component
 struct Test {
-  private matrix1 = matrix4.identity().translate({x:200}).copy()
-  private matrix2 = matrix4.identity().scale({x:2}).copy()
+  private matrix1 = matrix4.identity().translate({ x: 200 }).copy()
+  private matrix2 = matrix4.identity().scale({ x: 2 }).copy()
 
   build() {
     Column() {
@@ -211,13 +213,13 @@ struct Test {
       Image($r("app.media.icon"))
         .width("40%")
         .height(100)
-        .margin({top:50})
+        .margin({ top: 50 })
       // 先平移x轴200px，再缩放两倍x轴，得到矩阵变换后的效果图
       Image($r("app.media.icon"))
         .transform(this.matrix1.combine(this.matrix2))
         .width("40%")
-      .height(100)
-        .margin({top:50})
+        .height(100)
+        .margin({ top: 50 })
     }
   }
 }
@@ -245,8 +247,9 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
 ```ts
 import matrix4 from '@ohos.matrix4'
 // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
-let matrix1 = matrix4.identity().scale({x:2})
+let matrix1 = matrix4.identity().scale({ x: 2 })
 let matrix2 = matrix1.invert()
+
 @Entry
 @Component
 struct Tests {
@@ -295,10 +298,11 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
 ```ts
 // xxx.ets
 import matrix4 from '@ohos.matrix4'
+
 @Entry
 @Component
 struct Test {
-  private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
+  private matrix1 = matrix4.identity().translate({ x: 100, y: 200, z: 30 })
 
   build() {
     Column() {
@@ -346,7 +350,7 @@ import matrix4 from '@ohos.matrix4'
 @Entry
 @Component
 struct Test {
-  private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
+  private matrix1 = matrix4.identity().scale({ x:2, y:3, z:4, centerX:50, centerY:50 })
 
   build() {
     Column() { 
@@ -392,17 +396,18 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
 ```ts
 // xxx.ets
 import matrix4 from '@ohos.matrix4'
+
 @Entry
 @Component
 struct Test {
-  private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
+  private matrix1 = matrix4.identity().rotate({ x: 1, y: 1, z: 2, angle: 30 })
 
   build() {
     Column() {
       Image($r("app.media.bg1")).transform(this.matrix1)
         .width("40%")
         .height(100)
-    }.width("100%").margin({top:50})
+    }.width("100%").margin({ top: 50 })
   }
 }
 ```

zh-cn/application-dev/reference/apis/js-apis-router.md

@@ -590,7 +590,7 @@ router.getParams();
 | 名称   | 类型   | 必填 | 说明                                                         |
 | ------ | ------ | ---- | ------------------------------------------------------------ |
 | url    | string | 是   | 表示目标页面的url，可以用以下两种格式：<br/>-&nbsp;页面绝对路径，由配置文件中pages列表提供，例如：<br/>&nbsp;&nbsp;-&nbsp;pages/index/index<br/>&nbsp;&nbsp;-&nbsp;pages/detail/detail<br/>-&nbsp;特殊值，如果url的值是"/"，则跳转到首页。 |
-| params | Object | 否   | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
+| params | object | 否   | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
 
 
   > **说明：**
@@ -642,7 +642,7 @@ import router from '@ohos.router'
 @Entry
 @Component
 struct Index {
-  async  routePage() {
+  async routePage() {
     let options = {
       url: 'pages/second',
       params: {
@@ -653,7 +653,7 @@ struct Index {
       }
     }
     try {
-      await router.push(options)
+      await router.pushUrl(options)
     } catch (err) {
       console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`)
     }
@@ -661,18 +661,18 @@ struct Index {
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text('这是第一页')
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
+      Text('这是第一页')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
       Button() {
         Text('next page')
           .fontSize(25)
           .fontWeight(FontWeight.Bold)
       }.type(ButtonType.Capsule)
-          .margin({ top: 20 })
-          .backgroundColor('#ccc')
-          .onClick(() => {
-            this.routePage()
+      .margin({ top: 20 })
+      .backgroundColor('#ccc')
+      .onClick(() => {
+        this.routePage()
       })
     }
     .width('100%')
@@ -704,7 +704,7 @@ struct Second {
           this.secondData = (this.data.array[1]).toString()
         })
       .margin({top:20})
-      Text('第一页传来的数值' + '  ' + this.secondData)
+      Text(`第一页传来的数值:${this.secondData}`)
         .fontSize(20)
         .margin({top:20})
         .backgroundColor('red')      

zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md

@@ -12,7 +12,7 @@
 ## 导入模块
 
 
-```
+```ts
 import mediaquery from '@system.mediaquery';
 ```
 
@@ -39,8 +39,8 @@ matchMedia(condition: string): MediaQueryList
 
 **示例：**
 
-```
-var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
+```ts
+let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
 ```
 
 ## MediaQueryEvent
@@ -97,7 +97,7 @@ addListener(callback: (event: MediaQueryEvent) => void): void
 
 **示例：**
 
-```
+```ts
 function maxWidthMatch(e){
   if(e.matches){
     // do something
@@ -123,7 +123,7 @@ removeListener(callback: (event: MediaQueryEvent) => void): void
 
 **示例：**
 
-```
+```ts
 function maxWidthMatch(e){
   if(e.matches){
     // do something

zh-cn/application-dev/reference/apis/js-apis-system-router.md

@@ -43,8 +43,8 @@ export default {
         data1: 'message',
         data2: {
           data3: [123, 456, 789]
-	},
-      },
+        }
+      }
     });
   }
 }
@@ -94,8 +94,8 @@ export default {
     router.replace({
       uri: 'pages/detail/detail',
       params: {
-        data1: 'message',
-      },
+        data1: 'message'
+      }
     });
   }
 }
@@ -135,7 +135,7 @@ back(options?: BackRouterOptions): void
 export default {    
   indexPushPage() {        
     router.push({            
-      uri: 'pages/detail/detail',        
+      uri: 'pages/detail/detail'     
     });        
   }
 }
@@ -147,7 +147,7 @@ export default {
 export default {    
   detailPushPage() {        
     router.push({            
-      uri: 'pages/mall/mall',        
+      uri: 'pages/mall/mall'
     });    
   }
 }
@@ -237,7 +237,7 @@ getLength(): string
 ```js
 export default {     
   getLength() {        
-    var size = router.getLength();        
+    let size = router.getLength();        
     console.log('pages stack size = ' + size);    
   }
 }
@@ -262,7 +262,7 @@ getState(): RouterState
 ```js
 export default {     
   getState() {        
-    var page = router.getState();
+    let page = router.getState();
     console.log('current index = ' + page.index);
     console.log('current name = ' + page.name);
     console.log('current path = ' + page.path);
@@ -296,7 +296,7 @@ export default {
       },            
       cancel: function() {                
         console.log('cancel');            
-      },        
+      }     
     });    
   }
 }
@@ -327,7 +327,7 @@ export default {
       },            
       cancel: function() {                
         console.log('cancel');            
-      },        
+      }       
     });    
   }
 }
@@ -339,10 +339,10 @@ export default {
 
 **系统能力：**  以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Lite
 
-| 名称     | 参数类型   | 必填   | 说明                                       |
-| ------ | ------ | ---- | ---------------------------------------- |
-| uri    | string | 是    | 目标页面的uri，可以是以下的两种格式：<br/>1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：<br/>- pages/index/index<br/> -pages/detail/detail<br/>2. 特定路径。如果URI为斜杠（/），则显示主页。 |
-| params | Object | 否    | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
+| 名称   | 参数类型 | 必填 | 说明                                                         |
+| ------ | -------- | ---- | ------------------------------------------------------------ |
+| uri    | string   | 是   | 目标页面的uri，可以是以下的两种格式：<br/>1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：<br/>- pages/index/index<br/> -pages/detail/detail<br/>2. 特定路径。如果URI为斜杠（/），则显示主页。 |
+| params | object   | 否   | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
 
 
 ## BackRouterOptions
@@ -351,10 +351,10 @@ export default {
 
 **系统能力：**  以下各项对应的系统能力有所不同，详见下表。
 
-| 名称     | 参数类型   | 必填   | 说明                                       |
-| ------ | ------ | ---- | ---------------------------------------- |
-| uri    | string | 否    | 返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Full |
-| params | Object | 否    | 跳转时要同时传递到目标页面的数据。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Lite |
+| 名称   | 参数类型 | 必填 | 说明                                                         |
+| ------ | -------- | ---- | ------------------------------------------------------------ |
+| uri    | string   | 否   | 返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Full |
+| params | object   | 否   | 跳转时要同时传递到目标页面的数据。 <br>**系统能力：** SystemCapability.ArkUI.ArkUI.Lite |
 
 ## RouterState
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md

@@ -27,7 +27,7 @@ Image(src: string | PixelMap | Resource)
 
 | 参数名 | 参数类型                                                     | 必填 | 参数描述                                                     |
 | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| src    | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是   | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`datashare://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
+| src    | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是   | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`datashare://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。图片加载前需要申请[媒体库功能相关权限](../../file-management/medialibrary-overview.md#申请媒体库功能相关权限)<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
 
 ## 属性
 

zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md

@@ -134,7 +134,7 @@ struct AlphabetIndexerSample {
           .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中项字体样式
           .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
           .itemSize(28) // 每一项的尺寸大小
-          .alignStyle(IndexerAlign.Left) // 弹出框在索引条左侧弹出
+          .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
           .onSelect((index: number) => {
             console.info(this.value[index] + ' Selected!')
           })

zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md

@@ -20,7 +20,7 @@ animateTo(value: AnimateParam, event: () => void): void
 | -------- | -------- | -------- |
 | duration | number | 动画持续时间，单位为毫秒。<br/>默认值：1000 |
 | tempo | number | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。<br/>默认值：1.0 |
-| curve | Curve&nbsp;\|&nbsp;Curves | 动画曲线。<br/>默认值：Curve.Linear |
+| curve | [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)&nbsp;\|&nbsp;string | 动画曲线。<br/>默认值：Curve.Linear |
 | delay | number | 单位为ms(毫秒)，默认不延时播放。<br/>默认值：0 |
 | iterations | number | 默认播放一次，设置为-1时表示无限次播放。<br/>默认值：1 |
 | playMode | [PlayMode](ts-appendix-enums.md#playmode) | 设置动画播放模式，默认播放完成后重头开始播放。<br/>默认值：PlayMode.Normal |

zh-cn/application-dev/reference/errorcodes/errorcode-router.md

@@ -18,7 +18,7 @@ Internal error.
 
 NA
 
-## 100002 路由输入的uri错误
+## 100002 路由页面跳转时输入的uri错误
 
 错误信息
 
@@ -54,7 +54,7 @@ Page stack error. The pages are pushed too much.
 
 请清除多余或无效的页面。
 
-## 200002 路由输入的uri错误
+## 200002 路由页面替换时输入的uri错误
 
 **错误信息**
 

zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

@@ -407,6 +407,8 @@
    }
    ```
 
+   ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
+   
 5. 使用自定义构造函数\@Builder简化代码。可以发现，每个成分表中的成分单元其实都是一样的UI结构。
    ![zh-cn_image_0000001169599582](figures/zh-cn_image_0000001169599582.png)