diff --git a/build-profile.json5 b/build-profile.json5
index 644ea9e7a686741ee72b2a14178524f888f325b0..18bb8e0ef331561cd8deab5f981b69f2cd36c8b6 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -5,22 +5,23 @@
         "name": "default",
         "type": "HarmonyOS",
         "material": {
-          "certpath": "/Users/jiazeyu/.ohos/config/auto_debug_arkui-demo-app_com.gudaoessay.arkuicomponentdemo_30086000576523321.cer",
-          "storePassword": "0000001B93D8B9D37AC189665E5E24953A4316C049934C4FC65C42BDB713191E674ECFF03E924639BF62A6",
+          "certpath": "/Users/edy/.ohos/config/default_ArkUI_Component_hmGBPwC2hkuZjCyjmot0ixzQg3dRymRT9gE2XAWCLnI=.cer",
+          "storePassword": "0000001BFD2C34B0F97898368AA1A279BB828B4CB6CBA8215686BC0568DED36B22C6BC9020C85AF55E682A",
           "keyAlias": "debugKey",
-          "keyPassword": "0000001B899C5D6FA9DEB42699A72C9ED292B4E8A11EC7AB1EBBD1E03976574B3ACD7987DC8732408EB315",
-          "profile": "/Users/jiazeyu/.ohos/config/auto_debug_arkui-demo-app_com.gudaoessay.arkuicomponentdemo_30086000576523321.p7b",
+          "keyPassword": "0000001BC91023CB57E6F04FFB2316AD0E5AC55EB04C9554C16AA20E58C46E3B88AA3C84279CE5B52800B5",
+          "profile": "/Users/edy/.ohos/config/default_ArkUI_Component_hmGBPwC2hkuZjCyjmot0ixzQg3dRymRT9gE2XAWCLnI=.p7b",
           "signAlg": "SHA256withECDSA",
-          "storeFile": "/Users/jiazeyu/.ohos/config/auto_debug_arkui-demo-app_com.gudaoessay.arkuicomponentdemo_30086000576523321.p12"
+          "storeFile": "/Users/edy/.ohos/config/default_ArkUI_Component_hmGBPwC2hkuZjCyjmot0ixzQg3dRymRT9gE2XAWCLnI=.p12"
         }
       }
     ],
-    "compileSdkVersion": 9,
-    "compatibleSdkVersion": 9,
     "products": [
       {
         "name": "default",
         "signingConfig": "default",
+        "compileSdkVersion": "4.1.0(11)",
+        "compatibleSdkVersion": "4.1.0(11)",
+        "runtimeOS": "HarmonyOS",
       }
     ]
   },
diff --git a/entry/build-profile.json5 b/entry/build-profile.json5
index 20c75049f2d45e57d267899b6547c79fb6aa84c1..f8f03407f77914b43168aeca6bb0929efd6700b4 100644
--- a/entry/build-profile.json5
+++ b/entry/build-profile.json5
@@ -4,8 +4,7 @@
   },
   "targets": [
     {
-      "name": "default",
-      "runtimeOS": "HarmonyOS"
+      "name": "default"
     },
     {
       "name": "ohosTest",
diff --git a/entry/src/main/ets/bean/NameAddressObj.ets b/entry/src/main/ets/bean/NameAddressObj.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e5cb8160e268abdf359bacb9dc972402c5d39734
--- /dev/null
+++ b/entry/src/main/ets/bean/NameAddressObj.ets
@@ -0,0 +1,10 @@
+/**
+ *
+ * @author 王洪贺
+ * @date 2024/1/31 16:04
+ */
+
+export class NameAddressObj {
+    name: string = ''
+    address: string = ''
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/ValueObject.ets b/entry/src/main/ets/bean/ValueObject.ets
new file mode 100644
index 0000000000000000000000000000000000000000..48821cec5543339227902dbf8c8549e09fe9944f
--- /dev/null
+++ b/entry/src/main/ets/bean/ValueObject.ets
@@ -0,0 +1,9 @@
+/**
+ *
+ * @author 王洪贺
+ * @date 2024/1/31 15:51
+ */
+
+export class ValueObject {
+  value: string = ''
+}
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/basicCom.ets b/entry/src/main/ets/bean/basicCom.ets
index f07dda760c6a1e91362494a976a3767bae265073..64100b1ad481d6d44abc68a3591acbc665cd1e6d 100644
--- a/entry/src/main/ets/bean/basicCom.ets
+++ b/entry/src/main/ets/bean/basicCom.ets
@@ -1,15 +1,25 @@
-const basicCom: {
-  name: string,
-  address: string
-}[] = [
-  { name: 'Button 按钮',
-    address: 'pages/basic/ButtonPage' },
-
-  { name: 'Text 文本',
-    address: 'pages/basic/TextPage' },
-
-  { name: 'Divider 分隔器',
-    address: 'pages/basic/DividerPage' },
+import { NameAddressObj } from './NameAddressObj'
+
+const basicCom: Array<NameAddressObj> = [
+  {
+    name: 'Button 按钮',
+    address: 'pages/basic/ButtonPage'
+  },
+
+  {
+    name: 'Text 文本',
+    address: 'pages/basic/TextPage'
+  },
+
+  {
+    name: 'Divider 分隔器',
+    address: 'pages/basic/DividerPage'
+  },
 ]
 
+export class BasicComItem {
+  name: string = ''
+  address: string = ''
+}
+
 export default basicCom
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/containCom.ets b/entry/src/main/ets/bean/containCom.ets
index 186251c625ab94025eeab3cdcfa5f125f96bbc8e..46efd775703d4923e367f850b9352c917e9782a3 100644
--- a/entry/src/main/ets/bean/containCom.ets
+++ b/entry/src/main/ets/bean/containCom.ets
@@ -1,45 +1,75 @@
-const containCom: {
-  name: string,
-  address: string
-}[] = [
-  { name: 'Column 垂直容器',
-    address: 'pages/container/ColumnPage' },
+import { NameAddressObj } from './NameAddressObj'
 
-  { name: 'Row 水平容器',
-    address: 'pages/container/RowPage' },
+const containCom: Array<NameAddressObj> = [
+  {
+    name: 'Column 垂直容器',
+    address: 'pages/container/ColumnPage'
+  },
 
-  { name: 'Stack 堆叠容器',
-    address: 'pages/container/StackPage' },
+  {
+    name: 'Row 水平容器',
+    address: 'pages/container/RowPage'
+  },
 
-  { name: 'Flex 弹性布局',
-    address: 'pages/container/FlexPage' },
+  {
+    name: 'Stack 堆叠容器',
+    address: 'pages/container/StackPage'
+  },
 
-  { name: 'List 列表容器',
-    address: 'pages/container/ListPage' },
+  {
+    name: 'Flex 弹性布局',
+    address: 'pages/container/FlexPage'
+  },
 
-  { name: 'Grid 网格容器',
-    address: 'pages/container/GridPage' },
+  {
+    name: 'List 列表容器',
+    address: 'pages/container/ListPage'
+  },
 
-  { name: 'Swiper 滑块视图',
-    address: 'pages/container/SwiperPage' },
+  {
+    name: 'Grid 网格容器',
+    address: 'pages/container/GridPage'
+  },
 
-  { name: 'Tabs 页签',
-    address: 'pages/container/TabsPage' },
+  {
+    name: 'Swiper 滑块视图',
+    address: 'pages/container/SwiperPage'
+  },
 
-  { name: 'Badge 信息标记',
-    address: 'pages/container/BadgePage' },
+  {
+    name: 'Tabs 页签',
+    address: 'pages/container/TabsPage'
+  },
 
-  { name: 'Counter 计数器',
-    address: 'pages/container/CounterPage' },
+  {
+    name: 'Badge 信息标记',
+    address: 'pages/container/BadgePage'
+  },
 
-  { name: 'Panel 滑动面板',
-    address: 'pages/container/PanelPage' },
+  {
+    name: 'Counter 计数器',
+    address: 'pages/container/CounterPage'
+  },
 
-  { name: 'Scroll 滚动容器',
-    address: 'pages/container/ScrollPage' },
+  {
+    name: 'Panel 滑动面板',
+    address: 'pages/container/PanelPage'
+  },
 
-  { name: 'SideBarContainer 侧边栏',
-    address: 'pages/container/SideBarContainerPage' },
+  {
+    name: 'Scroll 滚动容器',
+    address: 'pages/container/ScrollPage'
+  },
+
+  {
+    name: 'SideBarContainer 侧边栏',
+    address: 'pages/container/SideBarContainerPage'
+  },
 ]
 
+export class ContainComItem {
+  name: string = ''
+  address: string = ''
+}
+
 export default containCom
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/dialogCom.ets b/entry/src/main/ets/bean/dialogCom.ets
index 34e0b7dc4529cd4e961f0fc19c25ea0985c32ad2..24130cdd12ab33ba80c77a9a9756d48468e63a53 100644
--- a/entry/src/main/ets/bean/dialogCom.ets
+++ b/entry/src/main/ets/bean/dialogCom.ets
@@ -1,7 +1,6 @@
-const dialogCom: {
-  name: string,
-  address: string
-}[] = [
+import { NameAddressObj } from './NameAddressObj'
+
+const dialogCom: Array<NameAddressObj> = [
   { name: 'AlertDialog 警告弹窗',
     address: 'pages/dialog/AlertDialogPage' },
 
@@ -21,4 +20,9 @@ const dialogCom: {
     address: 'pages/dialog/TextPickerDialogPage' },
 ]
 
+
+export class DialogComItem {
+  name: string = ''
+  address: string = ''
+}
 export default dialogCom
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/funcCom.ets b/entry/src/main/ets/bean/funcCom.ets
index 433f1d84615f0d82dc0a3cde747b76d5c85d2388..531de713a2597b1e3903cb3e79770bfb14d72bdc 100644
--- a/entry/src/main/ets/bean/funcCom.ets
+++ b/entry/src/main/ets/bean/funcCom.ets
@@ -1,24 +1,41 @@
-const funcCom: {
-  name: string,
-  address: string
-}[] = [
-  { name: 'Menu 菜单',
-    address: 'pages/basic/MenuPage' },
+import { NameAddressObj } from './NameAddressObj'
 
-  { name: 'Search 搜索框',
-    address: 'pages/basic/SearchPage' },
+const funcCom: Array<NameAddressObj> = [
+  {
+    name: 'Menu 菜单',
+    address: 'pages/basic/MenuPage'
+  },
 
-  { name: 'TextClock 文本时钟',
-    address: 'pages/basic/TextClockPage' },
+  {
+    name: 'Search 搜索框',
+    address: 'pages/basic/SearchPage'
+  },
 
-  { name: 'TextTimer 计时器',
-    address: 'pages/basic/TextTimerPage' },
+  {
+    name: 'TextClock 文本时钟',
+    address: 'pages/basic/TextClockPage'
+  },
 
-  { name: 'Stepper 步骤导航器',
-    address: 'pages/basic/StepperPage' },
+  {
+    name: 'TextTimer 计时器',
+    address: 'pages/basic/TextTimerPage'
+  },
 
-  { name: 'PatternLock 密码锁',
-    address: 'pages/basic/PatternLockPage' },
+  {
+    name: 'Stepper 步骤导航器',
+    address: 'pages/basic/StepperPage'
+  },
+
+  {
+    name: 'PatternLock 密码锁',
+    address: 'pages/basic/PatternLockPage'
+  },
 ]
 
+
+export class FuncComItem {
+  name: string = ''
+  address: string = ''
+}
+
 export default funcCom
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/infoCom.ets b/entry/src/main/ets/bean/infoCom.ets
index 6fca6c6e5f105d67253c6be384de283eb58c1de5..00673ac3f24c8d6ff9139d61fc9f13d190bc146b 100644
--- a/entry/src/main/ets/bean/infoCom.ets
+++ b/entry/src/main/ets/bean/infoCom.ets
@@ -1,33 +1,55 @@
-const infoCom: {
-  name: string,
-  address: string
-}[] = [
-  { name: 'Image 图片',
-    address: 'pages/basic/ImagePage' },
-
-  { name: 'Span 行内文本',
-    address: 'pages/basic/SpanPage' },
-
-  { name: 'ImageAnimator 帧动画',
-    address: 'pages/basic/ImageAnimatorPage' },
-
-  { name: 'LoadingProgress 加载',
-    address: 'pages/basic/LoadingProgressPage' },
-
-  { name: 'Progress 进度条',
-    address: 'pages/basic/ProgressPage' },
-
-  { name: 'QRCode 二维码',
-    address: 'pages/basic/QRCodePage' },
-
-  { name: 'Marquee 跑马灯',
-    address: 'pages/basic/MarqueePage' },
-
-  { name: 'DataPanel 数据面板',
-    address: 'pages/basic/DataPanelPage' },
-
-  { name: 'Gauge 数据量规',
-    address: 'pages/basic/GaugePage' },
+import { NameAddressObj } from './NameAddressObj'
+
+const infoCom: Array<NameAddressObj> = [
+  {
+    name: 'Image 图片',
+    address: 'pages/basic/ImagePage'
+  },
+
+  {
+    name: 'Span 行内文本',
+    address: 'pages/basic/SpanPage'
+  },
+
+  {
+    name: 'ImageAnimator 帧动画',
+    address: 'pages/basic/ImageAnimatorPage'
+  },
+
+  {
+    name: 'LoadingProgress 加载',
+    address: 'pages/basic/LoadingProgressPage'
+  },
+
+  {
+    name: 'Progress 进度条',
+    address: 'pages/basic/ProgressPage'
+  },
+
+  {
+    name: 'QRCode 二维码',
+    address: 'pages/basic/QRCodePage'
+  },
+
+  {
+    name: 'Marquee 跑马灯',
+    address: 'pages/basic/MarqueePage'
+  },
+
+  {
+    name: 'DataPanel 数据面板',
+    address: 'pages/basic/DataPanelPage'
+  },
+
+  {
+    name: 'Gauge 数据量规',
+    address: 'pages/basic/GaugePage'
+  },
 ]
 
+export class InfoComItem {
+  name: string = ''
+  address: string = ''
+}
+
 export default infoCom
\ No newline at end of file
diff --git a/entry/src/main/ets/bean/inputCom.ets b/entry/src/main/ets/bean/inputCom.ets
index 52066fa97e7a26c2dbcf92f03f1dfee8201b4322..7460e57ff817ef048275619b744f0d4b72e28e9d 100644
--- a/entry/src/main/ets/bean/inputCom.ets
+++ b/entry/src/main/ets/bean/inputCom.ets
@@ -1,42 +1,70 @@
-const inputCom: {
-  name: string,
-  address: string
-}[] = [
-  { name: 'TextInput 单行文本输入',
-    address: 'pages/basic/TextInputPage' },
+import { NameAddressObj } from './NameAddressObj'
 
-  { name: 'TextArea 多行文本输入',
-    address: 'pages/basic/TextAreaPage' },
+const inputCom: Array<NameAddressObj> = [
+  {
+    name: 'TextInput 单行文本输入',
+    address: 'pages/basic/TextInputPage'
+  },
 
-  { name: 'Toggle 开关',
-    address: 'pages/basic/TogglePage' },
+  {
+    name: 'TextArea 多行文本输入',
+    address: 'pages/basic/TextAreaPage'
+  },
 
-  { name: 'Slider 滑动条',
-    address: 'pages/basic/SliderPage' },
+  {
+    name: 'Toggle 开关',
+    address: 'pages/basic/TogglePage'
+  },
 
-  { name: 'Rating 评分',
-    address: 'pages/basic/RatingPage' },
+  {
+    name: 'Slider 滑动条',
+    address: 'pages/basic/SliderPage'
+  },
 
-  { name: 'Select 下拉选择',
-    address: 'pages/basic/SelectPage' },
+  {
+    name: 'Rating 评分',
+    address: 'pages/basic/RatingPage'
+  },
 
-  { name: 'TextPicker 选择文本',
-    address: 'pages/basic/TextPickerPage' },
+  {
+    name: 'Select 下拉选择',
+    address: 'pages/basic/SelectPage'
+  },
 
-  { name: 'Radio 单选框',
-    address: 'pages/basic/RadioPage' },
+  {
+    name: 'TextPicker 选择文本',
+    address: 'pages/basic/TextPickerPage'
+  },
 
-  { name: 'Checkbox 多选框',
-    address: 'pages/basic/CheckboxPage' },
+  {
+    name: 'Radio 单选框',
+    address: 'pages/basic/RadioPage'
+  },
 
-  { name: 'CheckboxGroup 多选框组',
-    address: 'pages/basic/CheckboxGroupPage' },
+  {
+    name: 'Checkbox 多选框',
+    address: 'pages/basic/CheckboxPage'
+  },
 
-  { name: 'DatePicker 日期选择',
-    address: 'pages/basic/DatePickerPage' },
+  {
+    name: 'CheckboxGroup 多选框组',
+    address: 'pages/basic/CheckboxGroupPage'
+  },
 
-  { name: 'TimePicker 时间选择',
-    address: 'pages/basic/TimePickerPage' },
+  {
+    name: 'DatePicker 日期选择',
+    address: 'pages/basic/DatePickerPage'
+  },
+
+  {
+    name: 'TimePicker 时间选择',
+    address: 'pages/basic/TimePickerPage'
+  },
 ]
 
+export class InputComItem {
+  name: string = ''
+  address: string = ''
+}
+
 export default inputCom
\ No newline at end of file
diff --git a/entry/src/main/ets/component/controller/SelectCustom.ets b/entry/src/main/ets/component/controller/SelectCustom.ets
index d32dad0153e8d792876f97207da6cf0071ab3e69..b0bbc28d8d51fdefd5c7e1569a46694b434d9ca1 100644
--- a/entry/src/main/ets/component/controller/SelectCustom.ets
+++ b/entry/src/main/ets/component/controller/SelectCustom.ets
@@ -1,9 +1,11 @@
+import { ValueObject } from '../../bean/ValueObject'
+
 @Component
 export default struct SelectCustom {
   @Prop name: string
-  @Link valuesList: { value: string }[]
-  @Link itemsList: any[]
-  @Link selectItem: any
+  @Link valuesList: Array<ValueObject>
+  @Link itemsList: Array<Object>
+  @Link selectItem: Object
 
   build() {
     Column() {
@@ -23,4 +25,5 @@ export default struct SelectCustom {
     }
     .width('100%')
   }
-}
\ No newline at end of file
+}
+
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 4c701f1c39ab0b9aafa83242e0c69f290a1c2ca8..dabd12bbec20e3052ccbc73f8c301d179f11c867 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -6,6 +6,7 @@ import containCom from '../bean/containCom'
 import dialogCom from '../bean/dialogCom'
 import ListTitle from '../component/list/ListTitle'
 import ListItemCustom from '../component/list/ListItemCustom'
+import { NameAddressObj } from '../bean/NameAddressObj'
 
 @Entry
 @Component
@@ -31,10 +32,7 @@ struct Index {
           ListTitle({ title: '基础组件' })
         }
 
-        ForEach(basicCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(basicCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
@@ -45,10 +43,7 @@ struct Index {
           ListTitle({ title: '信息展示' })
         }
 
-        ForEach(infoCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(infoCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
@@ -59,10 +54,7 @@ struct Index {
           ListTitle({ title: '信息输入' })
         }
 
-        ForEach(inputCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(inputCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
@@ -73,10 +65,7 @@ struct Index {
           ListTitle({ title: '功能控件' })
         }
 
-        ForEach(funcCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(funcCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
@@ -87,10 +76,7 @@ struct Index {
           ListTitle({ title: '容器' })
         }
 
-        ForEach(containCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(containCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
@@ -101,10 +87,7 @@ struct Index {
           ListTitle({ title: '弹窗' })
         }
 
-        ForEach(dialogCom, (item: {
-          name: string,
-          address: string
-        }) => {
+        ForEach(dialogCom, (item: NameAddressObj) => {
           ListItem() {
             ListItemCustom({ name: item.name as string, address: item.address as string })
           }
diff --git a/entry/src/main/ets/pages/basic/ButtonPage.ets b/entry/src/main/ets/pages/basic/ButtonPage.ets
index f3c1ac703d71c79888fc463fdfae5b636bc69be6..04875dd6d0f8024bd1f5ba218dcc9f1b4cfeffc2 100644
--- a/entry/src/main/ets/pages/basic/ButtonPage.ets
+++ b/entry/src/main/ets/pages/basic/ButtonPage.ets
@@ -4,37 +4,38 @@ import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
 import SliderCustom from '../../component/controller/SliderCustom'
 
+
+export class ValueObject {
+  value: string = ''
+}
+
 @Entry
 @Component
 struct ButtonPage {
   @State selectTab: number = 1
-
   //type
   @State type: ButtonType = ButtonType.Capsule
   @State typeArr: ButtonType[] = [
-  ButtonType.Capsule,
-  ButtonType.Circle,
-  ButtonType.Normal
+    ButtonType.Capsule,
+    ButtonType.Circle,
+    ButtonType.Normal
   ]
-  @State typeValueArr: { value: string }[] = [
+  @State typeValueArr: Array<ValueObject> = [
     { value: 'Capsule' },
     { value: 'Circle' },
     { value: 'Normal' }
   ]
-
   //stateEffect
   @State stateEffect: boolean = true
-
   //width
   @State widthValue: number = 80
-
   //height
   @State heightValue: number = 50
-
   //fontSize
   @State sizeValue: number = 14
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'Button 按钮' })
       TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
@@ -62,16 +63,16 @@ struct ButtonPage {
 
           Column() {
             //tab 1
-            Column () {
+            Column() {
               SelectCustom({ name: 'type', valuesList: $typeValueArr, itemsList: $typeArr, selectItem: $type })
               Divider()
                 .color($r('app.color.line_grey'))
               SwitchCustom({ name: 'stateEffect', isOn: $stateEffect })
             }
             .visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
-            
+
             //tab 2
-            Column(){
+            Column() {
               SliderCustom({ name: 'width', value: $widthValue, min: 50, max: 180 })
               Divider()
                 .color($r('app.color.line_grey'))
diff --git a/entry/src/main/ets/pages/basic/CheckboxGroupPage.ets b/entry/src/main/ets/pages/basic/CheckboxGroupPage.ets
index c490b5d616a1499bf17ba76375c00629ef3516a7..88126af6bc284ba4700b8f5d00f84ce5dd6f0051 100644
--- a/entry/src/main/ets/pages/basic/CheckboxGroupPage.ets
+++ b/entry/src/main/ets/pages/basic/CheckboxGroupPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SliderCustom from '../../component/controller/SliderCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -18,7 +19,7 @@ struct CheckboxPage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
diff --git a/entry/src/main/ets/pages/basic/CheckboxPage.ets b/entry/src/main/ets/pages/basic/CheckboxPage.ets
index 3adf3efbfb108f86764212f680657283bbf98e52..5e46eedd45ae58b2f2c7564519ec30d79ad5e418 100644
--- a/entry/src/main/ets/pages/basic/CheckboxPage.ets
+++ b/entry/src/main/ets/pages/basic/CheckboxPage.ets
@@ -10,14 +10,14 @@ struct CheckboxPage {
   //color
   @State selectColor: Color = Color.Black
   @State colorList: Color[] = [
-  Color.Black,
-  Color.Blue,
-  Color.Brown,
-  Color.Green,
-  Color.Orange,
-  Color.Grey
+    Color.Black,
+    Color.Blue,
+    Color.Brown,
+    Color.Green,
+    Color.Orange,
+    Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
@@ -25,11 +25,11 @@ struct CheckboxPage {
     { value: 'Orange' },
     { value: 'Grey' }
   ]
-
   //width
   @State widthValue: number = 24
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'CheckBox 多选框' })
       TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
@@ -82,8 +82,9 @@ struct CheckboxPage {
               })
             }
             .visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
+
             //tab 2
-            Column(){
+            Column() {
               SliderCustom({ name: 'width', value: $widthValue, min: 12, max: 48 })
             }
             .visibility(this.selectTab === 2 ? Visibility.Visible : Visibility.None)
@@ -109,4 +110,9 @@ struct CheckboxPage {
     .width('100%')
     .backgroundColor($r('app.color.background_grey'))
   }
+}
+
+
+export class ValueObject {
+  value: string = ''
 }
\ No newline at end of file
diff --git a/entry/src/main/ets/pages/basic/DataPanelPage.ets b/entry/src/main/ets/pages/basic/DataPanelPage.ets
index 67244d4069d611bf74aecd2d786cddbfe1d6a138..f00fc0200cb446ba1bd5aa3bf062307714d36293 100644
--- a/entry/src/main/ets/pages/basic/DataPanelPage.ets
+++ b/entry/src/main/ets/pages/basic/DataPanelPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from './ButtonPage'
 
 
 @Entry
@@ -19,7 +20,7 @@ struct DataPanelPage {
   //type
   @State type: DataPanelType = DataPanelType.Circle
   @State typeList: DataPanelType[] = [DataPanelType.Circle, DataPanelType.Line]
-  @State typeValueList: { value: string }[] = [{ value: 'Circle' }, { value: 'Line' }]
+  @State typeValueList: Array<ValueObject> = [{ value: 'Circle' }, { value: 'Line' }]
 
   //closeEffect
   @State closeEffect: boolean = false
diff --git a/entry/src/main/ets/pages/basic/DatePickerPage.ets b/entry/src/main/ets/pages/basic/DatePickerPage.ets
index d57cbc268d7f11f0d968e144a178015737a764ea..07f7965b6177204c859a6c128c826c33098ae50d 100644
--- a/entry/src/main/ets/pages/basic/DatePickerPage.ets
+++ b/entry/src/main/ets/pages/basic/DatePickerPage.ets
@@ -8,17 +8,15 @@ import SliderCustom from '../../component/controller/SliderCustom'
 struct DatePickerPage {
   @State selectTab: number = 1
   @State date: string = '选择日期'
-
   //lunar
   @State lunar: boolean = false
-
   //width
   @State widthValue: number = 300
-
   //height
   @State heightValue: number = 200
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'DatePicker 日期选择' })
       TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
@@ -35,7 +33,7 @@ struct DatePickerPage {
           Column() {
             DatePicker()
               .lunar(this.lunar)
-              .onChange((value: DatePickerResult) => {
+              .onDateChange(value => {
                 this.changeHandle(value)
               })
               .width(this.widthValue)
@@ -85,8 +83,9 @@ struct DatePickerPage {
     .backgroundColor($r('app.color.background_grey'))
   }
 
-  changeHandle(value: DatePickerResult) {
-    this.date = `${value.year}年${value.month + 1}月${value.day}日`
+  changeHandle(value: Date) {
+
+    this.date = `${value.getFullYear()}年${value.getMonth()  + 1}月${value.getDay()}日`
   }
 }
 
diff --git a/entry/src/main/ets/pages/basic/DividerPage.ets b/entry/src/main/ets/pages/basic/DividerPage.ets
index dac2d1ea84fe4ffcb6cefa5ee38616c8ba54f8c4..2b4bfccb33e97cf82612310b3dfd3077c193e8d2 100644
--- a/entry/src/main/ets/pages/basic/DividerPage.ets
+++ b/entry/src/main/ets/pages/basic/DividerPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -15,7 +16,7 @@ struct DividerPage {
   //color
   @State selectColor: Color = Color.Black
   @State colorList: Color[] = [Color.Black, Color.Blue, Color.Brown, Color.Green, Color.Orange, Color.Grey]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
@@ -30,7 +31,7 @@ struct DividerPage {
   //lineCap
   @State selectLineCap: LineCapStyle = LineCapStyle.Butt
   @State lineCapList: LineCapStyle[] = [LineCapStyle.Butt, LineCapStyle.Round, LineCapStyle.Square]
-  @State lineCapValueList: { value: string }[] = [{ value: 'Butt' }, { value: 'Round' }, { value: 'Square' }]
+  @State lineCapValueList: Array<ValueObject> = [{ value: 'Butt' }, { value: 'Round' }, { value: 'Square' }]
 
   //width
   @State widthValue: number = 200
diff --git a/entry/src/main/ets/pages/basic/ImageAnimatorPage.ets b/entry/src/main/ets/pages/basic/ImageAnimatorPage.ets
index 504c154d5e486b50dee4228191f4eaf67b9d1fb4..fe52ec3a334eba3b5687b911b6e7d12650213acb 100644
--- a/entry/src/main/ets/pages/basic/ImageAnimatorPage.ets
+++ b/entry/src/main/ets/pages/basic/ImageAnimatorPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -33,7 +34,7 @@ struct ImageAnimatorPage {
   AnimationStatus.Paused,
   AnimationStatus.Stopped
   ]
-  @State stateValueList: { value: string }[] = [
+  @State stateValueList: Array<ValueObject> = [
     { value: 'Initial' },
     { value: 'Running' },
     { value: 'Paused' },
@@ -54,7 +55,7 @@ struct ImageAnimatorPage {
   FillMode.Backwards,
   FillMode.Both,
   ]
-  @State fillModeValueList: { value: string }[] = [
+  @State fillModeValueList: Array<ValueObject> = [
     { value: 'None' },
     { value: 'Forwards' },
     { value: 'Backwards' },
diff --git a/entry/src/main/ets/pages/basic/ImagePage.ets b/entry/src/main/ets/pages/basic/ImagePage.ets
index ec4aad6506cc860fcdc143cf17c1ff143177651a..0be56789742f901ac42af06f5f2a7d8cb83e37f5 100644
--- a/entry/src/main/ets/pages/basic/ImagePage.ets
+++ b/entry/src/main/ets/pages/basic/ImagePage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -18,7 +19,7 @@ struct ImagePage {
   ImageFit.ScaleDown,
   ImageFit.None
   ]
-  @State objectFitValueList: { value: string }[] = [
+  @State objectFitValueList: Array<ValueObject> = [
     { value: 'Auto' },
     { value: 'Contain' },
     { value: 'Cover' },
@@ -35,7 +36,7 @@ struct ImagePage {
   ImageRepeat.Y,
   ImageRepeat.XY
   ]
-  @State objectRepeatValueList: { value: string }[] = [
+  @State objectRepeatValueList: Array<ValueObject> = [
     { value: 'NoRepeat' },
     { value: 'X' },
     { value: 'Y' },
@@ -48,7 +49,7 @@ struct ImagePage {
   ImageRenderMode.Original,
   ImageRenderMode.Template
   ]
-  @State renderModeValueList: { value: string }[] = [
+  @State renderModeValueList: Array<ValueObject> = [
     { value: 'Original' },
     { value: 'Template' }
   ]
diff --git a/entry/src/main/ets/pages/basic/LoadingProgressPage.ets b/entry/src/main/ets/pages/basic/LoadingProgressPage.ets
index 999ebf5d207b0354f63779b6894a07e7c5ba2af3..5c947691984201c55bbeda041ad58229dd9752f4 100644
--- a/entry/src/main/ets/pages/basic/LoadingProgressPage.ets
+++ b/entry/src/main/ets/pages/basic/LoadingProgressPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SliderCustom from '../../component/controller/SliderCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -10,7 +11,7 @@ struct LoadingProgressPage {
   //color
   @State selectColor: Color = Color.Black
   @State colorList: Color[] = [Color.Black, Color.Blue, Color.Brown, Color.Green, Color.Orange, Color.Grey]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
diff --git a/entry/src/main/ets/pages/basic/MenuPage.ets b/entry/src/main/ets/pages/basic/MenuPage.ets
index 53c2477f59189c8a3cf5038fd3cf50346242483c..32dc0aaae378e71a1d239212fcdeb1f441fbcc4d 100644
--- a/entry/src/main/ets/pages/basic/MenuPage.ets
+++ b/entry/src/main/ets/pages/basic/MenuPage.ets
@@ -35,7 +35,6 @@ struct MenuPage {
     }
     .width(this.widthValue)
     .height(this.heightValue)
-    .fontSize(this.fontSize)
 
   }
 
diff --git a/entry/src/main/ets/pages/basic/PatternLockPage.ets b/entry/src/main/ets/pages/basic/PatternLockPage.ets
index 932ac69789d172c980e94cf0ee938a70ba320bcb..2b26fd2752e68867a1cc8290a6640c5750d18da2 100644
--- a/entry/src/main/ets/pages/basic/PatternLockPage.ets
+++ b/entry/src/main/ets/pages/basic/PatternLockPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -19,7 +20,7 @@ struct PatternLockPage {
   Color.Green,
   Color.Orange
   ]
-  @State backgroundValueColorList: { value: string }[] = [
+  @State backgroundValueColorList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Gray' },
     { value: 'Black' },
@@ -45,7 +46,7 @@ struct PatternLockPage {
   Color.Green,
   Color.Orange
   ]
-  @State regularColorValueList: { value: string }[] = [
+  @State regularColorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Gray' },
     { value: 'Blue' },
@@ -64,7 +65,7 @@ struct PatternLockPage {
   Color.Green,
   Color.Orange
   ]
-  @State selectedColorValueList: { value: string }[] = [
+  @State selectedColorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Gray' },
     { value: 'Blue' },
@@ -83,7 +84,7 @@ struct PatternLockPage {
   Color.Green,
   Color.Orange
   ]
-  @State activeColorValueList: { value: string }[] = [
+  @State activeColorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Gray' },
     { value: 'Blue' },
@@ -102,7 +103,7 @@ struct PatternLockPage {
   Color.Green,
   Color.Orange
   ]
-  @State pathColorValueList: { value: string }[] = [
+  @State pathColorValueList: Array<ValueObject> = [
     { value: 'Gray' },
     { value: 'Black' },
     { value: 'Blue' },
diff --git a/entry/src/main/ets/pages/basic/ProgressPage.ets b/entry/src/main/ets/pages/basic/ProgressPage.ets
index 402818aede76d5fe364900d5a7cdef8133148024..3416c169e9cef286c3d0792f45c1d40d80df4d00 100644
--- a/entry/src/main/ets/pages/basic/ProgressPage.ets
+++ b/entry/src/main/ets/pages/basic/ProgressPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -24,7 +25,7 @@ struct ProgressPage {
   ProgressType.ScaleRing,
   ProgressType.Capsule
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Linear' },
     { value: 'Ring' },
     { value: 'Eclipse' },
@@ -43,7 +44,7 @@ struct ProgressPage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
@@ -62,7 +63,7 @@ struct ProgressPage {
   Color.Green,
   Color.Orange
   ]
-  @State backgroundColorValueList: { value: string }[] = [
+  @State backgroundColorValueList: Array<ValueObject> = [
     { value: 'Gray' },
     { value: 'Black' },
     { value: 'Blue' },
diff --git a/entry/src/main/ets/pages/basic/QRCodePage.ets b/entry/src/main/ets/pages/basic/QRCodePage.ets
index 430ad664f03c96f21ad9825c005a54d956c9588f..25d6a9cbdce7e4f5ed6742ad94bb1fd5feb7509f 100644
--- a/entry/src/main/ets/pages/basic/QRCodePage.ets
+++ b/entry/src/main/ets/pages/basic/QRCodePage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -21,7 +22,7 @@ struct QRCodePage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
@@ -41,7 +42,7 @@ struct QRCodePage {
   Color.Green,
   Color.Orange
   ]
-  @State backgroundColorValueList: { value: string }[] = [
+  @State backgroundColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Gray' },
     { value: 'Black' },
diff --git a/entry/src/main/ets/pages/basic/RadioPage.ets b/entry/src/main/ets/pages/basic/RadioPage.ets
index 73d475dd6df982d5752b11e0d83ba4fee1b63631..1472a7243e4d7240442e4f61fc7ef9c0d32911d7 100644
--- a/entry/src/main/ets/pages/basic/RadioPage.ets
+++ b/entry/src/main/ets/pages/basic/RadioPage.ets
@@ -1,6 +1,7 @@
 import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -16,7 +17,7 @@ struct RadioPage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Black' },
     { value: 'Blue' },
     { value: 'Brown' },
diff --git a/entry/src/main/ets/pages/basic/SearchPage.ets b/entry/src/main/ets/pages/basic/SearchPage.ets
index d331b8ddc0f30dadd07f33640a8b12cf3f85bea4..a1ac3415684d261fec171c66e33b5f383df74092 100644
--- a/entry/src/main/ets/pages/basic/SearchPage.ets
+++ b/entry/src/main/ets/pages/basic/SearchPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -10,7 +11,7 @@ struct SearchPage {
   //color
   @State selectColor: Color = Color.Grey
   @State colorList: Color[] = [Color.Grey, Color.Black, Color.Blue, Color.Brown, Color.Green, Color.Orange]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -26,7 +27,7 @@ struct SearchPage {
   CopyOptions.InApp,
   CopyOptions.LocalDevice
   ]
-  @State copyOptionValueList: { value: string }[] = [
+  @State copyOptionValueList: Array<ValueObject> = [
     { value: 'None' },
     { value: 'InApp' },
     { value: 'LocalDevice' }
diff --git a/entry/src/main/ets/pages/basic/SelectPage.ets b/entry/src/main/ets/pages/basic/SelectPage.ets
index ae3d1321d5c8cb752ce1299019efbc33cbdbc464..16d3683c3f35c918b1c3f595ce4f67c9c128e7d4 100644
--- a/entry/src/main/ets/pages/basic/SelectPage.ets
+++ b/entry/src/main/ets/pages/basic/SelectPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -17,7 +18,7 @@ struct SelectPage {
     .backgroundColor($r('app.color.start_window_background'))
   }
 
-  private value: { value: string }[] = [
+  private value: Array<ValueObject> = [
     { value: '选项1' },
     { value: '选项2' },
     { value: '选项3' },
@@ -37,7 +38,7 @@ struct SelectPage {
   Color.Green,
   Color.Orange,
   ]
-  @State fontColorValueList: { value: string }[] = [
+  @State fontColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -57,7 +58,7 @@ struct SelectPage {
   Color.Green,
   Color.Orange,
   ]
-  @State selectedOptionBgColorValueList: { value: string }[] = [
+  @State selectedOptionBgColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Grey' },
     { value: 'Black' },
@@ -77,7 +78,7 @@ struct SelectPage {
   Color.Green,
   Color.Orange,
   ]
-  @State optionFontColorValueList: { value: string }[] = [
+  @State optionFontColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -96,7 +97,7 @@ struct SelectPage {
   Color.Green,
   Color.Orange,
   ]
-  @State selectedOptionFontColorValueList: { value: string }[] = [
+  @State selectedOptionFontColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -116,7 +117,7 @@ struct SelectPage {
   Color.Green,
   Color.Orange,
   ]
-  @State optionBgColorValueList: { value: string }[] = [
+  @State optionBgColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Grey' },
     { value: 'Black' },
diff --git a/entry/src/main/ets/pages/basic/SliderPage.ets b/entry/src/main/ets/pages/basic/SliderPage.ets
index eadd6a288f596366bd52c8179c926148e1072f87..1a0a36e90cf8ffc6fc45512fba0fcbd0b845546e 100644
--- a/entry/src/main/ets/pages/basic/SliderPage.ets
+++ b/entry/src/main/ets/pages/basic/SliderPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -21,7 +22,7 @@ struct SliderPage {
   SliderStyle.OutSet,
   SliderStyle.InSet
   ]
-  @State styleValueList: { value: string }[] = [
+  @State styleValueList: Array<ValueObject> = [
     { value: 'OutSet' },
     { value: 'InSet' }
   ]
@@ -32,7 +33,7 @@ struct SliderPage {
   Axis.Horizontal,
   Axis.Vertical
   ]
-  @State directValueList: { value: string }[] = [
+  @State directValueList: Array<ValueObject> = [
     { value: 'Horizontal' },
     { value: 'Vertical' }
   ]
@@ -51,7 +52,7 @@ struct SliderPage {
   Color.Orange,
   Color.Grey
   ]
-  @State blockColorValueList: { value: string }[] = [
+  @State blockColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Blue' },
     { value: 'Black' },
@@ -71,7 +72,7 @@ struct SliderPage {
   Color.Orange,
   Color.Grey
   ]
-  @State trackColorValueList: { value: string }[] = [
+  @State trackColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Blue' },
     { value: 'Black' },
@@ -91,7 +92,7 @@ struct SliderPage {
   Color.Orange,
   Color.Grey
   ]
-  @State selectedColorValueList: { value: string }[] = [
+  @State selectedColorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
diff --git a/entry/src/main/ets/pages/basic/SpanPage.ets b/entry/src/main/ets/pages/basic/SpanPage.ets
index 58a1bf14e66a412c0301de989b4500f3d8c764ef..815c6c1b97a27e57b2c10364cddb27d065bc424c 100644
--- a/entry/src/main/ets/pages/basic/SpanPage.ets
+++ b/entry/src/main/ets/pages/basic/SpanPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -16,7 +17,7 @@ struct SpanPage {
   TextDecorationType.LineThrough,
   TextDecorationType.None
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Underline' },
     { value: 'Overline' },
     { value: 'LineThrough' },
@@ -33,7 +34,7 @@ struct SpanPage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
@@ -52,7 +53,7 @@ struct SpanPage {
   TextCase.LowerCase,
   TextCase.UpperCase,
   ]
-  @State textCaseValueList: { value: string }[] = [
+  @State textCaseValueList: Array<ValueObject> = [
     { value: 'Normal' },
     { value: 'LowerCase' },
     { value: 'UpperCase' }
diff --git a/entry/src/main/ets/pages/basic/StepperPage.ets b/entry/src/main/ets/pages/basic/StepperPage.ets
index 2f3e83396533325224b7f08b1c580db83f7d0f1f..e3745b7a36b0dd55768850e56dbd3e63b34f4207 100644
--- a/entry/src/main/ets/pages/basic/StepperPage.ets
+++ b/entry/src/main/ets/pages/basic/StepperPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 
 @Entry
@@ -17,7 +18,7 @@ struct StepperPage {
   ItemState.Waiting,
   ItemState.Skip,
   ]
-  @State statusValueList: { value: string }[] = [
+  @State statusValueList: Array<ValueObject> = [
     { value: 'Normal' },
     { value: 'Disabled' },
     { value: 'Waiting' },
diff --git a/entry/src/main/ets/pages/basic/TextAreaPage.ets b/entry/src/main/ets/pages/basic/TextAreaPage.ets
index b60b3d2b5ebcedb1d624f2b6abb22dbab32f55c3..63d40b972d27547b1fde2d9a804e380241f1099d 100644
--- a/entry/src/main/ets/pages/basic/TextAreaPage.ets
+++ b/entry/src/main/ets/pages/basic/TextAreaPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -20,7 +21,7 @@ struct TextAreaPage {
   Color.Green,
   Color.Orange
   ]
-  @State placeholderColorValueList: { value: string }[] = [
+  @State placeholderColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Blue' },
     { value: 'Black' },
@@ -39,7 +40,7 @@ struct TextAreaPage {
   TextAlign.Start,
   TextAlign.End
   ]
-  @State textAlignValueList: { value: string }[] = [
+  @State textAlignValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' }
@@ -55,7 +56,7 @@ struct TextAreaPage {
   Color.Orange,
   Color.Grey
   ]
-  @State caretColorValueList: { value: string }[] = [
+  @State caretColorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
diff --git a/entry/src/main/ets/pages/basic/TextInputPage.ets b/entry/src/main/ets/pages/basic/TextInputPage.ets
index 6080e5e9cc08ff08e0ffb393a07edbf15e7aef61..2cfd675e4ec54ec137ef9effca9ea0b7361be8ea 100644
--- a/entry/src/main/ets/pages/basic/TextInputPage.ets
+++ b/entry/src/main/ets/pages/basic/TextInputPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -20,7 +21,7 @@ struct TextInputPage {
   InputType.Email,
   InputType.Password
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Normal' },
     { value: 'Number' },
     { value: 'PhoneNumber' },
@@ -38,7 +39,7 @@ struct TextInputPage {
   Color.Green,
   Color.Orange
   ]
-  @State placeholderColorValueList: { value: string }[] = [
+  @State placeholderColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Blue' },
     { value: 'Black' },
@@ -59,7 +60,7 @@ struct TextInputPage {
   EnterKeyType.Next,
   EnterKeyType.Done
   ]
-  @State enterKeyTypeValueList: { value: string }[] = [
+  @State enterKeyTypeValueList: Array<ValueObject> = [
     { value: 'Go' },
     { value: 'Search' },
     { value: 'Send' },
@@ -77,7 +78,7 @@ struct TextInputPage {
   Color.Orange,
   Color.Grey
   ]
-  @State caretColorValueList: { value: string }[] = [
+  @State caretColorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
@@ -98,7 +99,7 @@ struct TextInputPage {
   TextInputStyle.Default,
   TextInputStyle.Inline
   ]
-  @State styleValueList: { value: string }[] = [
+  @State styleValueList: Array<ValueObject> = [
     { value: 'Default' },
     { value: 'Inline' }
   ]
@@ -110,7 +111,7 @@ struct TextInputPage {
   TextAlign.Start,
   TextAlign.End
   ]
-  @State textAlignValueList: { value: string }[] = [
+  @State textAlignValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' }
diff --git a/entry/src/main/ets/pages/basic/TextPage.ets b/entry/src/main/ets/pages/basic/TextPage.ets
index 81b7fa58ce96035d4dab9973bd402c9607bdd54c..faa103594832afe61b43e0bf95aad8679f35d594 100644
--- a/entry/src/main/ets/pages/basic/TextPage.ets
+++ b/entry/src/main/ets/pages/basic/TextPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
@@ -15,7 +16,7 @@ struct TextPage {
   TextAlign.Start,
   TextAlign.End
   ]
-  @State textAlignValueList : { value: string }[] = [
+  @State textAlignValueList : Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' }
@@ -31,7 +32,7 @@ struct TextPage {
   TextOverflow.Clip,
   TextOverflow.Ellipsis,
   ]
-  @State textOverflowValueList: { value: string }[] = [
+  @State textOverflowValueList: Array<ValueObject> = [
     { value: 'None' },
     { value: 'Clip' },
     { value: 'Ellipsis' }
@@ -46,7 +47,7 @@ struct TextPage {
   TextDecorationType.LineThrough,
   TextDecorationType.None
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Underline' },
     { value: 'Overline' },
     { value: 'LineThrough' },
@@ -63,7 +64,7 @@ struct TextPage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
@@ -85,7 +86,7 @@ struct TextPage {
   TextCase.LowerCase,
   TextCase.UpperCase,
   ]
-  @State textCaseValueList: { value: string }[] = [
+  @State textCaseValueList: Array<ValueObject> = [
     { value: 'Normal' },
     { value: 'LowerCase' },
     { value: 'UpperCase' }
diff --git a/entry/src/main/ets/pages/basic/TextPickerPage.ets b/entry/src/main/ets/pages/basic/TextPickerPage.ets
index f5c52ae6053d009296d1953f9933bb974172f888..5c994707f27efa4fb3d3aa669ce35511743a2e8f 100644
--- a/entry/src/main/ets/pages/basic/TextPickerPage.ets
+++ b/entry/src/main/ets/pages/basic/TextPickerPage.ets
@@ -9,17 +9,15 @@ struct TextPickerPage {
   private select: number = 1
   private fruits: string[] = ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6']
   @State text: string = ''
-
   //defaultPickerItemHeight
   @State defaultPickerItemHeight: number = 40
-
   //width
   @State widthValue: number = 300
-
   //height
   @State heightValue: number = 300
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'TextPicker 滑动选择' })
       TitleTab({ selectTab: $selectTab, interface: false, property: true, common: false })
@@ -38,7 +36,7 @@ struct TextPickerPage {
               .fontColor($r('app.color.font_light'))
               .margin({ bottom: 20 })
             TextPicker({ range: this.fruits, selected: this.select })
-              .onChange((value: string, index: number) => {
+              .onChange((value, index) => {
                 this.text = `index : ${index} - value : ${value}`
               })
               .defaultPickerItemHeight(this.defaultPickerItemHeight)
diff --git a/entry/src/main/ets/pages/basic/TogglePage.ets b/entry/src/main/ets/pages/basic/TogglePage.ets
index 4f156fea0ef2527ab20ae8a78a11589e97610ea3..6ea28297d735125816d1b0dede9946cc1e7fa6a8 100644
--- a/entry/src/main/ets/pages/basic/TogglePage.ets
+++ b/entry/src/main/ets/pages/basic/TogglePage.ets
@@ -2,38 +2,36 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from './ButtonPage'
 
 @Entry
 @Component
 struct TogglePage {
   @State selectTab: number = 0
-
-  @State isOn : boolean = true
-
+  @State isOn: boolean = true
   //type
   @State type: ToggleType = ToggleType.Switch
   @State typeList: ToggleType[] = [
-  ToggleType.Switch,
-  ToggleType.Checkbox,
-  ToggleType.Button
+    ToggleType.Switch,
+    ToggleType.Checkbox,
+    ToggleType.Button
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Switch' },
     { value: 'Checkbox' },
     { value: 'Button' },
   ]
-
   //selectedColor
   @State selectedColor: Color = Color.Grey
   @State selectedColorList: Color[] = [
-  Color.Grey,
-  Color.Blue,
-  Color.Black,
-  Color.Brown,
-  Color.Green,
-  Color.Orange
+    Color.Grey,
+    Color.Blue,
+    Color.Black,
+    Color.Brown,
+    Color.Green,
+    Color.Orange
   ]
-  @State selectedColorValueList: { value: string }[] = [
+  @State selectedColorValueList: Array<ValueObject> = [
     { value: 'Grey' },
     { value: 'Blue' },
     { value: 'Black' },
@@ -41,19 +39,18 @@ struct TogglePage {
     { value: 'Green' },
     { value: 'Orange' }
   ]
-
   //switchPointColor
   @State switchPointColor: Color = Color.White
   @State switchPointColorList: Color[] = [
-  Color.White,
-  Color.Grey,
-  Color.Blue,
-  Color.Black,
-  Color.Brown,
-  Color.Green,
-  Color.Orange
+    Color.White,
+    Color.Grey,
+    Color.Blue,
+    Color.Black,
+    Color.Brown,
+    Color.Green,
+    Color.Orange
   ]
-  @State switchPointColorValueList: { value: string }[] = [
+  @State switchPointColorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Grey' },
     { value: 'Blue' },
@@ -62,15 +59,13 @@ struct TogglePage {
     { value: 'Green' },
     { value: 'Orange' }
   ]
-
-
   //width
   @State widthValue: number = 72
-
   //height
   @State heightValue: number = 30
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'Toggle 开关' })
       TitleTab({ selectTab: $selectTab, interface: true, property: true, common: true })
@@ -85,12 +80,12 @@ struct TogglePage {
         Column() {
           Blank()
           Column() {
-            Toggle({type:this.type,isOn:this.isOn})
+            Toggle({ type: this.type, isOn: this.isOn })
               .selectedColor(this.selectedColor)
               .switchPointColor(this.switchPointColor)
               .width(this.widthValue)
               .height(this.heightValue)
-              .onChange((isOn:boolean)=>{
+              .onChange((isOn: boolean) => {
                 this.isOn = isOn
               })
           }
@@ -102,10 +97,10 @@ struct TogglePage {
             // tab 0
             Column() {
               SelectCustom({
-                name:'type',
-                selectItem:$type,
-                itemsList:$typeList,
-                valuesList:$typeValueList
+                name: 'type',
+                selectItem: $type,
+                itemsList: $typeList,
+                valuesList: $typeValueList
               })
             }
             .visibility(this.selectTab === 0 ? Visibility.Visible : Visibility.None)
@@ -113,16 +108,16 @@ struct TogglePage {
             // tab 1
             Column() {
               SelectCustom({
-                name:'selectedColor',
-                selectItem:$selectedColor,
-                itemsList:$selectedColorList,
-                valuesList:$selectedColorValueList
+                name: 'selectedColor',
+                selectItem: $selectedColor,
+                itemsList: $selectedColorList,
+                valuesList: $selectedColorValueList
               })
               SelectCustom({
-                name:'switchPointColor',
-                selectItem:$switchPointColor,
-                itemsList:$switchPointColorList,
-                valuesList:$switchPointColorValueList
+                name: 'switchPointColor',
+                selectItem: $switchPointColor,
+                itemsList: $switchPointColorList,
+                valuesList: $switchPointColorValueList
               })
             }
             .visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
diff --git a/entry/src/main/ets/pages/container/BadgePage.ets b/entry/src/main/ets/pages/container/BadgePage.ets
index 0b0c53ecaa555536637861d82010905b673174d6..ed2ef3833252161a4f6ecd44164f5f681998c014 100644
--- a/entry/src/main/ets/pages/container/BadgePage.ets
+++ b/entry/src/main/ets/pages/container/BadgePage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -15,7 +16,7 @@ struct BadgePage {
   BadgePosition.Right,
   BadgePosition.Left
   ]
-  @State badgePositionValueList: { value: string }[] = [
+  @State badgePositionValueList: Array<ValueObject> = [
     { value: 'RightTop' },
     { value: 'Right' },
     { value: 'Left' }
@@ -32,7 +33,7 @@ struct BadgePage {
   Color.Orange,
   Color.Grey
   ]
-  @State colorValueList: { value: string }[] = [
+  @State colorValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -59,7 +60,7 @@ struct BadgePage {
   Color.Orange,
   Color.Grey
   ]
-  @State badgeColorValueList: { value: string }[] = [
+  @State badgeColorValueList: Array<ValueObject> = [
     { value: 'Red' },
     { value: 'Black' },
     { value: 'Blue' },
diff --git a/entry/src/main/ets/pages/container/ColumnPage.ets b/entry/src/main/ets/pages/container/ColumnPage.ets
index 848392076cfe9eead720b83d143f3b2c07a1ef18..569d32215d5c7004c0586fb6196cffc25c98ac96 100644
--- a/entry/src/main/ets/pages/container/ColumnPage.ets
+++ b/entry/src/main/ets/pages/container/ColumnPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -18,7 +19,7 @@ struct ColumnPage {
   HorizontalAlign.Start,
   HorizontalAlign.End
   ]
-  @State alignItemsValueList: { value: string }[] = [
+  @State alignItemsValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
@@ -34,7 +35,7 @@ struct ColumnPage {
   FlexAlign.SpaceAround,
   FlexAlign.SpaceEvenly
   ]
-  @State justifyContentValueList: { value: string }[] = [
+  @State justifyContentValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
diff --git a/entry/src/main/ets/pages/container/FlexPage.ets b/entry/src/main/ets/pages/container/FlexPage.ets
index eca996f554797e8d3e6234d15c5a2d4335675393..08c10ba0ccae8b0bfbf38615bcb8c3d4e69d2f12 100644
--- a/entry/src/main/ets/pages/container/FlexPage.ets
+++ b/entry/src/main/ets/pages/container/FlexPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -16,7 +17,7 @@ struct FlexPage {
   FlexDirection.Column,
   FlexDirection.ColumnReverse,
   ]
-  @State directValueList: { value: string }[] = [
+  @State directValueList: Array<ValueObject> = [
     { value: 'Row' },
     { value: 'RowReverse' },
     { value: 'Column' },
@@ -30,7 +31,7 @@ struct FlexPage {
   FlexWrap.Wrap,
   FlexWrap.WrapReverse
   ]
-  @State wrapValueList: { value: string }[] = [
+  @State wrapValueList: Array<ValueObject> = [
     { value: 'NoWrap' },
     { value: 'Wrap' },
     { value: 'WrapReverse' }
@@ -46,7 +47,7 @@ struct FlexPage {
   FlexAlign.SpaceAround,
   FlexAlign.SpaceEvenly
   ]
-  @State justifyContentValueList: { value: string }[] = [
+  @State justifyContentValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
@@ -65,7 +66,7 @@ struct FlexPage {
   ItemAlign.Stretch,
   ItemAlign.Baseline
   ]
-  @State alignItemsValueList: { value: string }[] = [
+  @State alignItemsValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
@@ -84,7 +85,7 @@ struct FlexPage {
   FlexAlign.SpaceAround,
   FlexAlign.SpaceEvenly
   ]
-  @State alignContentValueList: { value: string }[] = [
+  @State alignContentValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
diff --git a/entry/src/main/ets/pages/container/ListPage.ets b/entry/src/main/ets/pages/container/ListPage.ets
index 73100f942f43c53a53f164f8476521e4e47146ea..20fb0768bfe8218e36202e73c22b6a5a99b9cb94 100644
--- a/entry/src/main/ets/pages/container/ListPage.ets
+++ b/entry/src/main/ets/pages/container/ListPage.ets
@@ -2,12 +2,12 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
 struct ListPage {
   @State selectTab: number = 0
-
   //element
   @State @Watch('onNumberChange') listNumber: number = 3
   @State listValue: string[] = ['1', '2', '3']
@@ -21,25 +21,23 @@ struct ListPage {
 
   //space
   @State space: number = 0
-
   //listDirection
-  @State listDirection : Axis = Axis.Vertical
-  @State listDirectionList : Axis[] = [
+  @State listDirection: Axis = Axis.Vertical
+  @State listDirectionList: Axis[] = [
     Axis.Vertical,
     Axis.Horizontal
   ]
-  @State listDirectionValueList : {value :string }[] = [
-    {value:'Vertical'},
-    {value:'Horizontal'}
+  @State listDirectionValueList: Array<ValueObject> = [
+    { value: 'Vertical' },
+    { value: 'Horizontal' }
   ]
-
   //width
   @State widthValue: number = 200
-
   //height
   @State heightValue: number = 200
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'List 列表' })
       TitleTab({ selectTab: $selectTab, interface: true, property: true, common: true })
@@ -67,7 +65,7 @@ struct ListPage {
             })
             .margin({ bottom: 15 })
 
-            List({space:this.space}) {
+            List({ space: this.space }) {
               ForEach(this.listValue, (value: string) => {
                 ListItem() {
                   Row() {
@@ -94,13 +92,14 @@ struct ListPage {
               SliderCustom({ name: 'space', value: $space, min: 0, max: 30 })
             }
             .visibility(this.selectTab === 0 ? Visibility.Visible : Visibility.None)
+
             // tab 1
             Column() {
               SelectCustom({
-                name:'listDirection',
-                selectItem:$listDirection,
-                itemsList:$listDirectionList,
-                valuesList:$listDirectionValueList
+                name: 'listDirection',
+                selectItem: $listDirection,
+                itemsList: $listDirectionList,
+                valuesList: $listDirectionValueList
               })
             }
             .visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
diff --git a/entry/src/main/ets/pages/container/RowPage.ets b/entry/src/main/ets/pages/container/RowPage.ets
index cb178afe9b5d2ac544e875f397cfb670a9b711cb..b521c619b1d13b5bc014850939adb509ca29aa86 100644
--- a/entry/src/main/ets/pages/container/RowPage.ets
+++ b/entry/src/main/ets/pages/container/RowPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -18,7 +19,7 @@ struct RowPage {
   VerticalAlign.Top,
   VerticalAlign.Bottom
   ]
-  @State alignItemsValueList: { value: string }[] = [
+  @State alignItemsValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Top' },
     { value: 'Bottom' },
@@ -34,7 +35,7 @@ struct RowPage {
   FlexAlign.SpaceAround,
   FlexAlign.SpaceEvenly
   ]
-  @State justifyContentValueList: { value: string }[] = [
+  @State justifyContentValueList: Array<ValueObject> = [
     { value: 'Center' },
     { value: 'Start' },
     { value: 'End' },
diff --git a/entry/src/main/ets/pages/container/ScrollPage.ets b/entry/src/main/ets/pages/container/ScrollPage.ets
index e6449c5dc05c0755b2c23fac057bace110bf6fbc..7d47a28499a0dcd48478f482d7772c10c2818b58 100644
--- a/entry/src/main/ets/pages/container/ScrollPage.ets
+++ b/entry/src/main/ets/pages/container/ScrollPage.ets
@@ -2,6 +2,7 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -29,7 +30,7 @@ struct ScrollPage {
   Color.Orange,
   Color.Grey
   ]
-  @State scrollBarColorValueList: { value: string }[] = [
+  @State scrollBarColorValueList: Array<ValueObject> = [
     { value: 'Blue' },
     { value: 'Black' },
     { value: 'Brown' },
@@ -48,7 +49,7 @@ struct ScrollPage {
     EdgeEffect.Spring,
     EdgeEffect.Fade
   ]
-  @State edgeEffectValueList : { value : string }[] = [
+  @State edgeEffectValueList : Array<ValueObject> = [
     {value:'None'},
     {value:'Spring'},
     {value:'Fade'},
diff --git a/entry/src/main/ets/pages/container/SideBarContainerPage.ets b/entry/src/main/ets/pages/container/SideBarContainerPage.ets
index ea335ea4c2a0dcc55600ef12e7a3f63a9fc718e5..5a40804bf7ecff658c69963703261deb54ec8529 100644
--- a/entry/src/main/ets/pages/container/SideBarContainerPage.ets
+++ b/entry/src/main/ets/pages/container/SideBarContainerPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -12,41 +13,37 @@ struct SideBarContainerPage {
   selectedIcon: Resource = $r("app.media.ic_public_folder_filled")
   @State arr: number[] = [1, 2, 3]
   @State current: number = 1
-
   //--> interface
   //type
   @State type: SideBarContainerType = SideBarContainerType.Embed
   @State typeList: SideBarContainerType[] = [
-  SideBarContainerType.Embed,
-  SideBarContainerType.Overlay
+    SideBarContainerType.Embed,
+    SideBarContainerType.Overlay
   ]
-  @State typeValueList: { value: string }[] = [
+  @State typeValueList: Array<ValueObject> = [
     { value: 'Embed' },
     { value: 'Overlay' }
   ]
-
   //--> property
   //showSideBar
   @State showSideBar: boolean = true
-
   //showControlButton
   @State showControlButton: boolean = true
-
   //sideBarWidth
   @State sideBarWidth: number = 60
-
   //sideBarPosition
   @State sideBarPosition: SideBarPosition = SideBarPosition.Start
   @State sideBarPositionList: SideBarPosition[] = [
-  SideBarPosition.Start,
-  SideBarPosition.End
+    SideBarPosition.Start,
+    SideBarPosition.End
   ]
-  @State sideBarPositionValueList: { value: string }[] = [
+  @State sideBarPositionValueList: Array<ValueObject> = [
     { value: 'Start' },
     { value: 'End' }
   ]
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'SideBarContainer 侧边栏' })
       TitleTab({ selectTab: $selectTab, interface: true, property: true, common: false })
@@ -65,7 +62,7 @@ struct SideBarContainerPage {
               Column() {
                 Column()
                   .height(50)
-                ForEach(this.arr, (item, _) => {
+                ForEach(this.arr, (item: number, _) => {
                   Column({ space: 5 }) {
                     Image(this.current === item ? this.selectedIcon : this.normalIcon)
                       .width(32)
@@ -79,7 +76,7 @@ struct SideBarContainerPage {
                   .onClick(() => {
                     this.current = item
                   })
-                }, item => item)
+                })
               }
               .width('100%')
               .justifyContent(FlexAlign.Start)
diff --git a/entry/src/main/ets/pages/container/StackPage.ets b/entry/src/main/ets/pages/container/StackPage.ets
index 7c0de967bb30525a04e66ee6a78761be53e0015f..9ea9b6fda35ed599658970a9d1b08095b14a1ba5 100644
--- a/entry/src/main/ets/pages/container/StackPage.ets
+++ b/entry/src/main/ets/pages/container/StackPage.ets
@@ -2,45 +2,43 @@ import TitleTab from '../../component/title/TitleTab'
 import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
 struct StackPage {
   @State selectTab: number = 1
-
   //alignContent
-  @State alignContent : Alignment = Alignment.Center
-  @State alignContentList :Alignment[] = [
-  Alignment.Center,
-  Alignment.Start,
-  Alignment.End,
-  Alignment.TopStart,
-  Alignment.Top,
-  Alignment.TopEnd,
-  Alignment.BottomStart,
-  Alignment.Bottom,
-  Alignment.BottomEnd
+  @State alignContent: Alignment = Alignment.Center
+  @State alignContentList: Alignment[] = [
+    Alignment.Center,
+    Alignment.Start,
+    Alignment.End,
+    Alignment.TopStart,
+    Alignment.Top,
+    Alignment.TopEnd,
+    Alignment.BottomStart,
+    Alignment.Bottom,
+    Alignment.BottomEnd
   ]
-
-  @State alignContentValueList : {value : string}[] = [
-    {value:'Center'},
-    {value:'Start'},
-    {value:'End'},
-    {value:'TopStart'},
-    {value:'Top'},
-    {value:'TopEnd'},
-    {value:'BottomStart'},
-    {value:'Bottom'},
-    {value:'BottomEnd'},
+  @State alignContentValueList: Array<ValueObject> = [
+    { value: 'Center' },
+    { value: 'Start' },
+    { value: 'End' },
+    { value: 'TopStart' },
+    { value: 'Top' },
+    { value: 'TopEnd' },
+    { value: 'BottomStart' },
+    { value: 'Bottom' },
+    { value: 'BottomEnd' },
   ]
-
   //width
   @State widthValue: number = 200
-
   //height
   @State heightValue: number = 200
 
-  @Builder pageTitle() {
+  @Builder
+  pageTitle() {
     Column() {
       Title({ pageTitle: 'Stack 堆叠容器' })
       TitleTab({ selectTab: $selectTab, interface: false, property: true, common: true })
@@ -56,14 +54,17 @@ struct StackPage {
           Blank()
           Column() {
             Stack({ alignContent: this.alignContent }) {
-              Column(){}
-                .width('90%')
-                .height('100%')
-                .backgroundColor($r('app.color.start_window_background'))
-              Column(){}
-                .width('50%')
-                .height('50%')
-                .backgroundColor($r('app.color.brand'))
+              Column() {
+              }
+              .width('90%')
+              .height('100%')
+              .backgroundColor($r('app.color.start_window_background'))
+
+              Column() {
+              }
+              .width('50%')
+              .height('50%')
+              .backgroundColor($r('app.color.brand'))
             }
             .width(this.widthValue)
             .height(this.heightValue)
@@ -75,10 +76,10 @@ struct StackPage {
             // tab 1
             Column() {
               SelectCustom({
-                name:'alignContent',
-                selectItem:$alignContent,
-                itemsList:$alignContentList,
-                valuesList:$alignContentValueList
+                name: 'alignContent',
+                selectItem: $alignContent,
+                itemsList: $alignContentList,
+                valuesList: $alignContentValueList
               })
             }
             .visibility(this.selectTab === 1 ? Visibility.Visible : Visibility.None)
diff --git a/entry/src/main/ets/pages/container/TabsPage.ets b/entry/src/main/ets/pages/container/TabsPage.ets
index 76dd6ea8d2df5d22d5ba861a01a31104071fc268..1078131c8cf268ba49e094f97737b3de152784a6 100644
--- a/entry/src/main/ets/pages/container/TabsPage.ets
+++ b/entry/src/main/ets/pages/container/TabsPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -15,7 +16,7 @@ struct TabsPage {
   BarPosition.Start,
   BarPosition.End
   ]
-  @State barPositionValueList: { value: string }[] = [
+  @State barPositionValueList: Array<ValueObject> = [
     { value: 'Start' },
     { value: 'End' }
   ]
@@ -32,7 +33,7 @@ struct TabsPage {
   BarMode.Scrollable,
   BarMode.Fixed
   ]
-  @State barModeValueList: { value: string }[] = [
+  @State barModeValueList: Array<ValueObject> = [
     { value: 'Scrollable' },
     { value: 'Fixed' }
   ]
diff --git a/entry/src/main/ets/pages/dialog/ActionSheetPage.ets b/entry/src/main/ets/pages/dialog/ActionSheetPage.ets
index a52b98f3c9953061c15a36a0b150cc062e135bca..712701e43def73b6a471f2e633e64311b05a92f1 100644
--- a/entry/src/main/ets/pages/dialog/ActionSheetPage.ets
+++ b/entry/src/main/ets/pages/dialog/ActionSheetPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
 import SliderCustom from '../../component/controller/SliderCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -26,7 +27,7 @@ struct ActionSheetPage {
   DialogAlignment.Bottom,
   DialogAlignment.BottomEnd,
   ]
-  @State alignmentValueList: { value: string }[] = [
+  @State alignmentValueList: Array<ValueObject> = [
     { value: 'Default' },
     { value: 'TopStart' },
     { value: 'Top' },
diff --git a/entry/src/main/ets/pages/dialog/AlertDialogPage.ets b/entry/src/main/ets/pages/dialog/AlertDialogPage.ets
index e91538b679cebf1b1d8e7b7f55ff764766688888..96140f8f32cb98166807cad14dca3dd21e060968 100644
--- a/entry/src/main/ets/pages/dialog/AlertDialogPage.ets
+++ b/entry/src/main/ets/pages/dialog/AlertDialogPage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
 import SliderCustom from '../../component/controller/SliderCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -26,7 +27,7 @@ struct AlertDialogPage {
   DialogAlignment.Bottom,
   DialogAlignment.BottomEnd,
   ]
-  @State alignmentValueList : {value:string}[] = [
+  @State alignmentValueList : Array<ValueObject> = [
     {value :'Default'},
     {value :'TopStart'},
     {value :'Top'},
diff --git a/entry/src/main/ets/pages/dialog/CustomDialogPage.ets b/entry/src/main/ets/pages/dialog/CustomDialogPage.ets
index 4a858958ff20093932a1bdd57ba9099bfd0ce9a4..961b9603278ada53596c748ea06eb1bdaed937c4 100644
--- a/entry/src/main/ets/pages/dialog/CustomDialogPage.ets
+++ b/entry/src/main/ets/pages/dialog/CustomDialogPage.ets
@@ -4,8 +4,8 @@ import Title from '../../component/title/Title'
 @CustomDialog
 struct CustomDialogExample {
   controller : CustomDialogController
-  cancel: () => void
-  confirm: () => void
+  cancel?: () => void
+  confirm?: () => void
 
   build(){
     Column(){
diff --git a/entry/src/main/ets/pages/dialog/DatePickerDialogPage.ets b/entry/src/main/ets/pages/dialog/DatePickerDialogPage.ets
index a600de0958a9a8892c0854de3af6466c0ce6e3b9..573d03b464b39a9c6f5a6646fee0566021ceb301 100644
--- a/entry/src/main/ets/pages/dialog/DatePickerDialogPage.ets
+++ b/entry/src/main/ets/pages/dialog/DatePickerDialogPage.ets
@@ -42,7 +42,7 @@ struct DatePickerDialogPage {
                   selected: this.selectedDate,
                   lunar: this.lunar,
                   onAccept: (value: DatePickerResult) => {
-                    this.value = `已选择 ${value.year} 年 ${value.month + 1} 月 ${value.day} 日`
+                    this.value = `已选择 ${value.year} 年 ${value.month||0 + 1} 月 ${value.day} 日`
                   }
                 })
               })
diff --git a/entry/src/main/ets/pages/draw/CirclePage.ets b/entry/src/main/ets/pages/draw/CirclePage.ets
index 43ed8b344bb91723a0e0bd365834fe671877a657..1f3b7105f049622152b15fbb82182cf5865e9e1d 100644
--- a/entry/src/main/ets/pages/draw/CirclePage.ets
+++ b/entry/src/main/ets/pages/draw/CirclePage.ets
@@ -3,6 +3,7 @@ import Title from '../../component/title/Title'
 import SliderCustom from '../../component/controller/SliderCustom'
 import SelectCustom from '../../component/controller/SelectCustom'
 import SwitchCustom from '../../component/controller/SwitchCustom'
+import { ValueObject } from '../basic/ButtonPage'
 
 @Entry
 @Component
@@ -23,7 +24,7 @@ struct CirclePage {
   Color.Orange,
   Color.Grey
   ]
-  @State fillValueList: { value: string }[] = [
+  @State fillValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Black' },
     { value: 'Blue' },
@@ -48,7 +49,7 @@ struct CirclePage {
   Color.Orange,
   Color.Grey
   ]
-  @State strokeValueList: { value: string }[] = [
+  @State strokeValueList: Array<ValueObject> = [
     { value: 'White' },
     { value: 'Black' },
     { value: 'Blue' },
diff --git a/hvigor/hvigor-config.json5 b/hvigor/hvigor-config.json5
index 0450bec27475c1853a73087292c8a8d946880600..0b5647c97e634a2746cae72de8f7b6a26692fd87 100644
--- a/hvigor/hvigor-config.json5
+++ b/hvigor/hvigor-config.json5
@@ -1,6 +1,6 @@
 {
-  "hvigorVersion": "2.4.2",
+  "hvigorVersion": "4.0.2",
   "dependencies": {
-    "@ohos/hvigor-ohos-plugin": "2.4.2"
+    "@ohos/hvigor-ohos-plugin": "4.0.2"
   }
-}
+}
\ No newline at end of file
diff --git a/oh-package-lock.json5 b/oh-package-lock.json5
index bc40219d5aa573d750a40c2948a91e8bc9a36abc..127be263b0333eb44cb06796071621825edbec9e 100644
--- a/oh-package-lock.json5
+++ b/oh-package-lock.json5
@@ -1,13 +1,15 @@
 {
-  "lockfileVersion": 1,
+  "lockfileVersion": 3,
   "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
   "specifiers": {
     "@ohos/hypium@1.0.6": "@ohos/hypium@1.0.6"
   },
   "packages": {
     "@ohos/hypium@1.0.6": {
+      "integrity": "sha512-bb3DWeWhYrFqj9mPFV3yZQpkm36kbcK+YYaeY9g292QKSjOdmhEIQR2ULPvyMsgSR4usOBf5nnYrDmaCCXirgQ==",
       "resolved": "https://repo.harmonyos.com/ohpm/@ohos/hypium/-/hypium-1.0.6.tgz",
-      "integrity": "sha512-bb3DWeWhYrFqj9mPFV3yZQpkm36kbcK+YYaeY9g292QKSjOdmhEIQR2ULPvyMsgSR4usOBf5nnYrDmaCCXirgQ=="
+      "shasum": "3f5fed65372633233264b3447705b0831dfe7ea1",
+      "registryType": "ohpm"
     }
   }
 }
\ No newline at end of file