From f5a31e1ffa8f12f04ab258787042eb8983198369 Mon Sep 17 00:00:00 2001 From: xiaoxiao Date: Tue, 12 Aug 2025 13:30:54 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=B0=94=E6=B3=A1=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- chatkit_ui/src/main/ets/pages/ChatP2PPage.ets | 1 + .../src/main/ets/view/MessageComponent.ets | 106 +++++++++++------- .../main/resources/base/media/green_bg.png | Bin 1718 -> 0 bytes .../im_from_message_white_jiantou_icon.png | Bin 0 -> 1178 bytes .../base/media/im_my_message_back_icon.png | Bin 0 -> 2024 bytes .../base/media/im_my_message_jiantou_icon.png | Bin 0 -> 526 bytes .../media/im_my_message_white_back_icon.png | Bin 0 -> 1957 bytes .../im_my_message_white_jiantou_icon.png | Bin 0 -> 480 bytes 8 files changed, 68 insertions(+), 39 deletions(-) delete mode 100644 chatkit_ui/src/main/resources/base/media/green_bg.png create mode 100644 chatkit_ui/src/main/resources/base/media/im_from_message_white_jiantou_icon.png create mode 100644 chatkit_ui/src/main/resources/base/media/im_my_message_back_icon.png create mode 100644 chatkit_ui/src/main/resources/base/media/im_my_message_jiantou_icon.png create mode 100644 chatkit_ui/src/main/resources/base/media/im_my_message_white_back_icon.png create mode 100644 chatkit_ui/src/main/resources/base/media/im_my_message_white_jiantou_icon.png diff --git a/chatkit_ui/src/main/ets/pages/ChatP2PPage.ets b/chatkit_ui/src/main/ets/pages/ChatP2PPage.ets index fede80a..91f5d8d 100644 --- a/chatkit_ui/src/main/ets/pages/ChatP2PPage.ets +++ b/chatkit_ui/src/main/ets/pages/ChatP2PPage.ets @@ -1173,6 +1173,7 @@ export struct ChatP2PPage { .expandSafeArea([SafeAreaType.KEYBOARD]) .zIndex(1) } + .backgroundColor('#f4f4f4') // } diff --git a/chatkit_ui/src/main/ets/view/MessageComponent.ets b/chatkit_ui/src/main/ets/view/MessageComponent.ets index ebb3e3c..e588134 100644 --- a/chatkit_ui/src/main/ets/view/MessageComponent.ets +++ b/chatkit_ui/src/main/ets/view/MessageComponent.ets @@ -196,28 +196,37 @@ export struct SenderMessageComponent { } } } - messageContent({ - message: this.message, - onMessageClick: this.onMessageClick, - chatInfo: this.chatUserInfo - }) - .backgroundColor($r('app.color.color_chat_send_message_bg')) - .borderRadius(6) - // .backgroundImage($r('app.media.green_bg')) - // .backgroundImageSize({ width: '100%', height: '100%' }) // 背景覆盖整个组件区域 - // .backgroundImageResizable({ - // slice: { top: 100, left: 50, bottom: 2, right: 60 } // 圆角区域不拉伸 - // - // }) - .onClick((event: ClickEvent) => { - if (this.showRadio) { - this.radioOn = !this.radioOn - } - this.onMessageClick?.onItemClick?.(event, this.message) + Row() { + messageContent({ + message: this.message, + onMessageClick: this.onMessageClick, + chatInfo: this.chatUserInfo }) - .margin({ top: 4, right: 6 }) - .flexShrink(1) - .id("msgContainer") + .backgroundImage(this.message.getMessageType() !== 100?$r('app.media.im_my_message_back_icon'):$r('app.media.im_my_message_white_back_icon')) + .backgroundImageSize({ width: '100%', height: '100%' }) + .backgroundImageResizable({ + slice:{ + top:24,right:36,bottom:24,left:24 + } + }) + .onClick((event: ClickEvent) => { + if (this.showRadio) { + this.radioOn = !this.radioOn + } + this.onMessageClick?.onItemClick?.(event, this.message) + }) + .margin({top:2}) + .flexShrink(1) + .id("msgContainer") + + Image(this.message.getMessageType() !== 100?$r('app.media.im_my_message_jiantou_icon'):$r('app.media.im_my_message_white_jiantou_icon')) + .width(7) + .height(14) + .alignSelf(ItemAlign.Start) + .margin({top:17,left:-1}) + .visibility(this.message.getMessageType() !== 1?Visibility.Visible:Visibility.Hidden) + } + } .justifyContent(FlexAlign.End) .alignItems(VerticalAlign.Bottom) @@ -261,13 +270,15 @@ export struct SenderMessageComponent { }) } .width('100%') - .backgroundColor(this.message.isPinMsg ? $r('app.color.color_chat_pin_bg') : - $r('app.color.color_chat_page_bg')) + // .backgroundColor(this.message.isPinMsg ? $r('app.color.color_chat_pin_bg') : + // $r('app.color.color_chat_page_bg')) + .backgroundColor('#f4f4f4') .justifyContent(FlexAlign.End) .alignItems(VerticalAlign.Top) } } .width('100%').margin({ top: 6, bottom: 6 }) + .backgroundColor('#f4f4f4') } } @@ -351,21 +362,36 @@ export struct ReceiveMessageComponent { } Column() { - messageContent({ - message: this.message, - onMessageClick: this.onMessageClick, - chatInfo: this.chatUserInfo - }) - .backgroundColor($r('app.color.color_chat_receive_message_bg')) - .borderRadius(6) - .id("msgContainer") - .alignRules(this.AlignLeft) - .onClick((event: ClickEvent) => { - if (this.showRadio) { - this.radioOn = !this.radioOn - } - this.onMessageClick?.onItemClick?.(event, this.message) + Row() { + Image($r('app.media.im_from_message_white_jiantou_icon')) + .width(7) + .height(14) + .alignSelf(ItemAlign.Start) + .margin({top:10}) + .visibility(this.message.getMessageType() !== 1?Visibility.Visible:Visibility.Hidden) + + messageContent({ + message: this.message, + onMessageClick: this.onMessageClick, + chatInfo: this.chatUserInfo }) + .backgroundImage($r('app.media.im_my_message_white_back_icon')) + .backgroundImageSize({ width: '100%', height: '100%' }) + .backgroundImageResizable({ + slice:{ + top:24,right:36,bottom:24,left:24 + } + }) + .id("msgContainer") + .alignRules(this.AlignLeft) + .margin({top:-2}) + .onClick((event: ClickEvent) => { + if (this.showRadio) { + this.radioOn = !this.radioOn + } + this.onMessageClick?.onItemClick?.(event, this.message) + }) + } } .width('100%') //.height(this.message?.getMessageHeight(this.getUIContext())) @@ -390,11 +416,13 @@ export struct ReceiveMessageComponent { } .width('100%') .alignItems(VerticalAlign.Top) - .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') : - $r('app.color.color_chat_page_bg')) + // .backgroundColor(this.message?.isPinMsg ? $r('app.color.color_chat_pin_bg') : + // $r('app.color.color_chat_page_bg')) + .backgroundColor('#f4f4f4') .id('itemContainer') } }.width('100%').padding({ top: 6, bottom: 6 }) + .backgroundColor('#f4f4f4') } } diff --git a/chatkit_ui/src/main/resources/base/media/green_bg.png b/chatkit_ui/src/main/resources/base/media/green_bg.png deleted file mode 100644 index 3f8e552ab3c47a92b761c3c547f45719d44bada1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1718 zcma)7eM}Q~7_Kua!-=3+rx<5L06$P=L8lq==(z9N#^bT5ZX3CUV z8R|yj63p;x1|uL<+R0)Z0jFrj=z`L1$Ba6sL^}~7;s*-5BH;cQinAxXO&1f5PN&ne{LjyzBxlhGPUU{Vs7MsSHD8wtC(HX?3J zL5mP32Wlr#+y;ac;mvpfsbtem-=u)q$7OBAXqo7OfiBn%3V8fbN@GBS;s2o+HjXC9 zY~-!q{}d*2itGrOjSzT&!$e=)mbg$TyIkWyU=nxa;P|$&Dz38NBu-dxJCHnOY)I2?VKXb*eglJlnz_+Oaqr&s=XDITqIsQ%+U!+$VVKmaF_`7UEvnTFBw9t^7w>!GWkHGSI| z-csUQOc^jC++5jI)f$h@g;@uPUV@s`qK@6awbjd{0kMy^HT)dO{HnKmLwD}%wZ=u9 zg}&SvOEit0F)aS^Xblmc-lAR~^s?%{@od7%3q?zKEo$S?f#O`d2v3b<*0z7&9?9(U zY*?nH!_KrWhFLQo?Ve&y@J`!3CFASd-XeB4#3$0aj+M`5)+)&63%#a0;4J33#`?Mr zowZ2?r3b45CwG*;Tm-YqyLitN^OAd}g-zGr{3T#bdH6aKX1SMArMj#r+GNw?A5IQ* zegw11;;7iU#Yav@4PBK!e8PIcN`NpLQT@>uou{z!1n#|>gDVAJl$tomd_3!6LbyRHZ7!?)+QUA~=lI<00>(DSM&kooIhYx1+CLzU3dx}IU`+1aT+ zAC AO#lD@ diff --git a/chatkit_ui/src/main/resources/base/media/im_from_message_white_jiantou_icon.png b/chatkit_ui/src/main/resources/base/media/im_from_message_white_jiantou_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..599d17dc57fea93813ece1dd7085a2b682b245c1 GIT binary patch literal 1178 zcmeAS@N?(olHy`uVBq!ia0vp^azO0J!3HFcy%1>tQY`6?zK#qG8~eHcB(ehe3dtTp zz6=aiY77hwEes65fI&u`8WOFbu zF$ys-16hnf$k3k2zyfA7FaS*g0_Fvb2-yWpa9Ozp%y2f)9SjUf_Z@-ynG7;RB1$5B zeXNr6bM+Ea@{>~aDsl@z3K(oEtboki)RIJnirk#MVyg;UC9n!BAR8pCucQE0Qj%?} z6yY17;GAESs$iyPpl6_D$EBd4U{jQmW)z9|8>y;bpKhp88yV>WRp=I1=9MH?=;jqGLkxkLMfuL^+7WFhI$72*tC^ors2>Al7VOg`wL>74ahL7fXs^2oJg0< z+|;~cpwsNkOl`onU`Qa`iKHxocyBTg2d!hJ42`zBq1c#AXi)Y z7iFdb0~8c&AmtchQ1v$YpfE)WV@L#oMS(GB$7Q1rPYrflQY;$+fC;eI)5S3)g7fG# zU%w*;Jgg6ios)^%5^+7w~_1oiX9_dOvgjnHn?qJodkHdEMn(J<0o8zs*&fr(pGJ zcFq)=rh0v*^Pm4P|In6xzWtZ3^t0{1ZpZq*$o z-m%vYUu~Slsv9#odDYs7%M9Kw5?XiG;Cg;x@r2ZeQrp+aM;-nV&{1mmu-p=fS?83{1OT3wmOcOg literal 0 HcmV?d00001 diff --git a/chatkit_ui/src/main/resources/base/media/im_my_message_back_icon.png b/chatkit_ui/src/main/resources/base/media/im_my_message_back_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..7d83e2ef8bae41a5f4dc1ef0e562e645fca22ee9 GIT binary patch literal 2024 zcmeAS@N?(olHy`uVBq!ia0y~yU}OQZ&v38-$*D)~rUNO);vjb?hIQv;UIIBTsS%!O zzP=1vKsE;hV|yk8NIfGEO93$h1M>n#24*152ohVs1e0ZCS-=cqGn@e_{2cxICj$d} zkf)1dNCo5D+Z+9_q{|%t_}udCv9u*@%l*o>c5=%4sFw@#_Wo0yU@+-Gd{A(b@OQss z3srnyMX9N0dLIrkkDC8)Uh{93hYs7t>hy&VUw`cWr1Iz9a=&-$ruqN)np6KZFZXNW z+NX7yPrrRo^*;Q*)&ED(bOD7A_c``R|GTv}==AMtr&fpE?pE)PUT^x##=qLX-C_U#<#8PRR2l!GjEO~W zwZrX|Z+~5$8ZDjgH~)c;z_$M}znAURx91VRXHmP+URa?Zm4)xs5}T-6AyT>Qf-I*G#sDFIFBk z4&T|x&^VFfj8wqy?mo4(|BNOTTdOfLJ?Gf7{_Sedde%pl^UIAHnUsZI=+5wo@3UFt zY^}w}^qIAaTkZIJ-x>9-(VPMj{RckSE&bxR@E4niAMK1UecN zS`Ilh0JQ*hj%pbVvC#xGnqROM7q%SlfyIeKg20c}?1}uKf`+Z}zS`1h+ckjY(1mD& z%(Z)*9Dzm6y(Z7qZ&|sRSUA3jT{-vRul(x$(}LbBC^{spVaok}`~3EObL`$mWXH;D zHx~;l7}&^IaK$J+W+6BO3mxm6LY{`6wO>xU;AW#%7{_ltQjEnx?oJHr&dIz4a$Hg)JkxxA z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvPE4P3d&UOSTEMUr)2P&)Zba4!c z;5>SLzu#d40k#jt9;(l{F7nxgvRfH{Vse-e<@fA|wLUmyhp|s<^+Ayx<}zLE2Nf#}-gHksU}quurfc#cJqyb{hd)31 zB(+;pr=a)cYP~svZufeO52wX2&T%$4mtEV?6pTJ>|o zga9rzj@5fkn24R^DX|o~`|({-{L2IhRzJJb-z7d&8P(l7aabzume*hTPVM$_sKc_}?~E x1~Q-N-*&+0g?t2G?tx7jhbD-NZ_X8zyZ@>6VEw&$=B%K&@O1TaS?83{1OQn+$c+F1 literal 0 HcmV?d00001 diff --git a/chatkit_ui/src/main/resources/base/media/im_my_message_white_back_icon.png b/chatkit_ui/src/main/resources/base/media/im_my_message_white_back_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ef3b56dcd82a67782f3f5fc5c9aa90b681100748 GIT binary patch literal 1957 zcmeAS@N?(olHy`uVBq!ia0y~yU}OQZ&v38-$*D)~rUNO);vjb?hIQv;UIIBTsS%!O zzP=1vKsE;hV|yk8NIfGEO93$h1M>n#24*152ohVs1e0ZCS-=cqGn@e_{2cxICj$dJ zzo(01NCo5D+lKj*(?uErV^&H_OZ)h2Xlik3UmvR-|ac(=XTG(%^~nZkEQSV z?i!QCACI%|zn$qgLm+1U{tv(Bl<)s09_!z5pj`Vy&c4s_>OAZ1>sjJi5|ciBzVq_D z<@%bs^mt)~f<%^kXO$}r0xLHC@37-Mq{mi&R<`cW{>d{L8o4z;6v|!Q`&UDxkZ!O`I67N!sn;J3Sp+o@a|9@PEepzg4W?*D;*XDR#E-b^sA+TdxUE7B`nLmprr20~C#)bnAxn%OqX3u`Dd)P|uZ}~%iCKkSs2TK^$*9(Xp*yHu1 zTJN2lMq9h@g9)tj&aQ5rFLt0#VBPua=b!J{lvg02P$0nc{#oF?nF@R2`oDeAJ-qa; zDF3rv{jb^B8JWc65^S%_&pDQ0d#h=~z8TW<&K%uq8Ey)6L`+QMSDF3WtIvJcu;)Cq ztE{};+Su-O92*mh-lPLndF!`xzGgk3eq7u!V*5GS`13pKPJAdh_qcR!GehHhprO;{ z*FFDM)i?iZ#;=8sBF*Q;ZU6n@(%+xIGR|ce$IboxX$~I~%Rb-6uio9SzfZZgUTuxP ivi&@cJ#$VM_t!J-tg7Nj6y+BLRgs>qelF{r5}E)^MRC0V literal 0 HcmV?d00001 diff --git a/chatkit_ui/src/main/resources/base/media/im_my_message_white_jiantou_icon.png b/chatkit_ui/src/main/resources/base/media/im_my_message_white_jiantou_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a3aa230d6017a469b39a9f1b5cf50fee2af7e602 GIT binary patch literal 480 zcmeAS@N?(olHy`uVBq!ia0vp^azO0J!3HFcy%1>tQjEnx?oJHr&dIz4a$Hg)JkxxA z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvPE4P3d&UOSTEMUr)2P*UOba4!c z;5>TGy6BLB1WSUC>s&Qn)tH_>;U&#?R4f^nH?=j*I(Jd6CGo(fuQy`<_S#N+{y*)j zMD?}rf1j^$WtDh({Qn)cAIv?`@t@RhwDTX3vtfGuQ81$0|A3VZk}@Q-W9*K>tVLRbw>MhKNq@L>m7Q*ey>2it&*#Ax^BXQ_wQD+bya1v z#z!59cwEf=qhV)RzTTY2p&m6w>i3vjlhpTczc9aW->6ol?Ek&LSq<@lFOn)GL=P8+ zaP%)$s*n;rkf|Z*=iXT$=hgH%kSV4u?9kH;)|hs&Ltir(&o~+<%FSXdzUVTeU+sWY z3DdQO${WOb4^)*fd|TkZfxot4?+e~