style:

src/views/Conversations/Online/Components/BubbleIM.jsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { App, Button } from 'antd';
 import { ExportOutlined, CopyOutlined, PhoneOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
-import { groupBy, isEmpty } from '@/utils/commons';
+import { groupBy, isEmpty, TagColorStyle } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { ReplyIcon } from '@/components/Icons';
@@ -105,7 +105,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
   });
   return (
     <MessageBox
-      {...message}
+      {...message} titleColor={TagColorStyle(message.title).color}
       key={`IM.${message.id}`}
       position={message.sender === 'me' ? 'right' : 'left'}
       onReplyClick={() => setReferenceMsg(message)}

src/views/Conversations/Online/Components/SupplierEmailDrawer.jsx

@@ -90,7 +90,7 @@ const SupplierEmailDrawer = ({ list: otherEmailList, currentConversationID, opi_
                 setSelectedEmail(emailMsg)
               }}>
               <Flex vertical={false} wrap={false} className='w-full'>
-                <div className='flex-auto ml-auto min-w-40 line-clamp-1'>
+                <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
                   {emailItem.Direction === '收' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
                   {/* <Tooltip title={emailItem.MAI_Subject}> */}
                   <Typography.Text >{emailItem.MAI_Subject}</Typography.Text>

src/views/Conversations/Online/order/CustomerProfile.jsx

@@ -1,5 +1,5 @@
 import { LinkOutlined, MailOutlined, PhoneOutlined, UserOutlined, WhatsAppOutlined, FieldNumberOutlined } from "@ant-design/icons";
-import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag, Checkbox, Drawer, Input } from "antd";
+import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag, Checkbox, Drawer, Input, Badge } from "antd";
 import { useEffect, useState, useRef, useCallback } from "react";
 import { useNavigate, } from "react-router-dom";
 import { useShallow } from 'zustand/react/shallow';
@@ -313,6 +313,7 @@ const CustomerProfile = () => {
 
           <Divider orientation="left">
             <Typography.Text strong>供应商邮件</Typography.Text>
+            <Badge count={otherEmailList.length} className='ml-2' color="oklch(62.3% 0.214 259.815)" />
             <SupplierEmailDrawer list={otherEmailList} currentConversationID={currentConversationID} opi_sn={orderDetail.opi_sn} oid={currentOrder} />
           </Divider>
           <List
@@ -331,16 +332,24 @@ const CustomerProfile = () => {
                   handle3rdEmailItemClick(email)
                 }}>
                   <Flex
-                    vertical
+                    vertical className="grow"
                   >
-                    <div><Typography.Text ellipsis={{tooltip: email.SenderReceiver}} style={{width: 280}}><b>From: </b>{email.SenderReceiver}</Typography.Text></div>
-                    <div><Typography.Text ellipsis={{tooltip: email.MAI_Subject}} style={{width: 280}}><b>Subject: </b>{email.MAI_Subject}</Typography.Text></div>
+                    <div className="text-stone-600 line-clamp-1">
+                      <Typography.Text ellipsis={{tooltip: email.SenderReceiver}} style={{width: 380}} className="text-stone-600">{email.SenderReceiver}</Typography.Text></div>
+                    <div className="">{email.MAI_Subject}</div>
                   </Flex>
               </List.Item>
             )}
           />
 					<Divider orientation="left">
 						<Typography.Text strong>表单信息</Typography.Text>
+            <Button className="ml-2"
+              size={"small"}
+              onClick={() => {
+                setIsModalOpen(true);
+              }}>
+              添加备注
+            </Button>
 					</Divider>
 					<p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
 					<Modal
@@ -372,13 +381,6 @@ const CustomerProfile = () => {
 						}}>
 						<textarea ref={orderCommentRef} className="w-full" rows={4}></textarea>
 					</Modal>
-					<Button
-						size={"small"}
-						onClick={() => {
-							setIsModalOpen(true);
-						}}>
-						添加备注
-					</Button>
 				</Spin>
 				<ConversationsNewItem initialValues={newChatFormValues} open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
         <EmailDetail open={detailPopupOpen} setOpen={setDetailOpen} emailMsg={emailMsg} key={`supplier-email-detail-1-${emailMsg?.id}`} />