style: string to color, Tag

src/utils/commons.js

@@ -566,3 +566,8 @@ export const loadScript = (src) => {
   });
 };
 
+export const TagColorStyle = (tag, outerStyle = false) => {
+  const color = stringToColour(tag);
+  const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
+  return { color: `${color}`, ...outerStyleObj };
+};

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Button, Tag, Radio, Popover, Form } from 'antd';
-import { isEmpty, objectMapper, stringToColour } from '@/utils/commons';
+import { isEmpty, objectMapper, TagColorStyle } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { OrderLabelDefaultOptions } from '@/stores/OrderStore';
 import { FilterIcon } from '@/components/Icons';
@@ -14,11 +14,6 @@ const otypes = [
   { value: `intour@1`, labelValue: 1, label: '走团中',  },
 ]
 const otypesMapped = otypes.reduce((acc, cur) => ({ ...acc, [cur.value]: cur }), {});
-const TagColorStyle = (tag, outerStyle = false) => {
-  const color = stringToColour(tag);
-  const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
-  return { color: `${color}`, ...outerStyleObj };
-};
 const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
   const [
     { tags: selectedTags, otype: selectedOType, search, ...filter },

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

@@ -5,7 +5,7 @@ import { CloseCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, fetchConversationItemTop, postConversationTags, deleteConversationTags } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 // import ConversationsNewItem from './ConversationsNewItem';
-import { flush, isEmpty, isNotEmpty, stringToColour } from '@/utils/commons';
+import { flush, isEmpty, isNotEmpty, stringToColour, TagColorStyle } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
 import ChannelLogo from './ChannelLogo';
@@ -15,16 +15,6 @@ import useStyleStore from '@/stores/StyleStore';
 import { OrderLabelDefaultOptionsMapped, OrderStatusDefaultOptionsMapped } from '@/stores/OrderStore';
 import { whatsappMsgTypeMapped } from '@/channel/bubbleMsgUtils';
 
-const TagColorStyle = (tag) => {
-  const color = stringToColour(tag);
-  return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` }
-}
-const TagColorStyle_2 = (tag, outerStyle = false) => {
-  const color = stringToColour(tag);
-  const outerStyleObj = outerStyle ? { borderColor: `${color}66`, } : {};
-  return { color: `${color}`, ...outerStyleObj };
-};
-
 const OrderSignEmoji = ({ item }) => (
   <>
     {OrderLabelDefaultOptionsMapped[String(item.order_label_id)]?.emoji}
@@ -279,7 +269,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
                 <div className='text-sm'>
                   <OrderSignEmoji item={item} />
                   {(item?.tags || [])?.map((tag) => (
-                    <Tag key={tag.label} style={{ ...TagColorStyle(tag.label) }} className='text-xs px-0.5 me-0.5'>
+                    <Tag key={tag.label} style={{ ...TagColorStyle(tag.label, true) }} className='text-xs px-0.5 me-0.5'>
                       {tag.label}
                     </Tag>
                   ))}

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

@@ -2,22 +2,13 @@ import { useState } from 'react'
 import { App, Button, Divider, Avatar } from 'antd'
 import { LoadingOutlined, ApiOutlined } from '@ant-design/icons';
 import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
-import { isEmpty, stringToColour } from '@/utils/commons'
+import { isEmpty, TagColorStyle } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
 import DnDModal from '@/components/DndModal'
 import useStyleStore from '@/stores/StyleStore'
 import { useEmailDetail,  } from '@/hooks/useEmail';
 import { EMAIL_ATTA_HOST } from '@/config';
 
-const TagColorStyle = (tag) => {
-  const color = stringToColour(tag)
-  return {
-    color: `${color}`,
-    borderColor: `${color}66`,
-    backgroundColor: `${color}0D`,
-  }
-}
-
 /**
  * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
  */
@@ -156,7 +147,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
           <div>
             <div className={['flex justify-between', window.innerWidth < 600 ? 'flex-row' : 'flex-row'].join(' ')}>
               <div className='flex gap-2 mb-2 items-center'>
-                <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From)}>
+                <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From, true)}>
                   {(mailData.info?.MAI_From || '').substring(0, 1)}
                 </Avatar>
                 <div className=' flex flex-col'>

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

@@ -3,7 +3,7 @@ import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space } fr
 import { FileSearchOutlined, LoadingOutlined } from '@ant-design/icons';
 import { RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'
 import { InboxIcon, SendPlaneFillIcon } from '@/components/Icons';
-import { groupBy, isEmpty, stringToColour } from '@/utils/commons';
+import { groupBy, isEmpty, TagColorStyle as CalColorStyle } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 import EmailDetail from './EmailDetail';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
@@ -16,11 +16,6 @@ import { v4 as uuid } from 'uuid';
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 10;
 
-const CalColorStyle = (tag, outerStyle = true) => {
-  const color = stringToColour(tag);
-  const outerStyleObj = outerStyle ? { borderColor: `${color}66`, backgroundColor: `${color}0D` } : {};
-  return { color: `${color}`, ...outerStyleObj };
-};
 const getVideoName = (vUrl) => {
   if (!vUrl) return '';
   const url = new URL(vUrl);
@@ -202,7 +197,7 @@ const MessageListFilter = ({ ...props }) => {
             <List.Item>
               <List.Item.Meta
                 avatar={
-                  <Avatar size='small' style={CalColorStyle(item.sender)}>
+                  <Avatar size='small' style={CalColorStyle(item.sender, true)}>
                     {item.senderName}
                   </Avatar>
                 }
@@ -243,7 +238,7 @@ const MessageListFilter = ({ ...props }) => {
             <List.Item actions={[item.localDate]}>
               <List.Item.Meta
                 avatar={
-                  <Avatar size='small' style={CalColorStyle(item.senderName)}>
+                  <Avatar size='small' style={CalColorStyle(item.senderName, true)}>
                     {item.senderName.substring(0, 5)}
                   </Avatar>
                 }
@@ -291,7 +286,7 @@ const MessageListFilter = ({ ...props }) => {
             <List.Item>
               <List.Item.Meta
                 avatar={
-                  <Avatar size='small' style={CalColorStyle(item.sender)}>
+                  <Avatar size='small' style={CalColorStyle(item.sender, true)}>
                     {item.senderName}
                   </Avatar>
                 }