diff --git a/entry/src/main/ets/pages/LocalPage.ets b/entry/src/main/ets/pages/LocalPage.ets
index 928616c971643ee73520c5f3771e8a56fe871970..4a95184808eeaed0340ca2cd69ecc94bed5c43fd 100644
--- a/entry/src/main/ets/pages/LocalPage.ets
+++ b/entry/src/main/ets/pages/LocalPage.ets
@@ -5,6 +5,7 @@ import TodoItemModel from '../viewmodel/TodoItemModel'
 import AddItem from '../view/AddItem';
 
 @Component
+@Preview
 export struct LocalPage {
   @Provide('localPageStack') LocalPageStack: NavPathStack = new NavPathStack(); //router
 
diff --git a/entry/src/main/ets/view/AddItem.ets b/entry/src/main/ets/view/AddItem.ets
index 0b484724a43019a920b1bbd264b2560340ed09cd..0f82e3b5cb7a815bb724647ec09ad42f5e1cc80b 100644
--- a/entry/src/main/ets/view/AddItem.ets
+++ b/entry/src/main/ets/view/AddItem.ets
@@ -16,6 +16,7 @@ interface SysTimeResponse {
 }
 
 @Component
+@Preview
 export default struct AddItem {
   @Consume('localPageStack') LocalPageStack: NavPathStack
 
@@ -87,9 +88,9 @@ export default struct AddItem {
 
   @Builder
   MainPage() {
-    Column() {
+/*    Column() {
       Row() {
-        Text('鍚嶅瓧')
+        Text('鏍囬')
           .fontSize(CommonConstants.detail_title_font_size)
           .fontWeight(FontWeight.Bold)
           .width(CommonConstants.add_name_width)
@@ -122,7 +123,7 @@ export default struct AddItem {
 
     Column() {
       Row() {
-        Text('鎻忚堪')
+        Text('璇︽儏')
           .fontSize(CommonConstants.detail_title_font_size)
           .fontWeight(FontWeight.Bold)
           .width(CommonConstants.add_name_width)
@@ -130,7 +131,7 @@ export default struct AddItem {
             left: CommonConstants.detail_margin_Left
           })
 
-        TextArea({ placeholder: '璇疯緭鍏ヤ簨椤规弿杩�'})
+*//*        TextArea({ placeholder: '璇疯緭鍏ヤ簨椤规弿杩�'})
           .width(CommonConstants.input_container_width)
           .height(CommonConstants.input_disc_height)
           .margin({ left: CommonConstants.input_margin_left })
@@ -139,6 +140,20 @@ export default struct AddItem {
           .placeholderColor(Color.Grey)
           .placeholderFont({size: CommonConstants.detail_font_size})
           .fontSize(CommonConstants.detail_font_size)
+          .onChange((value: string) => {
+            this.itemDisc = value;
+          })*//*
+      }
+      Row(){
+        TextArea({ placeholder: '璇疯緭鍏ヤ簨椤规弿杩�'})
+          .width('80%')
+          .height(CommonConstants.input_disc_height)
+          .margin({ left: CommonConstants.input_margin_left })
+          .backgroundColor($r('app.color.grey'))
+          .caretColor(Color.Blue) //鍏夋爣
+          .placeholderColor(Color.Grey)
+          .placeholderFont({size: CommonConstants.detail_font_size})
+          .fontSize(CommonConstants.detail_font_size)
           .onChange((value: string) => {
             this.itemDisc = value;
           })
@@ -152,9 +167,86 @@ export default struct AddItem {
     .backgroundColor($r('app.color.white'))
     .borderRadius(CommonConstants.border_radius)
     .justifyContent(FlexAlign.Center)
-    .alignItems(HorizontalAlign.Start)
-
+    .alignItems(HorizontalAlign.Start)*/
     Column() {
+      // 鏍囬鍜岃緭鍏ユ琛�
+      Row() {
+        Text('鏍囬')
+          .fontSize('23fp')
+          .fontWeight(FontWeight.Bold)
+          .width('15%')
+          .margin({ left: CommonConstants.detail_margin_Left })
+
+        TextInput({ placeholder: '璇疯緭鍏ヤ簨椤瑰悕瀛�' })
+          .width('70%')
+          .margin({ left: CommonConstants.input_margin_left })
+          .backgroundColor('#EDEDED') // 璁剧疆鑳屾櫙閫忔槑
+          .caretColor(Color.Blue) // 鍏夋爣棰滆壊
+          .placeholderColor(Color.Grey)
+          .placeholderFont({ size: CommonConstants.detail_font_size })
+          .fontSize(CommonConstants.detail_font_size)
+          .onChange((value: string) => {
+            this.itemName = value;
+          })
+      }
+      .margin({ top: CommonConstants.list_margin_top })
+      .width(CommonConstants.list_width)
+      .height(CommonConstants.name_height)
+      .borderRadius(CommonConstants.border_radius)
+      .justifyContent(FlexAlign.Center)
+      .alignItems(VerticalAlign.Top)
+
+      // 璇︽儏杈撳叆妗�
+      Row() {
+        Text('璇︽儏')
+          .fontSize('22fp')
+          .fontWeight(FontWeight.Bold)
+          .width('15%')
+          .margin({ left: 40 })
+
+/*        TextArea({ placeholder: '璇疯緭鍏ヤ簨椤规弿杩�' })
+          .width('70%')
+          .height(CommonConstants.input_disc_height)
+          .margin({ left: CommonConstants.input_margin_left })
+          .backgroundColor('#EDEDED') // 璁剧疆鑳屾櫙閫忔槑
+          .caretColor(Color.Blue) // 鍏夋爣棰滆壊
+          .placeholderColor(Color.Grey)
+          .placeholderFont({ size: CommonConstants.detail_font_size })
+          .fontSize(CommonConstants.detail_font_size)
+          .onChange((value: string) => {
+            this.itemDisc = value;
+          })*/
+      }
+      .margin({ top: CommonConstants.list_margin_top })
+      .width(CommonConstants.list_width)
+      .height('10vp')
+      .borderRadius(CommonConstants.border_radius)
+      .justifyContent(FlexAlign.Start)
+/*      .justifyContent(FlexAlign.Center)
+      .alignItems(VerticalAlign.Top )*/
+    }
+    Row() {
+      TextArea({ placeholder: '璇疯緭鍏ヤ簨椤规弿杩�' })
+        .width('90%')
+        .height(CommonConstants.input_disc_height)
+        .margin({ left: CommonConstants.input_margin_left })
+        .backgroundColor('#EDEDED') // 璁剧疆鑳屾櫙閫忔槑
+        .caretColor(Color.Blue) // 鍏夋爣棰滆壊
+        .placeholderColor(Color.Grey)
+        .placeholderFont({ size: CommonConstants.detail_font_size })
+        .fontSize(CommonConstants.detail_font_size)
+        .onChange((value: string) => {
+          this.itemDisc = value;
+        })
+    }
+    .margin({ top: CommonConstants.list_margin_top })
+    .width(CommonConstants.list_width)
+    .height('400vp')
+    .borderRadius(CommonConstants.border_radius)
+    .justifyContent(FlexAlign.Center)
+    .alignItems(VerticalAlign.Top )
+
+/*    Column() {
       Row() {
         Text('鏃堕棿')
           .fontSize(CommonConstants.detail_title_font_size)
@@ -170,8 +262,8 @@ export default struct AddItem {
             this.requestTime();
           })
       }
-    }
-    .margin({
+    }*/
+/*    .margin({
       top: CommonConstants.list_margin_top
     })
     .width(CommonConstants.list_width)
@@ -179,7 +271,7 @@ export default struct AddItem {
     .backgroundColor($r('app.color.white'))
     .borderRadius(CommonConstants.border_radius)
     .justifyContent(FlexAlign.Center)
-    .alignItems(HorizontalAlign.Start)
+    .alignItems(HorizontalAlign.Start)*/
   }
 
   private requestTime() {
@@ -210,6 +302,7 @@ export default struct AddItem {
   }
 
   private addItem() {
+    this.requestTime()
     let result = DataModel.addData(new TodoItemModel(this.itemName, this.itemDisc, this.itemTime, '', false))
     if(result == -1) {
       promptAction.showToast({
diff --git a/entry/src/main/ets/view/ItemDetail.ets b/entry/src/main/ets/view/ItemDetail.ets
index 6798682768554c0148140d93e29834f515ff6028..59d9b878a03851382ffea42b510ecb326711485c 100644
--- a/entry/src/main/ets/view/ItemDetail.ets
+++ b/entry/src/main/ets/view/ItemDetail.ets
@@ -5,6 +5,7 @@ import TodoItemModel from '../viewmodel/TodoItemModel'
 import { promptAction } from '@kit.ArkUI'
 
 @Component
+@Preview
 export default struct ItemDetail {
   @Consume('localPageStack') LocalPageStack: NavPathStack
 
@@ -74,7 +75,7 @@ export default struct ItemDetail {
 
   @Builder
   MainPage() {
-    Column() {
+/*    Column() {
       Row() {
         Text('鍚嶅瓧')
           .fontSize(CommonConstants.detail_title_font_size)
@@ -184,6 +185,104 @@ export default struct ItemDetail {
       .borderRadius(CommonConstants.border_radius)
       .justifyContent(FlexAlign.Center)
       .alignItems(HorizontalAlign.Start)
+    }*/
+    Column() {
+      // 鍚嶅瓧琛�
+      Row() {
+        Text('鍚嶅瓧')
+          .fontSize(CommonConstants.detail_title_font_size)
+          .fontWeight(FontWeight.Bold)
+          .width(CommonConstants.detail_width)
+          .margin({ left: CommonConstants.detail_margin_Left })
+
+        Text(this.content.itemName)
+          .fontSize(CommonConstants.detail_font_size)
+          .width(CommonConstants.detail_width)
+          .textAlign(TextAlign.Start)
+          .margin({ left: 10 }) // 澧炲姞宸︿晶闂磋窛锛岄伩鍏嶆枃鏈お鎸�
+      }
+      .margin({ top: CommonConstants.list_margin_top })
+      .width(CommonConstants.list_width)
+      .height(CommonConstants.name_height)
+      .backgroundColor($r('app.color.white'))
+      .borderRadius(CommonConstants.border_radius)
+      .justifyContent(FlexAlign.Start)
+
+
+      // 鎻忚堪琛�
+      Column() {
+        Row() {
+          Text('鎻忚堪')
+            .fontSize(CommonConstants.detail_title_font_size)
+            .fontWeight(FontWeight.Bold)
+            .width(CommonConstants.detail_width)
+            .margin({ left: CommonConstants.detail_margin_Left })
+
+          Text(this.content.itemDisc)
+            .fontSize(CommonConstants.detail_font_size)
+            .width(CommonConstants.detail_width)
+            .textAlign(TextAlign.Start)
+            .margin({ left: 10 })
+            .maxLines(3) // 闄愬埗鏈€澶ц鏁帮紝閬垮厤鎻忚堪杩囬暱
+        }
+        .margin({ top: CommonConstants.list_margin_top })
+        .width(CommonConstants.list_width)
+        .height(CommonConstants.disc_height)
+        .backgroundColor($r('app.color.white'))
+        .borderRadius(CommonConstants.border_radius)
+        .justifyContent(FlexAlign.Start)
+
+      }
+
+      // 鏃堕棿琛�
+      Column() {
+        Row() {
+          Text('鏃堕棿')
+            .fontSize(CommonConstants.detail_title_font_size)
+            .fontWeight(FontWeight.Bold)
+            .width(CommonConstants.detail_width)
+            .margin({ left: CommonConstants.detail_margin_Left })
+
+          Text(this.content.itemTime)
+            .fontSize(CommonConstants.detail_font_size)
+            .width(CommonConstants.detail_width)
+            .textAlign(TextAlign.Start)
+            .margin({ left: 10 })
+        }
+        .margin({ top: CommonConstants.list_margin_top })
+        .width(CommonConstants.list_width)
+        .height(CommonConstants.time_height)
+        .backgroundColor($r('app.color.white'))
+        .borderRadius(CommonConstants.border_radius)
+        .justifyContent(FlexAlign.Start)
+
+      }
+
+      // 濡傛灉宸插畬鎴愶紝鏄剧ず瀹屾垚鏃堕棿
+      if (this.content.isCompleted) {
+        Column() {
+          Row() {
+            Text('瀹屾垚鏃堕棿')
+              .fontSize(CommonConstants.detail_title_font_size)
+              .fontWeight(FontWeight.Bold)
+              .width(CommonConstants.detail_width)
+              .margin({ left: CommonConstants.detail_margin_Left })
+
+            Text(this.content.completeTime)
+              .fontSize(CommonConstants.detail_font_size)
+              .width(CommonConstants.detail_width)
+              .textAlign(TextAlign.Start)
+              .margin({ left: 10 })
+          }
+        }
+        .margin({ top: CommonConstants.list_margin_top })
+        .width(CommonConstants.list_width)
+        .height(CommonConstants.time_height)
+        .backgroundColor($r('app.color.white'))
+        .borderRadius(CommonConstants.border_radius)
+        .justifyContent(FlexAlign.Start)
+        .alignItems(HorizontalAlign.Start)
+      }
     }
 
   }