perf(前端): 在线聊天: ⛔会话的订单筛选; `已处理`改为`隐藏`; 会话列表每页100; 不操作`邮件`; 默认折叠`订单信息`; 隐藏供应商邮件; 隐藏报价历史; 在线聊天只能看订单信息

src/actions/ConversationActions.js

@@ -90,7 +90,7 @@ const templatesDisplayNameMap = {
   'agent_intro_with_update_v1': 'quick_update_v1',
 };
 
-export const CONVERSATION_PAGE_SIZE = 50;
+export const CONVERSATION_PAGE_SIZE = 100;
 /**
  *
  * @param {object} params { opisn }

src/stores/OrderStore.js

@@ -251,7 +251,9 @@ export const remindStatusOptions = [
   { value: 'important', label: '重点团' },
   { value: 'sendsurvey', label: '已发 travel advisor survey' },
 ];
-
+export const remindStatusOptionsMapped = remindStatusOptions.reduce((acc, cur) => {
+  return { ...acc, [String(cur.value)]: cur }
+}, {});
 
 /**
  * @param {Object} params { coli_sn, remindstate }

src/views/ChatWindow.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Layout, Spin, Button } from 'antd';
-import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, MenuUnfoldOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons';
 // import { useParams, useNavigate } from 'react-router-dom';
 import MessagesHeader from './Conversations/Online/MessagesHeader';
 import MessagesWrapper from './Conversations/Online/MessagesWrapper';
@@ -21,7 +21,7 @@ const { Sider, Content, Header, Footer } = Layout;
 const ChatWindow = () => {
 
   const [collapsedLeft, setCollapsedLeft] = useState(false);
-  const [collapsedRight, setCollapsedRight] = useState(false);
+  const [collapsedRight, setCollapsedRight] = useState(true);
 
   return (
     <>
@@ -37,7 +37,7 @@ const ChatWindow = () => {
           collapsed={false}
           onBreakpoint={(broken) => {
             // setCollapsedLeft(broken)
-            setCollapsedRight(broken)
+            // setCollapsedRight(broken)
           }}
           trigger={null}>
           <ConversationsList />
@@ -49,7 +49,7 @@ const ChatWindow = () => {
               {/* <Button type='text' icon={collapsedLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsedLeft(!collapsedLeft)} className=' rounded-none rounded-l' /> */}
               <MessagesHeader />
               {/* <Button type='text' icon={<ReloadOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className='' title='最新消息记录' /> */}
-              <Button type='text' icon={collapsedRight ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
+              <Button type='text' icon={collapsedRight ? <VerticalRightOutlined /> : <VerticalLeftOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
             </Header>
             <Content className="flex-grow bg-whatsapp-bg relative" >
               <MessagesWrapper />
@@ -72,7 +72,7 @@ const ChatWindow = () => {
           collapsedWidth={0}
           trigger={null}
           collapsed={collapsedRight}>
-          <CustomerProfile />
+          <CustomerProfile disabled />
         </Sider>
       </Layout>
     </>

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

@@ -117,7 +117,7 @@ const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
   return (
     <>
       <div className='my-1 flex justify-between items-center '>
-        <Radio.Group
+        {/* <Radio.Group
           optionType={'button'}
           buttonStyle='solid'
           size='small'
@@ -126,7 +126,7 @@ const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
           onChange={(e) => {
             setFilterOtype(e.target.value)
           }}
-        />
+        /> */}
         <Popover
           destroyTooltipOnHide
           placement='bottomLeft'
@@ -152,14 +152,14 @@ const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
                 initialValues={{}}
                 onFinish={onFinish}
                 className='*:mb-2'>
-                <Form.Item label='订单'>
+                {/* <Form.Item label='订单'>
                   <Tag
                     key={selectedOType}
                     closeIcon={selectedOType !== ''}
                     onClose={() => setFilterOtype('')}>
                     {otypesMapped[selectedOType]?.label || 'All'}
                   </Tag>
-                </Form.Item>
+                </Form.Item> */}
                 <Form.Item name={'tags'} label='标签' className='*.div:gap-1'>
                   {tags.map((tag, ti) => (
                     <Tag.CheckableTag

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

@@ -230,7 +230,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
             { label: '编辑联系人', key: 'edit0' },
 
             { type: 'divider' },
-            { label: '移到🗂已处理', key: 'close', danger: true },
+            { label: '移到🗂隐藏列表', key: 'close', danger: true },
           ],
           triggerSubMenuAction: 'click',
           openKeys: openTags,

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

@@ -390,7 +390,7 @@ const MessageListFilter = ({ ...props }) => {
                 { key: 'video', label: '视频', children: <Videos /> },
                 { key: 'audio', label: '音频', children: <Audios /> },
                 { key: 'file', label: '文件', children: <FileList /> },
-                { key: 'email', label: '邮件', children: <EmailList /> },
+                // { key: 'email', label: '邮件', children: <EmailList /> },
               ]}
             />
           </>

src/views/Conversations/Online/ConversationsList.jsx

@@ -318,30 +318,32 @@ const Conversations = () => {
           // enterButton={'Filter'}
         />
         {/* TODO 这个在完成搜索历史会话后去掉，待讨论查询规则 */}
-
+        </div>
+        <div className="flex gap-1 justify-between items-center shadow">
+        <div className='mr-auto'>{/* 占位 */}</div>
+        <ChatListFilter key='chat-list-filter'
+        onFilterChange={(d) => {
+          refreshConversationList()
+        }}
+        activeList={activeList}
+      />
       {conversationsListLoading ? (
           <div className='text-center py-1 px-2'>
             <LoadingOutlined className='text-orange-400 ' />
           </div>
         ) :
-        <Tooltip key={'conversation-list'} title={activeList ? '🗂已处理' : '活跃会话'}>
+        <Tooltip key={'conversation-list'} title={activeList ? '🗂已隐藏' : '活跃会话'}>
           <Button onClick={toggleClosedConversationsList} icon={activeList ? '🗂' : '📌'} type='text' />
         </Tooltip>
       }
       {mobile && (
-        <AudioTwoTone className='px-2'
+        <AudioTwoTone className='px-3'
           onClick={() => {
             navigate(`/callcenter/call`)
           }}
         />
       )}
       </div>
-      <ChatListFilter key='chat-list-filter'
-        onFilterChange={(d) => {
-          refreshConversationList()
-        }}
-        activeList={activeList}
-      />
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
         {/* {mobile && conversationsListLoading && dataSource.length === 0 ? ( */}
 

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -87,7 +87,7 @@ const ReplyWrapper = () => {
       icon: <WABIcon className={sessionType === 1 ? 'text-gray-500 [&_path]:fill-current' : ''} />,
       children: <InputComposer currentActive={activeChannel === 'waba'} channel={'waba'} lastWABAMsg={lastWABAMsg} />,
     },
-    { key: 'email', label: mobile ? '' : '邮件', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer currentActive={activeChannel === 'email'} /> },
+    // { key: 'email', label: mobile ? '' : '邮件', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer currentActive={activeChannel === 'email'} /> },
     {
       key: 'wai',
       label: mobile ? '' : 'WhatsApp',

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

@@ -7,7 +7,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { copy, isEmpty } from "@/utils/commons";
 import { Conditional } from "@/components/Conditional";
 import useConversationStore from "@/stores/ConversationStore";
-import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction } from "@/stores/OrderStore";
+import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
 import useAuthStore from "@/stores/AuthStore";
 import QuotesHistory from "./QuotesHistory";
 import ConversationBind from "./../ConversationBind";
@@ -18,7 +18,7 @@ import { postEditConversationItemColiAction } from "@/actions/ConversationAction
 import useStyleStore from '@/stores/StyleStore';
 import SupplierEmailDrawer from "../Components/EmailListDrawer";
 
-const CustomerProfile = () => {
+const CustomerProfile = ({ disabled }) => {
   const navigate = useNavigate();
 	const { notification, message } = App.useApp();
 	const [loading, setLoading] = useState(false);
@@ -169,7 +169,7 @@ const CustomerProfile = () => {
               onChange={handleOrderSwitch}
               />}
 						actions={[
-							<Select
+							<Select disabled={disabled} className={`[&_.ant-select-selection-item]:text-gray-950`}
 								key={"orderlabel"}
 								size="small"
 								style={{
@@ -193,7 +193,7 @@ const CustomerProfile = () => {
 								value={orderDetail.tags}
 								options={orderLabelOptions}
 							/>,
-							<Select
+							<Select disabled={disabled} className={`[&_.ant-select-selection-item]:text-gray-950`}
 								key={"orderstatus"}
 								size="small"
 								style={{
@@ -269,7 +269,9 @@ const CustomerProfile = () => {
           <Divider orientation="left">
             <Typography.Text strong>催信:</Typography.Text>
           </Divider>
-          <Checkbox.Group key='substatus' className="px-2" value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />
+          {disabled ? (<div className="px-2">✅<span>{remindStatusOptionsMapped[orderRemindState]?.label}</span></div>) : <Checkbox.Group key='substatus' className="px-2" value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />}
+
+          {/*
 					<Divider orientation="left">
 						<Typography.Text strong>最新报价</Typography.Text>
 					</Divider>
@@ -320,11 +322,11 @@ const CustomerProfile = () => {
                   </Flex>
               </List.Item>
             )}
-          />
+          /> */}
 					<Divider orientation="left">
 						<Typography.Text strong>表单信息</Typography.Text>
             <Button className="ml-2"
-              size={"small"}
+              size={"small"} disabled={disabled}
               onClick={() => {
                 setIsModalOpen(true);
               }}>