diff --git a/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets b/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
index 118ba0102d2d24d48af5bfdfb219b89e8f41db14..7f71e4a8439d533c58b9f147a25c7617a19e6b4e 100644
--- a/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
+++ b/code/BasicFeature/Graphics/DisplaySoloist/entry/src/main/ets/pages/Index.ets
@@ -84,7 +84,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId30', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId30', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext1 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -110,7 +110,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId60', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId60', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext2 = xComponentContext as XComponentContext;
           }).width('640px')
@@ -136,7 +136,7 @@ struct Index {
             }
           }).margin(4)
 
-        XComponent({ id: 'xcomponentId120', type: 'surface', libraryname: 'entry' })
+        XComponent({ id: 'xcomponentId120', type: XComponentType.SURFACE, libraryname: 'entry' })
           .onLoad((xComponentContext) => {
             this.xComponentContext3 = xComponentContext as XComponentContext;
           }).width('640px')