!21766 优化ArkTS卡片指南中的示例图

Merge pull request !21766 from zhongjianfei/mm0801

zh-cn/application-dev/application-models/arkts-ui-widget-creation.md

 # 创建一个ArkTS卡片
 
-在已有的应用工程中，创建ArkTS卡片，具体的操作方式如下。
+创建卡片当前有两种入口：
 
-1. 创建卡片。  
+- 创建工程时，选择Application，默认不带卡片，可以在创建工程后右键新建卡片。
+- 创建工程时，选择Atomic Service，默认自带卡片，也可以在创建工程后右键新建卡片。
+
+![WidgetCreateProject](figures/WidgetCreateProject.png)
+
+在已有的应用工程中，可以通过右键新建ArkTS卡片，具体的操作方式如下。
+
+1. 右键新建卡片。  
    ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png)
    
 2. 根据实际业务场景，选择一个卡片模板。  
    ![WidgetProjectCreate2](figures/WidgetProjectCreate2.png)
-   
+
 3. 在选择卡片的开发语言类型（Language）时，选择ArkTS选项，然后单击“Finish”，即可完成ArkTS卡片创建。  
    ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png)
-   
+
    ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ets）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）。  
    ![WidgetProjectView](figures/WidgetProjectView.png)
 

zh-cn/application-dev/application-models/arkts-ui-widget-event-formextensionability.md

@@ -11,12 +11,19 @@
   @Entry(storage)
   @Component
   struct WidgetCard {
-    @LocalStorageProp('title') title: string = 'init';
-    @LocalStorageProp('detail') detail: string = 'init';
+    @LocalStorageProp('title') title: string = 'Title default';
+    @LocalStorageProp('detail') detail: string = 'Description default';
   
     build() {
       Column() {
-        Button('刷新')
+        Column() {
+          Text(`${this.title}`)
+            .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp')
+          Text(`${this.detail}`)
+            .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%')
+        }.width('100%').alignItems(HorizontalAlign.Start)
+        Button('UPDATE')
+          .margin(15).width('90%')
           .onClick(() => {
             postCardAction(this, {
               'action': 'message',
@@ -25,11 +32,7 @@
               }
             });
           })
-        Text(`${this.title}`)
-        Text(`${this.detail}`)
-      }
-      .width('100%')
-      .height('100%')
+      }.width('90%').height('90%').margin('5%')
     }
   }
   ```
@@ -46,8 +49,8 @@
       // Called when a specified message event defined by the form provider is triggered.
       console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
       let formData = {
-        'title': 'Title Update Success.', // 和卡片布局中对应
-        'detail': 'Detail Update Success.', // 和卡片布局中对应
+        'title': 'Title Update.', // 和卡片布局中对应
+        'detail': 'Description update success.', // 和卡片布局中对应
       };
       let formInfo = formBindingData.createFormBindingData(formData)
       formProvider.updateForm(formId, formInfo).then((data) => {
@@ -61,5 +64,8 @@
   }
   ```
 
-  运行效果如下图所示。  
-  ![WidgetUpdatePage](figures/WidgetUpdatePage.png)
+  运行效果如下图所示。
+  
+  | 初始状态                                                | 点击刷新                                              |
+  | ------------------------------------------------------- | ----------------------------------------------------- |
+  | ![WidgetUpdateBefore](figures/widget-update-before.PNG) | ![WidgetUpdateAfter](figures/widget-update-after.PNG) |

zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md

 # 使用router事件跳转到指定UIAbility
 
-
 在卡片中使用**postCardAction**接口的router能力，能够快速拉起卡片提供方应用的指定UIAbility，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。例如相机卡片，卡片上提供拍照、录像等按钮，点击不同按钮将拉起相机应用的不同UIAbility，从而提高用户的体验。
+
 ![WidgerCameraCard](figures/WidgerCameraCard.png)
 
 

zh-cn/application-dev/application-models/arkts-ui-widget-working-principles.md

@@ -26,7 +26,7 @@
 
 - 统一开发范式，提升开发体验和开发效率。
   
-  OpenHarmony在2022年发布了声明式范式的UI开发框架，而卡片还延续了css/hml/json三段式类Web范式的开发方式，提高了开发者的学习成本，提供ArkTS卡片能力后，统一了卡片和页面的开发范式，页面的布局可以直接复用到卡片布局中，提升开发体验和开发效率。
+  提供ArkTS卡片能力后，统一了卡片和页面的开发范式，页面的布局可以直接复用到卡片布局中，提升开发体验和开发效率。
   
   **图3** 卡片工程结构对比  
   ![WidgetProject](figures/WidgetProject.png)