feat: add chat messages component

entry/src/main/cangjie/src/components/chat/ChatMessage.cj

@@ -8,10 +8,15 @@ import ohos.component.*
 import ohos.state_macro_manage.*
 import ohos.state_manage.*
 import ohos.base.*
+import ohos_app_cangjie_entry.components.chat.chatMessages.*
 
 public enum EChatSource {
     | ME
     | YOU
+
+    operator func == (right: EChatSource) {
+
+    }
 }
 
 @Component
@@ -21,73 +26,10 @@ public class ChatMessage {
     @Prop
     var source: EChatSource
 
-    @State
-    var radiusMap: HashMap<String, Length> = HashMap<String, Length>()
-
-    protected func aboutToAppear() {
-        this.radiusMap = this.messageRadius()
-    }
-
-    func fontColor() {
-        match (this.source) {
-            case EChatSource.ME => Color.WHITE
-            case EChatSource.YOU => Color.BLACK
-        }
-    }
-
-    func bgColor() {
-        match (this.source) {
-            case EChatSource.YOU => Color.WHITE
-            case EChatSource.ME => Color.BLUE
-        }
-    }
-
-    func orient() {
-        match (this.source) {
-            case EChatSource.YOU => FlexAlign.Start
-            case EChatSource.ME => FlexAlign.End
-        }
-    }
-
-    func messageRadius(): HashMap<String, Length> {
-        match (this.source) {
-            case EChatSource.YOU => HashMap<String, Length>(
-                [
-                    ("topLeft", 12.vp),
-                    ("topRight", 12.vp),
-                    ("bottomLeft", 0.vp),
-                    ("bottomRight", 12.vp)
-                ]
-            )
-            case EChatSource.ME => HashMap<String, Length>(
-                [
-                    ("topLeft", 12.vp),
-                    ("topRight", 12.vp),
-                    ("bottomLeft", 12.vp),
-                    ("bottomRight", 0.vp)
-                ]
-            )
-        }
-    }
-
     func build() {
-        Row() {
+        if  (this.source == EChatSource.ME) {
-            Row() {
+            ChatMessageMe(message: this.message)}
-                Text(message)
+            else {ChatMessageYou(message: this.message)}
-                .fontColor(this.fontColor())
-                .backgroundColor(this.bgColor())
-                .padding(top: 8, right: 16,bottom: 8, left: 16)
-                .borderRadius(
-                    topLeft: this.radiusMap['topLeft'],
-                    topRight: this.radiusMap['topRight'],
-                    bottomLeft: this.radiusMap['bottomLeft'],
-                    bottomRight: this.radiusMap['bottomRight'],
-                )
         }
-            .width(60.percent)
-            .justifyContent(this.orient())
-        }
-        .width(100.percent)
-        .justifyContent(this.orient())
     }
 }

entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj

@@ -0,0 +1,41 @@
+package ohos_app_cangjie_entry.components.chat.chatMessages
+
+import std.collection.*
+import ohos.component.*
+import ohos.state_macro_manage.*
+import ohos.state_manage.*
+import ohos.base.*
+
+@Component
+public class ChatMessageMe {
+    let fontColor: Color = Color.WHITE
+    let bgColor: Color = Color.BLUE
+    let orient: FlexAlign = FlexAlign.End
+
+    @Prop
+    var message: String
+
+    @State
+    var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
+        [
+            ("topLeft", 12.vp),
+            ("topRight", 12.vp),
+            ("bottomLeft", 12.vp),
+            ("bottomRight", 0.vp)
+        ]
+    )
+
+    func build() {
+        Row() {
+            Row() {
+                Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16,
+                    bottom: 8, left: 16).borderRadius(
+                    topLeft: this.radiusMap['topLeft'],
+                    topRight: this.radiusMap['topRight'],
+                    bottomLeft: this.radiusMap['bottomLeft'],
+                    bottomRight: this.radiusMap['bottomRight'],
+                )
+            }.width(60.percent).justifyContent(this.orient)
+        }.width(100.percent).justifyContent(this.orient)
+    }
+}

entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj

@@ -0,0 +1,44 @@
+/**
+ * Created on 2024/9/13
+ */
+package ohos_app_cangjie_entry.components.chat.chatMessages
+
+import std.collection.*
+import ohos.component.*
+import ohos.state_macro_manage.*
+import ohos.state_manage.*
+import ohos.base.*
+
+@Component
+public class ChatMessageSys {
+    let fontColor: Color = Color.BLACK
+    let bgColor: Color = Color.WHITE
+    let orient: FlexAlign = FlexAlign.Start
+
+    @Prop
+    var message: String
+
+    @State
+    var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
+        [
+            ("topLeft", 12.vp),
+            ("topRight", 12.vp),
+            ("bottomLeft", 0.vp),
+            ("bottomRight", 12.vp)
+        ]
+    )
+
+    func build() {
+        Row() {
+            Row() {
+                Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16,
+                    bottom: 8, left: 16).borderRadius(
+                    topLeft: this.radiusMap['topLeft'],
+                    topRight: this.radiusMap['topRight'],
+                    bottomLeft: this.radiusMap['bottomLeft'],
+                    bottomRight: this.radiusMap['bottomRight'],
+                )
+            }.width(60.percent).justifyContent(this.orient)
+        }.width(100.percent).justifyContent(this.orient)
+    }
+}

entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj

@@ -0,0 +1,44 @@
+/**
+ * Created on 2024/9/13
+ */
+package ohos_app_cangjie_entry.components.chat.chatMessages
+
+import std.collection.*
+import ohos.component.*
+import ohos.state_macro_manage.*
+import ohos.state_manage.*
+import ohos.base.*
+
+@Component
+public class ChatMessageYou {
+    let fontColor: Color = Color.BLACK
+    let bgColor: Color = Color.WHITE
+    let orient: FlexAlign = FlexAlign.Start
+
+    @Prop
+    var message: String
+
+    @State
+    var radiusMap: HashMap<String, Length> = HashMap<String, Length>(
+        [
+            ("topLeft", 12.vp),
+            ("topRight", 12.vp),
+            ("bottomLeft", 0.vp),
+            ("bottomRight", 12.vp)
+        ]
+    )
+
+    func build() {
+        Row() {
+            Row() {
+                Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16,
+                    bottom: 8, left: 16).borderRadius(
+                    topLeft: this.radiusMap['topLeft'],
+                    topRight: this.radiusMap['topRight'],
+                    bottomLeft: this.radiusMap['bottomLeft'],
+                    bottomRight: this.radiusMap['bottomRight'],
+                )
+            }.width(60.percent).justifyContent(this.orient)
+        }.width(100.percent).justifyContent(this.orient)
+    }
+}

entry/src/main/cangjie/src/components/home/HomeBottom.cj

@@ -0,0 +1,18 @@
+/**
+ * Created on 2024/9/8
+ */
+package ohos_app_cangjie_entry.components.home
+
+internal import ohos.base.*
+internal import ohos.component.*
+internal import ohos.state_manage.*
+import ohos.state_macro_manage.*
+
+@Component
+public class HomeBottom {
+    func build() {
+        Row {
+            Text("HomeBottom")
+        }.width(100.percent)
+    }
+}

entry/src/main/cangjie/src/components/home/HomeBottomBar.cj

@@ -1,4 +0,0 @@
-/**
- * Created on 2024/9/8
- */
-package ohos_app_cangjie_entry.components.home

entry/src/main/cangjie/src/components/home/HomeMain.cj

@@ -0,0 +1,19 @@
+/**
+ * Created on 2024/9/8
+ */
+package ohos_app_cangjie_entry.components.home
+
+internal import ohos.base.*
+internal import ohos.component.*
+internal import ohos.state_manage.*
+import ohos.state_macro_manage.*
+import ohos_app_cangjie_entry.components.chat.ChatList
+
+@Component
+public class HomeMain {
+    func build() {
+        Column {
+            ChatList()
+        }.width(100.percent).height(100.percent).padding(right: 8.vp, left: 8.vp)
+    }
+}

entry/src/main/cangjie/src/components/home/HomeMessageContent.cj

@@ -1,4 +0,0 @@
-/**
- * Created on 2024/9/8
- */
-package ohos_app_cangjie_entry.components.home

entry/src/main/cangjie/src/components/home/HomeTitle.cj

@@ -2,3 +2,17 @@
  * Created on 2024/9/8
  */
 package ohos_app_cangjie_entry.components.home
+
+internal import ohos.base.*
+internal import ohos.component.*
+internal import ohos.state_manage.*
+import ohos.state_macro_manage.*
+
+@Component
+public class HomeTitle {
+    func build() {
+        Row {
+            Text("Home Title")
+        }.width(100.percent)
+    }
+}

entry/src/main/cangjie/src/components/index.cj

@@ -0,0 +1,4 @@
+/**
+ * Created on 2024/9/12
+ */
+package ohos_app_cangjie_entry.components

entry/src/main/cangjie/src/index.cj

@@ -19,7 +19,6 @@ class MyView {
     func build() {
         Row {
             HomePage()
-            SidePage()
         }.height(100.percent).width(100.percent)
     }
 }

entry/src/main/cangjie/src/pages/HomePage.cj

@@ -3,10 +3,12 @@
  */
 package ohos_app_cangjie_entry.pages
 
-internal import ohos.base.*
+import ohos.state_macro_manage.*
+import ohos_app_cangjie_entry.components.home.*
+import ohos.state_macro_manage.*
 internal import ohos.component.*
 internal import ohos.state_manage.*
-import ohos.state_macro_manage.*
+internal import ohos.base.*
 
 @Component
 public class HomePage {
@@ -14,6 +16,10 @@ public class HomePage {
     protected func aboutToAppear() {
     }
     func build() {
-        Row()
+        Column(10) {
+            HomeTitle()
+            HomeMain()
+            HomeBottom()
+        }.width(100.percent).height(100.percent)
     }
 }