todo: 会话右键菜单; 标签筛选; 订单标记筛选; 会话列表显示

src/views/Conversations/Conversations.css

@@ -160,6 +160,7 @@
 }
 .chatwindow-wrapper .rce-citem-avatar{
     border-bottom: 1px solid #0000000d;
+    padding-left: 0;
 }
 .chatwindow-wrapper .rce-avatar-letter{
     margin-top: 0;

src/views/Conversations/Online/ConversationsList.jsx

@@ -1,17 +1,22 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { Dropdown, Input, Button, Empty, Tooltip, Tag, Select } from 'antd';
-import { PlusOutlined,  WhatsAppOutlined, LoadingOutlined, HistoryOutlined, FireOutlined,AudioTwoTone } from '@ant-design/icons';
+import { Dropdown, Input, Button, Empty, Tooltip, Tag, Select, Divider, Radio, Popover } from 'antd';
+import { PlusOutlined,  WhatsAppOutlined, LoadingOutlined, HistoryOutlined, FireOutlined,AudioTwoTone, FilterOutlined, TagsOutlined, TagsTwoTone, FilterTwoTone } from '@ant-design/icons';
 import { fetchConversationsList, fetchOrderConversationsList, fetchConversationItemClose, fetchConversationsSearch, postNewConversationItem, fetchConversationItemUnread, UNREAD_MARK } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 import ConversationsNewItem from './ConversationsNewItem';
-import { isEmpty, olog } from '@/utils/commons';
+import { isEmpty, olog, stringToColour } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
 import { useVisibilityState } from '@/hooks/useVisibilityState';
 import { OrderLabelDefaultOptions, OrderStatusDefaultOptions, RemindStateDefaultOptions } from '@/stores/OrderStore'
 
 const { Option, OptGroup  } = Select;
+
+const TagColorStyle = (tag) => {
+  const color = stringToColour(tag);
+  return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` }
+}
 /**
  * []
  */
@@ -250,7 +255,72 @@ const Conversations = ({ mobile }) => {
             type='text'
           />
         </Tooltip>
-        { mobile === undefined?'':<AudioTwoTone onClick={()=>{navigate(`/callcenter/call`)}} />}
+        {mobile === undefined ? (
+          ''
+        ) : (
+          <AudioTwoTone
+            onClick={() => {
+              navigate(`/callcenter/call`);
+            }}
+          />
+        )}
+      </div>
+      <div className='my-1 flex justify-between items-center '>
+        <Radio.Group
+          optionType={'button'}
+          buttonStyle='solid'
+          size='small'
+          options={[
+            { label: 'All', value: 'all' },
+            { label: '重点', value: 'top' },
+            { label: '次重点', value: 'second' },
+            { label: '成行', value: 'go' },
+            { label: '走团中', value: 'runing' },
+          ]}
+        />
+        {/* <Dropdown
+          trigger={'click'}
+          placement='bottom'
+          menu={{
+            items: [
+              { label: '已付款', key: 'p1', value: 'p1', className: `!m-1 underline-offset-4 hover:underline focus:underline active:underline`, style: TagColorStyle('已付款') },
+              { label: '地接', key: 'p2', value: 'p2', className: `!m-1 underline-offset-4 hover:underline focus:underline active:underline`, style: TagColorStyle('地接') },
+            ],
+          }}>
+          <Button
+            onClick={() => {
+              // alert('1')
+            }}
+            icon={<TagsTwoTone />}
+            type='text'
+            size='middle'
+          />
+        </Dropdown> */}
+        <Popover
+          placement='bottom'
+          trigger={'click'}
+          content={
+            <>
+              标签:
+              {[
+                { label: '已付款', key: 'p1', value: 'p1', className: ``, style: TagColorStyle('已付款') },
+                { label: '地接', key: 'p2', value: 'p2', className: ``, style: TagColorStyle('地接') },
+              ].map((tag) => (
+                <Tag.CheckableTag key={tag.key} color={tag.color} style={tag.style} className={tag.className}>
+                  {tag.label}
+                </Tag.CheckableTag>
+              ))}
+            </>
+          }>
+          <Button
+            onClick={() => {
+              // alert('1')
+            }}
+            icon={<FilterTwoTone />}
+            type='text'
+            size='middle'
+          />
+        </Popover>
       </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
         {conversationsListLoading && dataSource.length === 0 ? (
@@ -264,8 +334,12 @@ const Conversations = ({ mobile }) => {
             key={item.sn}
             menu={{
               items: [
+                { label: '置顶会话', key: 'top' },
                 { label: '标记为未读', key: 'unread' },
-                { label: '关闭会话', key: 'close', danger: true },
+                { label: '设置标签', key: 'tags' }, // selection
+                { label: '编辑联系人', key: 'remark' },
+                { label: <Divider className='my-0' />, key: 'd2' },
+                { label: '隐藏会话', key: 'close', danger: true },
               ],
               onClick: ({ key, domEvent }) => {
                 domEvent.stopPropagation();
@@ -295,7 +369,22 @@ const Conversations = ({ mobile }) => {
                 letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).slice(0, 5) }}
                 alt={item.whatsapp_name}
                 title={item.whatsapp_name || item.whatsapp_phone_number}
-                subtitle={item.coli_id}
+                // subtitle={item.coli_id}
+                subtitle={
+                  <div>
+                    {item.coli_id}
+                    <div>
+                      {[
+                        { label: '已付款', key: 'p1' },
+                        { label: '地接', key: 'p2' },
+                      ]?.map((tag) => (
+                        <Tag key={tag.label} style={{ ...TagColorStyle(tag.label) }} className='text-xs px-0.5 me-0.5'>
+                          {tag.label}
+                        </Tag>
+                      ))}
+                    </div>
+                  </div>
+                }
                 date={item.last_received_time || item.last_send_time}
                 unread={item.unread_msg_count > 99 ? 0 : item.unread_msg_count}
                 // className={[
@@ -305,7 +394,10 @@ const Conversations = ({ mobile }) => {
                 statusText={<WhatsAppOutlined key={'channel'} className='text-whatsapp' />}
                 statusColor={'#fff'}
                 onClick={() => onSwitchConversation(item)}
-                customStatusComponents={[...(item.unread_msg_count > 99 ? [() => <div className='w-4 h-4 bg-red-500 rounded-full' key={'unread'}></div>] : [])]}
+                customStatusComponents={[
+                  ...(item.unread_msg_count > 99 ? [() => <div className='w-4 h-4 bg-red-500 rounded-full' key={'unread'}></div>] : []),
+                  // () => <span key={'tag'}>💎💴❤👑💼🤝💤💔💨✅🕳❓❔❇✳❎🚫❌🎈🎊🎁📜</span>,
+                ]}
               />
             </div>
           </Dropdown>