fix: 保存发送邮件 字段名称错误

perf: 更新 Logo

.gitignore

@@ -13,7 +13,9 @@ dist-ssr
 *.local
 distTest
 dev-dist
-tmp
+tmp
+schema*
+.gitkeep
 
 # Editor directories and files
 .vscode/*
@@ -29,3 +31,11 @@ tmp
 /package-lock.json
 
 **/LexicalEditor0
+
+*.zip
+
+.env.*
+
+vonage-client*
+**/test
+*.bak

README.md

@@ -23,9 +23,10 @@ npm version [<newversion> | major | minor | patch | premajor | preminor | prepat
 
 npm version preminor --preid alpha --no-git-tag-version
 npm version preminor --preid beta --no-git-tag-version
-
+1.2.0 -> 1.3.0-beta.0
 npm version premajor --no-git-tag-version
 1.0.0 -> 2.0.0-0
+
 npm version prerelease --no-git-tag-version
 2.0.0-0 -> 2.0.0-1 -> 2.0.0-2 ..n -> 2.0.0-n
 npm version patch --no-git-tag-version

doc/waba.template.md

@@ -0,0 +1,83 @@
+
+## 发送template 消息
+
+### 模板原文
+
+```json
+{
+    "wabaId": "190290134156880",
+    "name": "order_updated_specialist_assigned_sharon",
+    "language": "en",
+    "messageSendTtlSeconds": -1,
+    "components": [
+        {
+            "type": "BODY",
+            "text": "Hi {{customer_name}}, this is {{your_name1}} ，your trip advisor. \nHow are you?   {{free_style}} \nKindest regards, {{your_name2}}. ",
+            "example": {
+                "body_text": [
+                    [
+                        "Mike",
+                        "Coco",
+                        "I'm following up on your itinerary",
+                        "Coco2"
+                    ]
+                ]
+            }
+        }
+    ],
+    "category": "UTILITY",
+    "status": "APPROVED",
+    "qualityRating": "UNKNOWN",
+    "reason": "NONE",
+    "createTime": "2024-12-11T08:31:11.290Z",
+    "updateTime": "2024-12-11T08:31:34.610Z",
+    "statusUpdateEvent": "APPROVED"
+}
+```
+
+### 发送模板消息, 数据结构
+
+```json
+{
+  "action": "message", // 固定值
+  "actionId": "190.3c8322de-68df-4f9e-be8e-d92e7a13b7d7", // .uuid()
+  "renderId": "190.3c8322de-68df-4f9e-be8e-d92e7a13b7d7", // 忽略
+  "externalId": 190, // 留空
+  "to": "8613557032060",
+  "from": "+8617607730395",
+  "msgtype": "template", // 固定值
+  "msgcontent": {
+    "name": "order_updated_specialist_assigned_sharon", // 模板名称. 从原文
+    "language": {
+      "code": "en" // 语言. 从原文
+    },
+    "components": [ // 没有参数的组件, 建议不传. 组件顺序也会报错
+      {
+        "type": "body", 
+        "parameters": [ // 模板参数. 按 当前 `type` 中的参数顺序排列
+          {
+            "type": "text",
+            "text": "test OT 22" // 参数值: 不能换行, 连续空格<4个
+          },
+          {
+            "type": "text",
+            "text": "yoyo"
+          },
+          {
+            "type": "text",
+            "text": "111"
+          },
+          {
+            "type": "text",
+            "text": "yoyo"
+          }
+        ],
+        "text": "Hi test OT 22, this is yoyo ，your trip advisor. \nHow are you?   111 \nKindest regards, yoyo. " // 拼接一个完整内容
+      }
+    ]
+  },
+  "opi_sn": "404", // 发送人 ID
+  "coli_sn": 1082591,
+  "conversationid": 190 // 忽略
+}
+```

doc/运维语句.sql

@@ -1,3 +1,10 @@
+## 查找出掉线的 WhatsApp
+select *
+from whatsapp_individual.connections 
+where status IN ('offline')
+and wa_id not in ('8618777396951', '8613557032060','8613317835586')
+and wa_id <> 'null'
+
 // 查找所有开启会话的顾问，并用逗号分隔
 SELECT  group_concat(opi_sn separator ',') as 'sn_list' FROM (
 SELECT
@@ -116,3 +123,60 @@ WHERE tos = '5534999923993' AND opi_sn = 587;
  * end 会话 合并
  * ---------------------------------------------------------
  */
+
+
+
+/**
+个人 WhatsApp
+*/
+
+select * from whatsapp_user
+##where wau_opi_sn in (252, 261,264,265,330,360,376,413,421,453,605,620) ## 国际部
+where wau_opi_sn in (495, 143, 370, 114, 513, 514, 517, 522, 550, 587,354, 414, 599, 606, 639, 648, 654, 662, 674, 676,391, 451, 476, 501, 512, 525, 528, 585, 586, 644) ## GH
+
+-- 查找每个服务器在线的 WA 数量
+select connect_name, count(*)
+from whatsapp_individual.connections
+where status IN ('open')
+group by connect_name
+
+set SESSION group_concat_max_len=4294967295;
+
+-- 查找已经配置 WAI 服务的顾问
+select group_concat(wau_whatsapp separator ''',''') as 'sn_list'
+from sale_system.whatsapp_user
+where wau_wai_server is not null
+
+## 查找在线的 WhatsApp
+SELECT group_concat(sesson_id separator ''',''') as 'sesson_list'
+FROM whatsapp_individual.connections
+where status = 'open'
+
+-- 查找掉线的顾问
+select group_concat(sesson_id separator ''',''') as 'sesson_list' from whatsapp_individual.connections
+where status IN ('offline')
+and wa_id not in ('8618777396951', '8613557032060','8613317835586')
+
+## 查找 GH 没有扫码登录的顾问
+select group_concat(wau_opi_sn separator ',') as 'sn_list'
+from whatsapp_user
+where wau_whatsapp not in ('8613317835586','8617607732272','8613978392676','8618378304803','8617607730629','8619107833371','8619107835971','8617607731491','8615080129281','8617607737720','8618777396951','8618078444860','8615778462307','8617774702925','8615078398450','8619178340224','8617607731153','8617607735120','8617607737646','8618877388203','8615778493040','8613617733956','8618290167273','8617776515283','8617607736381','8613557032060','8613667839691','8618378388403','8613635132972','8617607734598','8617607732512','8615878340720')
+and wau_opi_sn in (495, 143, 370, 114, 513, 514, 517, 522, 550, 587,354, 414, 599, 606, 639, 648, 654, 662, 674, 676,391, 451, 476, 501, 512, 525, 528, 585, 586, 644)
+
+-- 查找使用 WhatsApp 顾问信息
+SELECT
+  OPI_SN, OPI_Code,OPI_Name,OPI_DEI_SN,OPI_FirstName,OPI_RealName, DeleteFlag
+FROM
+  dbo.OperatorInfo WHERE
+  OPI_SN in (143,476,528,391)
+  --OPI_SN in (495, 143, 370, 114, 513, 514, 517, 522, 550, 587)
+
+
+
+SELECT OPI_RealName + '(' + CAST(OPI_SN AS VARCHAR(100)) + ')',OPI_SN
+FROM
+  dbo.OperatorInfo
+  where
+  --DeleteFlag = 0 and
+  OPI_SN in (79,85,114,119,135,143,155,162,178,210,216,222,225,252,261,264,265,273,293,296,311,330,343,347,348,354,360,370,376,387,391,412,413,414,421,441,444,451,453,456,466,468,476,495,497,501,509,512,513,514,517,519,522,525,527,528,539,550,573,585,586,587,592,599,600,605,606,611,617,620,639,644,648,654,656,659,662,663,674,676,690,691)
+  and OPI_RealName in ('兰芬','孙俊垚','王继伟','曾君','潘宏宇','郑美珍','张丽娟','张倩倩','赵泽菲','王影','陆力影','吕燕珍','何秋云','沈慧香')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "global-sales",
   "private": true,
-  "version": "1.2.1-beta.1",
+  "version": "1.5.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,25 +12,24 @@
   "dependencies": {
     "@dckj/react-better-modal": "^0.1.2",
     "@lexical/react": "^0.20.0",
-    "@vonage/client-sdk": "^1.7.2",
-    "antd": "^5.22.2",
+    "@vonage/client-sdk": "^2.0.0",
+    "antd": "^5.25.2",
     "dayjs": "^1.11.13",
     "dingtalk-jsapi": "^3.0.41",
     "emoji-picker-react": "^4.12.0",
     "lexical": "^0.20.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0",
-    "zustand": "^4.5.5",
     "react-chat-elements": "^12.0.17",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
     "rxjs": "^7.8.1",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "zustand": "^4.5.7"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@vonage/client-sdk": "^1.7.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.37.2",

public/images/icons/brush-3-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 19.9967V14.9967H10V19.9967H19V12.9967H5V19.9967H8ZM4 10.9967H20V7.9967H14V3.9967H10V7.9967H4V10.9967ZM3 20.9967V12.9967H2V6.9967C2 6.44442 2.44772 5.9967 3 5.9967H8V2.9967C8 2.44442 8.44772 1.9967 9 1.9967H15C15.5523 1.9967 16 2.44442 16 2.9967V5.9967H21C21.5523 5.9967 22 6.44442 22 6.9967V12.9967H21V20.9967C21 21.549 20.5523 21.9967 20 21.9967H4C3.44772 21.9967 3 21.549 3 20.9967Z"></path></svg>

public/images/icons/eraser-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.58564 8.85449L3.63589 13.8042L8.83021 18.9985L9.99985 18.9978V18.9966H11.1714L14.9496 15.2184L8.58564 8.85449ZM9.99985 7.44027L16.3638 13.8042L19.1922 10.9758L12.8283 4.61185L9.99985 7.44027ZM13.9999 18.9966H20.9999V20.9966H11.9999L8.00229 20.9991L1.51457 14.5113C1.12405 14.1208 1.12405 13.4877 1.51457 13.0971L12.1212 2.49053C12.5117 2.1 13.1449 2.1 13.5354 2.49053L21.3136 10.2687C21.7041 10.6592 21.7041 11.2924 21.3136 11.6829L13.9999 18.9966Z"></path></svg>

public/images/icons/paint-brush-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4.9967V7.9967H19V4.9967H5ZM4 2.9967H20C20.5523 2.9967 21 3.44442 21 3.9967V8.9967C21 9.54899 20.5523 9.9967 20 9.9967H4C3.44772 9.9967 3 9.54899 3 8.9967V3.9967C3 3.44442 3.44772 2.9967 4 2.9967ZM6 11.9967H12C12.5523 11.9967 13 12.4444 13 12.9967V15.9967H14V21.9967H10V15.9967H11V13.9967H5C4.44772 13.9967 4 13.549 4 12.9967V10.9967H6V11.9967ZM17.7322 13.7289L19.5 11.9612L21.2678 13.7289C22.2441 14.7052 22.2441 16.2882 21.2678 17.2645C20.2915 18.2408 18.7085 18.2408 17.7322 17.2645C16.7559 16.2882 16.7559 14.7052 17.7322 13.7289Z"></path></svg>

src/actions/ConversationActions.js

@@ -1,5 +1,5 @@
 
-import { groupBy, isNotEmpty, pick, sortArrayByOrder } from '@/utils/commons';
+import { groupBy, isNotEmpty, pick, sortArrayByOrder, sortBy } from '@/utils/commons';
 import { fetchJSON, postJSON, postForm } from '@/utils/request'
 import { parseRenderMessageList } from '@/channel/bubbleMsgUtils';
 import { API_HOST } from '@/config';
@@ -11,36 +11,87 @@ import dayjs from 'dayjs';
  */
 export const fetchTemplates = async (params) => {
   const data = await fetchJSON(`${API_HOST}/listtemplates`, params);
-  const canUseTemplates = (data?.result?.items || [])
-    .filter((_t) => _t.status === 'APPROVED' && !['say_hello_from_trip_advisor','free_style_7','free_style_1'].includes(_t.name))
-    .map((ele, i) => ({ ...ele, components_origin: ele.components, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()), key:ele.name, displayName: templatesDisplayNameMap?.[ele.name] || ele.name}));
   const topName = [
-    'order_updated_specialist_assigned_sharon',
+    'agent_intro_with_update_v1',
     'online_inquiry_received',
     'say_hello_again',
-    'first_message_for_not_reply',
     'order_updated_specialist_assigned_christy',
-    'free_style_2',
-    'free_style_3',
-    'free_style_4',
+    'order_resumed_specialist_followup_schedule_sharon',
+    'travel_service_update_v2',
+    'travel_service_update_v1',
+    'order_updated_specialist_assigned_sharon',
+    'first_message_for_not_reply',
+    // 'free_style_3',
+    // 'free_style_4',
+  ];
+  // shouwcase
+  const scNames = ['trip_planner_showcase', 'showcase_different', 'order_status_updated'];
+  // 客运
+  const crNames = [
+    'notification_of_next_trip_planning',
+    // 'notification_of_following_up_by_cr_v3',
+    'notification_of_one_day_before_ending_the_trip_by_cr_v2',
+    'one_day_after_payment_by_yuni',
+    'notification_of_status_changed',
+    'notification_of_one_day_before_ending_the_trip_by_cr','one_day_after_payment_by_customer_relations',
+    'one_day_before_ending_the_trip_contacted_by_yuni','one_day_before_ending_the_trip_first_time_by_yuni',
+    'post_booking_confirmation_welcome',
+  ];
+  const crNamesOmit = [
+    'birthday_greetings_by_marketing','one_day_before_ending_the_trip_by_marketing',
+    'introduce_the_voucher_one_day_before_ending_the_trip_by_marketing',
+    'birthday_greetings_by_customer_relations_0',
+    'post_trip_voucher_issued',
+    'account_updated_order_ref',
+    'post_trip_account_updated_from_cr',
+    'post_trip_account_updated',
+    'account_update_birthday',
+    'post_trip_birthday_reward',
+    'birthday_greetings_by_customer_relations_2',
+    'birthday_greetings_by_customer_relations_1',
+    'notification_of_account_updated_by_cr',
+    'birthday_greetings_by_customer_relations',
+    'one_day_before_ending_the_trip_by_customer_relations',
   ]
-  const top = sortArrayByOrder( canUseTemplates.filter((_t) => topName.includes(_t.name)), 'name', topName);
-  const raw = canUseTemplates.filter((_t) => !topName.includes(_t.name));
-  return [...top, ...raw];
+  const canUseTemplates = (data?.result?.items || [])
+    .filter((_t) => _t.status === 'APPROVED' && !['say_hello_from_trip_advisor', 'free_style_7', 'free_style_1', 'free_style_2'].includes(_t.name))
+    .map((ele, i) => ({
+      ...ele,
+      components_origin: ele.components,
+      components: groupBy(ele.components, (_c) => _c.type.toLowerCase()),
+      key: ele.name,
+      // displayName: ele.name.startsWith('order_updated') ? templatesDisplayNameMap['order_updated']+`_${i}` : templatesDisplayNameMap?.[ele.name] || ele.name,
+      displayName: templatesDisplayNameMap?.[ele.name] || (ele.name.startsWith('order_updated') ? templatesDisplayNameMap['order_updated']+`_${i}` : ele.name),
+      displayLanguage: crNamesOmit.includes(ele.name) ? '客运-' : (crNames.includes(ele.name) || ele.name.includes('by_cr')) ? ele.language + '-客运' : scNames.includes(ele.name) ? ele.language + '-示例' : ele.language,
+    }))
+
+  const top2Name = topName.concat(canUseTemplates.filter(_t => _t.name.startsWith('order_updated')).map(_tem => _tem.name));
+
+  const top = sortArrayByOrder( canUseTemplates.filter((_t) => top2Name.includes(_t.name)), 'name', topName);
+  const second = canUseTemplates.filter(_t => _t.name.includes('free_style'));
+  const secondS = second.sort(sortBy('name'));
+  const raw = canUseTemplates.filter((_t) => !top2Name.includes(_t.name) && !_t.name.includes('free_style'));
+  // 剩下的排序
+  const rawS = sortArrayByOrder(raw, 'name', [...crNames, ...scNames, ...crNamesOmit ]);
+  return [...top, ...secondS, ...rawS];
 };
 /**
  * ↑上面的模板名称bak
  * order_updated_specialist_assigned_sharon : free_style_7
  * order_updated_specialist_assigned_christy : free_style_1
  * online_inquiry_received: say_hello_from_trip_advisor
+ * order_resumed_specialist_followup_schedule_sharon: free_style_2
  */
 const templatesDisplayNameMap = {
   'order_updated_specialist_assigned_sharon': 'specialist_followup',
-  'order_updated_specialist_assigned_christy': 'specialist_followup',
+  'order_updated_specialist_assigned_christy': 'specialist_followup_1',
   'online_inquiry_received': 'online_inquiry_received/say_hello',
+  'order_resumed_specialist_followup_schedule_sharon': 'order_resumed/specialist_followup',
+  'order_updated': 'specialist_followup',
+  'agent_intro_with_update_v1': 'quick_update_v1',
 };
 
-export const CONVERSATION_PAGE_SIZE = 20;
+export const CONVERSATION_PAGE_SIZE = 100;
 /**
  *
  * @param {object} params { opisn }
@@ -70,7 +121,7 @@ export const fetchConversationsList = async (params) => {
     customer_name: `${ele.whatsapp_name || ''}`.trim(),
     whatsapp_name: `${ele.whatsapp_name || ''}`.trim(),
     show_default: ele.conversation_memo || ele.whatsapp_name || ele?.channels?.whatsapp_phone_number || ele?.channels?.phone_number || ele?.channels?.email || '',
-    coli_id: ele.COLI_ID,
+    // coli_id: ele.COLI_ID,
     top_state: ele.top_state || 0,
   }))
   return list;
@@ -125,6 +176,7 @@ export const fetchConversationItemClose = async (body) => {
  * @param {object} body { phone_number, name }
  */
 export const postNewOrEditConversationItem = async (body) => {
+  body.whatsapp_phone_number = `${body.whatsapp_phone_number || ''}`.trim();
   const formData = new FormData();
   Object.keys(body).forEach(function (key) {
     formData.append(key, body[key]);
@@ -155,7 +207,7 @@ export const postEditConversationItemColiAction = async (params) => {
 };
 
 /**
- * @param {object} params { opisn, whatsappid }
+ * @param {object} params { opisn, conversationid }
  */
 export const fetchCleanUnreadMsgCount = async (params) => {
   const { errcode, result } = await fetchJSON(`${API_HOST}/clean_unread_msg_count`, params);
@@ -201,9 +253,10 @@ export const fetchConversationsSearch = async (params) => {
           opi_sn: ele.OPI_SN || ele.opi_sn || 0,
           OPI_Name: `${ele.OPI_Name || ele.opi_name || ''}`.trim(),
           opi_name: `${ele.OPI_Name || ele.opi_name || ''}`.trim(),
-          dateText: dayjs((ele.lasttime || ele.lasttime)).format('MM-DD HH:mm'),
+          dateText: dayjs((ele.lasttime)).format('MM-DD HH:mm'),
           matchMsgList: parseRenderMessageList((ele.msglist_AsJOSN || [])), // .reverse()),
           coli_id: '',
+          show_default: ele.session_memo || ele.whatsapp_name || ele?.whatsapp_phone_number || ele?.guest_email || '',
         }));
   return list;
 };
@@ -214,14 +267,15 @@ export const fetchConversationsSearch = async (params) => {
  */
 export const fetchMessagesHistory = async (params) => {
   const defaultParams = {
-    opisn: '',
-    whatsappid: '',
+    // opisn: '',
+    // whatsappid: '',
+    conversationid: '',
     lasttime: '2024-01-01T00:00:00',
     pagesize: MESSAGE_PAGE_SIZE,
     pagedir: 'next',
   };
   const _params = pick(params, Object.keys(defaultParams));
-  if (isEmpty(_params.whatsappid)) {
+  if (isEmpty(_params.conversationid)) {
     return [];
   }
   const { errcode, result } = await fetchJSON(`${API_HOST}/get_item_messages`, {...defaultParams, ..._params});

src/actions/EmailActions.js

@@ -1,12 +1,36 @@
-import { fetchJSON, postForm } from '@/utils/request';
-import { API_HOST, EMAIL_HOST } from '@/config';
+import { fetchJSON, postForm, postJSON } from '@/utils/request';
+import { API_HOST, API_HOST_V3, DATE_FORMAT, DATEEND_FORMAT, DATETIME_FORMAT, EMAIL_HOST, EMAIL_HOST_v3 } from '@/config';
+import { buildTree, groupBy, isEmpty, objectMapper, omitEmpty, uniqWith } from '@/utils/commons';
+import { readIndexDB, writeIndexDB } from '@/utils/indexedDB';
+import dayjs from 'dayjs';
+import { internalEventEmitter } from '@/utils/EventEmitterService';
 
-const parseHTMLString = (html) => {
+export const parseHTMLString = (html, needText = false) => {
   const parser = new DOMParser()
   const doc = parser.parseFromString(html, 'text/html')
-  const bodyContent = doc.body.innerHTML
+  let bodyContent = doc.body.innerHTML
+  // bodyContent = bodyContent.replace(/<img/g, '<img onerror="this.onerror=null;this.src=\'https://hiana-crm.oss-accelerate.aliyuncs.com/WAMedia/afe412d4-3acf-4e79-a623-048aeb4d696a.png\';"')
+  const bodyText = (doc.body.innerText);
+  return needText ? { html, bodyContent, bodyText } : bodyContent
+}
 
-  return bodyContent
+export const EMAIL_CHANNEL_NAME = 'mailbox_changes';
+let emailChangesChannel = null;
+export function getEmailChangesChannel() {
+  if (!emailChangesChannel) {
+    emailChangesChannel = new BroadcastChannel(EMAIL_CHANNEL_NAME)
+  }
+  return emailChangesChannel
+}
+
+// 通知邮件列表数据更新
+const notifyMailboxUpdate = (payload) => {
+  const notificationPayload = payload
+  // - 多个tab
+  const channel = getEmailChangesChannel()
+  channel.postMessage(notificationPayload)
+  // - 当前tab
+  internalEventEmitter.emit(EMAIL_CHANNEL_NAME, notificationPayload)
 }
 
 /**
@@ -17,7 +41,8 @@ export const getSalesSignatureAction = async (params) => {
   try {
     const { result } = await fetchJSON(`${EMAIL_HOST}/email_sign`, params)
     const { SignContent: html } = result
-    return parseHTMLString(html);
+    const bodyContent = parseHTMLString(html);
+    return bodyContent;
   } catch (error) {
     return '';
   }
@@ -28,6 +53,7 @@ export const getSalesSignatureAction = async (params) => {
  */
 export const postSendEmail = async (body) => {
   const { attaList=[], atta, content, ...bodyData } = body;
+  bodyData.ordertype = 227001;
   const formData = new FormData();
   Object.keys(bodyData).forEach(function (key) {
     formData.append(key, bodyData[key]);
@@ -55,10 +81,19 @@ export const postResendEmailAction = async (body) => {
 const encodeEmailInfo = (info) => {
   const encodeQuote = (str = '') => str.replace(/"/g, ''); //.replace(/</g,'&lt;').replace(/>/g,'&gt;')
 
+  const CSsClean = encodeQuote(info.MAI_CS).includes(',') ? encodeQuote(info.MAI_CS).split(',') : encodeQuote(info.MAI_CS).split(';');
+  const tosClean = (encodeQuote(info.MAI_To).includes(',') ? encodeQuote(info.MAI_To).split(',') : encodeQuote(info.MAI_To).split(';')).concat(CSsClean).filter(s => s);
+  const replyTo = info.MAI_Direction === 1 ? info.MAI_To : info.MAI_From;
+  const replyToAll = (tosClean.length > 1) ?
+    (info.MAI_Direction === 1 ? tosClean.join(',') : [...tosClean, info.MAI_From].join(','))
+    : (info.MAI_Direction === 1 ? info.MAI_To : info.MAI_From)
   return {
     ...info,
     MAI_From: encodeQuote(info.MAI_From),
     MAI_To: encodeQuote(info.MAI_To),
+    tos: [...new Set(tosClean)],
+    replyToAll,
+    replyTo,
   }
 };
 /**
@@ -66,12 +101,45 @@ const encodeEmailInfo = (info) => {
  * @param {object} { mai_sn }
  */
 export const getEmailDetailAction = async (params) => {
+  // const cacheKey = params.mai_sn;
+  // const readCache = await readIndexDB(cacheKey, 'mailinfo', 'mailbox');
+  // if (!isEmpty(readCache)) { // todo: 除了草稿
+  //   return readCache.data;
+  // }
+
   const { result } = await fetchJSON(`${EMAIL_HOST}/getmail`, params);
-  const mailType = result.MailInfo?.[0]?.MAI_ContentType || '';
+  let mailType = result.MailInfo?.[0]?.MAI_ContentType || '';
+  mailType = mailType === '' && (result.MailContent||'').includes('<html') ? 'text/html' : mailType;
+
+  const emailInfo = encodeEmailInfo(result.MailInfo?.[0] || {});
+  const isFromHub = emailInfo.MAI_From.includes('info@chinahighlights.net');
+
+  const delLinefeed = mailType === 'text/html' ? (result.MailContent||'').includes('<html') ? true : false : true;
+  const cleanContent = (result.MailContent || '').replace(/\r\n/g, delLinefeed ? '' : (isFromHub ? '<br>' : ''));
+
+  const { html, bodyContent, bodyText } = mailType === 'text/html' ? parseHTMLString(cleanContent, true) : { html: '', bodyContent: '', bodyText: '' };
+
+  const attachments = (isEmpty(result?.AttachList) ? [] : result.AttachList).filter(ele => isEmpty(ele.ATI_ContentID) || ele.ATI_ContentID == '0');
+  const insideAttachments = (isEmpty(result?.AttachList) ? [] : result.AttachList).filter(ele => !isEmpty(ele.ATI_ContentID) && ele.ATI_ContentID != '0');
 
-  return { info: encodeEmailInfo(result.MailInfo?.[0] || {}), content: mailType === 'text/html' ? parseHTMLString((result.MailContent || '').replace(/\r\n/g, '')) : (result.MailContent || ''), attachments: result?.AttachList || [] };
+  const ret = {
+    info: { ...encodeEmailInfo(result.MailInfo?.[0] || {}), mailType },
+    content: mailType === 'text/html' ? html : result.MailContent || '',
+    abstract: bodyText || result.MailContent || '',
+    attachments,
+    insideAttachments,
+    AttachList: isEmpty(result?.AttachList) ? [] : result.AttachList,
+  }
+  // writeIndexDB([{key: cacheKey, data: ret}], 'mailinfo', 'mailbox')
+  return ret;
+}
+
+export const getEmailOrderAction = async ({ colisn }) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn })
+  return errcode === 0 ? { ...result[0], customerDetail: result[0].contact[0] } : {}
 }
 
+
 /**
  * 主动收邮件, 单个账户
  * @param {object} { opi_sn, }
@@ -101,3 +169,323 @@ export const fetchEmailBindOrderAction = async (params) => {
   const { errcode, result } = await fetchJSON(`${API_HOST}/mailinfo_bindorder`, params)
   return errcode === 0 ? true : false;
 }
+
+
+const todoTypes = {
+  // 1新订单；2WhatsApp未读消息；3需一催；4需二催；5需三催；6未处理邮件；入境提醒coli_ordertype=7，余款提醒coli_ordertype=8
+  1: '新订单',
+  2: '未读WhatsApp',
+  3: '一催',
+  4: '二催',
+  5: '三催',
+  6: '老邮件',
+  7: '入境提醒',
+  8: '余款提醒',
+}
+/**
+ * 顾问的邮箱目录
+ * @param {object} params { opi_sn, year, by_start_date, by_success, important, if_want_book, if_thinking }
+ * @param {boolean} retOrder 是否直接返回订单列表 -- 忽略
+ */
+export const getEmailDirAction = async (params = { opi_sn: '' }, retOrder=false) => {
+  const defaultParams = { opi_sn: 0, year: dayjs().year(), by_start_date: -1, by_success: -1, important: -1, if_want_book: -1, if_thinking: -1 }
+  const { errcode, result } = await fetchJSON(`${API_HOST_V3}/email_dir`, { ...defaultParams, ...params })
+  const mailboxSort = result //.sort(sortBy('MDR_Order'));
+  let tree = buildTree(mailboxSort, { key: 'VKey', parent: 'VParent', name: 'VName', iconIndex: 'ImageIndex', rootKeys: [1], ignoreKeys: [-227001, -227002] })
+  tree = tree.filter((ele) => ele.key !== 1)
+  const retTree = errcode === 0 ? tree : [];
+  const orderList = groupBy(result, row => `${row.IsTrue}`)?.['0'] || [];
+  return retOrder !== false ? orderList : { [`${params.opi_sn}`]: retTree }
+};
+export const getMailboxCountAction = async (params = { opi_sn: '' }, update = true) => {
+  const defaultParams = {
+    opi_sn: 0,
+    // date1: dayjs().subtract(1, 'year').startOf('year').format(DATE_FORMAT),
+    date1: dayjs().subtract(180, 'days').format(DATE_FORMAT),
+    date2: dayjs().format(DATEEND_FORMAT)
+  }
+  const { errcode, result } = await fetchJSON(`${API_HOST_V3}/dir_count`, {...defaultParams, ...params})
+  const ret = errcode !== 0 ? { [`${params.opi_sn}`]: {} } : { [`${params.opi_sn}`]: result }
+  // 更新数量
+  if (update !== false) {
+    const readCacheDir = (await readIndexDB(Number(params.opi_sn), 'dirs', 'mailbox')) || {};
+    const mailboxDir = isEmpty(readCacheDir) ? [] : readCacheDir.tree.filter(node => node?._raw?.IsTrue === 1);
+    const _MapDir = new Map(mailboxDir.map((obj) => [obj.key, obj]))
+    Object.keys(result).map(dirKey => {
+      _MapDir.set(Number(dirKey), {..._MapDir.get(Number(dirKey)), count: result[dirKey]});
+    })
+    const _newToUpdate = Array.from(_MapDir.values());
+    const _MapRoot = new Map((readCacheDir?.tree || []).map((obj) => [obj.key, obj]))
+    _newToUpdate.forEach((row) => {
+      _MapRoot.set(row.key, row)
+    })
+    const _newRoot = Array.from(_MapRoot.values())
+    writeIndexDB([{ ...readCacheDir, key: Number(params.opi_sn), tree: _newRoot }], 'dirs', 'mailbox')
+    notifyMailboxUpdate({ type: 'dirs', key: Number(params.opi_sn) })
+  }
+
+  return ret;
+};
+export const getTodoOrdersAction = async (params) => {
+  const opi_arr = params.opisn.split(',')
+  const defaultStickyTree = opi_arr.reduce(
+    (a, ele) => ({
+      ...a,
+      [ele]: [
+        {
+          key: ele + '-today',
+          title: '今日任务',
+          getMails: false,
+          iconIndex: 'star',
+          children: [],
+          COLI_SN: 0,
+        },
+        {
+          key: ele + '-todo',
+          title: '待办任务',
+          getMails: false,
+          iconIndex: 'calendar',
+          children: [],
+          COLI_SN: 0,
+        },
+        // {
+        //   key: ele.OPI_DEI_SN + '-reminder',
+        //   title: '催信',
+        //   getMails: false,iconIndex: 'reminder',
+        //   icon: <BellTwoTone />,
+        //   children: [], COLI_SN: 0,
+        // },
+      ],
+    }),
+    {},
+  )
+  const { errcode, result } = await fetchJSON(`${API_HOST}/getwlorder`, params)
+  // 订单重复时, 取后一个状态, 因此翻转两次
+  const _result_unique = uniqWith(result.reverse(), (a, b) => a.COLI_SN === b.COLI_SN).reverse();
+  const orderList = errcode === 0 ? _result_unique : []
+  const byOPI = groupBy(orderList, 'OPI_SN')
+  const byState = Object.keys(byOPI).reduce((acc, key) => {
+    const sticky = groupBy(byOPI[key], (ele) => ([1, 6].includes(ele.coli_ordertype) ? 0 : [2, 3, 4, 5].includes(ele.coli_ordertype) ? 1 : 2))
+    const treeNode = [
+      {
+        key: key + '-today',
+        title: '今日任务',
+        getMails: false,
+        iconIndex: 'star',
+        _raw: { COLI_SN: 0, IsTrue: 0 },
+        children: (sticky[0] || []).map((o) => ({
+          key: `today-${o.COLI_SN}`,
+          title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
+          iconIndex: 13,
+          parent: key + '-today',
+          parentTitle: '今日任务',
+          parentIconIndex: 'star',
+          _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent: key + '-today', IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: key + '-today' },
+        })),
+      },
+      {
+        key: key + '-todo',
+        title: '待办任务',
+        getMails: false,
+        iconIndex: 'calendar',
+        _raw: { COLI_SN: 0, IsTrue: 0 },
+        children: (sticky[2] || []).map((o) => ({
+          key: `todo-${o.COLI_SN}`,
+          title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
+          iconIndex: 13,
+          parent: key + '-todo',
+          parentTitle: '待办任务',
+          parentIconIndex: 'calendar',
+          _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent: key + '-todo', IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: key + '-todo' },
+        })),
+      },
+      ...(!isEmpty(sticky[1] || [])
+        ? [
+            {
+              key: key + '-reminder',
+              title: '催信',
+              getMails: false,
+              iconIndex: 'reminder',
+              _raw: { COLI_SN: 0, IsTrue: 0 },
+              children: (sticky[1] || []).map((o) => ({
+                key: `reminder-${o.COLI_SN}`,
+                title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
+                iconIndex: 13,
+                parent: key + '-reminder',
+                parentTitle: '催信',
+                parentIconIndex: 'reminder',
+                _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent: key + '-reminder', IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: key + '-reminder' },
+              })),
+            },
+          ]
+        : []),
+    ]
+    return { ...acc, [key]: treeNode }
+  }, defaultStickyTree)
+  return errcode === 0 ? byState : defaultStickyTree
+};
+/**
+ * 获取待办目录和邮箱目录
+ * @param {object} params { opi_sn, userIdStr }
+ * @param {number} params.opi_sn
+ * @param {string} params.userIdStr - 用户ID字符串，默认为空
+ */
+export const getRootMailboxDirAction = async ({ opi_sn = 0, userIdStr = '' } = {}) => {
+  const [stickyTree, ...mailboxDir] = await Promise.all([
+    getTodoOrdersAction({ opisn: userIdStr || String(opi_sn), otype: 'today' }),
+    ...(userIdStr.split(',').map(_opi => getEmailDirAction({ opi_sn: _opi }))),
+  ])
+  const mailBoxCount = await Promise.all(userIdStr.split(',').map(_opi => getMailboxCountAction({ opi_sn: _opi }, false)));
+  const mailboxDirCountByOPI = mailBoxCount.reduce((a, c) => ({ ...a, ...c, }), {})
+  const mailboxDirByOPI = mailboxDir.reduce((a, c) => ({ ...a, ...(Object.keys(c).reduce((a, opi) => ({...a, [opi]: c[`${opi}`].map((dir) => ({ ...dir, count: mailboxDirCountByOPI[opi][`${dir.key}`] })) }), {} )) }), {})
+  const rootTree = Object.keys(stickyTree).map((opi) => ({ key: Number(opi), tree: [...stickyTree[opi], ...(mailboxDirByOPI?.[opi] || [])], treeTimestamp: Date.now() }))
+  writeIndexDB(rootTree, 'dirs', 'mailbox')
+  const _mapped = groupBy(rootTree, 'key')
+  return _mapped[opi_sn]?.[0]?.tree || []
+}
+
+/**
+ * 获取邮件列表
+ * @usage 邮件目录下的邮件列表
+ * @usage 订单的邮件列表
+ */
+export const queryEmailListAction = async ({ opi_sn = '', pagesize = 10, last_id = '', node = {}, } = {}) => {
+  const _params = {
+    vkey: 0,
+    vparent: 0,
+    order_source_type: 0,
+    // mai_senddate1: dayjs().subtract(1, 'year').startOf('year').format(DATE_FORMAT),
+    mai_senddate1: dayjs().subtract(180, 'days').format(DATE_FORMAT),
+    mai_senddate2: dayjs().format(DATEEND_FORMAT),
+    ...omitEmpty({
+      ...node,
+      opi_sn,
+    }),
+  }
+  _params.mai_senddate1 = dayjs(_params.mai_senddate1).format(DATE_FORMAT)
+  const cacheKey = isEmpty(_params.coli_sn) ? `dir-${node.vkey}` : `order-${node.vkey}`;
+  const { errcode, result } = await fetchJSON(`${API_HOST_V3}/mail_list`, _params)
+  const ret = errcode === 0 ? result : []
+  if (!isEmpty(ret)) {
+    const listids = [...new Set(ret.map(ele => ele.MAI_SN))];
+    writeIndexDB([{key: cacheKey, data: listids}], 'maillist', 'mailbox')
+    writeIndexDB(ret.map(ele => ({ data: {...ele, listKey: cacheKey }, key: ele.MAI_SN})), 'listrow', 'mailbox')
+  }
+  return ret;
+}
+
+export const searchEmailListAction = async ({opi_sn = '', mailboxtype = 'ALL', sender = '', receiver = '', subject = '', content=''}={}) => {
+  const formData = new FormData()
+  formData.append('opi_sn', opi_sn)
+  formData.append('mailboxtype', mailboxtype)
+  formData.append('sender', sender)
+  formData.append('receiver', receiver)
+  formData.append('subject', subject)
+  // formData.append('content', content)
+  const { errcode, result } = await postForm(`${API_HOST_V3}/mail_search`, formData)
+  const ret = errcode === 0 ? result : []
+  notifyMailboxUpdate({ type: 'maillist-search-result', query: [sender, receiver, subject].filter(s => s).join(' '), data: ret.map(ele => ({...ele, key: ele.MAI_SN, showFolder: true })) })
+  return ret;
+}
+
+const removeFromCurrentList = async (params) => {
+  const readRow0 = await readIndexDB(params.mai_sn_list[0], 'listrow', 'mailbox')
+  const listKey = readRow0?.data?.listKey || ''
+  if (listKey) {
+    const readCache = await readIndexDB(listKey, 'maillist', 'mailbox')
+    const updatedMailList = readCache.data.filter((mai_sn) => !params.mai_sn_list.includes(mai_sn))
+    writeIndexDB([{ key: listKey, data: updatedMailList }], 'maillist', 'mailbox')
+    notifyMailboxUpdate({ type: 'listrow', listKey, affectKeys: params.mai_sn_list })
+  }
+}
+const updateEmailKeyMap = { read: 'MOI_ReadState' };
+const updateEmailKeyFun = {
+  read: async (params) => {
+    const readCache = await readIndexDB(params.mai_sn_list, 'listrow', 'mailbox')
+    const updateField = Object.keys(params.set).reduce((a, c) => ({ ...a, [updateEmailKeyMap[c]]: params.set[c] }), {})
+    writeIndexDB(
+      params.mai_sn_list.map((ele) => ({ data: { ...(readCache.get(ele)?.data || {}), ...updateField }, key: ele })),
+      'listrow',
+      'mailbox',
+    )
+    // 通知邮件列表数据更新
+    const listKey = readCache.get(params.mai_sn_list[0])?.data?.listKey || '';
+    const notificationPayload = { type: 'listrow', listKey, affectKeys: params.mai_sn_list }
+    notifyMailboxUpdate(notificationPayload)
+  },
+  processed: removeFromCurrentList,
+  delete: removeFromCurrentList
+}
+/**
+ * 更新邮件属性
+ */
+export const updateEmailAction = async (params = { opi_sn: 0, mai_sn_list: [], set: {} }) => {
+  if  (isEmpty(params.mai_sn_list)) {
+    throw new Error('没有需要更新的邮件');
+  }
+  const { errcode, result } = await postJSON(`${API_HOST_V3}/mail_update`, params)
+  if (errcode === 0 ) {
+    for (const [key, value] of Object.entries(params.set)) {
+      const updateFun = updateEmailKeyFun[key] || (() => {});
+      updateFun(params)
+    }
+  }
+  getMailboxCountAction({ opi_sn: params.opi_sn });
+  return errcode === 0 ? result : {}
+}
+
+/**
+ * 获取邮件模板
+ * @param {object} params - Parameters for the email template request.
+ * @param {number} [params.coli_sn] - Customer order line item serial number.
+ * @param {number} [params.lgc] - Language code.
+ * @param {number} [params.opi_sn] - Order product item serial number.
+ * @param {string} [params.remind_type] - Type of reminder.
+ * @param {number} [params.remind_index] - Index of the reminder.
+ */
+export const getReminderEmailTemplateAction = async (params = { coli_sn: 0, lgc: 1, opi_sn: 0, remind_type: '', remind_index: 0 }) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST_V3}/reminder_letter`, params)
+  const { html, bodyContent, bodyText } = parseHTMLString(result?.MailContent, true) ;
+  return errcode === 0 ? {...result, bodyContent }: {}
+}
+
+/**
+ * 保存邮件草稿
+ * @param {object} body - The body of the email.
+ * @param {boolean} [isDraft=false] - Whether the email is a draft.
+ */
+export const saveEmailDraftOrSendAction = async (body, isDraft = false) => {
+  const url = isDraft !== false ? `${API_HOST_V3}/email_draft_save` : `${EMAIL_HOST_v3}/sendmail`;
+  const { attaList=[], atta, content, ...bodyData } = body;
+  bodyData.ordertype = 227001;
+  const formData = new FormData();
+  Object.keys(bodyData).forEach(function (key) {
+    formData.append(key, bodyData[key] || '');
+  });
+  // 附件只传新增的
+  attaList.filter(ele => !ele.fullPath).forEach(function (item) {
+    formData.append('attachment', item);
+  });
+  const { errcode, result } = await postForm(url, formData);
+  return errcode === 0 ? (result || {}) : {}
+};
+
+/**
+ * 删除邮件附件
+ */
+export const deleteEmailAttachmentAction = async (ati_sn_list) => {
+  const { errcode, result } = await postJSON(`${API_HOST_V3}/mail_attachment_delete`, { ati_sn_list })
+  return errcode === 0 ? result : {}
+};
+
+
+export const queryHTOrderListAction = async (params) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/query_order`, params)
+  return errcode !== 0 ? [] : result
+}
+
+export const queryOPIOrderAction = async (params) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/getdvancedwlorder`, params)
+  return errcode !== 0 ? [] : result
+};
+

src/actions/WaiAction.js

@@ -0,0 +1,25 @@
+import { fetchJSON, postForm, postJSON } from '@/utils/request'
+import { usingStorage } from '@/utils/usingStorage'
+
+const WAI_SERVER_KEY = 'G-STR:WAI_SERVER'
+
+const WAI_API_VER = '/api/v1'
+
+export const postSendMsg = async (body) => {
+  const { waiServer } = usingStorage(WAI_SERVER_KEY)
+  // const { attaList = [], atta, content, ...bodyData } = body
+  // const formData = new FormData()
+  // Object.keys(bodyData).forEach(function (key) {
+  //   formData.append(key, bodyData[key])
+  // })
+  // attaList.forEach(function (item) {
+  //   formData.append('attachment', item)
+  // })
+  const { result } = await postJSON(`${waiServer}${WAI_API_VER}/messages/send`, body)
+  return result
+}
+
+export const fetchQRCode = (phone) => {
+  const { waiServer } = usingStorage(WAI_SERVER_KEY)
+  return fetchJSON(`${waiServer}${WAI_API_VER}/channels/qrcode`, { phone })
+}

src/assets/App.css

@@ -1,6 +1,6 @@
 .logo {
   float: left;
-  height: 68px;
+  height: 60px;
   margin: 0 6px 0 0;
   background: rgba(255, 255, 255, 0.3);
 }

src/assets/icons/archive-2-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 20V7L20 3H4L2 7.00353V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20ZM4 9H20V19H4V9ZM5.236 5H18.764L19.764 7H4.237L5.236 5ZM15 11H9V13H15V11Z"></path></svg>

src/assets/icons/eraser-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.9999 18.9966H20.9999V20.9966H11.9999L8.00229 20.9991L1.51457 14.5113C1.12405 14.1208 1.12405 13.4877 1.51457 13.0971L12.1212 2.49053C12.5117 2.1 13.1449 2.1 13.5354 2.49053L21.3136 10.2687C21.7041 10.6592 21.7041 11.2924 21.3136 11.6829L13.9999 18.9966ZM15.6567 14.5113L19.1922 10.9758L12.8283 4.61185L9.29275 8.14738L15.6567 14.5113Z"></path></svg>

src/assets/icons/eraser-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.58564 8.85449L3.63589 13.8042L8.83021 18.9985L9.99985 18.9978V18.9966H11.1714L14.9496 15.2184L8.58564 8.85449ZM9.99985 7.44027L16.3638 13.8042L19.1922 10.9758L12.8283 4.61185L9.99985 7.44027ZM13.9999 18.9966H20.9999V20.9966H11.9999L8.00229 20.9991L1.51457 14.5113C1.12405 14.1208 1.12405 13.4877 1.51457 13.0971L12.1212 2.49053C12.5117 2.1 13.1449 2.1 13.5354 2.49053L21.3136 10.2687C21.7041 10.6592 21.7041 11.2924 21.3136 11.6829L13.9999 18.9966Z"></path></svg>

src/assets/icons/format-clear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.6512 14.0654L11.6047 20H9.57389L10.9247 12.339L3.51465 4.92892L4.92886 3.51471L20.4852 19.0711L19.071 20.4853L12.6512 14.0654ZM11.7727 7.53009L12.0425 5.99999H10.2426L8.24257 3.99999H19.9999V5.99999H14.0733L13.4991 9.25652L11.7727 7.53009Z"></path></svg>

src/assets/icons/mail-add-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13.3414C21.3744 13.1203 20.7013 13 20 13C16.6863 13 14 15.6863 14 19C14 19.7013 14.1203 20.3744 14.3414 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13.3414ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829ZM21 18H24V20H21V23H19V20H16V18H19V15H21V18Z"></path></svg>

src/assets/icons/mail-add-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM21 18H24V20H21V23H19V20H16V18H19V15H21V18Z"></path></svg>

src/assets/icons/mail-check-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 13.3414C21.3744 13.1203 20.7013 13 20 13C16.6863 13 14 15.6863 14 19C14 19.7013 14.1203 20.3744 14.3414 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V13.3414ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z"></path></svg>

src/assets/icons/mail-check-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 14H20V7.23792L12.0718 14.338L4 7.21594V19H14V21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V14ZM4.51146 5L12.0619 11.662L19.501 5H4.51146ZM19 22L15.4645 18.4645L16.8787 17.0503L19 19.1716L22.5355 15.636L23.9497 17.0503L19 22Z"></path></svg>

src/assets/icons/mail-unread-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.8032 8.4928C19.4663 8.81764 20.2118 9 21 9C21.3425 9 21.6769 8.96557 22 8.89998V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H16.1C16.0344 3.32311 16 3.65753 16 4C16 5.23672 16.449 6.36857 17.1929 7.24142L12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L18.8032 8.4928ZM21 7C19.3431 7 18 5.65685 18 4C18 2.34315 19.3431 1 21 1C22.6569 1 24 2.34315 24 4C24 5.65685 22.6569 7 21 7Z"></path></svg>

src/assets/icons/mail-unread-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.1 3C16.0344 3.32311 16 3.65753 16 4C16 4.34247 16.0344 4.67689 16.1 5H4.51146L12.0619 11.662L17.1098 7.14141C17.5363 7.66888 18.0679 8.10787 18.6728 8.42652L12.0718 14.338L4 7.21594V19H20V8.89998C20.3231 8.96557 20.6575 9 21 9C21.3425 9 21.6769 8.96557 22 8.89998V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H16.1ZM21 1C22.6569 1 24 2.34315 24 4C24 5.65685 22.6569 7 21 7C19.3431 7 18 5.65685 18 4C18 2.34315 19.3431 1 21 1Z"></path></svg>

src/assets/icons/paint-brush-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4.9967V7.9967H19V4.9967H5ZM4 2.9967H20C20.5523 2.9967 21 3.44442 21 3.9967V8.9967C21 9.54899 20.5523 9.9967 20 9.9967H4C3.44772 9.9967 3 9.54899 3 8.9967V3.9967C3 3.44442 3.44772 2.9967 4 2.9967ZM6 11.9967H12C12.5523 11.9967 13 12.4444 13 12.9967V15.9967H14V21.9967H10V15.9967H11V13.9967H5C4.44772 13.9967 4 13.549 4 12.9967V10.9967H6V11.9967ZM17.7322 13.7289L19.5 11.9612L21.2678 13.7289C22.2441 14.7052 22.2441 16.2882 21.2678 17.2645C20.2915 18.2408 18.7085 18.2408 17.7322 17.2645C16.7559 16.2882 16.7559 14.7052 17.7322 13.7289Z"></path></svg>

src/assets/icons/text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 6V21H11V6H5V4H19V6H13Z"></path></svg>

src/channel/bubbleMsgUtils.js

@@ -1,4 +1,4 @@
-import { cloneDeep, isEmpty, olog, fixTo2Decimals, pick } from "@/utils/commons";
+import { cloneDeep, isEmpty, olog, fixTo2Decimals, pick, objectMapper } from "@/utils/commons";
 import dayjs from "dayjs";
 import { v4 as uuid } from "uuid";
 
@@ -40,7 +40,24 @@ export const WABAccounts = [
     "decision": "DEFERRED",
     "requestedVerifiedName": "Global Highlights",
     "rejectionReason": "NONE"
-  }
+  },
+  {
+    "id": "563254206874812",
+    "phoneNumber": "+639454682947",
+    "wabaId": "190290134156880",
+    "verifiedName": "Customer Relation Specialist",
+    "qualityRating": "UNKNOWN",
+    "messagingLimit": "TIER_1K",
+    "isOfficialBusinessAccount": false,
+    "codeVerificationStatus": "VERIFIED",
+    "status": "CONNECTED",
+    "displayPhoneNumber": "+63 945 468 2947",
+    "nameStatus": "DECLINED",
+    "newNameStatus": "NONE",
+    "decision": "DEFERRED",
+    "requestedVerifiedName": "Customer Relation Specialist",
+    "rejectionReason": "NONE"
+  },
 ];
 export const WABAccountsMapped = WABAccounts.reduce((a, c) => ({ ...a, [removeFirstPlus(c.phoneNumber)]: c, [c.phoneNumber]: c }), {})
 
@@ -57,6 +74,11 @@ export const replaceTemplateString = (str, replacements) => {
   return result;
 }
 
+export const whatsappTemplateBtnParamTypesMapped = {
+  'copy_code': 'coupon_code',
+  // 'quick_reply': 'payload',
+};
+
 /**
  * @deprecated 在渲染时处理
  */
@@ -81,6 +103,7 @@ const mediaMsg = {
     action: 'message',
     actionId: msg.id,
     renderId: msg.id,
+    externalId: msg.externalId,
     to: msg.to,
     from: msg.from,
     msgcontent: {
@@ -116,6 +139,7 @@ export const sentMsgTypeMapped = {
       action: 'message',
       actionId: msg.id,
       renderId: msg.id,
+      externalId: msg.externalId,
       to: msg.to,
       from: msg.from,
       msgtype: 'text',
@@ -199,6 +223,7 @@ export const sentMsgTypeMapped = {
       action: 'message',
       actionId: msg.id,
       renderId: msg.id,
+      externalId: msg.externalId,
       to: msg.to,
       from: msg.from,
       msgtype: 'template',
@@ -206,18 +231,18 @@ export const sentMsgTypeMapped = {
         ...msg.template,
         components: [
           ...msg.template.components.filter((com) => !['footer', 'buttons'].includes(com.type.toLowerCase())),
-          ...(msg.template.components.filter((com) => 'buttons' === com.type.toLowerCase()).length > 0
-            ? msg.template.components
-                .filter((com) => 'buttons' === com.type.toLowerCase())[0]
-                // .buttons.filter((btns) => ! ['phone_number', 'url'].includes( btns.type.toLowerCase()))
-                .buttons.filter((btns) => !isEmpty(btns.example)) // 静态按钮不发
-                .map((btn, btnI) => ({
-                  type: 'button',
-                  sub_type: btn.type.toLowerCase(),
-                  index: btnI,
-                  // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
-                }))
-            : []),
+          // ...(msg.template.components.filter((com) => 'buttons' === com.type.toLowerCase()).length > 0
+          //   ? msg.template.components
+          //       .filter((com) => 'buttons' === com.type.toLowerCase())[0]
+          //       // .buttons.filter((btns) => ! ['phone_number', 'url'].includes( btns.type.toLowerCase()))
+          //       .buttons.filter((btns) => !isEmpty(btns.example)) // 静态按钮不发
+          //       .map((btn, btnI) => ({
+          //         type: 'button',
+          //         sub_type: btn.type.toLowerCase(),
+          //         index: btnI,
+          //         // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
+          //       }))
+          //   : []),
         ],
       },
     }),
@@ -285,18 +310,21 @@ const whatsappMsgMapped = {
   'whatsapp.inbound_message.received': {
     getMsg: (result) => {
       // console.log('whatsapp.inbound_message.received', result);
-      return isEmpty(result?.whatsappInboundMessage) ? null : { ...result.whatsappInboundMessage, conversationid: result.conversationid, messageorigin: result.messageorigin, msg_source: 'WABA', msg_direction: 'inbound' };
+      const data1 = pick(result, ['conversationid', 'opi_sn', 'coli_sn', 'coli_id'])
+      return isEmpty(result?.whatsappInboundMessage) ? null : { ...result.whatsappInboundMessage, ...data1, messageorigin: result.messageorigin, msg_source: 'WABA', msg_direction: 'inbound' }
     },
     contentToRender: (contentObj) => {
       // console.log('whatsapp.inbound_message.received to render', contentObj);
-      return parseRenderMessageItem(contentObj);
+      return parseRenderMessageItem(contentObj)
     },
     contentToUpdate: () => null,
   },
   'whatsapp.message.updated': {
     getMsg: (result) => {
       // console.log('getMsg', result);
-      return isEmpty(result?.whatsappMessage) ? null : { ...result.whatsappMessage, conversationid: result.conversationid, messageorigin: result.messageorigin, msg_source: 'WABA', msg_direction: 'outbound' };
+      return isEmpty(result?.whatsappMessage)
+        ? null
+        : { ...result.whatsappMessage, conversationid: result.conversationid, messageorigin: result.messageorigin, msg_source: 'WABA', msg_direction: 'outbound' }
     },
     contentToRender: (contentObj) => {
       if (contentObj?.status === 'failed' && ['130472', 'BAD_REQUEST'].includes(contentObj.errorCode)) {
@@ -306,22 +334,88 @@ const whatsappMsgMapped = {
           text: { body: `❌ ${whatsappError?.[contentObj.errorCode] || contentObj.errorMessage}` }, // contentObj.errorMessage // Message failed to send.
           id: contentObj.id,
           wamid: contentObj.id,
-        };
-        return parseRenderMessageItem(contentObj);
+        }
+        return parseRenderMessageItem(contentObj)
       }
       // * 仅更新消息状态, 没有输出
-      return null;
+      return null
     },
     contentToUpdate: (msgcontent) => ({
       ...msgcontent,
       ...parseRenderMessageItem(msgcontent),
       id: msgcontent.wamid,
-      status: msgStatusRenderMapped[(msgcontent?.status || 'failed')],
+      status: msgStatusRenderMapped[msgcontent?.status || 'accepted'],
       sender: 'me',
-      dateString: msgcontent.status==='failed' ? `发送失败 ${whatsappError?.[msgcontent.errorCode] || msgcontent.errorMessage || ''} ❌` : '',
+      dateString: msgcontent.status === 'failed' ? `发送失败 ${whatsappError?.[msgcontent.errorCode] || msgcontent.errorMessage || ''} ❌` : '',
     }),
   },
-};
+  'wai.message.received': {
+    getMsg: (result) => {
+      const data1 = pick(result, ['conversationid', 'opi_sn', 'coli_sn', 'coli_id'])
+      return isEmpty(result?.waiMessage)
+        ? null
+        : { ...result.waiMessage, ...data1, messageorigin: result.messageorigin, msg_source: 'wai', ...objectMapper(result.waiMessage, { direction: { key: 'msg_direction' } }) }
+    },
+    contentToRender: (contentObj) => {
+      return parseRenderMessageItem(contentObj)
+    },
+    contentToUpdate: () => null,
+  },
+  'wai.message.updated': {
+    getMsg: (result) => {
+      return isEmpty(result?.waiMessage)
+        ? null
+        : {
+            ...result.waiMessage,
+            conversationid: result.conversationid,
+            messageorigin: result.messageorigin,
+            msg_source: 'wai',
+            ...objectMapper(result.waiMessage, { direction: { key: 'msg_direction' } }),
+          }
+    },
+    contentToRender: (contentObj) => {
+      if (contentObj?.status === 'failed') {
+        contentObj = {
+          ...contentObj,
+          type: 'error',
+          text: { body: `❌` }, // contentObj.errorMessage // Message failed to send.
+          id: contentObj.id,
+          wamid: contentObj.id,
+        }
+        return parseRenderMessageItem(contentObj)
+      }
+      // * 仅更新消息状态, 没有输出
+      return null
+    },
+    contentToUpdate: (msgcontent) => ({
+      ...msgcontent,
+      ...parseRenderMessageItem(msgcontent),
+      id: msgcontent.wamid,
+      status: msgcontent.msg_direction === 'outbound' ? msgStatusRenderMapped[msgcontent?.status || 'accepted'] : '',
+      sender: msgcontent.msg_direction === 'outbound' ? 'me' : msgcontent?.customerProfile?.name || '',
+      dateString: msgcontent.status === 'failed' ? `发送失败 ❌` : '',
+    }),
+  },
+  'wai.creds.update': {
+    getMsg: (result) => {
+      return isEmpty(result?.waiMessage)
+        ? {}
+        : { ...result.waiMessage, conversationid: result.conversationid, msg_source: 'wai', }
+    },
+    contentToRender: (contentObj) => null,
+    contentToUpdate: (msgcontent) => null,
+    contentToNotify: (contentObj) => {
+      return {
+        ...contentObj,
+        status: contentObj?.status || '',
+        key: contentObj.to || '',
+        content: `WhatsApp号码: ${contentObj.to}`,
+        title: (contentObj.status === 'offline') ? `WhatsApp 断开连接` : '',
+        type: (contentObj.status === 'offline') ? 'warning' : 'info',
+      };
+    },
+  },
+}
 const emailMsgMapped = {
   'email.inbound.received': {
     getMsg: (result) => {
@@ -347,7 +441,7 @@ const emailMsgMapped = {
       ...msgcontent,
       ...parseRenderMessageItem({...msgcontent, }),
       id: msgcontent.id,
-      status: msgStatusRenderMapped[(msgcontent?.status || 'failed')],
+      status: msgStatusRenderMapped[(msgcontent?.status || 'accepted')],
       sender: 'me',
       dateString: msgcontent.status==='failed' ? `发送失败 ❌` : '',
     }),
@@ -370,6 +464,47 @@ const emailMsgMapped = {
     },
   }
 }
+const sessionMsgMapped = {
+  'session.new': {
+    getMsg: (result) => {
+      // sessionItem 是数组
+      return isEmpty(result?.sessionItem)
+        ? null
+        : result.sessionItem.map((ele) => ({
+            ...ele,
+            customer_name: `${ele.whatsapp_name || ''}`.trim(),
+            whatsapp_name: `${ele.whatsapp_name || ''}`.trim(),
+            show_default: ele.conversation_memo || ele.whatsapp_name || ele?.channels?.whatsapp_phone_number || ele?.channels?.phone_number || ele?.channels?.email || '',
+            // coli_id: ele.COLI_ID,
+            top_state: ele.top_state || 0,
+            msg_source: 'session',
+            msg_direction: 'inbound',
+          }))
+    },
+    contentToRender: (contentObj) => null,
+    contentToUpdate: (msgcontent) => null,
+  },
+  'session.updated': {
+    getMsg: (result) => {
+      // sessionItem 是数组
+      return isEmpty(result?.sessionItem)
+        ? []
+        : result.sessionItem.map((ele) => ({
+            ...ele,
+            customer_name: `${ele.whatsapp_name || ''}`.trim(),
+            whatsapp_name: `${ele.whatsapp_name || ''}`.trim(),
+            show_default: ele.conversation_memo || ele.whatsapp_name || ele?.channels?.whatsapp_phone_number || ele?.channels?.phone_number || ele?.channels?.email || '',
+            // coli_id: ele.COLI_ID,
+            top_state: ele.top_state || 0,
+            msg_source: 'session',
+            msg_direction: 'inbound',
+            // last_message: {...ele.last_message, text: { body: ele.last_message?.text_body || '', preview_url: null }},
+          }))
+    },
+    contentToRender: (contentObj) => null,
+    contentToUpdate: (msgcontent) => null,
+  },
+}
 export const msgStatusRenderMapped = {
   'accepted': 'waiting', // 'sent', // 接口的发送请求
   'sent': 'sent',
@@ -395,7 +530,7 @@ export const receivedMsgTypeMapped = {
       ...msgcontent,
       actionId: msgcontent.actionId,
       id: msgcontent.wamid,
-      status: msgStatusRenderMapped[(msgcontent?.status || 'failed')],
+      status: msgStatusRenderMapped[(msgcontent?.status || 'accepted')],
       conversationid: msgcontent.actionId.split('.')[0], // msgcontent.conversation.sn,
       date: msgcontent.createTime,
       sender: 'me',
@@ -406,6 +541,8 @@ export const receivedMsgTypeMapped = {
     getMsg: (result) => result,
     contentToRender: () => null,
     contentToUpdate: (msgcontent) => {
+      if (isEmpty(msgcontent)) return null;
+      if (isEmpty(msgcontent.error)) return null;
       let apiErrorCode,
         apiErrorMsg = '';
       const waCode = msgcontent.error.message.match(/\(#(\d+)\)/);
@@ -427,6 +564,7 @@ export const receivedMsgTypeMapped = {
     },
   },
   ...cloneDeep(emailMsgMapped),
+  ...cloneDeep(sessionMsgMapped),
 };
 /**
  * 消息类型处理, 合并各渠道类型
@@ -437,15 +575,17 @@ export const whatsappMsgTypeMapped = {
   error: {
     type: (_m) => ({ type: 'system' }),
     data: (msg) => ({ id: msg.wamid, text: msg.errorCode ? msg.errorMessage : msg.text.body }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg.errorCode ? msg.errorMessage : msg.text.body }),
   },
   system: {
     type: 'system',
     data: (msg) => ({ id: msg.wamid, text: msg.system?.body }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg?.text?.body || msg?.text }),
   },
   text: {
     type: 'text',
     data: (msg) => ({ id: msg.wamid, text: autoLinkText(msg?.text?.body), originText: msg?.text?.body, title: msg?.customerProfile?.name || '',  }), // msg?.from ||
-    renderForReply: (msg) => ({ id: msg.wamid, message: msg?.text?.body }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg?.text?.body || msg?.text }),
   },
   image: {
     type: 'photo',
@@ -476,7 +616,7 @@ export const whatsappMsgTypeMapped = {
       width: 'auto',
       height: 200,
       alt: msg.image?.caption || '',
-      message: msg.image?.caption || '',
+      message: msg.image?.caption || '[图片]',
     }),
   },
   sticker: {
@@ -551,13 +691,23 @@ export const whatsappMsgTypeMapped = {
   // unsupported: { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
   unsupported: {
     type: 'text',
-    data: (msg) => ({ id: msg.wamid, text: `[暂不支持此消息类型](${msg.wamid})`, dateString: `${dayjs(msg.sendTime).format('MM-DD HH:mm')} [ WhatsApp未提供消息内容 ] 可能是客人删除消息/会话, \n可询问客人截图/详细内容 或 忽略 📌` }),
-    renderForReply: (msg) => ({ id: msg?.wamid || msg.id, text: `[Message type unsupported](${msg.wamid})` }),
+    data: (msg) => ({ id: msg.wamid, text: `[对方删除消息](${msg.wamid})`, dateString: `${dayjs(msg.sendTime).format('MM-DD HH:mm')} [ WhatsApp未提供消息内容 ] 客人删除消息/会话` }),
+    renderForReply: (msg) => ({ id: msg?.wamid || msg.id, message: `[Message type unsupported](${msg.wamid})` }),
+  },
+  unresolvable: {
+    type: 'text',
+    data: (msg) => ({ id: msg.wamid, text: `[无法解析](${msg.wamid})`, }),
+    renderForReply: (msg) => ({ id: msg?.wamid || msg.id, message: `[无法解析](${msg.wamid})` }),
   },
   reaction: {
     type: 'text',
     data: (msg) => ({ id: msg.wamid, text: msg.reaction?.emoji || '' }),
-    renderForReply: (msg) => ({ id: msg.wamid, text: msg.reaction?.emoji || '' }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg.reaction?.emoji || '' }),
+  },
+  button: {
+    type: 'text', // todo: 后端返回 type='button' button: { payload, text }
+    data: (msg) => ({ id: msg.wamid, text: msg.button?.payload || msg.button?.text || '' }),
+    renderForReply: (msg) => ({ id: msg.wamid, message: msg.button?.payload || msg.button?.text || '' }),
   },
   document: {
     type: 'file',
@@ -592,11 +742,11 @@ export const whatsappMsgTypeMapped = {
     type: 'location',
     data: (msg) => ({
       id: msg.wamid,
-      title: `位置信息 ${msg.location.name || ''} 已转高德地图, ↓点击打开`,
-      text: msg.location.address, // 地址
-      // src: `https://uri.amap.com/marker?position=${msg.location.longitude},${msg.location.latitude}&callnative=1`,
+      title: `位置信息 ${msg.location?.name || ''} 已转高德地图, ↓点击打开`,
+      text: msg.location?.address, // 地址
+      // src: `https://uri.amap.com/marker?position=${msg.location?.longitude},${msg.location?.latitude}&callnative=1`,
       src: 'https://cdn.pixabay.com/photo/2016/03/22/04/23/map-1272165_1280.png',
-      href: `https://uri.amap.com/marker?position=${msg.location.longitude},${msg.location.latitude}&callnative=1`,
+      href: `https://uri.amap.com/marker?position=${msg.location?.longitude},${msg.location?.latitude}&callnative=1`,
       data: {
         longitude: msg.location?.longitude,
         latitude: msg.location?.latitude,
@@ -611,11 +761,11 @@ export const whatsappMsgTypeMapped = {
   template: {
     type: 'text',
     data: (msg) => {
-      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : {};
+      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [(v.type).toLowerCase()]: v }), {}) : {};
       return { id: msg.wamid, text: autoLinkText(templateDataMapped?.body?.text || `......${(templateDataMapped?.body?.parameters || []).map(pv => pv?.text || '').join('......')}......`), title: '模板消息',  }; // msg.template.name
     },
     renderForReply: (msg) => {
-      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : null;
+      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [(v.type).toLowerCase()]: v }), {}) : null;
       return { id: msg.wamid, message: templateDataMapped?.body?.text || templateDataMapped?.body?.parameters?.[0]?.text || '', title: '模板消息', }; // `${msg.template.name}`
     },
   },
@@ -638,6 +788,8 @@ export const parseRenderMessageItem = (msg) => {
   // console.log('parseRenderMessageItem', msg);
   const thisMsgType = Object.keys(whatsappMsgTypeMapped).includes(msg.type) ? msg.type : 'unsupported';
   return {
+    ...msg,
+    opi_sn: msg.opi_sn || '',
     msgOrigin: msg,
     date: msg?.sendTime || msg?.createTime || '',
     ...(whatsappMsgTypeMapped?.[thisMsgType]?.data(msg) || {}),
@@ -648,15 +800,15 @@ export const parseRenderMessageItem = (msg) => {
     dateString: dayjs(msg?.sendTime || msg.createTime).format('MM-DD HH:mm'),
     from: msg.from,
     sender: msg.from,
-    senderName: msg?.customerProfile?.name || msg?.fromName || msg?.from || 'me',
+    senderName: msg.msg_direction === 'outbound' ? 'me' : msg?.customerProfile?.name || msg?.fromName || msg?.from || '',
     customer_name: msg?.customerProfile?.name || '',
     whatsapp_name: msg?.customerProfile?.name || '',
     whatsapp_phone_number: isEmpty(msg?.customerProfile) ? msg.to : msg.from,
     // whatsapp_msg_type: msg.msg_source==='WABA' ? msg.type : '',
     // whatsapp_msg_type: (msg.msg_source || 'WABA') === 'WABA' ? msg.type : '', // 1.0接口没有msg_source
-    statusCN: msgStatusRenderMappedCN[msg?.status || 'failed'],
-    statusTitle: msgStatusRenderMappedCN[msg?.status || 'failed'],
-    replyButton: !['waiting', 'failed'].includes(msg?.status || '') ,
+    statusCN: msgStatusRenderMappedCN[msg?.status || 'accepted'],
+    statusTitle: msgStatusRenderMappedCN[msg?.status || 'accepted'],
+    replyButton: !['accepted', 'waiting', 'failed'].includes(msg?.status || '') ,
     ...((isEmpty(msg.context) && isEmpty(msg.reaction)) || msg.context?.forwarded === true // || isEmpty(msg.messageorigin)
       ? {}
       : {
@@ -704,18 +856,18 @@ export const parseRenderMessageList = (messages) => {
       // }
     }
     const msgContent = typeof msgtext === 'string' ? JSON.parse(msgContentString) : (msgtext || {});
-    const msgType = isEmpty(msgContent) ? msg.msgtype : (Object.keys(whatsappMsgTypeMapped).includes(msgContent.type) ? msgContent.type : 'unsupported')
+    const msgType = isEmpty(msgContent) ? msg.msgtype : (Object.keys(whatsappMsgTypeMapped).includes(msgContent.type) ? msgContent.type : 'unresolvable')
     msgContent.template = msg.msgtype === 'template' ? { ...msgContent.template, ...template } : {};
     // const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
     let waCode, waError = '';
-    if ((msgContent?.status || 'failed') === 'failed' && msgContent.errorMessage && msg.msg_direction === 'outbound') {
-      (waCode = msgContent.errorMessage.match(/\(#(\d+)\)/));
-      (waError = (whatsappError?.[waCode?.[1]] || whatsappError?.[msgContent.errorCode] || msgContent.errorMessage));
+    if ((msgContent?.status || 'accepted') === 'failed' && (msgContent.errorMessage || msg.errors_code) && msg.msg_direction === 'outbound') {
+      (waCode = (msgContent.errorMessage || msg.errors_code).match(/\(#(\d+)\)/));
+      (waError = (whatsappError?.[waCode?.[1]] || whatsappError?.[msgContent.errorCode] || msgContent.errorMessage || whatsappError?.[msg.errors_code]));
       if (!isEmpty(msgContent.whatsappApiError)) {
         waError = whatsappError?.[msgContent.whatsappApiError.code] || msgContent.whatsappApiError.message;
         // waError += `\n[${msgContent.errorCode}] ${whatsappError?.[msgContent.errorCode] || msgContent.errorMessage}`;
       }
-      if (msgContent.errorMessage.includes('Invalid E.146 phone number')) {
+      if ((msgContent.errorMessage || msg.errors_code).includes('Invalid E.146 phone number')) {
         waError = whatsappError.INVALID_PHONE_NUMBER;
       }
     }
@@ -735,20 +887,20 @@ export const parseRenderMessageList = (messages) => {
       from: msgContent.from,
       sender: msgContent.from,
       senderName: msgContent?.customerProfile?.name || msgContent.from || 'me',
-      replyButton: !['waiting', 'failed'].includes(msgContent?.status || '') ,
+      replyButton: !['accepted', 'waiting', 'failed'].includes(msgContent?.status || '') ,
       // 用forwarded表示Resend, 与Reply互斥
-      forwarded: msg.msg_direction === 'outbound' && msg.msg_source === 'email' && ['email'].includes(msgContent.type) && (msgContent?.status || 'failed') === 'failed',
+      forwarded: msg.msg_direction === 'outbound' && msg.msg_source === 'email' && ['email'].includes(msgContent.type) && (msgContent?.status || 'accepted') === 'failed',
       ...(msg.msg_direction === 'outbound'
         ? {
             sender: 'me',
             senderName: 'me',
-            status: msgStatusRenderMapped[msgContent?.status || 'failed'],
-            dateString: msgStatusRenderMapped[msgContent?.status || 'failed'] === 'failed' ? `${(msg.msgtime || '').replace('T', ' ')} 发送失败 ${waError} ❌` : '',
-            statusCN: msgStatusRenderMappedCN[msgContent?.status || 'failed'],
-            statusTitle: msgStatusRenderMappedCN[msgContent?.status || 'failed'],
-            id: (msgContent?.status || 'failed') === 'failed' ? msgContent.actionId : (msgTypeData.id || msg.id || msg.sn),
+            status: msgStatusRenderMapped[msgContent?.status || 'accepted'],
+            dateString: msgStatusRenderMapped[msgContent?.status || 'accepted'] === 'failed' ? `${(msg.msgtime || '').replace('T', ' ')} 发送失败 ${waError} ❌` : '',
+            statusCN: msgStatusRenderMappedCN[msgContent?.status || 'accepted'],
+            statusTitle: msgStatusRenderMappedCN[msgContent?.status || 'accepted'],
+            id: (msgContent?.status || 'accepted') === 'failed' ? (msgContent.actionId || msgContent.id) : (msgTypeData.id || msg.id || msg.sn),
             actionId: msgContent.actionId,
-            replyButton: !['waiting', 'failed'].includes(msgContent?.status || 'failed') ,
+            replyButton: !['accepted', 'waiting', 'failed'].includes(msgContent?.status || 'accepted') ,
           }
         : {}),
       ...(isEmpty(messageorigin) && (isEmpty(msgContent.context) || msgContent.context?.forwarded === true)
@@ -771,15 +923,18 @@ export const parseRenderMessageList = (messages) => {
       // conversationid: conversationid,
       // title: msg.customerProfile.name,
       // whatsapp_msg_type: (msg.msg_source || 'WABA') === 'WABA' ? msgContent.type : '', // 1.0接口没有msg_source
+      whatsapp_msg_type: '',
+      waba: '',
+      wabaName: '',
       ...((msg.msg_source) === 'WABA' ? {
         whatsapp_msg_type: msgContent.type,
         waba: msg.msg_direction === 'outbound' ? msgContent.from : msgContent.to,
         wabaName: WABAccountsMapped[msg.msg_direction === 'outbound' ? msgContent.from : msgContent.to]?.verifiedName,
-      } : {
-        whatsapp_msg_type: '',
-        waba: '',
-        wabaName: '',
-      }),
+      } : {}),
+      ...((msg.msg_source) === 'wai' ? {
+        whatsapp_msg_type: msgContent.type,
+        wabaName: '个人号',
+      } : {}),
     }
   });
 };
@@ -792,12 +947,12 @@ export const whatsappError = {
   '100': '参数错误, 请联系技术组',
   'FORBIDDEN': '[FORBIDDEN] ',
   '4': '[4] 无法连接WhatsApp.\n请稍后重试', // (#4) Application request limit reached
-  '131026': '[131026] 消息无法投递(未同意WhatsApp 的隐私政策).\n请使用邮件联系',
+  '131026': '[131026] 消息无法投递(未同意WhatsApp 的隐私政策).\n请使用 邮件/个人WhatsApp 联系',
   '131047': '[131047] 会话未激活. \n请使用模板消息💬发送',
   '131053': '[131053] 文件上传失败.',
   '131048': '[131048] 账户被风控.', // 消息发送太多, 达到垃圾数量限制
-  '131049': '[131049] 号码触发风控. \n请暂停发送营销消息, 使用跟进模板\n或引导客户主动发起会话.', // 消息发送太多, 营销限制
-  '131031': '[131031] 账户已锁定.',
+  '131049': '[131049] 号码触发风控. \n请暂停发送营销消息, 使用"触达率高"模板\n或引导客户主动发起会话.', // 消息发送太多, 营销限制
+  '131031': '[131031] 账户已被禁用.',
   '130472': '[130472] 此号码不接收商业号消息\n请使用邮件联系 或 引导客户主动发起会话.',
 };
 

src/channel/realTimeAPI.js

@@ -2,7 +2,7 @@ import { webSocket } from 'rxjs/webSocket';
 import { of, timer, concatMap, EMPTY, takeWhile, concat } from 'rxjs';
 import { filter, buffer, map, tap, retryWhen, retry, delay, take, catchError } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
-import { logWebsocket } from '@/utils/commons';
+import { logWebsocket } from '@/utils/indexedDB';
 
 export class RealTimeAPI {
   constructor(param, onOpenCallback, onCloseCallback, onRetryCallback) {

src/components/DnDModal.jsx

@@ -46,7 +46,7 @@ const DnDModal = ({ children, open, setOpen, onCancel, onMove, onResize, initial
       maskClosable={false}
       // theme='dark'
       // className={'!border !border-solid !border-indigo-500 rounded !p-2' }
-      titleBarClassName='!bg-neutral-100 !rounded !rounded-b-none !border-none !p-3 !font-bold !text-slate-600'
+      titleBarClassName={`!bg-neutral-100 !rounded !rounded-b-none !border-none !p-3 !font-bold !text-slate-600 ${props.titleClassName}`}
       contentClassName='!p-2'
       footerClassName='!p-2'
       className={`!rounded-t !rounded-b-none !border !border-solid !shadow-heavy ${props.rootClassName}`}

src/components/ErrorBoundary.jsx

@@ -15,7 +15,9 @@ class ErrorBoundary extends PureComponent {
   componentDidCatch(error, info) {
     console.error('Sorry, Something went wrong.')
     console.error(error)
-    window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+    if (import.meta.env.PROD && window.$pageSpy) {
+      window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
+    }
     this.setState({ hasError: true, info: error.message })
   }
 

src/components/Icons.jsx

@@ -1,7 +1,7 @@
 import Icon from '@ant-design/icons';
 
 import ReplyLineSVG from '@/assets/icons/reply-line.svg?react';
-import ReplyAllLineSVG from '@/assets/icons/reply-all-line.svg?react';
+import ReplyAllLineSVG from '@/assets/icons/reply-all-fill.svg?react';
 import AttachmentLineSVG from '@/assets/icons/attachment-line.svg?react';
 import AttachmentFillSVG from '@/assets/icons/attachment-fill.svg?react';
 // import ShareForwardFillSVG from '@/assets/icons/share-forward-fill.svg?react';
@@ -13,6 +13,12 @@ import SendPlaneLineSVG from '@/assets/icons/send-plane-line.svg?react';
 import ResendLineSVG from '@/assets/icons/reset-left-line.svg?react';
 import EditLineSVG from '@/assets/icons/quill-pen-line.svg?react';
 import MailDownloadLineSVG from '@/assets/icons/mail-download-line.svg?react';
+import MailOpenLineSVG from '@/assets/icons/mail-open-line.svg?react';
+import MailAddLineSVG from '@/assets/icons/mail-add-line.svg?react';
+import MailCheckSVG from '@/assets/icons/mail-check-line.svg?react';
+import MailUnreadSVG from '@/assets/icons/mail-unread-line.svg?react';
+import MailArchiveSVG from '@/assets/icons/archive-2-line.svg?react';
+import TextSVG from '@/assets/icons/text.svg?react';
 
 
 export const ReplyIcon = (props) => <Icon component={ReplyLineSVG} {...props} />;
@@ -27,6 +33,13 @@ export const SendPlaneLineIcon = (props) => <Icon component={SendPlaneLineSVG} {
 export const ResendIcon = (props) => <Icon component={ResendLineSVG} {...props} />;
 export const EditIcon = (props) => <Icon component={EditLineSVG} {...props} />;
 export const MailDownloadIcon = (props) => <Icon component={MailDownloadLineSVG} {...props} />;
+export const MailOpenIcon = (props) => <Icon component={MailOpenLineSVG} {...props} />;
+export const MailAddloadIcon = (props) => <Icon component={MailAddLineSVG} {...props} />;
+export const MailCheckIcon = (props) => <Icon component={MailCheckSVG} {...props} />;
+export const MailUnreadIcon = (props) => <Icon component={MailUnreadSVG} {...props} />;
+export const MailArchiveIcon = (props) => <Icon component={MailArchiveSVG} {...props} />;
+export const TextIcon = (props) => <Icon component={TextSVG} {...props} />;
+
 
 const WABSvg = () => (
   <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
@@ -57,7 +70,21 @@ const Sent = () => (
 )
 export const SentIcon = (props) => <Icon component={Sent} {...props} />;
 
+const Waiting = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z" stroke="none"></path></svg>
+)
+export const WaitingIcon = (props) => <Icon component={Waiting} {...props} />;
+
+const Failed = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" color='#ED1C24' height="1em" width="1em"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" stroke="none"></path></svg>
+)
+export const FailedIcon = (props) => <Icon component={Failed} {...props} />;
+
 const Filter = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M6.17071 18C6.58254 16.8348 7.69378 16 9 16C10.3062 16 11.4175 16.8348 11.8293 18H22V20H11.8293C11.4175 21.1652 10.3062 22 9 22C7.69378 22 6.58254 21.1652 6.17071 20H2V18H6.17071ZM12.1707 11C12.5825 9.83481 13.6938 9 15 9C16.3062 9 17.4175 9.83481 17.8293 11H22V13H17.8293C17.4175 14.1652 16.3062 15 15 15C13.6938 15 12.5825 14.1652 12.1707 13H2V11H12.1707ZM6.17071 4C6.58254 2.83481 7.69378 2 9 2C10.3062 2 11.4175 2.83481 11.8293 4H22V6H11.8293C11.4175 7.16519 10.3062 8 9 8C7.69378 8 6.58254 7.16519 6.17071 6H2V4H6.17071Z"></path></svg>
 )
 export const FilterIcon = (props) => <Icon component={Filter} {...props} />;
+
+const Expand = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M18.2072 9.0428 12.0001 2.83569 5.793 9.0428 7.20721 10.457 12.0001 5.66412 16.793 10.457 18.2072 9.0428ZM5.79285 14.9572 12 21.1643 18.2071 14.9572 16.7928 13.543 12 18.3359 7.20706 13.543 5.79285 14.9572Z"></path></svg>);
+
+export const ExpandIcon = (props) => <Icon component={Expand} {...props} />;

src/components/LexicalEditor/index.jsx

@@ -45,6 +45,8 @@ import TableCellResizer from './plugins/TableCellResizer';
 
 // import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 
+import FormatPaintPlugin from './plugins/FormatPaint';
+
 
 import { TextNode, $getRoot, $getSelection, $createParagraphNode } from 'lexical';
 import { $generateHtmlFromNodes, $generateNodesFromDOM, } from '@lexical/html';
@@ -203,6 +205,7 @@ export default function Editor({ isRichText, isDebug, editorRef, onChange, defau
           <EditorRefPlugin editorRef={editorRef} />
           <ImagesPlugin />
           <InlineImagePlugin />
+          <FormatPaintPlugin />
           <MyOnChangePlugin onChange={onChange}/>
         </div>
       </div>

src/components/LexicalEditor/plugins/FormatPaint/FormatPainterCommands.ts

@@ -0,0 +1,27 @@
+import { LexicalCommand, createCommand, TextFormatType } from 'lexical';
+
+export interface CopiedFormat {
+  textFormatFlags: number; // 从node.getFormat()
+  style: string;           // 从node.getStyle()
+  // todo: p 标签的样式
+}
+
+export interface ActivateFormatPainterPayload {
+  sticky: boolean;
+}
+
+// activate the format painter and copy the current selection's format
+export const ACTIVATE_FORMAT_PAINTER_COMMAND: LexicalCommand<ActivateFormatPainterPayload> =
+  createCommand('ACTIVATE_FORMAT_PAINTER_COMMAND');
+
+// deactivate the format painter
+export const DEACTIVATE_FORMAT_PAINTER_COMMAND: LexicalCommand<void> =
+  createCommand('DEACTIVATE_FORMAT_PAINTER_COMMAND');
+
+// dispatched by the plugin to inform UI about state changes
+export interface FormatPainterState {
+  isActive: boolean;
+  isSticky: boolean;
+}
+export const FORMAT_PAINTER_STATE_UPDATE_COMMAND: LexicalCommand<FormatPainterState> =
+  createCommand('FORMAT_PAINTER_STATE_UPDATE_COMMAND');

src/components/LexicalEditor/plugins/FormatPaint/FormatPainterToolbarButton.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, LexicalEditor, COMMAND_PRIORITY_NORMAL } from 'lexical';
+import {
+  ACTIVATE_FORMAT_PAINTER_COMMAND,
+  DEACTIVATE_FORMAT_PAINTER_COMMAND,
+  FORMAT_PAINTER_STATE_UPDATE_COMMAND,
+  FormatPainterState,
+} from './FormatPainterCommands';
+
+const PaintBrushIcon = () => <i className='format painter' />;
+
+export function FormatPainterToolbarButton() {
+  const [editor] = useLexicalComposerContext();
+  const [isActive, setIsActive] = useState(false);
+  const [isSticky, setIsSticky] = useState(false);
+  const [canCopy, setCanCopy] = useState(false);
+
+  // 插件状态
+  useEffect(() => {
+    return editor.registerCommand<FormatPainterState>(
+      FORMAT_PAINTER_STATE_UPDATE_COMMAND,
+      (payload) => {
+        setIsActive(payload.isActive);
+        setIsSticky(payload.isSticky);
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    );
+  }, [editor]);
+
+  // 选区状态
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+          setCanCopy(true);
+        } else {
+          setCanCopy(false);
+        }
+      });
+    });
+  }, [editor]);
+
+  const handleClick = () => {
+    if (isActive) {
+      editor.dispatchCommand(DEACTIVATE_FORMAT_PAINTER_COMMAND, undefined);
+    } else if (canCopy) {
+      editor.dispatchCommand(ACTIVATE_FORMAT_PAINTER_COMMAND, { sticky: false });
+    }
+    // * !isActive and !canCopy 什么也不做
+  };
+
+  // 双击 保持激活
+  const handleDoubleClick = () => {
+    if (isActive && isSticky) {
+      editor.dispatchCommand(DEACTIVATE_FORMAT_PAINTER_COMMAND, undefined);
+    } else if (canCopy) {
+      editor.dispatchCommand(ACTIVATE_FORMAT_PAINTER_COMMAND, { sticky: true });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      className={`toolbar-item spaced ${isActive ? 'active' : ''}`}
+    //   title={isActive ? (isSticky ? 'Format Painter (Sticky)' : 'Format Painter (Active)') : 'Format Painter'}
+      title={'格式刷'}
+      aria-label={isActive ? (isSticky ? 'Deactivate Format Painter (Sticky)' : 'Deactivate Format Painter (Active)') : 'Activate Format Painter'}
+      disabled={!isActive && !canCopy}
+    >
+      <PaintBrushIcon />
+      {/* <span style={{wordBreak: 'keep-all'}}>格式刷</span> */}
+    </button>
+  );
+}
+
+{/* <button type='button'
+className={'toolbar-item spaced ' + (isActive ? 'active' : '')}
+aria-label='Format Painter'>
+<i className='format painter' />
+</button> */}
+export default FormatPainterToolbarButton;

src/components/LexicalEditor/plugins/FormatPaint/index.tsx

@@ -0,0 +1,267 @@
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  TextFormatType,
+  LexicalEditor,
+  COMMAND_PRIORITY_NORMAL,
+  COMMAND_PRIORITY_LOW,
+} from 'lexical';
+import { $patchStyleText, } from '@lexical/selection';
+// $patchStyleText is more efficient for merging styles.
+
+import {
+  CopiedFormat,
+  ACTIVATE_FORMAT_PAINTER_COMMAND,
+  DEACTIVATE_FORMAT_PAINTER_COMMAND,
+  FORMAT_PAINTER_STATE_UPDATE_COMMAND,
+  ActivateFormatPainterPayload,
+  FormatPainterState,
+} from './FormatPainterCommands';
+
+// parse style string to object for $patchStyleText
+function parseStyleText(style: string): Record<string, string> {
+  const styleObj: Record<string, string> = {};
+  style.split(';').forEach((rule) => {
+    const [key, value] = rule.split(':');
+    if (key && value && key.trim() && value.trim()) {
+      styleObj[key.trim()] = value.trim();
+    }
+  });
+  return styleObj;
+}
+
+// map format flags to TextFormatType
+const textFormatTypeMap: { flag: number; type: TextFormatType }[] = [
+  { flag: 1, type: 'bold' },
+  { flag: 2, type: 'italic' },
+  { flag: 4, type: 'strikethrough' },
+  { flag: 8, type: 'underline' },
+  { flag: 16, type: 'code' },
+  { flag: 32, type: 'subscript' },
+  { flag: 64, type: 'superscript' },
+];
+
+export function FormatPainterPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  const [copiedFormat, setCopiedFormat] = useState<CopiedFormat | null>(null);
+  const [isActive, setIsActive] = useState(false);
+  const [isSticky, setIsSticky] = useState(false);
+
+  // 避免多次复制
+  const isPickingUpRef = useRef(false);
+
+  const broadcastState = useCallback(() => {
+    editor.dispatchCommand(FORMAT_PAINTER_STATE_UPDATE_COMMAND, {
+      isActive,
+      isSticky,
+    });
+  }, [editor, isActive, isSticky]);
+
+  // Update broadcast whenever state changes
+  useEffect(() => {
+    broadcastState();
+  }, [isActive, isSticky, broadcastState]);
+
+
+  // Activate Format Painter (Copy Format)
+  useEffect(() => {
+    return editor.registerCommand<ActivateFormatPainterPayload>(
+      ACTIVATE_FORMAT_PAINTER_COMMAND,
+      (payload) => {
+        isPickingUpRef.current = true;
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+            const anchorNode = selection.anchor.getNode();
+            let formatToCopy: CopiedFormat | null = null;
+
+            if ($isTextNode(anchorNode)) {
+              formatToCopy = {
+                textFormatFlags: anchorNode.getFormat(),
+                style: anchorNode.getStyle(),
+              };
+            } else {
+              // ? todo: 从第一个字符获取格式
+              const nodes = selection.getNodes();
+              for (const node of nodes) {
+                if ($isTextNode(node)) {
+                  formatToCopy = {
+                    textFormatFlags: node.getFormat(),
+                    style: node.getStyle(),
+                  };
+                  break;
+                }
+              }
+            }
+
+            if (formatToCopy) {
+              setCopiedFormat(formatToCopy);
+              setIsActive(true);
+              setIsSticky(payload.sticky);
+            //   console.log('Format Painter Activated. Sticky:', payload.sticky, 'Format:', formatToCopy);
+            }
+          }
+        });
+        // 鼠标抬起
+        setTimeout(() => { isPickingUpRef.current = false; }, 50);
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    );
+  }, [editor]);
+
+  // Deactivate Format Painter
+  useEffect(() => {
+    return editor.registerCommand<void>(
+      DEACTIVATE_FORMAT_PAINTER_COMMAND,
+      () => {
+        if (!isActive) return false;
+        setIsActive(false);
+        setIsSticky(false);
+        // 不保留
+        setCopiedFormat(null);
+        // console.log('Format Painter Deactivated.');
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    );
+  }, [editor, isActive]);
+
+
+    // 应用复制的格式
+  const applyFormat = useCallback(() => {
+    if (!isActive || !copiedFormat || isPickingUpRef.current) {
+      return false;
+    }
+
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) && copiedFormat) {
+        // console.log('copiedFormat:', copiedFormat, '\ntextFormatTypeMap:', textFormatTypeMap);
+        // TextNode (bold, italic, ...)
+        textFormatTypeMap.forEach(fmt => {
+            if (copiedFormat.textFormatFlags & fmt.flag) {
+                selection.formatText(fmt.type);
+            } else {
+                const currentSelection = $getSelection();
+                if ($isRangeSelection(currentSelection)) {
+                   textFormatTypeMap.forEach(fmt => {
+                       const shouldHaveFormat = (copiedFormat.textFormatFlags & fmt.flag) > 0;
+                       if (currentSelection.hasFormat(fmt.type) !== shouldHaveFormat) {
+                           currentSelection.formatText(fmt.type);
+                       }
+                   });
+                }
+            }
+        });
+        // ensure applied
+        let newSelection = $getSelection();
+        if ($isRangeSelection(newSelection)) {
+            textFormatTypeMap.forEach(fmt => {
+                if (copiedFormat.textFormatFlags & fmt.flag) {
+                    if (!newSelection!.hasFormat(fmt.type)) newSelection!.formatText(fmt.type);
+                } else {
+                    if (newSelection!.hasFormat(fmt.type)) newSelection!.formatText(fmt.type);
+                }
+            });
+        }
+
+        // inline styles (font-family, color, font-size, ...)
+        const stylesToApply = parseStyleText(copiedFormat.style);
+        // console.log('inline style', stylesToApply);
+        if (Object.keys(stylesToApply).length > 0) {
+            newSelection = $getSelection();
+            if ($isRangeSelection(newSelection)) {
+                $patchStyleText(newSelection as any, stylesToApply);
+            }
+        } else {
+            // 清除格式
+            const selectedNodes = newSelection.getNodes();
+            selectedNodes.forEach(node => {
+              if ($isTextNode(node)) {
+                if (node.getStyle() !== "") {
+                  node.setStyle(""); // 清除
+                }
+              }
+              // todo: <p> node
+            });
+        }
+
+        // console.log('Format Applied. Sticky:', isSticky);
+
+        if (!isSticky) {
+          setIsActive(false);
+        }
+      }
+    });
+    return true;
+  }, [editor, isActive, isSticky, copiedFormat]);
+
+
+  // 鼠标抬起
+  useEffect(() => {
+    if (!isActive || !copiedFormat) return;
+
+    const editorElement = editor.getRootElement();
+    if (!editorElement) return;
+
+    const handleMouseUp = (event: MouseEvent) => {
+      if (isPickingUpRef.current) return;
+
+      if (editorElement.contains(event.target as Node)) {
+        // todo: 改为在下一帧更新
+        setTimeout(() => {
+          const selection = editor.getEditorState().read($getSelection);
+          if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+            applyFormat();
+          } else if ($isRangeSelection(selection) && selection.isCollapsed()) {
+            // 折叠的选区, 也应用
+            // applyFormat();
+          }
+        }, 0);
+      }
+    };
+
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [editor, isActive, copiedFormat, applyFormat]);
+
+
+  // 按 esc 键取消格式
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        editor.dispatchCommand(DEACTIVATE_FORMAT_PAINTER_COMMAND, undefined);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [editor, isActive]);
+
+  // 鼠标样式
+  useEffect(() => {
+    const editorElement = editor.getRootElement();
+    if (editorElement) {
+      editorElement.style.cursor = isActive ? 'copy' : 'auto';
+    }
+    return () => {
+      if (editorElement) {
+        editorElement.style.cursor = 'auto';
+      }
+    };
+  }, [editor, isActive]);
+
+  return null;
+}
+export default FormatPainterPlugin;

src/components/LexicalEditor/plugins/ToolbarPlugin.jsx

@@ -15,6 +15,7 @@ import {
   $isRangeSelection,
   $createParagraphNode,
   $getNodeByKey,
+  $isTextNode,
 } from 'lexical';
 import { $isLinkNode, $toggleLink, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import {
@@ -25,21 +26,23 @@ import {
   // $wrapNodes,
   $isAtNodeEnd,
 } from '@lexical/selection';
-import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $findMatchingParent, $getNearestNodeOfType, $getNearestBlockElementAncestorOrThrow, mergeRegister } from '@lexical/utils';
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from '@lexical/list';
 import { createPortal } from 'react-dom';
-import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from '@lexical/rich-text';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
 import { $createCodeNode, $isCodeNode, getDefaultCodeLanguage, getCodeLanguages } from '@lexical/code';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import {$isDecoratorBlockNode} from '@lexical/react/LexicalDecoratorBlockNode';
+import {$isTableSelection} from '@lexical/table';
 import DropDown, { DropDownItem } from './../ui/DropDown';
 import DropdownColorPicker from '../ui/DropdownColorPicker';
-import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import {
   // INSERT_IMAGE_COMMAND,
   InsertImageDialog,
   // InsertImagePayload,
 } from './ImagesPlugin';
 import {InsertInlineImageDialog} from './InlineImagePlugin';
+import FormatPainterToolbarButton from './FormatPaint/FormatPainterToolbarButton';
 
 import useModal from './../hooks/useModal';
 
@@ -71,16 +74,19 @@ const FONT_FAMILY_OPTIONS = [
 
 const FONT_SIZE_OPTIONS = [
   ['10px', '10px'],
-  ['11px', '11px'],
+  // ['11px', '11px'],
   ['12px', '12px'],
   ['13px', '13px'],
   ['14px', '14px'],
-  ['15px', '15px'],
+  // ['15px', '15px'],
   ['16px', '16px'],
-  ['17px', '17px'],
+  // ['17px', '17px'],
   ['18px', '18px'],
-  ['19px', '19px'],
+  // ['19px', '19px'],
   ['20px', '20px'],
+  ['24px', '24px'],
+  ['32px', '32px'],
+  // ['48px', '48px'],
 ];
 
 const ELEMENT_FORMAT_OPTIONS = {
@@ -92,6 +98,62 @@ const ELEMENT_FORMAT_OPTIONS = {
   start: { icon: 'left-align', iconRTL: 'right-align', name: 'Start Align' },
 };
 
+// toolbar utils
+const clearFormatting = (editor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      const anchor = selection.anchor;
+      const focus = selection.focus;
+      const nodes = selection.getNodes();
+      const extractedNodes = selection.extract();
+
+      if (anchor.key === focus.key && anchor.offset === focus.offset) {
+        return;
+      }
+
+      nodes.forEach((node, idx) => {
+        // We split the first and last node by the selection
+        // So that we don't format unselected text inside those nodes
+        if ($isTextNode(node)) {
+          // Use a separate variable to ensure TS does not lose the refinement
+          let textNode = node;
+          if (idx === 0 && anchor.offset !== 0) {
+            textNode = textNode.splitText(anchor.offset)[1] || textNode;
+          }
+          if (idx === nodes.length - 1) {
+            textNode = textNode.splitText(focus.offset)[0] || textNode;
+          }
+          /**
+           * If the selected text has one format applied
+           * selecting a portion of the text, could
+           * clear the format to the wrong portion of the text.
+           *
+           * The cleared text is based on the length of the selected text.
+           */
+          // We need this in case the selected text only has one format
+          const extractedTextNode = extractedNodes[0];
+          if (nodes.length === 1 && $isTextNode(extractedTextNode)) {
+            textNode = extractedTextNode;
+          }
+
+          if (textNode.__style !== '') {
+            textNode.setStyle('');
+          }
+          if (textNode.__format !== 0) {
+            textNode.setFormat(0);
+            $getNearestBlockElementAncestorOrThrow(textNode).setFormat('');
+          }
+          node = textNode;
+        } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+          node.replace($createParagraphNode(), true);
+        } else if ($isDecoratorBlockNode(node)) {
+          node.setFormat('');
+        }
+      });
+    }
+  });
+};
 function dropDownActiveClass(active) {
   if (active) {
     return 'active dropdown-item-active';
@@ -493,12 +555,13 @@ function FontDropDown({ editor, value, style, disabled = false }) {
     <DropDown
       disabled={disabled}
       buttonClassName={'toolbar-item ' + style}
-      // buttonLabel={value}
+      buttonLabel={value}
       buttonIconClassName={style === 'font-family' ? 'icon block-type font-family' : ''}
       buttonAriaLabel={buttonAriaLabel}>
       {(style === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (
         <DropDownItem
           className={`item font-m-${option.replace(/\s+/g, '_')} ${dropDownActiveClass(value === option)} ${style === 'font-size' ? 'fontsize-item' : ''}`}
+          style={{ fontFamily: style === 'font-family' ? option : undefined, fontSize: style === 'font-size' ? option : undefined }}
           onClick={() => handleClick(option)}
           key={option}>
           <span className='text'>{text}</span>
@@ -606,6 +669,7 @@ export default function ToolbarPlugin() {
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isCode, setIsCode] = useState(false);
   const [fontFamily, setFontFamily] = useState('Arial');
+  const [fontSize, setFontSize] = useState('16px');
   const [fontColor, setFontColor] = useState('#000');
   const [bgColor, setBgColor] = useState('#fff');
   const [elementFormat, setElementFormat] = useState('left');
@@ -693,6 +757,9 @@ export default function ToolbarPlugin() {
       setFontFamily(
         $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
       );
+      setFontSize(
+        $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
+      );
       let matchingParent;
       if ($isLinkNode(parent)) {
         // If node is a link, we need to fetch the parent paragraph node to set format
@@ -766,54 +833,6 @@ export default function ToolbarPlugin() {
     editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
   }, [editor]);
 
-
-  const [showTableGrid, setShowTableGrid] = useState(false);
-  const [hoverRows, setHoverRows] = useState(0);
-  const [hoverCols, setHoverCols] = useState(0);
-  // Insert table function
-  const insertTable = (rows, cols) => {
-    editor.dispatchCommand(INSERT_TABLE_COMMAND, { rows, columns: cols });
-    setHoverRows(0);
-    setHoverCols(0);
-    setShowTableGrid(false);
-  };
-  // Generate grid for table selection
-  const renderTableGrid = () => {
-    const gridSize = 6;
-    return (
-      <div
-        className="absolute z-50 bg-white border rounded shadow-lg p-2 min-w-36"
-        onMouseLeave={() => {
-          setHoverRows(0);
-          setHoverCols(0);
-        }}
-      >
-        <div className="grid grid-cols-6 gap-1">
-          {[...Array(gridSize)].map((_, rowIndex) =>
-            [...Array(gridSize)].map((_, colIndex) => (
-              <div
-                key={`${rowIndex}-${colIndex}`}
-                className={`w-4 h-4 border border-solid border-gray-300
-                  ${rowIndex < hoverRows && colIndex < hoverCols
-                    ? 'bg-blue-200'
-                    : 'bg-white hover:bg-blue-100'}
-                `}
-                onMouseEnter={() => {
-                  setHoverRows(rowIndex + 1);
-                  setHoverCols(colIndex + 1);
-                }}
-                onClick={() => insertTable(rowIndex + 1, colIndex + 1)}
-              />
-            ))
-          )}
-        </div>
-        <div className="text-center mt-2 text-sm text-gray-600">
-          {hoverRows} × {hoverCols} Table
-        </div>
-      </div>
-    );
-  };
-
   return (
     <div className='toolbar sticky top-[-10px] z-10' ref={toolbarRef}>
       <button type='button'
@@ -834,6 +853,14 @@ export default function ToolbarPlugin() {
         aria-label='Redo'>
         <i className='format redo' />
       </button>
+      <FormatPainterToolbarButton />
+      <button type='button'
+        onClick={() => clearFormatting(activeEditor)}
+        className='toolbar-item'
+        title="清除格式"
+        aria-label='Clear'>
+        <i className='format clear' />
+      </button>
       <Divider />
       {supportedBlockTypes.has(blockType) && (
         <>
@@ -863,6 +890,12 @@ export default function ToolbarPlugin() {
           value={fontFamily}
           editor={editor}
         />
+        <FontDropDown
+          disabled={!isEditable}
+          style={'font-size'}
+          value={fontSize}
+          editor={editor}
+        />
         <Divider />
           <button type='button'
             onClick={() => {
@@ -938,15 +971,6 @@ export default function ToolbarPlugin() {
           />
           <Divider />
           <ElementFormatDropdown disabled={!isEditable} value={elementFormat} editor={editor} isRTL={isRTL} />
-      {/* Table Insertion */}
-          <DropDown
-            disabled={!isEditable}
-            buttonClassName="toolbar-item spaced"
-            // buttonLabel="Table"
-            buttonAriaLabel="Insert specialized editor node"
-            buttonIconClassName="icon table">
-            {renderTableGrid()}
-          </DropDown>
           <Divider />
               <DropDown
                 disabled={!isEditable}

src/components/LexicalEditor/styles.css

@@ -80,7 +80,7 @@
 .editor-input {
   min-height: 150px;
   resize: none;
-  font-size: 15px;
+  font-size: 16px;
   caret-color: rgb(5, 5, 5);
   position: relative;
   tab-size: 1;
@@ -404,6 +404,7 @@ pre::-webkit-scrollbar-thumb {
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
+  word-break: keep-all;
 }
 
 .toolbar button.toolbar-item:disabled {
@@ -430,7 +431,8 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  /* background-color: rgba(223, 232, 250, 0.8); */
+  background-color: #eef2ff;
 }
 
 .toolbar button.toolbar-item.active i {
@@ -475,12 +477,12 @@ pre::-webkit-scrollbar-thumb {
 .toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
-  width: 200px;
+  /* width: 200px; */
   vertical-align: middle;
   font-size: 14px;
   color: #777;
   text-overflow: ellipsis;
-  width: 70px;
+  width: 3rem;
   overflow: hidden;
   height: 20px;
   text-align: left;
@@ -604,7 +606,8 @@ i.chevron-down {
   background-size: contain;
 }
 button.item.dropdown-item-active {
-    background-color: #dfe8fa4d;
+    /* background-color: #dfe8fa4d; */
+    background-color: #eef2ff;
 }
 
 .dropdown .item:first-child {
@@ -761,6 +764,9 @@ i.undo {
 i.redo {
   background-image: url(/images/icons/arrow-clockwise.svg);
 }
+i.clear{
+    background-image: url(/images/icons/eraser-line.svg);
+}
 
 .icon.paragraph {
   background-image: url(/images/icons/text-paragraph.svg);
@@ -829,9 +835,6 @@ i.redo {
 .icon.image{
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
 }
-.icon.table{
-    background-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M18.44 3.06H5.56c-1.38 0-2.5 1.13-2.5 2.5v12.88c0 1.37 1.12 2.5 2.5 2.5h12.88c1.37 0 2.5-1.13 2.5-2.5V5.56c0-1.37-1.13-2.5-2.5-2.5zM8.71 19.94H5.56c-.83 0-1.5-.68-1.5-1.5v-3.11h4.65v4.61zm0-5.61H4.06V9.67h4.65v4.66zm0-5.66H4.06V5.56c0-.82.67-1.5 1.5-1.5h3.15v4.61zm11.23 9.77c0 .82-.68 1.5-1.5 1.5H9.71v-4.61h10.23v3.11zm0-4.11H9.71V9.67h10.23v4.66zm0-5.66H9.71V4.06h8.73c.82 0 1.5.68 1.5 1.5v3.11z\"/%3E%3C/svg%3E");
-}
 i.indent {
     background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-indent-left'%3e%3cpath%20d='M2%203.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm.646%202.146a.5.5%200%200%201%20.708%200l2%202a.5.5%200%200%201%200%20.708l-2%202a.5.5%200%200%201-.708-.708L4.293%208%202.646%206.354a.5.5%200%200%201%200-.708zM7%206.5a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm-5%203a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
 }
@@ -839,6 +842,10 @@ i.outdent {
     background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-indent-right'%3e%3cpath%20d='M2%203.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm10.646%202.146a.5.5%200%200%201%20.708.708L11.707%208l1.647%201.646a.5.5%200%200%201-.708.708l-2-2a.5.5%200%200%201%200-.708l2-2zM2%206.5a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
 }
 
+i.painter {
+  background-image: url(/images/icons/brush-3-line.svg);
+}
+
 i.bold {
   background-image: url(/images/icons/type-bold.svg);
 }

src/components/LexicalEditor/ui/DropDown.tsx

@@ -29,12 +29,13 @@ export function DropDownItem({
   children,
   className,
   onClick,
-  title,
+  title, style
 }: {
   children: React.ReactNode;
   className: string;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   title?: string;
+  style?: React.CSSProperties;
 }) {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -53,7 +54,7 @@ export function DropDownItem({
   }, [ref, registerItem]);
 
   return (
-    <button
+    <button style={style}
       className={className}
       onClick={onClick}
       ref={ref}

src/components/LexicalEditor/ui/Modal.css

@@ -20,7 +20,7 @@
   background-color: rgba(40, 40, 40, 0.6);
   flex-grow: 0px;
   flex-shrink: 1px;
-  z-index: 1200;
+  z-index: 1202;
 }
 .Modal__modal {
   padding: 20px;

src/components/OrderProfile.jsx

@@ -0,0 +1,356 @@
+import {
+  WhatsAppOutlined,
+  FileAddOutlined,
+  MailOutlined,
+  PhoneOutlined,
+  UserOutlined,
+  FieldNumberOutlined,
+  CompassOutlined,
+  CalendarOutlined,
+  EditOutlined,
+  CheckOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons'
+
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { App, Flex, Select, Tooltip, Divider, Typography, Skeleton, Checkbox, Drawer, Button, Form, Input } from 'antd'
+import { useOrderStore, fetchSetRemindStateAction, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
+import { copy, isEmpty } from '@/utils/commons'
+import { useShallow } from 'zustand/react/shallow'
+import useConversationStore from '@/stores/ConversationStore'
+import useAuthStore from '@/stores/AuthStore'
+const OrderProfile = ({ coliSN, ...props }) => {
+  const { notification, message } = App.useApp()
+  const [formComment] = Form.useForm()
+  const [formWhatsApp] = Form.useForm()
+  const [formExtra] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+
+  const [openOrderCommnet, setOpenOrderCommnet] = useState(false)
+  const [openWhatsApp, setOpenWhatsApp] = useState(false)
+  const [openExtra, setOpenExtra] = useState(false)
+
+  const orderLabelOptions = copy(OrderLabelDefaultOptions)
+  orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })
+
+  const orderStatusOptions = copy(OrderStatusDefaultOptions)
+  const [orderDetail, customerDetail, fetchOrderDetail, setOrderPropValue, appendOrderComment, updateWhatsapp, updateExtraInfo] = useOrderStore((s) => [
+    s.orderDetail,
+    s.customerDetail,
+    s.fetchOrderDetail,
+    s.setOrderPropValue,
+    s.appendOrderComment,
+    s.updateWhatsapp,
+    s.updateExtraInfo,
+  ])
+
+  const loginUser = useAuthStore((state) => state.loginUser)
+  const currentOrder = useConversationStore(useShallow((state) => state.currentConversation?.coli_sn || ''))
+  const orderId = coliSN || currentOrder
+
+  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate)
+  useEffect(() => {
+    setOrderRemindState(orderDetail.remindstate)
+  }, [orderDetail.remindstate])
+  useEffect(() => {
+    if (orderId) {
+      setLoading(true)
+      fetchOrderDetail(orderId)
+        .finally(() => setLoading(false))
+        .catch((reason) => {
+          notification.error({
+            message: '查询出错',
+            description: reason.message,
+            placement: 'top',
+            duration: 60,
+          })
+        })
+    }
+    return () => {}
+  }, [orderId])
+
+  const handleSetRemindState = async (checkedValue) => {
+    const state = checkedValue.filter((v) => v !== orderRemindState)
+    const oldState = orderRemindState
+
+    try {
+      if (isEmpty(state)) {
+        setOrderRemindState(null)
+      } else {
+        setOrderRemindState(state[0])
+      }
+      await fetchSetRemindStateAction({ coli_sn: coliSN, remindstate: state })
+      message.success('设置成功')
+    } catch (error) {
+      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 })
+      setOrderRemindState(oldState)
+    }
+  }
+
+  const getCustomerName = () => {
+    if (orderDetail.buytime > 0) return customerDetail.name + '(R' + orderDetail.buytime + ')'
+    return customerDetail.name
+  }
+
+  const getPlanStatus = () => {
+    return orderDetail.DidPlan === 0 ? '未做计划' : '已做计划'
+  }
+
+  return (
+    <>
+      <Skeleton active loading={loading}>
+        <Flex gap='small' vertical={true} justify='space-between' className='p-2'>
+          <Typography.Text>
+            <FieldNumberOutlined className='pr-1' />
+            {orderDetail.order_no}
+          </Typography.Text>
+          <Typography.Text>
+            <UserOutlined className=' pr-1' />
+            {getCustomerName()}
+          </Typography.Text>
+          <Typography.Text>
+            <CompassOutlined className=' pr-1' />
+            {orderDetail.MEI_Country}
+          </Typography.Text>
+          <Typography.Text>
+            <PhoneOutlined className=' pr-1' />
+            {customerDetail.phone}
+          </Typography.Text>
+          <Typography.Text>
+            <MailOutlined className='pr-1' />
+            {customerDetail.email}
+          </Typography.Text>
+          <Typography.Text>
+            <WhatsAppOutlined className='pr-1' />
+            {isEmpty(customerDetail.whatsapp_phone_number) ? (
+              <Button type='text' onClick={() => setOpenWhatsApp(true)} size='small'>
+                设置 WhatsApp
+              </Button>
+            ) : (
+              <Link to={`/order/chat/${coliSN}`} state={{...orderDetail, coli_guest_WhatsApp: customerDetail.whatsapp_phone_number, }}>
+                {customerDetail.whatsapp_phone_number}
+              </Link>
+            )}
+          </Typography.Text>
+          <Typography.Text>
+            <Tooltip title='出发日期'>
+              <CalendarOutlined className='pr-1' />
+              {orderDetail.COLI_OrderStartDate}
+            </Tooltip>
+          </Typography.Text>
+          <Typography.Text>
+            <Tooltip title='计划状态'>
+              <CheckOutlined className='pr-1' />
+              {getPlanStatus()}
+            </Tooltip>
+          </Typography.Text>
+        </Flex>
+        <Divider orientation='left'>
+          <Typography.Text strong>订单状态</Typography.Text>
+        </Divider>
+        <Flex gap='small' vertical={false} justify='space-between'>
+          <Select
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
+            key={'orderlabel'}
+            size='small'
+            style={{
+              width: '100%',
+            }}
+            variant='underlined'
+            onSelect={(value) => {
+              setOrderPropValue(coliSN, 'orderlabel', value)
+                .then(() => {
+                  message.success('设置成功')
+                })
+                .catch((reason) => {
+                  notification.error({
+                    message: '设置出错',
+                    description: reason.message,
+                    placement: 'top',
+                    duration: 60,
+                  })
+                })
+            }}
+            value={orderDetail.tags}
+            options={orderLabelOptions}
+          />
+          <Select
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
+            key={'orderstatus'}
+            size='small'
+            style={{
+              width: '100%',
+            }}
+            variant='underlined'
+            onSelect={(value) => {
+              setOrderPropValue(coliSN, 'orderstatus', value)
+                .then(() => {
+                  message.success('设置成功')
+                })
+                .catch((reason) => {
+                  notification.error({
+                    message: '设置出错',
+                    description: reason.message,
+                    placement: 'top',
+                    duration: 60,
+                  })
+                })
+            }}
+            value={orderDetail.states}
+            options={orderStatusOptions}
+          />
+        </Flex>
+
+        <Divider orientation='left'>
+          <Typography.Text strong>催信</Typography.Text>
+        </Divider>
+        <Checkbox.Group key='substatus' className='px-2' value={[orderRemindState]} options={remindStatusOptions} onChange={handleSetRemindState} />
+
+        <Divider orientation='left'>
+          <Typography.Text strong>表单信息</Typography.Text>
+          <Tooltip title='添加'>
+            <FileAddOutlined
+              className='pl-1'
+              onClick={() => {
+                setOpenOrderCommnet(true)
+              }}
+            />
+          </Tooltip>
+        </Divider>
+        <p className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
+
+        <Divider orientation='left'>
+          <Typography.Text strong>特殊要求</Typography.Text>
+        </Divider>
+        <Typography.Text>{orderDetail.customer_request}</Typography.Text>
+        <Divider orientation='left'>
+          <Typography.Text strong>外联备注</Typography.Text>
+          {/* <Tooltip title='修改'>
+            <EditOutlined className='pl-1' />
+          </Tooltip> */}
+        </Divider>
+        <Typography.Text>{orderDetail.wl_memo}</Typography.Text>
+
+        <Divider orientation='left'>
+          <Typography.Text strong>附加信息</Typography.Text>
+          <Tooltip title='修改'>
+            <EditOutlined
+              className='pl-1'
+              onClick={() => {
+                formExtra.setFieldsValue({ extra: orderDetail.COLI_Introduction })
+                setOpenExtra(true)
+              }}
+            />
+          </Tooltip>
+        </Divider>
+        <Typography.Text>{orderDetail.COLI_Introduction}</Typography.Text>
+      </Skeleton>
+      <Drawer title='添加表单信息' closable={{ 'aria-label': 'Close Button' }} onClose={() => setOpenOrderCommnet(false)} open={openOrderCommnet}>
+        <Form
+          layout={'vertical'}
+          form={formComment}
+          initialValues={{ comment: '' }}
+          scrollToFirstError
+          onFinish={(values) => {
+            appendOrderComment(loginUser.userId, orderId, values.comment)
+              .then(() => {
+                notification.success({
+                  message: '温性提示',
+                  description: '添加表单信息成功',
+                })
+                setOpenOrderCommnet(false)
+                formComment.setFieldsValue({ comment: '' })
+              })
+              .catch((reason) => {
+                notification.error({
+                  message: '添加出错',
+                  description: reason.message,
+                  placement: 'top',
+                  duration: 60,
+                })
+              })
+          }}>
+          <Form.Item name='comment' label='表单信息' rules={[{ required: true, message: '请输入表单信息' }]}>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+          </Form.Item>
+        </Form>
+      </Drawer>
+      <Drawer title='设置 WhatsApp' closable={{ 'aria-label': 'Close Button' }} onClose={() => setOpenWhatsApp(false)} open={openWhatsApp}>
+        <Form
+          layout={'vertical'}
+          form={formWhatsApp}
+          initialValues={{ number: '' }}
+          scrollToFirstError
+          onFinish={(values) => {
+            updateWhatsapp(orderId, values.number)
+              .then(() => {
+                notification.success({
+                  message: '温性提示',
+                  description: '设置 WhatsApp 成功',
+                })
+                setOpenWhatsApp(false)
+                formWhatsApp.setFieldsValue({ number: '' })
+              })
+              .catch((reason) => {
+                notification.error({
+                  message: '设置出错',
+                  description: reason.message,
+                  placement: 'top',
+                  duration: 60,
+                })
+              })
+          }}>
+          <Form.Item name='number' label='WhatsApp' rules={[{ required: true, message: '请输入 WhatsApp 号码' }]}>
+            <Input placeholder='国家代码+城市代码+电话号码' />
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+          </Form.Item>
+        </Form>
+      </Drawer>
+      <Drawer title='设置附加信息' closable={{ 'aria-label': 'Close Button' }} onClose={() => setOpenExtra(false)} open={openExtra}>
+        <Form
+          layout={'vertical'}
+          form={formExtra}
+          scrollToFirstError
+          onFinish={(values) => {
+            updateExtraInfo(orderId, values.extra)
+              .then(() => {
+                notification.success({
+                  message: '温性提示',
+                  description: '设置附加信息成功',
+                })
+                setOpenExtra(false)
+              })
+              .catch((reason) => {
+                notification.error({
+                  message: '设置出错',
+                  description: reason.message,
+                  placement: 'top',
+                  duration: 60,
+                })
+              })
+          }}>
+          <Form.Item name='extra' label='附加信息' rules={[{ required: true, message: '请输入附加信息' }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+          </Form.Item>
+        </Form>
+      </Drawer>
+    </>
+  )
+}
+
+export default OrderProfile

src/config.js

@@ -7,18 +7,28 @@
 
 // debug:
 // export const API_HOST = 'http://202.103.68.144:8889/v2';
-// export const WS_URL = 'ws://202.103.68.144:8889';
-// export const EMAIL_HOST = 'http://202.103.68.231:888/service-mail';
-export const EMAIL_ATTA_HOST = 'https://p9axztuwd7x8a7.mycht.cn/attatchment'; // 邮件附件
-// prod:
+// export const WS_URL = 'ws://202.103.68.144:8888';
+// export const WAI_HOST = 'http://47.83.248.120/api/v1'; // 香港服务器
+// export const WAI_HOST = 'http://47.254.53.81/api/v1'; // 美国服务器
+// export const WAI_HOST = 'http://localhost:3031/api/v1'; // 美国服务器
+export const WAI_SERVER_KEY = 'G-STR:WAI_SERVER'
+
+// prod:--------------------------------------------------------------------------------------------------
+export const EMAIL_ATTA_HOST = 'https://p9axztuwd7x8a7.mycht.cn/attachment'; // 邮件附件
+export const WAI_HOST = 'https://wai-server-qq4qmtq7wc9he4.mycht.cn/api/v1';
 export const EMAIL_HOST = 'https://p9axztuwd7x8a7.mycht.cn/mail-server/service-mail';
-export const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server';
+export const EMAIL_HOST_v3 = 'https://p9axztuwd7x8a7.mycht.cn/mail-server/service-mail';
+export const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server/v2';
+export const API_HOST_V3 = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server/v3';
 export const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_server'; // prod:
 export const VONAGE_URL = 'https://p9axztuwd7x8a7.mycht.cn/vonage-server'; // 语音和视频接口:
+export const HT3 =  process.env.NODE_ENV === 'production' ? 'https://p9axztuwd7x8a7.mycht.cn/ht3' : 'https://p9axztuwd7x8a7.mycht.cn/ht3';
 
 export const DATE_FORMAT = 'YYYY-MM-DD';
 export const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const DATEEND_FORMAT = 'YYYY-MM-DD 23:59';
 
+export const ERROR_IMG = 'https://hiana-crm.oss-accelerate.aliyuncs.com/WAMedia/afe412d4-3acf-4e79-a623-048aeb4d696a.png';
 export const OSS_URL_CN = 'https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMedia/';
 export const OSS_URL_AP = 'https://hiana-crm.oss-ap-southeast-1.aliyuncs.com/WAMedia/';
 export const OSS_URL = OSS_URL_AP;
@@ -31,3 +41,5 @@ const __BUILD_DATE__ = `__BUILD_DATE__`;
 
 export const BUILD_VERSION = process.env.NODE_ENV === 'production' ? __BUILD_VERSION__ : process.env.NODE_ENV;
 export const BUILD_DATE = process.env.NODE_ENV === 'production' ? __BUILD_DATE__ : new Date().toLocaleString();
+
+export const POPUP_FEATURES = 'left=20,top=20,width=1000,height=800,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no';

src/hooks/useConversation.js

@@ -36,6 +36,7 @@ export function useConversationNewItem() {
     state.setCurrentConversation,
     state.updateConversationItem,
   ]);
+  const updateCurrentConversation = useConversationStore((state) => state.updateCurrentConversation);
   const conversationsList = useConversationStore((state) => state.conversationsList);
   const addToConversationList = useConversationStore((state) => state.addToConversationList);
   const userId = useAuthStore((state) => state.loginUser.userId);
@@ -93,7 +94,7 @@ export function useConversationNewItem() {
           phone_number: createdNew.guest_phone,
           whatsapp_phone_number: createdNew.whatsapp_phone_number,
         },
-        conversation_memo: createdNew.remark,
+        conversation_memo: createdNew.guest_name || createdNew.remark,
         // lasttime: createdNew.session_creatime,
         show_default: createdNew.remark || createdNew.guest_name || createdNew.guest_phone || createdNew.guest_email || createdNew.whatsapp_phone_number || '',
       }
@@ -117,7 +118,11 @@ export function useConversationNewItem() {
       // })
       return ;
     }
-    updateConversationItem(buildChatItem);
+    if (currentConversation.sn === createdNew.conversationid) {
+      updateCurrentConversation(buildChatItem);
+    } else {
+      updateConversationItem(buildChatItem);
+    }
 
   };
 

src/hooks/useEmail.js

@@ -1,16 +1,19 @@
 import { useState, useEffect, useCallback } from 'react'
-import { isEmpty } from '@/utils/commons'
-import { getEmailDetailAction, postResendEmailAction, getSalesSignatureAction } from '@/actions/EmailActions'
+import { isEmpty, objectMapper, olog, } from '@/utils/commons'
+import { readIndexDB } from '@/utils/indexedDB'
+import { getEmailDetailAction, postResendEmailAction, getSalesSignatureAction, getEmailOrderAction, queryEmailListAction, searchEmailListAction, getReminderEmailTemplateAction, saveEmailDraftOrSendAction, updateEmailAction, getEmailChangesChannel, EMAIL_CHANNEL_NAME } from '@/actions/EmailActions'
 import { App } from 'antd'
 import useConversationStore from '@/stores/ConversationStore';
 import { msgStatusRenderMapped } from '@/channel/bubbleMsgUtils';
+import { POPUP_FEATURES } from '@/config';
+import { internalEventEmitter } from '@/utils/EventEmitterService';
 
 export const useEmailSignature = (opi_sn) => {
 
   const [signature, setSignature] = useState('')
 
   const getSignature = useCallback(async () => {
-    if (isEmpty(opi_sn)) {
+    if (isEmpty(Number(opi_sn))) {
       return false
     }
     try {
@@ -23,61 +26,417 @@ export const useEmailSignature = (opi_sn) => {
 
   useEffect(() => {
     getSignature()
-  }, [opi_sn])
+  }, [getSignature])
 
-  return { signature, getSignature }
+  return { signature }
 
 }
 
 /**
+ * 邮件详情
+ *
  * @param mai_sn 邮件编号ID
  * @param data 直接传递, 不重复获取
  * * 在详情点击`回复`呼出编辑时
+ * @param {number|boolean} oid 订单ID
+ * - If `number`: 直接传递, 直接获取订单详情
+ * - If `false`: 不需要获取订单信息
  */
-export const useEmailDetail = (mai_sn, data) => {
+export const useEmailDetail = (mai_sn=0, data={}, oid=0, markRead=false) => {
   const {notification} = App.useApp()
   const [loading, setLoading] = useState(false)
-  const [mailData, setMailData] = useState({ loading, info: {}, content: '', attachments: [] })
+  const [mailData, setMailData] = useState({ loading, info: { MAI_COLI_SN: 0 }, content: '', attachments: [], AttachList: [] })
+  const [maiSN, setMaiSN] = useState(mai_sn);
+  const [coliSN, setColiSN] = useState(oid);
+  const [orderDetail, setOrderDetail] = useState({});
 
-  const [updateMessageItem] = useConversationStore(state => [state.updateMessageItem]);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const refresh = useCallback(() => {
+    setRefreshTrigger(prev => prev + 1);
+  }, []);
+  // console.log(maiSN, 'mailSN', mai_sn)
 
-  useEffect(() => {
-    const getEmailDetail = async () => {
-      if (isEmpty(mai_sn)) {
-        return false
-      }
-      try {
-        setLoading(true)
-        const data = await getEmailDetailAction({ mai_sn })
-        setMailData(data)
-        setLoading(false)
-      } catch (err) {
-        setLoading(false)
-        notification.error({
-          message: "请求失败",
-          description: err.message || '网络异常',
-          placement: "top",
-          duration: 3,
-        });
+  // const [updateMessageItem] = useConversationStore(state => [state.updateMessageItem]);
+
+  const getEmailDetail = useCallback(async () => {
+    if (isEmpty(Number(maiSN)) && isEmpty(Number(mai_sn))) {
+      return false
+    }
+
+    if (!isEmpty(data)) {
+      setMailData(data)
+      return false
+    }
+
+    try {
+      setLoading(true)
+      const data = await getEmailDetailAction({ mai_sn: Number(mai_sn) || maiSN })
+      // console.log(data)
+      setMailData(data)
+      setColiSN(oid === false ? 0 : data.info.MAI_COLI_SN)
+      setLoading(false)
+      // `已读`
+      if (markRead !== false && data.info?.MOI_ReadState !== 1) {
+        updateEmailAction({
+          opi_sn: data.info.MAI_OPI_SN,
+          mai_sn_list: [Number(mai_sn) || maiSN],
+          set: { read: 1 },
+        })
       }
+    } catch (err) {
+      setLoading(false)
+      notification.error({
+        message: '请求失败',
+        description: err.message || '网络异常',
+        placement: 'top',
+        duration: 3,
+      })
     }
+  }, [mai_sn, maiSN, refreshTrigger])
 
-    if (isEmpty(data)) getEmailDetail()
-    else setMailData(data)
-  }, [mai_sn])
+
+  const getOrderDetail = useCallback(async () => {
+    // console.log(coliSN, '====colisn======')
+    if (isEmpty(Number(coliSN))) {
+      return false
+    }
+    try {
+      setLoading(true)
+      const data = await getEmailOrderAction({ colisn: coliSN })
+      setOrderDetail(data)
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+      notification.error({
+        message: '请求失败',
+        description: err.message || '网络异常',
+        placement: 'top',
+        duration: 3,
+      })
+    }
+  }, [coliSN])
+
+  useEffect(() => {
+    getEmailDetail();
+  }, [getEmailDetail])
+
+  useEffect(() => {
+    getOrderDetail()
+  }, [getOrderDetail])
 
   const postEmailResend = async ({ mai_sn, conversationid: externalid, actionId: actionid, ...body }) => {
-    if (isEmpty(mai_sn)) {
+    if (isEmpty(Number(mai_sn))) {
       return false
     }
     await postResendEmailAction({ mai_sn, externalid, actionid, token: 0 })
-    // 重发没有状态返回值, 此处前端处理为'待发送', todo: 刷新页面后消息仍为上一个状态'失败'
-    updateMessageItem({ conversationid: externalid, actionid, id: actionid, status: msgStatusRenderMapped['accepted'] })
   }
 
-  return { loading, mailData, postEmailResend }
+  const postEmailSaveOrSend = async (body, isDraft) => {
+    const { id: savedID } = await saveEmailDraftOrSendAction(body, isDraft)
+    setMaiSN(savedID)
+    if (isDraft) {
+      refresh()
+    }
+    return savedID
+  };
+
+  return { loading, mailData, orderDetail, postEmailResend, postEmailSaveOrSend }
 }
 
 export const EmailBuilder = ({subject, content}) => {
-  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><title>${subject}</title><meta http-equiv="Content-Type" content="text/html charset=UTF-8" /><meta content="width=device-width" name="viewport"><meta charset="UTF-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width" name="viewport"><meta charset="UTF-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="telephone=no,address=no,email=no,date=no,url=no" name="format-detection"><meta content="light" name="color-scheme"><meta content="light" name="supported-color-schemes"><style id="font">body#highlights-email{ font-family: Verdana, sans-serif;} table{ border-collapse: collapse; border-spacing: 0;} </style></head><body id="highlights-email" style="margin: 0 auto; padding: undefined; width: 900px; background-color: #fcfcfc;">${content}</body></html>`;
+  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><title></title><meta http-equiv="Content-Type" content="text/html charset=UTF-8" /><meta content="width=device-width" name="viewport"><meta charset="UTF-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width" name="viewport"><meta charset="UTF-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="telephone=no,address=no,email=no,date=no,url=no" name="format-detection"><meta content="light" name="color-scheme"><meta content="light" name="supported-color-schemes"><style id="font">body#highlights-email{ font-family: Verdana, sans-serif;} table{ border-collapse: collapse; border-spacing: 0;} </style></head><body id="highlights-email" style="margin: 0 auto; padding: 0; width: 900px; background-color: #fcfcfc;">${content}</body></html>`;
+}
+
+const objectToFeatureString = (obj) =>
+  obj && typeof obj === 'object'
+    ? Object.entries(obj)
+        .map(([key, value]) => `${key}=${typeof value === 'boolean' ? (value ? 'yes' : 'no') : String(value)}`)
+        .join(',')
+    : '';
+export const openPopup = (url, target, extraFeatures = {}) => {
+  let features2 = objectToFeatureString(extraFeatures)
+  let screenWidth = window.screen.availWidth;
+  let screenHeight = window.screen.availHeight;
+  features2 += extraFeatures?.fullscreen === true ? `,width=${screenWidth},height=${screenHeight}` : ''
+  window.open(url, target, POPUP_FEATURES+`,${features2}`);
+};
+
+export const useEmailList = (mailboxDirNode) => {
+  const [loading, setLoading] = useState(false)
+  const [mailList, setMailList] = useState([])
+  const [error, setError] = useState(null)
+  const [isFreshData, setIsFreshData] = useState(false)
+  const [refreshTrigger, setRefreshTrigger] = useState(0)
+  const [tempBreadcrumb, setTempBreadcrumb] = useState(null);
+
+  const refresh = useCallback(() => {
+    setRefreshTrigger((prev) => prev + 1)
+  }, [])
+
+  const { OPI_SN: opi_sn, COLI_SN, VKey, VParent, ApplyDate, OrderSourceType, IsTrue } = mailboxDirNode
+
+  const markAsUnread = useCallback(
+    async (sn_list) => {
+    // 优化性能的话，需要更新 mailList 数据，
+    // 但是更新 mailList 会造成页面全部刷新
+    // 所以还是先用 refresh()
+    // const updatedMailList = mailList.map(mail => {
+    //   if (sn_list.includes(mail.MAI_SN)) {
+    //     return { ...mail, MOI_ReadState: 1 };
+    //   }
+    //   return mail;
+    // });
+    // setMailList(updatedMailList);
+    // setLoading(true)
+      await updateEmailAction({
+        opi_sn: opi_sn,
+        mai_sn_list: sn_list,
+        set: { read: 0 },
+      })
+    },
+    [VKey],
+  )
+
+  const markAsProcessed = useCallback(
+    async (sn_list) => {
+      await updateEmailAction({
+        opi_sn: opi_sn,
+        mai_sn_list: sn_list,
+        set: { processed: 1 },
+      })
+    },
+    [VKey],
+  )
+
+  const markAsDeleted = useCallback(
+    async (sn_list) => {
+      await updateEmailAction({
+        opi_sn: opi_sn,
+        mai_sn_list: sn_list,
+        set: { delete: 1 },
+      })
+    },
+    [VKey],
+  )
+
+  const loadMailListFromCache = useCallback(async (payload) => {
+    const cacheKey = isEmpty(COLI_SN) ? `dir-${VKey}` : `order-${VKey}`
+    const readCacheIDList = await readIndexDB(cacheKey, 'maillist', 'mailbox')
+    if (!isEmpty(readCacheIDList)) {
+      const readCacheListRowsMap = await readIndexDB(readCacheIDList.data, 'listrow', 'mailbox')
+      const _x = readCacheIDList.data.map((ele) => readCacheListRowsMap.get(ele).data || {})
+      setMailList(_x)
+      setLoading(false)
+    }
+  }, [VKey])
+
+  const getMailList = useCallback(async () => {
+    // console.log('getMailList', mailboxDirNode)
+    if (!opi_sn || !VKey || (!IsTrue && !COLI_SN)) {
+      setMailList([])
+      setLoading(false)
+      setError(null)
+      setIsFreshData(false)
+      return
+    }
+    setTempBreadcrumb(null)
+    setLoading(true)
+    setError(null)
+    setIsFreshData(false)
+
+    // const cacheKey = isEmpty(COLI_SN) ? `dir-${VKey}` : `order-${VKey}`
+    try {
+      // 1. 先从缓存读取
+      await loadMailListFromCache();
+      // 2. 从接口获取最新的列表
+      const nodeParam = { coli_sn: COLI_SN, order_source_type: OrderSourceType, vkey: VKey, vparent: VParent, mai_senddate1: ApplyDate }
+      const x = await queryEmailListAction({ opi_sn, node: nodeParam })
+      // 配合List的结构
+      const _x = x.map((ele) => ({
+        ...ele,
+        key: ele.MAI_SN,
+      }))
+      setMailList(_x)
+    } catch (networkError) {
+      setError(new Error(`Failed to get mail list: ${networkError.message}.`))
+    } finally {
+      setLoading(false)
+    }
+  }, [VKey, refreshTrigger])
+
+  useEffect(() => {
+    getMailList()
+    // --- Setup Internal Event Listener ---
+    const handleInternalUpdate = (event) => {
+      // console.log(`🔔[useEmailList] Received internal event. `, event.detail)
+      if (isEmpty(event.detail)) {
+        return false;
+      }
+      const { type, } = event.detail
+      if (type === 'listrow') {
+        loadMailListFromCache()
+      }
+      if (type === 'maillist-search-result') {
+        const { data, query } = event.detail
+        setMailList(data)
+        setTempBreadcrumb([{title: '查找邮件:'+query, iconIndex: 'search'}]);
+      }
+    }
+    internalEventEmitter.on(EMAIL_CHANNEL_NAME, handleInternalUpdate)
+
+    // --- Setup BroadcastChannel Listener ---
+    const channel = getEmailChangesChannel()
+    const handleMessage = (event) => {
+      // console.log(`[useEmailList] Received channel event. `, event.data)
+      if (isEmpty(event.data)) {
+        return false;
+      }
+      const { type, } = event.data
+      const cacheKey = isEmpty(COLI_SN) ? `dir-${VKey}` : `order-${VKey}`
+      if (type === 'listrow' && cacheKey === event.data.listKey) {
+        // cacheKey 不相同时, 不需要更新; 邮箱目录不相同
+        loadMailListFromCache(event.data)
+      }
+      if (type === 'maillist-search-result') {
+        // 搜索的结果不需要更新所有页面
+        // const { data } = event.detail
+        // setMailList(data)
+      }
+    }
+    channel.addEventListener('message', handleMessage)
+
+    // Cleanup
+    return () => {
+      internalEventEmitter.off(EMAIL_CHANNEL_NAME, handleInternalUpdate)
+      channel.removeEventListener('message', handleMessage)
+    }
+  }, [getMailList])
+
+  return { loading, isFreshData, error, mailList, tempBreadcrumb, refresh, markAsUnread, markAsProcessed, markAsDeleted }
 }
+
+const orderMailTypes = new Map([
+  ['48001', '发送一催'],
+  ['48002', '发送二催'],
+  ['48003', '发送三催'],
+  ['48004', '发送已收客人付款通知'],
+  ['48005', '发送FAQ及PreSurvey'],
+  ['48006', '发送降价邮件'],
+  ['48007', '发送亚马逊津贴'],
+  ['48008', '发送报价信'],
+  ['48009', '提交调度'],
+  ['48010', '发送确认信'],
+  ['48011', '发送余款提醒信'],
+  ['48012', '发送入境提醒'],
+  ['48013', '首站关怀'],
+  ['48014', '抵桂面谈'],
+  ['48015', '末站关怀'],
+  ['48016', '发送计划'],
+  ['48017', '报价中'],
+  ['48018', '以后联系'],
+  ['48019', '成行'],
+  ['48020', '团款收讫'],
+  ['48021', '取消'],
+  ['48022', '丢失'],
+  ['48023', '已做计划'],
+  ['48024', '一催回复'],
+  ['48025', '二催回复'],
+  ['48026', '第一次报价回复'],
+  ['48027', '发送商务感谢信'],
+  ['48028', '商务酒店房满邮件'],
+  ['48029', '商务预订传真'],
+  ['48030', '商务取消邮件'],
+  ['48031', '商务单团财务表'],
+  ['48032', '商务收款单'],
+  ['48033', '商务退款单'],
+  ['48034', '商务财务转帐申请'],
+  ['48035', '商务未订先确认'],
+  ['48036', '商务等待确认'],
+  ['48037', '商务已确认'],
+  ['48038', '商务已付款'],
+  ['48039', '商务成功订单'],
+  ['48040', '商务取消订单'],
+  ['48041', '商务不成行订单'],
+  ['48042', '商务已付款未出票'],
+  ['48043', '商务已付款并出票'],
+  ['48044', '商务无效订单'],
+  ['48045', '问候提醒'],
+  ['48046', '发送邮件'],
+  ['48047', '来华一周年问候'],
+  ['48048', '来华二周年提醒'],
+  ['48049', 'CH Phone询问邮件'],
+  ['48050', '订单电话销售'],
+  ['48051', '等待付订金'],
+  ['48052', '商务订单预订中'],
+  ['48053', '客户需求调查'],
+  ['48054', '发送TourCredits通知邮件'],
+  ['48055', 'GH海外PostSurvey'],
+])
+export const emailTemplates = [
+  { type: 'RemindOneWL', index: 1, key: '1@RemindOneWL', value: '1@RemindOneWL', label: '一催模板一，询问客人是否收到报价信' },
+  { type: 'RemindOneWL', index: 2, key: '2@RemindOneWL', value: '2@RemindOneWL', label: '一催模板二，询问客人是否修改行程' },
+  { type: 'divider' },
+  { type: 'RemindTwoWL', index: 1, key: '1@RemindTwoWL', value: '1@RemindTwoWL', label: '二催模板一，询问客人对行程的看法' },
+  { type: 'RemindTwoWL', index: 2, key: '2@RemindTwoWL', value: '2@RemindTwoWL', label: '二催模板二，表达服务的意识' },
+  { type: 'divider' },
+  { type: 'RemindThreeWL', index: 1, key: '1@RemindThreeWL', value: '1@RemindThreeWL', label: '三催模板三，强调价格有效期' },
+];
+export const emailTemplateMap = emailTemplates.reduce((acc, cur) => {
+  if (cur.type === 'divider') {
+    return acc
+  }
+  acc[cur.key] = cur
+  return acc
+}, {});
+
+/**
+ *
+ * @param {object} params - Parameters for the email template request.
+ * @param {number} [params.coli_sn] - Customer order line item serial number.
+ * @param {number} [params.lgc] - Language code.
+ * @param {number} [params.opi_sn] - Order product item serial number.
+ */
+export const useEmailTemplate = (templateKey, params) => {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [templateContent, setTemplateContent] = useState({ mailtype: '', mailtypeName: '', subject: '', mailcontent: '' })
+
+  const getTemplateContent = useCallback(async () => {
+    if  (!templateKey || !Number(params.coli_sn) || !Number(params.opi_sn)) {
+      setTemplateContent({ mailtype: '', mailtypeName: '', subject: '', mailcontent: '' })
+      setLoading(false)
+      setError(null)
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const { index: remind_index, type: remind_type } = emailTemplateMap[templateKey] || {};
+      const _params = { ...params, remind_index, remind_type};
+      const x = await getReminderEmailTemplateAction(_params)
+      const lowerCaseShallow = Object.keys(x).reduce((acc, key) => ({...acc, [key.toLowerCase()]: x[key]}), {})
+      setTemplateContent({...lowerCaseShallow, mailtypeName: orderMailTypes.get(lowerCaseShallow.mailtype)})
+    } catch (networkError) {
+      setError(new Error(`Failed to get template content: ${networkError.message}.`))
+    } finally {
+      setLoading(false)
+    }
+  }, [templateKey, params.opi_sn, params.coli_sn, params.lgc])
+
+  useEffect(() => {
+    getTemplateContent()
+  }, [getTemplateContent])
+
+  return { loading, error, templateContent };
+}
+
+export const mailboxSystemDirs = [
+  { key: 1, value: 1, label: '收件箱' },
+  { key: 2, value: 2, label: '未读邮件' },
+  { key: 3, value: 3, label: '已发邮件' },
+  { key: 4, value: 4, label: '待发邮件' },
+  { key: 5, value: 5, label: '草稿' },
+  { key: 6, value: 6, label: '垃圾邮件' },
+  { key: 7, value: 7, label: '已处理邮件' },
+]
+

src/hooks/useGlobalNotify.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react'
+import { isEmpty } from '@/utils/commons'
+import { App, notification } from 'antd'
+import useConversationStore from '@/stores/ConversationStore'
+
+export const useGlobalNotify = () => {
+  // const { notification } = App.useApp() // 在AntApp 中，App.useApp() 获取不到notification
+
+  const [globalNotify, clearGlobalNotify] = useConversationStore((state) => [state.globalNotify, state.clearGlobalNotify])
+
+  useEffect(() => {
+    if (isEmpty(globalNotify)) {
+      return () => {}
+    }
+    // message.info(globalNotify[0].content, 3)
+    notification.open({
+      key: globalNotify[0].key,
+      message: globalNotify[0].title,
+      description: globalNotify[0].content,
+      duration: 6,
+      placement: 'top',
+      type: globalNotify[0].type,
+      onClick: () => {
+        clearGlobalNotify()
+      },
+    })
+    // setTimeout(() => {
+    //   clearGlobalNotify()
+    // }, 3030)
+
+    return () => {}
+  }, [globalNotify])
+
+  return {};
+}

src/main.jsx

@@ -17,7 +17,7 @@ import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
 import CallCenter from '@/views/CallCenter'
 import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper'
-import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile'
+import OrderProfile from '@/components/OrderProfile'
 import SnippetList from '@/views/accounts/SnippetList'
 import GeneratePayment from '@/views/accounts/GeneratePayment'
 
@@ -30,6 +30,12 @@ import DingdingAuthCode from '@/views/dingding/AuthCode'
 import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
 
+import CustomerRelation from '@/views/customer_relation/index'
+import NewEmail from '@/views/NewEmail'
+import EmailDetailWindow from '@/views/EmailDetailWindow'
+
+import { executeDailyCleanupTask, setupDailyMidnightCleanupScheduler } from '@/utils/indexedDB'
+
 useAuthStore.getState().loadUserSession()
 
 const isMobileApp =
@@ -58,7 +64,7 @@ const router = createBrowserRouter([
           {
             element: <MobileSecondHeader />,
             children: [
-              { path: 'm/order', element: <CustomerProfile /> },
+              { path: 'm/order', element: <OrderProfile /> },
               { path: 'callcenter/call', element: <CallCenter /> },
               { path: 'callcenter/call/:phonenumber', element: <CallCenter /> },
             ],
@@ -81,8 +87,14 @@ const router = createBrowserRouter([
               { path: 'chat/unassign', element: <Unassign /> },
               { path: 'callcenter/call', element: <CallCenter /> },
               { path: 'callcenter/call/:phonenumber', element: <CallCenter /> },
+              { path: 'customer_relation/index', element: <CustomerRelation /> },
             ],
           },
+          { path: 'email/view/:mailid', element: <EmailDetailWindow />},
+          { path: 'email/:action/:quoteid/:oid/:templateKey', element: <NewEmail />},
+          { path: 'email/:action/:quoteid/:oid', element: <NewEmail />},
+          { path: 'email/:action/:quoteid', element: <NewEmail />},
+          // { path: 'email/new/0/:oid', element: <NewEmail />},
         ],
   },
   {
@@ -132,3 +144,13 @@ createRoot(root).render(
     </ThemeContext.Provider>
   </React.Suspense>,
 )
+
+
+// --- Global Setup After React App Mounts ---
+// This part will run once when the application script is loaded and executed.
+document.addEventListener('DOMContentLoaded', () => {
+  console.log(`[${new Date().toLocaleTimeString()}] Application fully loaded. Initiating global daily cleanup checks.`);
+
+  executeDailyCleanupTask();
+  setupDailyMidnightCleanupScheduler();
+});

src/stores/AuthStore.js

@@ -3,12 +3,16 @@ import { devtools } from 'zustand/middleware'
 import { fetchJSON } from '@/utils/request'
 import { isEmpty, isNotEmpty } from '@/utils/commons'
 import { API_HOST, BUILD_VERSION } from '@/config'
+import { usingStorage } from '@/utils/usingStorage';
 
 export const PERM_MERGE_CONVERSATION = 'merge-conversation'
 export const PERM_ASSIGN_NEW_CONVERSATION = 'assign-new-conversation'
 export const PERM_USE_EMAL = 'use-email'
+export const PERM_USE_WHATSAPP = 'use-whatsapp'
 export const PERM_IMPORT_EMAIL = 'import-email'
 
+const WAI_SERVER_KEY = 'G-STR:WAI_SERVER'
+
 const useAuthStore = create(devtools((set, get) => ({
   loginUser: {
     userId: -1,
@@ -27,10 +31,15 @@ const useAuthStore = create(devtools((set, get) => ({
   loginStatus: 0,
 
   isPermitted: (perm) => {
+    const { waiServer } = usingStorage(WAI_SERVER_KEY)
     const { loginUser } = get()
 
+    if (perm === PERM_USE_WHATSAPP) {
+      return isNotEmpty(waiServer) // ['370', '143', '495', '404', '383', '227'].includes(loginUser.userId)
+    }
+
     if (perm === PERM_USE_EMAL) {
-      return ['599', '495', '143', '370', '639', '513', '654', '404', '383', '227'].includes(loginUser.userId)
+      return true//['501', '466', '599', '495', '143', '370', '639', '513', '654', '404', '383', '227'].includes(loginUser.userId)
     }
 
     // 导入邮件消息，需要配置才能使用
@@ -50,6 +59,7 @@ const useAuthStore = create(devtools((set, get) => ({
   },
 
   login: async (authCode) => {
+    const { setStorage } = usingStorage()
     const { saveUserSession, setLoginStatus } = get()
 
     setLoginStatus(200)
@@ -60,6 +70,9 @@ const useAuthStore = create(devtools((set, get) => ({
     )
 
     if (json.errcode === 0 && isNotEmpty(json.result.opisn)) {
+      // TODO：保存个人 WhatsApp 服务器地址
+      const waiServer = json.result.whatsappinfo.length > 0 ? json.result.whatsappinfo[0].wai_server : ''
+      setStorage('G-STR:WAI_SERVER', waiServer)
       set(() => ({
         loginUser: {
           userId: json.result.opisn,
@@ -78,6 +91,7 @@ const useAuthStore = create(devtools((set, get) => ({
             }
           }),
           whatsAppBusiness: json.result.whatsappinfo.length > 0 ? json.result.whatsappinfo[0].whatsapp_waba : '',
+          whatsAppNo: json.result.whatsappinfo.length > 0 ? json.result.whatsappinfo[0].whatsapp_wa : '',
           accountName: json.result.opicode,
           username: json.result.nick,
           avatarUrl: json.result.avatarUrl,
@@ -143,7 +157,8 @@ const useAuthStore = create(devtools((set, get) => ({
   },
 
   loadUserSession: () => {
-    let sessionData = window.localStorage.getItem('GLOBAL_SALES_LOGIN_USER')
+    let sessionData = window.sessionStorage.getItem('GLOBAL_SALES_LOGIN_USER')
+    // if (import.meta.env.DEV) sessionData ='{"userId":"155","userIdStr":"155","emailList":[],"whatsAppBusiness":"+8617607730395","whatsAppNo":null,"username":"尹诚诚","avatarUrl":"https://static-legacy.dingtalk.com/media/lADPBE1XYG_HAcDNAgDNAgA_512_512.jpg","mobile":"+86-18507832160","email":"ycc@hainatravel.com","openId":"K8BNXMf8ESSr1DzLVUrX7wiEiE","accountList":[{"OPI_SN":155,"OPI_Code":"YCC","OPI_NameCN":"尹诚诚","OPI_DEI_SN":1,"OPI_NameEN":"Yin Chengcheng"}]}'
 
     // if (window.location.hostname === '202.103.68.93' && window.location.port === '4173' && isEmpty(sessionData)) {
     //   sessionData = `{"userId":"383","userIdStr":"383,609","emailList":[{"opi_sn":383,"mat_sn":760,"email":"lyj@asiahighlights.com","default":false,"backup":false},{"opi_sn":383,"mat_sn":759,"email":"lyj@chinahighlights.com","default":true,"backup":false},{"opi_sn":383,"mat_sn":758,"email":"lyj@hainatravel.com","default":false,"backup":false}],"username":"廖一军","avatarUrl":"https://static-legacy.dingtalk.com/media/lALPBDDrhXr716HNAoDNAoA_640_640.png","mobile":"+86-18777396951","email":"lyj@hainatravel.com","whatsAppBusiness":"8617458471254","openId":"iioljiPmZ4RPoOYpkFiSn7IKAiEiE","accountList":[{"OPI_SN":383,"OPI_Code":"LYJ","OPI_NameCN":"廖一军","OPI_DEI_SN":7,"OPI_NameEN":"Jimmy Liow"},{"OPI_SN":609,"OPI_Code":"LYJAH","OPI_NameCN":"廖一军（ah）","OPI_DEI_SN":28,"OPI_NameEN":"Jimmy Liow"}]}`
@@ -170,11 +185,11 @@ const useAuthStore = create(devtools((set, get) => ({
     )
   },
 
-  setWhatsAppBusiness: async (userId, whatsAppBusiness) => {
+  setWhatsAppProfile: async (userId, whatsAppBusiness, whatsAppNo) => {
     const { loginUser, saveUserSession } = get()
     const postWABAUrl = `${API_HOST}/v2/set_whatsapp_info`
 
-    const params = {opi_sn: userId, whatsapp_waba: whatsAppBusiness};
+    const params = {opi_sn: userId, whatsapp_waba: whatsAppBusiness, whatsapp_wa: whatsAppNo.replace(/\D/g, '')};
 
     return fetchJSON(postWABAUrl, params)
       .then(json => {
@@ -182,6 +197,7 @@ const useAuthStore = create(devtools((set, get) => ({
           set(() => ({
             loginUser: {
               ...loginUser,
+              whatsAppNo: whatsAppNo,
               whatsAppBusiness: whatsAppBusiness,
             }
           }))

src/stores/CallCenterStore.js

@@ -1,12 +1,16 @@
 import { create } from "zustand";
-import { VonageClient } from "@vonage/client-sdk";
+import { VonageClient, ClientConfig, ConfigRegion, LoggingLevel } from '@vonage/client-sdk'
 import { fetchJSON } from "@/utils/request";
-import { prepareUrl, isNotEmpty } from "@/utils/commons";
+import { prepareUrl, isNotEmpty, } from "@/utils/commons";
 import { VONAGE_URL, DATETIME_FORMAT } from "@/config";
 import dayjs from "dayjs";
 
 const callCenterStore = create((set, get) => ({
-	client: new VonageClient({ apiUrl: "https://api-ap-3.vonage.com", websocketUrl: "wss://ws-ap-3.vonage.com" }),
+	client: new VonageClient({
+    region: ConfigRegion.AP,
+    // apiUrl: "https://api-ap-3.vonage.com", websocketUrl: "wss://ws-ap-3.vonage.com",
+    // loggingLevel: LoggingLevel.Debug,
+  }),
 	call_id: 0,
 	loading: false,
 	logs: "",
@@ -15,11 +19,20 @@ const callCenterStore = create((set, get) => ({
 	init_vonage: user_id => {
 		const { client, log } = get();
 		set({ loading: true });
+    // const client = new VonageClient({
+      //   loggingLevel: LoggingLevel.DEBUG,
+      //   region: ConfigRegion.AP,
+      // })
+    // update some options after initialization.
+    // const vonageConfig = new ClientConfig(ConfigRegion.AP);
+    // client.setConfig(vonageConfig);
+
 		const fetchUrl = prepareUrl(VONAGE_URL + "/jwt")
 			.append("user_id", user_id)
 			.build();
-		return fetchJSON(fetchUrl).then(json => {
-			if (json.status === 200) {
+		return fetchJSON(fetchUrl).then(res => {
+      const json = res.result;
+			if (json?.status === 200) {
 				let jwt = json.token;
 
 				client
@@ -30,6 +43,11 @@ const callCenterStore = create((set, get) => ({
 					.catch(error => {
 						log("Error creating session: ", error);
 					});
+        // debug:
+        // client
+        //   .getUser('me')
+        //   .then((user) => log('getUser --me', user))
+        //   .catch((error) => log);
 
 				client.on("sessionError", reason => {
 					// After creating a session
@@ -56,7 +74,7 @@ const callCenterStore = create((set, get) => ({
 			} else {
 				throw new Error("请求jwt失败");
 			}
-			set({ loading: false });
+			set({ loading: false, client });
 		});
 	},
 
@@ -77,7 +95,7 @@ const callCenterStore = create((set, get) => ({
 		if (client) {
 			set({ loading: true });
 			client
-				.serverCall({ to: phone_number })
+				.serverCall({ to: phone_number, })
 				.then(callId => {
 					log("Id of created call: ", callId);
 					set({ call_id: callId });

src/stores/ConversationStore.js

@@ -1,17 +1,29 @@
 import { create } from 'zustand';
 import { RealTimeAPI } from '@/channel/realTimeAPI';
-import { olog, isEmpty, groupBy, sortArrayByOrder, logWebsocket, pick } from '@/utils/commons';
+import { olog, isEmpty, groupBy, sortArrayByOrder, pick, sortKeys, omit, sortObjectsByKeysMap, merge } from '@/utils/commons';
+import { logWebsocket, clean7DaysWebsocketLog } from '@/utils/indexedDB'
 import { receivedMsgTypeMapped, handleNotification } from '@/channel/bubbleMsgUtils';
 import { fetchConversationsList, fetchTemplates, fetchConversationsSearch, UNREAD_MARK, fetchTags } from '@/actions/ConversationActions';
 import { devtools } from 'zustand/middleware';
 import { WS_URL, DATETIME_FORMAT } from '@/config';
 import dayjs from 'dayjs';
+import EmailSlice from './EmailSlice';
 
 const replaceObjectsByKey = (arr1, arr2, key) => {
-  const map = new Map(arr2.map(ele => [ele[key], ele]));
-  return arr1.map(item => map.has(item[key]) ? map.get(item[key]) : item);
+  const map2 = new Map(arr2.map(ele => [ele[key], ele]));
+  return arr1.map(item => map2.has(item[key]) ? map2.get(item[key]) : item);
 }
 
+const sortConversationList = (list) => {
+  const mergedListMapped = groupBy(list, 'top_state');
+  const topValOrder = Object.keys(mergedListMapped).filter(ss => ss !== '1').sort((a, b) => b - a);
+  const pagelist = topValOrder.reduce((r, topVal) => r.concat(mergedListMapped[String(topVal)]), []);
+  return {
+    topList: mergedListMapped['1'] || [],
+    pageList: pagelist,
+  }
+};
+
 // const WS_URL = 'ws://202.103.68.144:8888/whatever/';
 // const WS_URL = 'ws://120.79.9.217:10022/whatever/';
 const conversationRow = {
@@ -26,6 +38,7 @@ const conversationRow = {
   customer_name: '',
   whatsapp_phone_number: '',
   top_state: 0,
+  session_type: 0,
 };
 
 const initialConversationState = {
@@ -54,6 +67,9 @@ const initialConversationState = {
   msgListLoading: false,
 
   detailPopupOpen: false,
+
+  wai: {},
+
 };
 
 const globalNotifySlice = (set) => ({
@@ -64,6 +80,11 @@ const globalNotifySlice = (set) => ({
   clearGlobalNotify: () => set(() => ({ globalNotify: [] })),
 })
 
+const waiSlice = (set) => ({
+  wai: {},
+  setWai: (wai) => set({ wai }),
+});
+
 // 顾问的自定义标签
 const tagsSlice = (set) => ({
   tags: [],
@@ -158,26 +179,34 @@ const websocketSlice = (set, get) => ({
     logWebsocket(data, 'I');
     // olog('websocket Messages ----', data);
     // console.log(data);
-    const { updateMessageItem, sentOrReceivedNewMessage, addGlobalNotify } = get();
+    const { updateMessageItem, sentOrReceivedNewMessage, addGlobalNotify, setWai, addToConversationList, updateMailboxCount } = get()
     const { errcode, errmsg, result } = data;
 
     if (!result) {
       return false;
     }
-    let resultType = result?.action || result.type;
+    let resultType = result?.action || result?.type;
     if (errcode !== 0) {
       // addError('Error Connecting to Server');
       resultType = 'error';
     }
-    // console.log(resultType, 'result.type');
+
     const msgObj = receivedMsgTypeMapped[resultType].getMsg(result);
     const msgRender = receivedMsgTypeMapped[resultType].contentToRender(msgObj);
     const msgUpdate = receivedMsgTypeMapped[resultType].contentToUpdate(msgObj);
     // console.log('msgRender msgUpdate', msgRender, msgUpdate);
+    if (['email.updated', 'email.inbound.received',].includes(resultType)) {
+      updateMailboxCount({ opi_sn: msgObj.opi_sn })
+      // if (!isEmpty(msgRender)) {
+      //   const msgNotify = receivedMsgTypeMapped[resultType].contentToNotify(msgObj);
+      //   addGlobalNotify(msgNotify);
+      // }
+      return false;
+    }
     if ([
       'whatsapp.message.updated', 'message', 'error',
-      'email.updated',
-    ].includes(resultType)) {
+      'email.updated', 'wai.message.updated',
+    ].includes(resultType) && !isEmpty(msgUpdate)) {
       updateMessageItem(msgUpdate);
     }
     if (!isEmpty(msgRender)) {
@@ -194,6 +223,27 @@ const websocketSlice = (set, get) => ({
       const msgNotify = receivedMsgTypeMapped[resultType].contentToNotify(msgObj);
       addGlobalNotify(msgNotify);
     }
+    // WhatsApp creds update
+    if ([
+      'wai.creds.update'
+    ].includes(resultType)) {
+      const _data = receivedMsgTypeMapped[resultType].getMsg(result);
+      setWai(_data)
+      if (['offline', 'close'].includes(_data.status)) {
+        const msgNotify = receivedMsgTypeMapped[resultType].contentToNotify(msgObj);
+        addGlobalNotify(msgNotify);
+      }
+      // setTimeout(() => {
+      //   setWai({}); // 60s 后清空
+      // }, 60_000);
+    }
+    // 会话表 更新
+    if (['session.new', 'session.updated'].includes(resultType)
+      && result.webhooksource !== 'email'
+    ) {
+      const sessionList = receivedMsgTypeMapped[resultType].getMsg(result);
+      addToConversationList(sessionList || [], 'top')
+    }
     // console.log('handleMessage*******************');
   },
 });
@@ -224,15 +274,29 @@ const conversationSlice = (set, get) => ({
    * 搜索结果
    */
   setConversationsList: (conversationsList) => {
-    const { activeConversations,  } = get();
+    const { activeConversations, currentConversation } = get();
+    // 让当前会话显示在页面上
+    let _tmpCurrentMsgs = [];
+    if (currentConversation.sn) {
+    //   _tmpCurrentMsgs = activeConversations[currentConversation.sn];
+    }
     const conversationsMapped = conversationsList.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
+    const indexCurrent = currentConversation.sn ? conversationsList.findIndex(ele => Number(ele.sn) === Number(currentConversation.sn)) : -1;
+    if (indexCurrent !== -1) {
+      const [currentElement] = conversationsList.splice(indexCurrent, 1);
+      conversationsList.unshift(currentElement); // Add to top
+      // const hasCurrent = Object.keys(conversationsMapped).findIndex(sn => Number(sn) === Number(currentConversation.sn)) !== -1;
+      // conversationsMapped[currentConversation.sn] = _tmpCurrentMsgs;
+      // conversationsList.unshift(hasCurrent ? )
+      // hasCurrent ? 0 : conversationsList.unshift(currentConversation);
+    }
 
-    const conversationsTopStateMapped = groupBy(conversationsList, 'top_state');
+    const { topList, pageList } = sortConversationList(conversationsList);
 
     return set({
-      topList: conversationsTopStateMapped[1] || [],
+      topList,
       // conversationsList: conversationsTopStateMapped[0],
-      pageList: conversationsTopStateMapped[0] || [],
+      pageList,
       conversationsList,
       activeConversations: { ...conversationsMapped, ...activeConversations }
     })
@@ -243,7 +307,7 @@ const conversationSlice = (set, get) => ({
     return set({ closedConversationsList, activeConversations: { ...activeConversations, ...listMapped } });
   },
   addToConversationList: (newList, position='top') => {
-    const { activeConversations, conversationsList, } = get();
+    const { activeConversations, conversationsList, currentConversation } = get();
     // const conversationsIds = Object.keys(activeConversations);
     const conversationsIds = conversationsList.map((chatItem) => `${chatItem.sn}`);
     const newConversations = newList.filter((conversation) => !conversationsIds.includes(`${conversation.sn}`));
@@ -255,15 +319,27 @@ const conversationSlice = (set, get) => ({
     const updateList = replaceObjectsByKey(conversationsList, newList, 'sn');
 
     const mergedList = position==='top' ? [...newList, ...withoutNew] : [...updateList, ...newConversations];
-    const mergedListMapped = groupBy(mergedList, 'top_state');
-
+    const mergedListMsgs = { ...newConversationsMapped, ...activeConversations,  };
+
+    const needUpdateCurrent = -1 !== newList.findIndex(row => Number(row.sn) === Number(currentConversation.sn));
+    const updateCurrent = needUpdateCurrent ? { currentConversation: newList.find(row => Number(row.sn) === Number(currentConversation.sn)) } : {};
+    // 让当前会话显示在页面上
+    const indexCurrent = currentConversation.sn ? mergedList.findIndex(ele => Number(ele.sn) === Number(currentConversation.sn)) : -1;
+    if (indexCurrent !== -1 ) {
+      const [currentElement] = mergedList.splice(indexCurrent, 1);
+      mergedList.unshift(currentElement); // Add to top
+      // hasCurrent ? 0 : mergedList.unshift(currentConversation);
+    }
     const refreshTotalNotify = mergedList.reduce((r, c) => r+(c.unread_msg_count === UNREAD_MARK ? 0 : c.unread_msg_count), 0);
 
+    const { topList, pageList } = sortConversationList(mergedList)
+
     return set((state) => ({
-      topList: mergedListMapped[1] || [],
-      pageList: mergedListMapped[0] || [],
+      ...updateCurrent,
+      topList,
+      pageList,
       conversationsList: mergedList,
-      activeConversations: { ...newConversationsMapped, ...activeConversations,  },
+      activeConversations: mergedListMsgs,
       totalNotify: refreshTotalNotify,
       // totalNotify: state.totalNotify + newConversations.map((ele) => ele.unread_msg_count).reduce((acc, cur) => acc + (cur || 0), 0),
     }));
@@ -273,11 +349,11 @@ const conversationSlice = (set, get) => ({
     const targetId = conversation.sn;
     const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
     conversationsList.splice(targetIndex, 1);
-    const mergedListMapped = groupBy(conversationsList, 'top_state');
+    const { topList, pageList } = sortConversationList(conversationsList)
 
     return set({
-      topList: mergedListMapped['1'] || [],
-      pageList: mergedListMapped['0'] || [],
+      topList,
+      pageList,
       conversationsList: [...conversationsList],
       activeConversations: { ...activeConversations, [`${targetId}`]: [] },
       currentConversation: {},
@@ -322,11 +398,11 @@ const conversationSlice = (set, get) => ({
           ...conversation,
         })
       : null;
-    const mergedListMapped = groupBy(conversationsList, 'top_state');
+    const { topList, pageList } = sortConversationList(conversationsList)
 
     return set({
-      topList: mergedListMapped['1'] || [],
-      pageList: mergedListMapped['0'] || [],
+      topList,
+      pageList,
       conversationsList: [...conversationsList]
     });
   },
@@ -353,15 +429,16 @@ const messageSlice = (set, get) => ({
       // 更新状态
       // * 已读的不再更新状态, 有时候投递结果在已读之后返回
       // if (ele.id === ele.actionId && ele.actionId === message.actionId) {
-      if (ele.actionId === message.actionId) {
-        // console.log('actionID', message, ele)
-        // WABA: 同步返回, 根据actionId 更新消息的id
+      if (ele.actionId === message.actionId && !isEmpty(ele.actionId) && !isEmpty(message.actionId)) {
+        // console.log('actionID', message.actionId, ele.actionId)
+        // WABA: 同步返回, 根据actionId 更新消息的id;
         const toUpdateFields = pick(message, ['msgOrigin', 'id', 'status', 'dateString', 'replyButton', 'coli_id', 'coli_sn']);
         return { ...ele, ...toUpdateFields, status: ele.status === 'read' ? ele.status : message.status, };
       } else if (String(ele.id) === String(message.id)) {
-        // console.log('id', message, ele)
+        // console.log('id', message.id, ele.id)
         // WABA: 异步的后续状态更新, id已更新为wamid
-        // console.log('old msg ele', ele);
+        // console.log('coming msg', message.type, message);
+        // console.log('old msg ele', ele.type, ele);
         const renderStatus = message?.data?.status ? { status: { ...ele.data.status, loading: 0, download: true } } : {};
         const keepReply = ele.reply ? { reply: ele.reply } : {};
         const keepTemplate = ele.template ? { template: ele.template, template_origin: ele.template_origin, text: ele.text } : {};
@@ -375,126 +452,25 @@ const messageSlice = (set, get) => ({
       targetMsgs.push(message);
     }
 
-    const targetIndex = conversationsList.findIndex((ele) => String(ele.sn) === String(targetId));
-    let newConversations = [];
-    if (targetIndex !== -1) { // 'delivered'
-      // 更新列表的时间
-      conversationsList.splice(targetIndex, 1, {
-        ...conversationsList[targetIndex],
-        last_received_time: message.status === 'received' ? dayjs(message.deliverTime).add(8, 'hours').format(DATETIME_FORMAT) : conversationsList[targetIndex].last_received_time,
-        conversation_expiretime: message?.conversation?.expireTime || conversationsList[targetIndex].conversation_expiretime || '', // 保留使用UTC时间
-      });
-    } else if (targetIndex === -1) {
-      // 当前客户端不存在的会话
-      // todo: 设置为当前(在WhatsApp返回号码不一致时)
-      newConversations = [{
-        ...conversationRow,
-        ...message,
-        sn: targetId,
-        opi_sn: currentConversation.opi_sn, // todo: coli sn
-        last_received_time: message.date,
-        unread_msg_count: 0,
-        whatsapp_name: message.to, //message?.senderName || message?.sender || '',
-        customer_name: message.to, // message?.senderName || message?.sender || '',
-        conversation_expiretime: message?.conversation?.expireTime || '', // 保留使用UTC时间
-        whatsapp_phone_number: message.type === 'email' ? null : message.to,
-        show_default: message.to || '',
-        last_message: message,
-        channels: {
-          "email": message.type === 'email' ? message.from : null,
-          "phone_number": message.type === 'email' ? null : message.from,
-          "whatsapp_phone_number": message.type === 'email' ? null : message.from,
-        },
-      }];
-    }
-    const mergedList = [...newConversations, ...conversationsList]
-    const mergedListMapped = groupBy(mergedList, 'top_state');
     setFilter({ loadNextPage: true });
 
     return set({
-      topList: mergedListMapped['1'] || [],
-      pageList: mergedListMapped['0'] || [],
-      conversationsList: mergedList,
       activeConversations: { ...activeConversations, [String(targetId)]: targetMsgs },
     });
   },
   sentOrReceivedNewMessage: (targetId, message) => {
     // msgRender:
-    const { activeConversations, conversationsList, currentConversation, totalNotify, setFilter } = get();
+    // console.log('sentOrReceivedNewMessage', targetId, message)
+    const { activeConversations, setFilter } = get();
     const targetMsgs = activeConversations[String(targetId)] || [];
-    const targetIndex = conversationsList.findIndex((ele) => Number(ele.sn) === Number(targetId));
-    const lastReceivedTime = (message.type !== 'system' && message.sender !== 'me') ? dayjs(message.date).add(8, 'hours').format(DATETIME_FORMAT) : null;
-    const newConversation =
-      targetIndex !== -1
-        ? {
-            ...conversationsList[targetIndex],
-            last_received_time: lastReceivedTime || conversationsList[targetIndex].last_received_time,
-            unread_msg_count:
-              Number(targetId) !== Number(currentConversation.sn) && message.sender !== 'me'
-                ? conversationsList[targetIndex].unread_msg_count + 1
-                : conversationsList[targetIndex].unread_msg_count,
-            last_message: message,
-          }
-        : {
-            ...conversationRow,
-            ...message,
-            sn: targetId,
-            opi_sn: currentConversation.opi_sn, // todo: coli sn
-            last_received_time: dayjs(message.date).add(8, 'hours').format(DATETIME_FORMAT),
-            unread_msg_count: message.sender === 'me' ? 0 : 1,
-            whatsapp_name: message?.senderName || message?.sender || '',
-            customer_name: message?.senderName || message?.sender || '',
-            whatsapp_phone_number: message.type === 'email' ? null : message.from,
-            show_default: message?.senderName || message?.sender || message.from || '',
-            last_message: message,
-            channels: {
-              "email": message.type === 'email' ? message.from : null,
-              "phone_number": message.type === 'email' ? null : message.from,
-              "whatsapp_phone_number": message.type === 'email' ? null : message.from,
-            },
-          };
-    if (String(targetId)!== '0') {
-      conversationsList.splice(targetIndex, 1);
-      conversationsList.unshift(newConversation);
-    }
-    // console.log('find in list, i:', targetIndex);
-    // console.log('find in list, chat updated and Top: \n', JSON.stringify(newConversation, null, 2));
-    // console.log('list updated : \n', JSON.stringify(conversationsList, null, 2));
-    const mergedListMapped = groupBy(conversationsList, 'top_state');
     setFilter({ loadNextPage: true });
 
-    const isCurrent = Number(targetId) === Number(currentConversation.sn);
-    const updatedCurrent = isCurrent
-      ? {
-          ...currentConversation,
-          last_received_time: dayjs(message.date).add(8, 'hours').format(DATETIME_FORMAT),
-          conversation_expiretime: dayjs(message.date).add(24, 'hours').format(DATETIME_FORMAT),
-          last_message: message,
-        }
-      : {...currentConversation, last_message: message,};
     return set({
-      currentConversation: updatedCurrent,
-      topList: mergedListMapped['1'] || [],
-      pageList: mergedListMapped['0'] || [],
-      conversationsList: [...conversationsList],
-      totalNotify: totalNotify + (message.sender === 'me' ? 0 : 1),
       activeConversations: { ...activeConversations, [String(targetId)]: [...targetMsgs, message] },
     });
   },
 });
 
-/**
- * Email
- */
-const emailSlice = (set, get) => ({
-  emailMsg: { id: -1, conversationid: '', actionId: '', order_opi: '', coli_sn: '', msgOrigin: {} },
-  setEmailMsg: (emailMsg) => set({ emailMsg }),
-  detailPopupOpen: false,
-  setDetailOpen: (v) => set({ detailPopupOpen: v }),
-  openDetail: () => set(() => ({ detailPopupOpen: true })),
-  closeDetail: () => set(() => ({ detailPopupOpen: false })),
-})
-
 export const useConversationStore = create(
   devtools((set, get) => ({
     ...initialConversationState,
@@ -507,7 +483,8 @@ export const useConversationStore = create(
     ...tagsSlice(set, get),
     ...filterSlice(set, get),
     ...globalNotifySlice(set, get),
-    ...emailSlice(set, get),
+    ...EmailSlice(set, get),
+    ...waiSlice(set, get),
 
     // state actions
     addError: (error) => set((state) => ({ errors: [...state.errors, error] })),
@@ -515,7 +492,10 @@ export const useConversationStore = create(
 
     // side effects
     fetchInitialData: async ({userId, whatsAppBusiness, ...loginUser}) => {
-      const { addToConversationList, setTemplates, setInitial, setTags } = get();
+      const { addToConversationList, setTemplates, setInitial, setTags,
+        initMailbox } = get();
+
+      initMailbox({ userId, dei_sn: loginUser.accountList[0].OPI_DEI_SN, opi_sn: loginUser.accountList[0].OPI_SN, userIdStr: loginUser.userIdStr })
 
       const conversationsList = await fetchConversationsList({ opisn: userId });
       addToConversationList(conversationsList);

src/stores/CustomerRelationStore.js

@@ -0,0 +1,41 @@
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+import { fetchJSON, postForm } from '@/utils/request'
+import { HT3, EMAIL_HOST } from '@/config'
+import { isNotEmpty, prepareUrl } from '@/utils/commons'
+
+export const useCustomerRelationStore = create((set, get) => ({
+  loading: false,
+  setLoading: (loading) => set({ loading }),
+
+  tasksList: [],
+
+  fetchSearchTasks: async (data) => {
+    set({ loading: true })
+    const formData = new FormData()
+    for (const key in data) {
+      formData.append(key, data[key])
+    }
+    fetch(`${HT3}/customerrelation/search_tasks`, {
+      method: 'POST',
+      body: formData,
+    })
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`)
+        }
+        return res.json()
+      })
+      .then((data) => {
+        set({ tasksList: data })
+      })
+      .catch((error) => {
+        console.error('Fetch error:', error)
+      })
+      .finally(() => {
+        set({ loading: false })
+      })
+  },
+}))
+
+export default useCustomerRelationStore

src/stores/EmailSlice.js

@@ -0,0 +1,189 @@
+import { getEmailDirAction, getMailboxCountAction, getRootMailboxDirAction, getEmailChangesChannel, EMAIL_CHANNEL_NAME } from '@/actions/EmailActions'
+import { buildTree, isEmpty, olog, sortArrayByOrder  } from '@/utils/commons'
+import { readIndexDB, writeIndexDB, createIndexedDBStore, clean7DaysMailboxLog } from '@/utils/indexedDB';
+import { internalEventEmitter } from '@/utils/EventEmitterService';
+
+/**
+ * Email
+ */
+const emailSlice = (set, get) => ({
+  emailMsg: { id: -1, conversationid: '', actionId: '', order_opi: '', coli_sn: '', msgOrigin: {} },
+  setEmailMsg: (emailMsg) => {
+    const { editorOpen } = get()
+    return editorOpen ? false : set({ emailMsg }) // 已经打开的不更新
+  },
+  detailPopupOpen: false,
+  setDetailOpen: (v) => set({ detailPopupOpen: v }),
+  openDetail: () => set(() => ({ detailPopupOpen: true })),
+  closeDetail: () => set(() => ({ detailPopupOpen: false })),
+  editorOpen: false,
+  setEditorOpen: (v) => set({ editorOpen: v }),
+  openEditor: () => set(() => ({ editorOpen: true })),
+  closeEditor: () => set(() => ({ editorOpen: false })),
+
+  // EmailEditorPopup 组件的 props
+  // @property {string} fromEmail - 发件人邮箱
+  // @property {string} fromUser - 发件人用户
+  // @property {string} fromOrder - 发件订单
+  // @property {string} toEmail - 收件人邮箱
+  // @property {string} conversationid - 会话ID
+  // @property {string} quoteid - 引用邮件ID
+  // @property {object} draft - 草稿
+  // @property {string} action - reply / forward / new / edit
+  // @property {string} oid - coli_sn
+  // @property {object} mailData - 邮件内容
+  // @property {string} receiverName - 收件人称呼
+  emailEdiorProps: new Map(),
+  setEditorProps: (v) => {
+    const { emailEdiorProps } = get()
+    const uniqueKey = v.quoteid || Date.now().toString(32)
+    const currentEditValue = { ...v, key: `${v.action}-${uniqueKey}` }
+    const news = new Map(emailEdiorProps).set(currentEditValue.key, currentEditValue)
+    for (const [key, value] of news.entries()) {
+      console.log(value)
+    }
+    return set((state) => ({ emailEdiorProps: news, currentEditKey: currentEditValue.key, currentEditValue }))
+    // return set((state) => ({ emailEdiorProps: { ...state.emailEdiorProps, ...v } }))
+  },
+  closeEditor1: (key) => {
+    const { emailEdiorProps } = get()
+    const newProps = new Map(emailEdiorProps)
+    newProps.delete(key)
+    return set(() => ({ emailEdiorProps: newProps }))
+  },
+  clearEditor: () => {
+    return set(() => ({ emailEdiorProps: new Map() }))
+  },
+  currentEditKey: '',
+  setCurrentEditKey: (key) => {
+    const { emailEdiorProps, setCurrentEditValue } = get()
+    const value = emailEdiorProps.get(key)
+    setCurrentEditValue(value)
+    return set(() => ({ currentEditKey: key }))
+  },
+  currentEditValue: {},
+  setCurrentEditValue: (v) => {
+    return set(() => ({ currentEditValue: v }))
+  },
+
+  // mailboxNestedDirs: new Map(),
+  // setMailboxNestedDirs: (opi, dirs) => {
+  //   const { mailboxNestedDirs } = get()
+  //   const news = mailboxNestedDirs.set(opi, dirs)
+  //   return set(() => ({ mailboxNestedDirs: news }))
+  // },
+
+  currentMailboxDEI: 0,
+  setCurrentMailboxDEI: (id) => {
+    return set(() => ({ currentMailboxDEI: id }))
+  },
+  currentMailboxOPI: 0,
+  setCurrentMailboxOPI: (id) => {
+    return set(() => ({ currentMailboxOPI: id }))
+  },
+
+  mailboxNestedDirsActive: [],
+  setMailboxNestedDirsActive: (dir) => {
+    return set(() => ({ mailboxNestedDirsActive: dir }))
+  },
+  updateCurrentMailboxNestedDirs: (dirs) => {
+    const { mailboxNestedDirsActive } = get()
+    const _Map = new Map(mailboxNestedDirsActive.map((obj) => [obj.key, obj]))
+    dirs.forEach((row) => {
+      _Map.set(row.key, row)
+    })
+    // const _newValue = sortArrayByOrder(Array.from(_Map.values()), 'key', ['search-orders'])
+    const _newValue = Array.from(_Map.values())
+
+    return set(() => ({ mailboxNestedDirsActive: _newValue }))
+  },
+
+  mailboxActiveNode: {},
+  setMailboxActiveNode: (node) => {
+    return set(() => ({ mailboxActiveNode: node }))
+  },
+
+  mailboxList: [],
+  setMailboxList: (list) => {
+    return set(() => ({ mailboxList: list }))
+  },
+  mailboxActiveMAI: 0,
+  setMailboxActiveMAI: (mai) => {
+    return set(() => ({ mailboxActiveMAI: mai }))
+  },
+  mailboxActiveCOLI: 0,
+  setMailboxActiveCOLI: (coli) => {
+    return set(() => ({ mailboxActiveCOLI: coli }))
+  },
+
+  getOPIEmailDir: async (opi_sn = 0, userIdStr = '', refreshNow = false) => {
+    // console.log('🌐requesting opi dir', opi_sn, typeof opi_sn)
+    const { setMailboxNestedDirsActive, updateMailboxCount } = get()
+    const readCache = await readIndexDB(Number(opi_sn), 'dirs', 'mailbox')
+    // console.log(readCache);
+    let isNeedRefresh = refreshNow
+    if (!isEmpty(readCache)) {
+      setMailboxNestedDirsActive(readCache?.tree || [])
+      isNeedRefresh = refreshNow || Date.now() - readCache.treeTimestamp > 1 * 60 * 60 * 1000
+      // isNeedRefresh = true; // test: 0
+    }
+    if (isEmpty(readCache) || isNeedRefresh) {
+      // > {4} 更新
+      const rootTree = await getRootMailboxDirAction({ opi_sn, userIdStr: String(userIdStr || opi_sn) })
+      // console.log('empty', opi_sn, userIdStr, isEmpty(readCache), isNeedRefresh, rootTree);
+      setMailboxNestedDirsActive(rootTree)
+    } else {
+      // 只更新数量
+      updateMailboxCount({ opi_sn })
+    }
+    return false
+  },
+
+  /**
+   * 更新数量
+   * @usage 1. 邮件列表页切换用户时
+   * @usage 2. 收到新邮件推送时
+   *
+   */
+  updateMailboxCount: async ({ opi_sn }) => {
+    // const { setMailboxNestedDirsActive } = get()
+    await getMailboxCountAction({ opi_sn })
+    // const readCache = await readIndexDB(Number(opi_sn), 'dirs', 'mailbox')
+    // if (!isEmpty(readCache)) {
+    //   setMailboxNestedDirsActive(readCache?.tree || [])
+    // }
+  },
+
+  async initMailbox({ opi_sn, dei_sn, userIdStr }) {
+    olog('Initialize Mailbox ---- ')
+    const { currentMailboxOPI, setCurrentMailboxOPI, setCurrentMailboxDEI, getOPIEmailDir, setMailboxNestedDirsActive, } = get()
+    createIndexedDBStore(['dirs', 'maillist', 'listrow', 'mailinfo', 'draft'], 'mailbox')
+    setCurrentMailboxOPI(opi_sn)
+    setCurrentMailboxDEI(dei_sn)
+    getOPIEmailDir(opi_sn, userIdStr, true)
+
+    // --- Setup Internal Event Listener ---
+    internalEventEmitter.on(EMAIL_CHANNEL_NAME, async (event) => {
+      // console.log(`🔔Received internal event. `, event.detail)
+      if (event.detail && event.detail.type === 'dirs') {
+        const readCache = await readIndexDB(event.detail.key, 'dirs', 'mailbox')
+        if (!isEmpty(readCache)) {
+          setMailboxNestedDirsActive(readCache?.tree || [])
+        }
+      }
+    })
+    // --- Setup BroadcastChannel Listener ---
+    const channel = getEmailChangesChannel()
+    channel.addEventListener('message', async (event) => {
+      // console.log(`📣Received channel event. `, event.data)
+      if (event.data.type === 'dirs' && currentMailboxOPI === event.data.key) {
+        const readCache = await readIndexDB(event.data.key, 'dirs', 'mailbox')
+        if (!isEmpty(readCache)) {
+          setMailboxNestedDirsActive(readCache?.tree || [])
+        }
+      }
+    })
+
+  },
+})
+export default emailSlice

src/stores/FormStore.js

@@ -12,11 +12,15 @@ export const useFormStore = create(
     setMsgHistorySelectMatch: (msgHistorySelectMatch) => set({ msgHistorySelectMatch }),
     msgListParams: {},
     setMsgListParams: (msgListParams) => set(state => ({ msgListParams: {...state.msgListParams, ...msgListParams} })),
+
     ImageAlbum: [],
     setImageAlbum: (ImageAlbum) => set({ ImageAlbum }),
     ImagePreviewSrc: '',
     setImagePreviewSrc: (ImagePreviewSrc) => set({ ImagePreviewSrc }),
 
+    EmailList: [],
+    setEmailList: (EmailList) => set({ EmailList }),
+
     // 订单跟踪页面
     orderFollowForm: {
       type: 'today',
@@ -28,6 +32,6 @@ export const useFormStore = create(
     setOrderFollowForm: (orderFollowForm) => set({ orderFollowForm }),
     orderFollowAdvanceChecked: false,
     setOrderFollowAdvanceChecked: (orderFollowAdvanceChecked) => set({ orderFollowAdvanceChecked }),
-  }))
+  }), { name: 'form-store' })
 );
 export default useFormStore;

src/stores/OrderStore.js

@@ -1,216 +1,257 @@
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
-import { fetchJSON, postForm } from '@/utils/request'
-import { API_HOST, EMAIL_HOST } from '@/config'
-import { isNotEmpty, prepareUrl } from '@/utils/commons'
-
-export const useOrderStore = create(devtools((set, get) => ({
+import { fetchJSON, postForm, postJSON } from '@/utils/request'
+import { API_HOST, API_HOST_V3, EMAIL_HOST } from '@/config'
+import { isNotEmpty, prepareUrl, uniqWith } from '@/utils/commons'
 
+const initialState = {
   orderList: [],
   orderDetail: {},
   customerDetail: {},
   lastQuotation: {},
   quotationList: [],
   otherEmailList: [],
-  drawerOpen: false,
-
-  openDrawer: () => {
-    set(() => ({
-      drawerOpen: true
-    }))
-  },
-
-  closeDrawer: () => {
-    set(() => ({
-      drawerOpen: false
-    }))
-  },
-
-  fetchOrderList: async (formValues, loginUser) => {
-    let fetchOrderUrl = `${API_HOST}/getwlorder?opisn=${loginUser.userIdStr}&otype=${formValues.type}`
-    const params = {};
-
-    if (formValues.type === 'advance') {
-      fetchOrderUrl = `${API_HOST}/getdvancedwlorder?opisn=${loginUser.userIdStr}`;
-      const { type, ...formParams } = formValues;
-      Object.assign(params, formParams)
-    }
-
-    return fetchJSON(fetchOrderUrl, params)
-      .then(json => {
-        if (json.errcode === 0) {
-          set(() => ({
-            orderList: json.result.map((order) => { return { ...order, key: order.COLI_ID } }),
-          }))
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
-
-  },
-
-  fetchOrderDetail: (colisn) => {
-    return fetchJSON(`${API_HOST}/getorderinfo`, { colisn })
-      .then(json => {
-        if (json.errcode === 0 && json.result.length > 0) {
-          const orderResult = json.result[0]
-          set(() => ({
-            orderDetail: {...orderResult, coli_sn: colisn },
-            customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
-            lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
-            quotationList: orderResult.quotes,
-          }))
-          return {
-            orderDetail: {...orderResult, coli_sn: colisn },
-            customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
-            lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
-            quotationList: orderResult.quotes,
-          }
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
-
-  },
-
-  appendOrderComment: async (opi_sn, coli_sn, comment) => {
-    const { fetchOrderDetail } = get()
-    const formData = new FormData()
-    formData.append('opi_sn', opi_sn)
-    formData.append('coli_sn', coli_sn)
-    formData.append('remark', comment)
-
-    return postForm(`${API_HOST}/remark_order`, formData)
-      .then(json => {
-        if (json.errcode === 0) {
-          return fetchOrderDetail(coli_sn)
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
-  },
-
-  generatePayment: async (formValues) => {
-    const formData = new FormData()
-    formData.append('descriptions', formValues.description)
-    formData.append('currency', formValues.currency)
-    formData.append('lgc', formValues.langauge)
-    formData.append('amount', formValues.amount)
-    formData.append('coli_id', formValues.orderNumber)
-    formData.append('wlemail', formValues.notifyEmail)
-    formData.append('ordertype', formValues.orderType)
-    formData.append('opisn', formValues.userId)
-    formData.append('paytype', 'SYT')
-    formData.append('wxzh', 'cht')
-    formData.append('fq', 0)
-    formData.append('onlyusa', 0)
-    formData.append('useyhm', 0)
-
-    return postForm(`${API_HOST}/generate_payment_links`, formData)
-      .then(json => {
-        if (json.errcode === 0) {
-          return json.result
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
-  },
-
-  fetchHistoryOrder: (userId, email, whatsappid='') => {
-    return fetchJSON(`${API_HOST}/query_guest_order`, { opisn: userId, whatsappid, email: email })
-      .then(json => {
-        if (json.errcode === 0) {
-          return json.result
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
+}
+
+export const useOrderStore = create(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+      drawerOpen: false,
+
+      resetOrderStore: () => set(initialState),
+
+      openDrawer: () => {
+        set(() => ({
+          drawerOpen: true,
+        }))
+      },
 
-  },
+      closeDrawer: () => {
+        set(() => ({
+          drawerOpen: false,
+        }))
+      },
 
-  importEmailMessage: ({ orderId, orderNumber }) => {
-    return fetchJSON(`${API_HOST}/generate_email_msg`, { coli_sn: orderId, coli_id: orderNumber })
-      .then(json => {
-        if (json.errcode === 0) {
-          return json
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
+      fetchOrderList: async (formValues, loginUser) => {
+        let fetchOrderUrl = `${API_HOST}/getwlorder?opisn=${loginUser.userIdStr}&otype=${formValues.type}`
+        const params = {}
+
+        if (formValues.type === 'advance') {
+          fetchOrderUrl = `${API_HOST}/getdvancedwlorder?opisn=${loginUser.userIdStr}`
+          const { type, ...formParams } = formValues
+          Object.assign(params, formParams)
         }
-      })
-  },
-
-  batchImportEmailMessage: () => {
-    const { orderList } = get()
-
-    const orderPromiseList = orderList.map(order => {
-      return new Promise((resolve, reject) => {
-        fetchJSON(`${API_HOST}/generate_email_msg`, { coli_sn: order.COLI_SN, coli_id: order.COLI_ID })
-          .then(json => {
-            if (json.errcode === 0) {
-              resolve(json)
-            } else {
-              reject(json?.errmsg + ': ' + json.errcode)
+
+        return fetchJSON(fetchOrderUrl, params).then((json) => {
+          if (json.errcode === 0) {
+            const _result = json.result.map((order) => {
+              return { ...order, key: order.COLI_ID }
+            })
+            const _result_unique = uniqWith(_result, (a, b) => a.COLI_SN === b.COLI_SN)
+            set(() => ({
+              orderList: _result_unique,
+            }))
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      fetchOrderDetail: (colisn) => {
+        return fetchJSON(`${API_HOST}/getorderinfo`, { colisn }).then((json) => {
+          if (json.errcode === 0 && json.result.length > 0) {
+            const orderResult = json.result[0]
+            set(() => ({
+              orderDetail: { ...orderResult, coli_sn: colisn },
+              customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
+              // lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
+              // quotationList: orderResult.quotes,
+            }))
+            return {
+              orderDetail: { ...orderResult, coli_sn: colisn },
+              customerDetail: orderResult.contact.length > 0 ? orderResult.contact[0] : {},
+              // lastQuotation: orderResult.quotes.length > 0 ? orderResult.quotes[0] : {},
+              // quotationList: orderResult.quotes,
             }
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      appendOrderComment: async (opi_sn, coli_sn, comment) => {
+        const { fetchOrderDetail } = get()
+        const formData = new FormData()
+        formData.append('opi_sn', opi_sn)
+        formData.append('coli_sn', coli_sn)
+        formData.append('remark', comment)
+
+        return postForm(`${API_HOST}/remark_order`, formData).then((json) => {
+          if (json.errcode === 0) {
+            return fetchOrderDetail(coli_sn)
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      generatePayment: async (formValues) => {
+        const formData = new FormData()
+        formData.append('descriptions', formValues.description)
+        formData.append('currency', formValues.currency)
+        formData.append('lgc', formValues.langauge)
+        formData.append('amount', formValues.amount)
+        formData.append('coli_id', formValues.orderNumber)
+        formData.append('ordertype', formValues.orderType)
+        formData.append('opisn', formValues.userId)
+        formData.append('paytype', 'SYT')
+        formData.append('wxzh', 'cht')
+        formData.append('fq', 0)
+        formData.append('onlyusa', 0)
+        formData.append('useyhm', 0)
+
+        return postForm(`${API_HOST}/generate_payment_links`, formData).then((json) => {
+          if (json.errcode === 0) {
+            return json.result
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      fetchHistoryOrder: (userId, email, whatsappid = '') => {
+        return fetchJSON(`${API_HOST}/query_guest_order`, { opisn: userId, whatsappid, email: email }).then((json) => {
+          if (json.errcode === 0) {
+            return json.result
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      importEmailMessage: ({ orderId, orderNumber }) => {
+        return fetchJSON(`${API_HOST}/generate_email_msg`, { coli_sn: orderId, coli_id: orderNumber }).then((json) => {
+          if (json.errcode === 0) {
+            return json
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      batchImportEmailMessage: () => {
+        const { orderList } = get()
+
+        const orderPromiseList = orderList.map((order) => {
+          return new Promise((resolve, reject) => {
+            fetchJSON(`${API_HOST}/generate_email_msg`, { coli_sn: order.COLI_SN, coli_id: order.COLI_ID }).then((json) => {
+              if (json.errcode === 0) {
+                resolve(json)
+              } else {
+                reject(json?.errmsg + ': ' + json.errcode)
+              }
+            })
           })
-      })
-    })
-
-    Promise.all(orderPromiseList).then((values) => {
-      console.log(values);
-    })
-  },
-
-  fetchOtherEmail: (coli_sn) => {
-    return fetchJSON(`${EMAIL_HOST}/email_supplier`, { coli_sn })
-      .then(json => {
-        if (json.errcode === 0) {
-          set(() => ({
-            otherEmailList: json.result.MailInfo ?? [],
-          }))
-        } else {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
-        }
-      })
-  },
+        })
 
-  setOrderPropValue: async (colisn, propName, value) => {
+        Promise.all(orderPromiseList).then((values) => {
+          console.log(values)
+        })
+      },
 
-    if (propName === 'orderlabel') {
-      set((state) => ({
-        orderDetail: {
-          ...state.orderDetail,
-          tags: value
-        }
-      }))
-    }
-
-    if (propName === 'orderstatus') {
-      set((state) => ({
-        orderDetail: {
-          ...state.orderDetail,
-          states: value
+      fetchOtherEmail: (coli_sn) => {
+        return fetchJSON(`${EMAIL_HOST}/email_supplier`, { coli_sn }).then((json) => {
+          if (json.errcode === 0) {
+            set(() => ({
+              otherEmailList: json.result.MailInfo ?? [],
+            }))
+          } else {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+
+      updateWhatsapp: (coli_sn, number) => {
+        return postJSON(`${API_HOST_V3}/order_update`, {
+          coli_sn: coli_sn,
+          set: {
+            concat_whatsapp: number,
+          },
+        }).then((json) => {
+          if (json.errcode > 0) {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          } else {
+            set((state) => ({
+              customerDetail: {
+                ...state.customerDetail,
+                whatsapp_phone_number: number,
+              },
+            }))
+          }
+        })
+      },
+
+      updateExtraInfo: (coli_sn, extra) => {
+        const { orderDetail } = get()
+
+        return postJSON(`${API_HOST_V3}/order_update`, {
+          coli_sn: coli_sn,
+          set: {
+            extra_info: extra,
+          },
+        }).then((json) => {
+          if (json.errcode > 0) {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          } else {
+            set((state) => ({
+              orderDetail: {
+                ...state.orderDetail,
+                COLI_Introduction: extra,
+              },
+            }))
+          }
+        })
+      },
+
+      setOrderPropValue: async (colisn, propName, value) => {
+        if (propName === 'orderlabel') {
+          set((state) => ({
+            orderDetail: {
+              ...state.orderDetail,
+              tags: value,
+            },
+          }))
         }
-      }))
-    }
 
-    return fetchJSON(`${API_HOST}/setorderstatus`, { colisn, stype: propName, svalue: value })
-      .then(json => {
-        if (json.errcode > 0) {
-          throw new Error(json?.errmsg + ': ' + json.errcode)
+        if (propName === 'orderstatus') {
+          set((state) => ({
+            orderDetail: {
+              ...state.orderDetail,
+              states: value,
+            },
+          }))
         }
-      })
-  },
 
-}), { name: 'orderStore' }))
+        return fetchJSON(`${API_HOST}/setorderstatus`, { colisn, stype: propName, svalue: value }).then((json) => {
+          if (json.errcode > 0) {
+            throw new Error(json?.errmsg + ': ' + json.errcode)
+          }
+        })
+      },
+    }),
+    { name: 'orderStore' },
+  ),
+)
 
 export const OrderLabelDefaultOptions = [
   { value: 240003, label: '重点', emoji: '❣️' },
   { value: 240002, label: '次重点', emoji: '❗' },
-  { value: 240001, label: '一般', emoji: '' }
+  { value: 240001, label: '一般', emoji: '' },
 ]
 export const OrderLabelDefaultOptionsMapped = OrderLabelDefaultOptions.reduce((acc, cur) => {
   return { ...acc, [String(cur.value)]: cur }
-}, {}) ;
+}, {})
 
 export const OrderStatusDefaultOptions = [
   { value: 1, label: '新订单', emoji: '' },
@@ -219,15 +260,40 @@ export const OrderStatusDefaultOptions = [
   { value: 4, label: '等待付订金', emoji: '🛒' },
   { value: 5, label: '成行', emoji: '💰' },
   { value: 6, label: '丢失', emoji: '🎈' },
-  { value: 7, label: '取消', emoji: '🚫' },
-  { value: 8, label: '未报价', emoji: '' }
+  // { value: 7, label: '取消', emoji: '🚫' }, // 取消要顾问确认后才能执行操作，暂时到 HT 操作
+  { value: 8, label: '未报价', emoji: '' },
 ]
 export const OrderStatusDefaultOptionsMapped = OrderStatusDefaultOptions.reduce((acc, cur) => {
   return { ...acc, [String(cur.value)]: cur }
 }, {})
 
+/**
+ * @useage 订单跟踪:高级搜索
+ */
 export const RemindStateDefaultOptions = [
   { value: '1', label: '一催' },
   { value: '2', label: '二催' },
-  { value: '3', label: '三催' }
+  { value: '3', label: '三催' },
+]
+
+/**
+ * @useage 订单信息: 标记状态
+ */
+export const remindStatusOptions = [
+  { value: 1, label: '已发一催' },
+  { value: 2, label: '已发二催' },
+  { value: 3, label: '已发三催' },
+  { 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 }
+ */
+export const fetchSetRemindStateAction = async (params) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/SetRemindState`, params)
+  return errcode === 0 ? result : {}
+}

src/utils/EventEmitterService.js

@@ -0,0 +1,20 @@
+class EventEmitterService extends EventTarget {
+  constructor() {
+    super();
+    // console.log('Internal EventEmitterService created.'); // For debugging
+  }
+
+  emit(eventName, detail) {
+    this.dispatchEvent(new CustomEvent(eventName, { detail }));
+  }
+
+  on(eventName, handler) {
+    this.addEventListener(eventName, handler);
+  }
+
+  off(eventName, handler) {
+    this.removeEventListener(eventName, handler);
+  }
+}
+
+export const internalEventEmitter = new EventEmitterService();

src/utils/commons.js

@@ -119,6 +119,26 @@ export const sortKeys = (obj) =>
     .sort()
     .reduce((a, k2) => ({ ...a, [k2]: obj[k2] }), {});
 
+export function sortObjectsByKeysMap(objects, keyOrder) {
+  if (!objects) return {} // Handle null/undefined input
+  if (!keyOrder || keyOrder.length === 0) return objects
+
+  const objectMap = new Map(Object.entries(objects))
+  const sortedMap = new Map()
+
+  for (const key of keyOrder) {
+    if (objectMap.has(key)) {
+      sortedMap.set(key, objectMap.get(key))
+      objectMap.delete(key) // Optimization: Remove from original map after adding
+    }
+  }
+  // Add remaining keys
+  for (const [key, value] of objectMap) {
+    sortedMap.set(key, value)
+  }
+  return Object.fromEntries(sortedMap)
+}
+
 /**
  * 数组排序, 给定排序数组
  * @param {array} items 需要排序的数组
@@ -206,6 +226,15 @@ export function omit(object, keysToOmit) {
   return Object.fromEntries(Object.entries(object).filter(([key]) => !keysToOmit.includes(key)));
 }
 
+/**
+ * 去除无效的值: undefined, null, '', []
+ * * 只删除 null undefined: 用 flush 方法;
+ */
+export const omitEmpty = _object => {
+  Object.keys(_object).forEach(key => (_object[key] == null || _object[key] === '' || _object[key].length === 0) && delete _object[key]);
+  return _object;
+};
+
 /**
  * 深拷贝
  */
@@ -572,58 +601,77 @@ export const TagColorStyle = (tag, outerStyle = false) => {
   return { color: `${color}`, ...outerStyleObj };
 };
 
+// 数组去掉重复
+export function unique(arr) {
+	const x = new Set(arr);
+	return [...x];
+}
+export const uniqWith = (arr, fn) => arr.filter((element, index) => arr.findIndex((step) => fn(element, step)) === index);
+
 /**
- *
+ * Creates a new tree node object.
+ * @param {string} key - The unique identifier for the node.
+ * @param {string} name - The display name of the node.
+ * @param {string|null} parent - The key of the parent node, or null if it's a root.
+ * @returns {object} A plain JavaScript object representing the tree node.
  */
-export const logWebsocket = (message, direction) => {
-  var open = indexedDB.open('LogWebsocketData', 1)
-  open.onupgradeneeded = function () {
-    var db = open.result
-    var store = db.createObjectStore('LogStore', { keyPath: 'id', autoIncrement: true })
-  }
-  open.onsuccess = function () {
-    var db = open.result
-    var tx = db.transaction('LogStore', 'readwrite')
-    var store = tx.objectStore('LogStore')
-    store.put({ direction, message, date: new Date().toLocaleString() })
-    tx.oncomplete = function () {
-      db.close()
-    }
+function createTreeNode(key, name, parent = null, keyMap={}, _raw={}) {
+    return {
+        key: key,
+        title: name,
+        parent: parent,
+        icon: _raw?.icon,
+        iconIndex: _raw?.[keyMap.iconIndex],
+        _raw: _raw,
+        children: [],
+        parentTitle: '',
+        parentIconIndex: '',
+    };
+}
+/**
+ * Builds a tree structure from a flat list of nodes.
+ * @returns {Array<object>} An array of root tree nodes.
+ */
+export const buildTree = (list, keyMap={ rootKeys: [], ignoreKeys: [] }) => {
+  if (!list || list.length === 0) {
+    return []
   }
-};
-export const readWebsocketLog = () => {
-  return new Promise((resolve, reject) => {
-    let openRequest = indexedDB.open('LogWebsocketData')
-    openRequest.onerror = function (e) {
-      reject('Error opening database.')
-    }
-    openRequest.onsuccess = function (e) {
-      let db = e.target.result
-      let transaction = db.transaction('LogStore')
-      let store = transaction.objectStore('LogStore')
-      let request = store.getAll()
-      request.onerror = function (e) {
-        reject('Error getting all records.')
+
+  const nodeMap = new Map()
+  const treeRoots = []
+
+  list.forEach((item) => {
+    const node = createTreeNode(item[keyMap.key], item[keyMap.name], item[keyMap.parent], keyMap, item)
+    nodeMap.set(item[keyMap.key], node)
+  })
+
+  list.forEach((item) => {
+    const node = nodeMap.get(item[keyMap.key])
+    if (keyMap.rootKeys.includes(item[keyMap.parent]) || item[keyMap.parent] === null || item[keyMap.parent] === undefined) {
+      // This is a root node
+      treeRoots.push(node)
+    } else {
+      const parentNode = nodeMap.get(item[keyMap.parent])
+      if (keyMap.ignoreKeys.includes(item[keyMap.parent])) {
+        const grandParentNode = nodeMap.get(parentNode.parent);
+        node.rawParent = node.parent;
+        node.parent = parentNode.parent;
+        node.parentTitle = parentNode.title;
+        node.parentIconIndex = parentNode.iconIndex;
+        grandParentNode.children.push(node)
+      } else if (keyMap.ignoreKeys.includes(item[keyMap.key])) {
+        //
       }
-      request.onsuccess = function (e) {
-        let data = e.target.result
-        sessionStorage.setItem('websocketLogData', JSON.stringify(data))
-        console.log(JSON.stringify(data))
-        resolve(data)
+      else if (parentNode) {
+        node.parentTitle = parentNode.title;
+        node.parentIconIndex = parentNode.iconIndex;
+        parentNode.children.push(node)
+      } else {
+        console.warn(`Parent with key '${item[keyMap.parent]}' not found for node '${item[keyMap.key]}'. This node will be treated as a root.`)
+        treeRoots.push(node)
       }
     }
   })
-};
-export const clearWebsocketLog = () => {
-  let openRequest = indexedDB.open('LogWebsocketData')
-  openRequest.onerror = function (e) {}
-  openRequest.onsuccess = function (e) {
-    let db = e.target.result
-    let transaction = db.transaction('LogStore', 'readwrite')
-    let store = transaction.objectStore('LogStore')
-    // Clear the store
-    let clearRequest = store.clear()
-    clearRequest.onerror = function (e) {}
-    clearRequest.onsuccess = function (e) {}
-  }
+
+  return treeRoots
 }

src/utils/indexedDB.js

@@ -0,0 +1,586 @@
+import { isEmpty } from './commons';
+/**
+ *
+ */
+
+/**
+ * 数据库版本
+ * ! 每次涉及indexedDB的更新都要往上+1
+ * @type {number}
+ */
+const INDEXED_DB_VERSION = 5;
+export const logWebsocket = (message, direction) => {
+  var open = indexedDB.open('LogWebsocketData', INDEXED_DB_VERSION)
+  open.onupgradeneeded = function () {
+    var db = open.result
+    // 数据库是否存在
+    if (!db.objectStoreNames.contains('LogStore')) {
+      var store = db.createObjectStore('LogStore', { keyPath: 'id', autoIncrement: true })
+      store.createIndex('timestamp', 'timestamp', { unique: false })
+    } else {
+      const logStore = open.transaction.objectStore('LogStore')
+      if (!logStore.indexNames.contains('timestamp')) {
+        logStore.createIndex('timestamp', 'timestamp', { unique: false })
+      }
+    }
+  }
+  open.onsuccess = function () {
+    var db = open.result
+    var tx = db.transaction('LogStore', 'readwrite')
+    var store = tx.objectStore('LogStore')
+    store.put({ direction, message, _date: new Date().toLocaleString(), timestamp: Date.now() })
+    tx.oncomplete = function () {
+      db.close()
+    }
+  }
+};
+export const readWebsocketLog = (limit = 20) => {
+  return new Promise((resolve, reject) => {
+    let openRequest = indexedDB.open('LogWebsocketData')
+    openRequest.onupgradeneeded = function () {
+      var db = openRequest.result
+      // 数据库是否存在
+      if (!db.objectStoreNames.contains('LogStore')) {
+        var store = db.createObjectStore('LogStore', { keyPath: 'id', autoIncrement: true })
+        store.createIndex('timestamp', 'timestamp', { unique: false })
+      } else {
+        const logStore = openRequest.transaction.objectStore('LogStore')
+        if (!logStore.indexNames.contains('timestamp')) {
+          logStore.createIndex('timestamp', 'timestamp', { unique: false })
+        }
+      }
+    }
+    openRequest.onerror = function (e) {
+      reject('Error opening database.')
+    }
+    openRequest.onsuccess = function (e) {
+      let db = e.target.result
+      // 数据库是否存在
+      if (!db.objectStoreNames.contains('LogStore')) {
+        resolve('Database does not exist.')
+        return
+      }
+      let transaction = db.transaction('LogStore', 'readonly')
+      let store = transaction.objectStore('LogStore')
+      const request = store.openCursor(null, 'prev'); // 从后往前
+      const results = [];
+      let count = 0;
+      request.onerror = function (e) {
+        reject('Error getting records.')
+      }
+      request.onsuccess = function (e) {
+        const cursor = e.target.result
+        if (cursor) {
+          if (count < limit) {
+            results.unshift(cursor.value)
+            count++
+            cursor.continue()
+          } else {
+            console.log(JSON.stringify(results))
+            resolve(results)
+          }
+        } else {
+          console.log(JSON.stringify(results))
+          resolve(results)
+        }
+      }
+    }
+  })
+};
+/**
+ * @deprecated
+ */
+export const clearWebsocketLog = () => {
+  let openRequest = indexedDB.open('LogWebsocketData')
+  openRequest.onerror = function (e) {}
+  openRequest.onsuccess = function (e) {
+    let db = e.target.result
+    if (!db.objectStoreNames.contains('LogStore')) {
+      return
+    }
+    let transaction = db.transaction('LogStore', 'readwrite')
+    let store = transaction.objectStore('LogStore')
+    // Clear the store
+    let clearRequest = store.clear()
+    clearRequest.onerror = function (e) {}
+    clearRequest.onsuccess = function (e) {}
+  }
+}
+
+export const createIndexedDBStore = (tables, database) => {
+  var open = indexedDB.open(database, INDEXED_DB_VERSION)
+  open.onupgradeneeded = function () {
+    // console.log('createIndexedDBStore onupgradeneeded', database, )
+    var db = open.result
+    // 数据库是否存在
+    for (const table of tables) {
+      if (!db.objectStoreNames.contains(table)) {
+        var store = db.createObjectStore(table, { keyPath: 'key' })
+        store.createIndex('timestamp', 'timestamp', { unique: false })
+      } else {
+        const objectStore = open.transaction.objectStore(table)
+        if (!objectStore.indexNames.contains('timestamp')) {
+          objectStore.createIndex('timestamp', 'timestamp', { unique: false })
+        }
+      }
+    }
+  }
+};
+
+export const writeIndexDB = (rows, table, database) => {
+  var open = indexedDB.open(database, INDEXED_DB_VERSION)
+  open.onupgradeneeded = function () {
+    // console.log('readIndexDB onupgradeneeded', table, )
+    var db = open.result
+    // 数据库是否存在
+    if (!db.objectStoreNames.contains(table)) {
+      var store = db.createObjectStore(table, { keyPath: 'key' })
+      store.createIndex('timestamp', 'timestamp', { unique: false })
+    } else {
+      const objectStore = open.transaction.objectStore(table)
+      if (!objectStore.indexNames.contains('timestamp')) {
+        objectStore.createIndex('timestamp', 'timestamp', { unique: false })
+      }
+    }
+  }
+  open.onsuccess = function () {
+    var db = open.result
+    // 数据库是否存在
+    if (!db.objectStoreNames.contains(table)) {
+      console.warn(`writeIndexDB > Database does not exist.`, table);
+      return
+    }
+    var tx = db.transaction(table, 'readwrite')
+    var store = tx.objectStore(table)
+    rows.forEach(row => {
+      store.put({ ...row, _date: new Date().toLocaleString(), timestamp: Date.now() })
+    });
+    tx.oncomplete = function () {
+      db.close()
+    }
+  }
+};
+
+/**
+ * Reads data from an IndexedDB object store.
+ * It can read a single record by key, multiple records by an array of keys, or all records.
+ *
+ * @param {string|string[]|null} keys - The key(s) to read.
+ * - If `string`: Reads a single record and returns the data object directly.
+ * - If `string[]`: Reads multiple records and returns a Map of `rowkey` to `data` objects.
+ * - If `null` or `undefined` or `empty string/array`: Reads all records and returns a Map of `rowkey` to `data` objects.
+ * @param {string} table - The name of the IndexedDB object store (table).
+ * @param {string} database - The name of the IndexedDB database.
+ * @returns {Promise<any|Map<string, any>>} A promise that resolves with the data.
+ * - Single key: Resolves with the data object or `undefined` if not found.
+ * - Array of keys or All records: Resolves with a `Map` where keys are rowkeys and values are data objects.
+ * The Map will be empty if no records are found.
+ * - Rejects if there's an error opening the database or during the transaction.
+ */
+export const readIndexDB = (keys=null, table, database) => {
+  return new Promise((resolve, reject) => {
+    let openRequest = indexedDB.open(database)
+    openRequest.onupgradeneeded = function () {
+      // console.log('readIndexDB onupgradeneeded', table, )
+      var db = openRequest.result
+      // 数据库是否存在
+      if (!db.objectStoreNames.contains(table)) {
+        var store = db.createObjectStore(table, { keyPath: 'key' })
+        store.createIndex('timestamp', 'timestamp', { unique: false })
+      } else {
+        const logStore = openRequest.transaction.objectStore(table)
+        if (!logStore.indexNames.contains('timestamp')) {
+          logStore.createIndex('timestamp', 'timestamp', { unique: false })
+        }
+      }
+    }
+    openRequest.onerror = function (e) {
+      console.error(`Error opening database.`, table, e)
+      reject('Error opening database.')
+    }
+    openRequest.onsuccess = function (e) {
+      let db = e.target.result
+      // 数据库是否存在
+      if (!db.objectStoreNames.contains(table)) {
+        console.warn(`readIndexDB > Database does not exist.`, table);
+        resolve();
+        return
+      }
+      let transaction = db.transaction(table, 'readonly')
+      let store = transaction.objectStore(table)
+      // read by key
+      // Handle array of keys
+      if (Array.isArray(keys) && keys.length > 0) {
+        const promises = keys.map(key => {
+          return new Promise((innerResolve) => {
+            const getRequest = store.get(key);
+            getRequest.onsuccess = (event) => {
+              const result = event.target.result;
+              if (result) {
+                // console.log(`💾Found record with key ${key}:`, result);
+                innerResolve([key, result]); // Resolve with [key, data] tuple
+              } else {
+                // console.log(`No record found with key ${key}.`);
+                innerResolve(void 0); // Resolve with undefined for non-existent keys
+              }
+            };
+            getRequest.onerror = (event) => {
+              console.error(`Error getting record with key ${key}:`, event.target.error);
+              innerResolve(undefined); // Resolve with undefined on error, or innerReject if you want to fail fast
+            };
+          });
+        });
+
+        Promise.all(promises)
+          .then(results => {
+            const resultMap = new Map();
+            results.forEach(item => {
+              if (item !== undefined) {
+                resultMap.set(item[0], item[1]); // item[0] is key, item[1] is data
+              }
+            });
+            resolve(resultMap);
+          })
+          .catch(error => {
+            console.error('Error during batch read:', error);
+            reject(error); // Reject the main promise if Promise.all encounters an error
+          });
+      } else if (!isEmpty(keys)) { // Handle single key
+        const getRequest = store.get(keys);
+        getRequest.onsuccess = (event) => {
+          const result = event.target.result;
+          if (result) {
+            // console.log(`💾Found record with key ${keys}:`, result);
+            resolve(result);
+          } else {
+            // console.log(`No record found with key ${keys}.`);
+            resolve();
+          }
+        };
+        getRequest.onerror = (event) => {
+          console.error(`Error getting record with key ${keys}:`, event.target.error);
+          reject(event.target.error);
+        };
+      } else { // Handle read all
+        const getAllRequest = store.getAll();
+        getAllRequest.onsuccess = (event) => {
+          const allData = event.target.result;
+          const resultMap = new Map();
+          if (allData && allData.length > 0) {
+            allData.forEach(item => {
+              resultMap.set(item.key, item);
+            });
+            // console.log(`💾Found all records:`, resultMap);
+            resolve(resultMap);
+          } else {
+            // console.log(`No records found.`);
+            resolve(resultMap); // Resolve with an empty Map if no records
+          }
+        };
+        getAllRequest.onerror = (event) => {
+          console.error(`Error getting all records:`, event.target.error);
+          reject(event.target.error);
+        };
+      }
+
+    }
+  })
+};
+export const deleteIndexDBbyKey = (keys=null, table, database) => {
+  return new Promise((resolve, reject) => {
+    var open = indexedDB.open(database, INDEXED_DB_VERSION)
+    open.onupgradeneeded = function () {
+      // var db = open.result
+      // // 数据库是否存在
+      // if (!db.objectStoreNames.contains(table)) {
+      //   var store = db.createObjectStore(table, { keyPath: 'id', autoIncrement: true })
+      // }
+    }
+    open.onsuccess = function (e) {
+      let db = e.target.result
+      // 数据库是否存在
+      if (!db.objectStoreNames.contains(table)) {
+        console.warn('deleteIndexDBbyKey > Database does not exist.', table)
+        resolve();
+        return
+      }
+      var tx = db.transaction(table, 'readwrite')
+      var store = tx.objectStore(table)
+      if (Array.isArray(keys) && keys.length > 0) {
+        const promises = keys.map((key) => {
+          return new Promise((innerResolve) => {
+            const delRequest = store.delete(key)
+            delRequest.onsuccess = (event) => {
+              const result = event.target.result
+              if (result) {
+                innerResolve()
+              } else {
+                innerResolve(void 0) // Resolve with undefined for non-existent keys
+              }
+            }
+            delRequest.onerror = (event) => {
+              innerResolve(undefined)
+            }
+          })
+        })
+        Promise.allSettled(promises)
+          .then((results) => {
+            resolve(results)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      } else if (!isEmpty(keys)) { // Handle single key
+        const delRequest = store.delete(keys);
+        delRequest.onsuccess = (event) => {
+          const result = event.target.result;
+          if (result) {
+            resolve(result);
+          } else {
+            resolve();
+          }
+        };
+        delRequest.onerror = (event) => {
+          reject(event.target.error);
+        };
+      } else {
+        // 删除所有
+        let clearRequest = store.clear()
+        clearRequest.onsuccess = function (e) {
+          resolve(e.target.result)
+        }
+        clearRequest.onerror = function (e) {
+          reject(e.target.error)
+        }
+      }
+      tx.oncomplete = function () {
+        db.close()
+      }
+    }
+  })
+};
+
+function cleanOldData(database, storeNames=[], dateKey = 'timestamp', keySet = { keyPath: 'key' }) {
+  return function (daysToKeep = 7) {
+    return new Promise((resolve, reject) => {
+      let deletedCount = 0
+      const recordsToDelete = new Set()
+
+      let openRequest = indexedDB.open(database, INDEXED_DB_VERSION)
+      openRequest.onupgradeneeded = function () {
+        // console.log('----cleanOldData onupgradeneeded----')
+        var db = openRequest.result
+        storeNames.forEach(storeName => {
+          // 数据库是否存在
+          if (!db.objectStoreNames.contains(storeName)) {
+            var store = db.createObjectStore(storeName, keySet)
+            // var store = db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true })
+            store.createIndex('timestamp', 'timestamp', { unique: false })
+          } else {
+            const logStore = openRequest.transaction.objectStore(storeName)
+            if (!logStore.indexNames.contains('timestamp')) {
+              logStore.createIndex('timestamp', 'timestamp', { unique: false })
+            }
+          }
+        })
+      }
+      openRequest.onsuccess = function (e) {
+        let db = e.target.result
+        // 数据库是否存在
+        // if (!db.objectStoreNames.contains(storeName)) {
+        //   resolve('Database does not exist.')
+        //   return
+        // }
+
+        // Calculate the cutoff timestamp for "X days ago"
+        const cutoffTimestamp = Date.now() - daysToKeep * 24 * 60 * 60 * 1000
+
+        const objectStoreNames = isEmpty(storeNames) ? db.objectStoreNames : storeNames
+
+        if (!isEmpty(objectStoreNames)) {
+          const objectStores = Array.from(objectStoreNames).map((storeName) => db.transaction([storeName], 'readwrite').objectStore(storeName))
+
+          for (const objectStore of objectStores) {
+            // Identify old data using the date index and primary key ID
+
+            if (!objectStore.indexNames.contains(`${dateKey}`)) {
+              // Clear the store
+              let clearRequest = objectStore.clear()
+              console.log(`Cleanup complete. clear ${objectStore.name} records.`)
+              resolve()
+              clearRequest.onerror = function (e) {}
+              clearRequest.onsuccess = function (e) {}
+              return
+            }
+            // Get records older than 'daysToKeep' using the index
+            const dateIndex = objectStore.index(`${dateKey}`)
+            const dateRange = IDBKeyRange.upperBound(cutoffTimestamp, false) // Get keys < cutoffTimestamp (strictly older)
+
+            const dateCursorRequest = dateIndex.openCursor(dateRange)
+
+            dateCursorRequest.onsuccess = (event) => {
+              const cursor = event.target.result
+              if (cursor) {
+                recordsToDelete.add(cursor.primaryKey) // Add the primary key of the record to the set
+                cursor.continue()
+              } else {
+                const storeName = objectStore.name;
+                // Delete identified data in a new transaction
+                const deleteTransaction = db.transaction([storeName], 'readwrite')
+                const deleteObjectStore = deleteTransaction.objectStore(storeName)
+
+                deleteTransaction.oncomplete = () => {
+                  console.log(`Cleanup complete. Deleted ${deletedCount} records in ${database}.${storeName}.`)
+                  resolve(deletedCount)
+                }
+
+                deleteTransaction.onerror = (event) => {
+                  console.error('Deletion transaction error:', event.target.error)
+                  reject(event.target.error)
+                }
+
+                // Convert Set to Array for forEach
+                Array.from(recordsToDelete).forEach((key) => {
+                  const deleteRequest = deleteObjectStore.delete(key)
+                  deleteRequest.onsuccess = () => {
+                    deletedCount++
+                  }
+                  deleteRequest.onerror = (event) => {
+                    console.warn(`Failed to delete record with key ${key}:`, event.target.error)
+                  }
+                })
+              }
+            }
+
+            dateCursorRequest.onerror = (event) => {
+              console.error('Error opening date cursor for deletion:', event.target.error)
+              reject(event.target.error)
+            }
+          }
+        } else {
+          console.warn('cleanOldData: No data to delete.', database);
+        }
+      }
+      openRequest.onerror = function (e) {
+        reject('Error opening database:'+database, e)
+      }
+    })
+  }
+}
+
+export const clean7DaysWebsocketLog = cleanOldData('LogWebsocketData', ['LogStore'], 'timestamp', { keyPath: 'id', autoIncrement: true });
+export const clean7DaysMailboxLog = cleanOldData('mailbox', ['dirs', 'maillist', 'listrow', 'mailinfo', 'draft']);
+
+
+/**
+ * 缓存清除策略: 清理7天前的
+ * - 每次进入
+ * - 每天半夜
+ */
+
+export const LAST_SCHEDULED_CLEANUP_DAY_KEY = 'lastScheduledCleanupDay'; // For tracking scheduling
+export const LAST_EXECUTED_CLEANUP_DAY_KEY = 'lastExecutedCleanupDay'; // For tracking actual execution
+let cleanupTimeoutId = null; // To store the ID of the setTimeout
+
+/**
+ * Determines if the cleanup needs to be scheduled for today.
+ * This is based on when it was *last scheduled* to prevent re-scheduling
+ * if the app was merely refreshed within the same day.
+ * @returns {boolean} True if a new schedule for today is needed.
+ */
+function shouldScheduleForToday() {
+    const lastScheduledDay = localStorage.getItem(LAST_SCHEDULED_CLEANUP_DAY_KEY);
+    const today = new Date().toDateString(); // e.g., "Fri Jun 13 2025"
+
+    return !lastScheduledDay || lastScheduledDay !== today;
+}
+
+/**
+ * Determines if the cleanup was already *executed* today.
+ * This is to prevent running the cleanup task multiple times in one day
+ * if the app stays open past midnight or if it is refreshed.
+ * @returns {boolean} True if the cleanup has not executed today.
+ */
+function hasCleanupExecutedToday() {
+    const lastExecutedDay = localStorage.getItem(LAST_EXECUTED_CLEANUP_DAY_KEY);
+    const today = new Date().toDateString();
+    return lastExecutedDay === today;
+}
+
+
+/**
+ * Executes the cleanup and updates the last execution timestamp.
+ * This function is designed to be called via requestIdleCallback.
+ */
+export async function executeDailyCleanupTask() {
+  // const lastExecutedDay = localStorage.getItem(LAST_EXECUTED_CLEANUP_DAY_KEY)
+  const today = new Date().toDateString()
+
+  if (!hasCleanupExecutedToday()) {
+    if ('requestIdleCallback' in window) {
+      // console.log(`[${new Date().toLocaleTimeString()}] Scheduling cleanup  via requestIdleCallback for execution.`);
+
+      requestIdleCallback(
+        async (deadline) => {
+          console.log(`[${new Date().toLocaleTimeString()}] Running scheduled cleanup. Time remaining: ${deadline.timeRemaining().toFixed(2)}ms, Did timeout: ${deadline.didTimeout}`)
+          try {
+            await clean7DaysMailboxLog()
+            await clean7DaysWebsocketLog()
+            // Mark that cleanup was successfully executed for today
+            localStorage.setItem(LAST_EXECUTED_CLEANUP_DAY_KEY, today)
+            console.log('Daily cleanup marked as executed for today.')
+          } catch (error) {
+            console.error('Error during scheduled cleanup execution:', error)
+          }
+        },
+        { timeout: 5000 },
+      ) // Give it up to 5 seconds to find idle time
+    } else {
+      console.warn('requestIdleCallback not supported. Executing cleanup  directly (might cause jank).')
+      // Fallback for very old browsers: run directly.
+      try {
+        await clean7DaysMailboxLog()
+        await clean7DaysWebsocketLog()
+        localStorage.setItem(LAST_EXECUTED_CLEANUP_DAY_KEY, today)
+        console.log('Daily cleanup marked as executed for today (without rIC).')
+      } catch (error) {
+        console.error('Error during direct cleanup execution:', error)
+      }
+    }
+  } else {
+    console.log(`[${new Date().toLocaleTimeString()}] Cleanup already executed today.`)
+  }
+}
+
+/**
+ * Initiates or re-initiates the daily midnight cleanup scheduler.
+ * This function calls itself recursively to set up the next day's schedule.
+ */
+export function setupDailyMidnightCleanupScheduler() {
+  if (cleanupTimeoutId) {
+    clearTimeout(cleanupTimeoutId)
+    cleanupTimeoutId = null
+  }
+
+  const now = new Date()
+  const midnight = new Date(now)
+
+  // Set to midnight (00:00:00)
+  midnight.setDate(now.getDate() + 1)
+  midnight.setHours(0, 0, 0, 0)
+
+  const msToMidnight = midnight.getTime() - now.getTime()
+
+  console.log(`[${new Date().toLocaleTimeString()}] Scheduling next daily cleanup at ${midnight.toLocaleTimeString()}, in ${msToMidnight / (1000 * 60 * 60)} hours.`)
+
+  // Set the timeout for the next midnight
+  cleanupTimeoutId = setTimeout(async () => {
+    console.log(`[${new Date().toLocaleTimeString()}] Midnight trigger fired.`)
+    if (!hasCleanupExecutedToday()) {
+      await executeDailyCleanupTask()
+    } else {
+      console.log(`[${new Date().toLocaleTimeString()}] Cleanup already executed today, skipping re-execution.`)
+    }
+    setupDailyMidnightCleanupScheduler()
+  }, msToMidnight)
+}

src/utils/pagespy.js

@@ -1,31 +1,54 @@
-import { loadScript } from '@/utils/commons';
+import { loadScript } from '@/utils/commons'
+import { readWebsocketLog } from '@/utils/indexedDB'
 import { BUILD_VERSION, BUILD_DATE } from '@/config'
 
 export const loadPageSpy = (title) => {
-
   if (import.meta.env.DEV || window.$pageSpy) return
 
-  const PageSpyConfig = { api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true,  };
+  const PageSpyConfig = { api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true }
 
   const PageSpySrc = [
-    'https://page-spy.mycht.cn/page-spy/index.min.js'+`?${BUILD_DATE}`,
-    'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js'+`?${BUILD_DATE}`,
-    'https://page-spy.mycht.cn/plugin/rrweb/index.min.js'+`?${BUILD_DATE}`,
-  ];
+    'https://page-spy.mycht.cn/page-spy/index.min.js' + `?${BUILD_DATE}`,
+    'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js' + `?${BUILD_DATE}`,
+    'https://page-spy.mycht.cn/plugin/rrweb/index.min.js' + `?${BUILD_DATE}`,
+  ]
   Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
-
     // 注册插件
-    window.$harbor = new DataHarborPlugin();
-    window.$rrweb = new RRWebPlugin();
-    [window.$harbor, window.$rrweb].forEach(p => {
+    window.$harbor = new DataHarborPlugin()
+    window.$rrweb = new RRWebPlugin()
+    ;[window.$harbor, window.$rrweb].forEach((p) => {
       PageSpy.registerPlugin(p)
     })
-    window.$pageSpy = new PageSpy(PageSpyConfig);
+    window.$pageSpy = new PageSpy(PageSpyConfig)
 
     // PageSpy.registerPlugin(new DataHarborPlugin());
     // PageSpy.registerPlugin(new RRWebPlugin());
     // 实例化 PageSpy
     // window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: 'Sales CRM', title: title + '(v' + BUILD_VERSION + ')', autoRender: false, offline: true,  });
-    console.log('[PageSpy]', window.$pageSpy.version);
-  });
-};
+    console.log('[PageSpy]', window.$pageSpy.version)
+    // window.addEventListener('beforeunload', (e) => {
+    //   e.preventDefault() // If you prevent default behavior in Mozilla Firefox
+    //   e.returnValue = '' // Chrome requires returnValue to be set
+
+    //   window.$harbor.upload({ clearCache: false, remark: '自动上传' }) // 上传日志 { clearCache: true, remark: '' }
+    // })
+    window.onerror = async function (msg, url, lineNo, columnNo, error) {
+      await readWebsocketLog()
+      // 上传最近 3 分钟的日志
+      const now = Date.now()
+      await window.$harbor.uploadPeriods({
+        startTime: now - 3 * 60000,
+        endTime: now,
+        remark: `\`onerror\`自动上传. ${msg}`,
+      })
+    }
+  })
+}
+
+export const uploadPageSpyLog = async () => {
+  await readWebsocketLog()
+  // window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+  if (window.$pageSpy) {
+    await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+  }
+}

src/utils/usingStorage.js

@@ -0,0 +1,86 @@
+const persistObject = {}
+
+/**
+ * G-INT:USER_ID -> userId = 456
+ * G-STR:LOGIN_TOKEN -> loginToken = 'E6779386E7D64DF0ADD0F97767E00D8B'
+ * G-JSON:LOGIN_USER -> loginUser = { username: 'test-username' }
+ */
+export function usingStorage() {
+
+  const getStorage = () => {
+    if (import.meta.env.DEV && window.localStorage) {
+      return window.localStorage
+    } else if (window.sessionStorage) {
+      return window.sessionStorage
+    } else {
+      console.error('browser not support localStorage and sessionStorage.')
+    }
+  }
+
+  const setProperty = (key, value) => {
+    const webStorage = getStorage()
+    const typeAndKey = key.split(':')
+    if (typeAndKey.length === 2) {
+      const propName = camelCasedWords(typeAndKey[1])
+      persistObject[propName] = value
+      if (typeAndKey[0] === 'G-JSON') {
+        webStorage.setItem(key, JSON.stringify(value))
+      } else {
+        webStorage.setItem(key, value)
+      }
+    }
+  }
+
+  // USER_ID -> userId
+  const camelCasedWords = (string) => {
+    if (typeof string !== 'string' || string.length === 0) {
+      return string;
+    }
+    return string.split('_').map((word, index) => {
+      if (index === 0) {
+        return word.toLowerCase()
+      } else {
+        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+      }
+    }).join('')
+  }
+
+  if (Object.keys(persistObject).length == 0) {
+
+    const webStorage = getStorage()
+
+    for (let i = 0; i < webStorage.length; i++) {
+      const key = webStorage.key(i)
+      const typeAndKey = key.split(':')
+
+      if (typeAndKey.length === 2) {
+        const value = webStorage.getItem(key)
+        const propName = camelCasedWords(typeAndKey[1])
+        if (typeAndKey[0] === 'G-INT') {
+          persistObject[propName] = parseInt(value, 10)
+        } else if (typeAndKey[0] === 'G-JSON') {
+          try {
+            persistObject[propName] = JSON.parse(value)
+          } catch (e) {
+            // 如果解析失败，保留原始字符串值
+            persistObject[propName] = value
+            console.error('解析 JSON 失败。')
+          }
+        } else {
+          persistObject[propName] = value
+        }
+      }
+    }
+  }
+
+  return {
+    ...persistObject,
+    setStorage: (key, value) => {
+      setProperty(key, value)
+    },
+    clearStorage: () => {
+      getStorage().clear()
+      Object.assign(persistObject, {})
+    }
+  }
+}

src/views/AuthApp.jsx

@@ -1,9 +1,7 @@
 import ErrorBoundary from '@/components/ErrorBoundary'
 import useAuthStore from '@/stores/AuthStore'
 import { useThemeContext } from '@/stores/ThemeContext'
-import { Conditional } from '@/components/Conditional'
 import useConversationStore from '@/stores/ConversationStore'
-import { PERM_USE_EMAL } from '@/stores/AuthStore'
 import {
   App as AntApp,
   ConfigProvider,
@@ -13,11 +11,11 @@ import {
   FloatButton,
   theme,
 } from 'antd'
-import { BugOutlined, MailOutlined } from '@ant-design/icons'
+import { AudioOutlined, AudioTwoTone, BugOutlined, CustomerServiceOutlined } from '@ant-design/icons'
 import zhLocale from 'antd/locale/zh_CN'
 import 'dayjs/locale/zh-cn'
 import { useEffect } from 'react'
-import { Outlet, useHref, useNavigate } from 'react-router-dom'
+import { Link, NavLink, Outlet, useHref, useNavigate } from 'react-router-dom'
 import { appendRequestHeader } from '@/utils/request'
 import { loadPageSpy } from '@/utils/pagespy'
 
@@ -26,7 +24,10 @@ import '@/assets/App.css'
 import 'react-chat-elements/dist/main.css'
 import EmailFetch from './Conversations/Online/Components/EmailFetch'
 import FetchEmailWorker from './../workers/fetchEmailWorker?worker&url'
-import { clearWebsocketLog, readWebsocketLog } from '@/utils/commons'
+import { readWebsocketLog } from '@/utils/indexedDB'
+import { useGlobalNotify } from '@/hooks/useGlobalNotify'
+import GeneratePaymentDrawer from './Conversations/Online/Components/GeneratePaymentDrawer'
+import GenerateAutoDocDrawer from './Conversations/Online/Components/GenerateAutoDocDrawer'
 
 // const fetchEmailWorkerURL = new URL('/src/workers/fetchEmailWorker.js', import.meta.url);
 const fetchEmailWorker = new Worker(FetchEmailWorker, { type: 'module' });
@@ -38,8 +39,8 @@ function AuthApp() {
   const [messageApi, contextHolder] = message.useMessage()
 
   const { colorPrimary, borderRadius } = useThemeContext()
-  const [loginUser, sendNotify, isPermitted] = useAuthStore((state) => [
-    state.loginUser, state.sendNotify, state.isPermitted
+  const [loginUser, sendNotify] = useAuthStore((state) => [
+    state.loginUser, state.sendNotify
   ])
 
   const href = useHref()
@@ -64,10 +65,7 @@ function AuthApp() {
       connectWebsocket(loginUser.userId)
       fetchInitialData(loginUser)
 
-      let _fetchEmailWorker;
-      if (isPermitted(PERM_USE_EMAL)) {
-        _fetchEmailWorker = startEmailInterval(loginUser.userId)
-      }
+      _fetchEmailWorker = startEmailInterval(loginUser.userId)
     }
     return () => {
       disconnectWebsocket()
@@ -78,6 +76,8 @@ function AuthApp() {
     }
   }, [])
 
+  useGlobalNotify();
+
   const startEmailInterval = (userId) => {
     // const fetchEmailWorker = new Worker(fetchEmailWorkerURL, { type: 'module' });
     fetchEmailWorker.onerror = function(error) {
@@ -91,22 +91,40 @@ function AuthApp() {
   }
 
   const uploadLog = async () => {
-    sendNotify()
     await readWebsocketLog()
     if (window.$pageSpy) {
       // window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
-      await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
-      messageApi.info('Success')
-      clearWebsocketLog()
+      try {
+        // await window.$harbor.upload() // 上传日志 { clearCache: true, remark: '' }
+        // 上传最近 1 小时的日志, 直接upload 所有日志: 413 Payload Too Large
+        const now = Date.now()
+        await window.$harbor.uploadPeriods({
+          startTime: now - 60 * 60000,
+          endTime: now,
+        })
+        messageApi.info('Success')
+        // clearWebsocketLog()
+        sendNotify()
+      } catch (error) {
+        messageApi.error('Failure')
+      }
     } else {
       messageApi.error('Failure')
     }
-    clearWebsocketLog()
   }
 
   // 除了路由 /p...以外都需要登陆系统
   const needToLogin = loginUser.userId === -1 && href.indexOf('/p/') === -1
 
+  const isMobileApp =
+    navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+    ) !== null
+
+  const floatButtonLineEnd = isMobileApp ? 0 : 24
+  const floatTrigger = isMobileApp ? 'click' : null
+
+
   useEffect(() => {
     if (needToLogin) {
       navigate('/p/dingding/login?origin_url=' + href)
@@ -122,7 +140,7 @@ function AuthApp() {
           colorPrimary: colorPrimary,
           borderRadius: borderRadius,
           fontFamily:
-            "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
+            "-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji'",
         },
         algorithm: theme.defaultAlgorithm,
       }}
@@ -132,15 +150,17 @@ function AuthApp() {
       <AntApp>
         <ErrorBoundary>
           <FloatButton.Group
-            shape="square"
+            shape='square'
+            placement={'left'}
+            trigger={floatTrigger}
             style={{
-              insetInlineEnd: 94,
+              insetInlineEnd: floatButtonLineEnd,
+              insetBlockEnd: floatButtonLineEnd,
+              flexDirection: 'row',
             }}
+            icon={<CustomerServiceOutlined />}
           >
-            <Conditional
-              condition={isPermitted(PERM_USE_EMAL)}
-              whenTrue={<EmailFetch />}
-            />
+            <EmailFetch />
             <FloatButton icon={<BugOutlined />} tooltip={<div>上传日志给研发部</div>} onClick={() => uploadLog()} />
             <FloatButton.BackTop />
           </FloatButton.Group>
@@ -169,6 +189,8 @@ function AuthApp() {
               </button>
             </form>
           </dialog>
+          <GeneratePaymentDrawer />
+          <GenerateAutoDocDrawer />
         </ErrorBoundary>
       </AntApp>
     </ConfigProvider>

src/views/CallCenter.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useState, useEffect } from "react";
-import { Grid, Divider, Layout, Flex, Spin, Input, Col, Row, List, Typography } from "antd";
+import { Grid, Divider, Layout, Flex, Spin, Input, Col, Row, List, Typography, Alert } from "antd";
 import { PhoneOutlined, CustomerServiceOutlined, AudioOutlined } from "@ant-design/icons";
 import { useParams, useHref, useNavigate } from "react-router-dom";
 import { isEmpty } from "@/utils/commons";
@@ -50,9 +50,15 @@ const CallCenter = props => {
 							setPhone_number(e.target.value);
 						}}></Input.Search>
 				</Col>
-				<Col md={24} lg={8} xxl={9}></Col>
+				<Col md={24} lg={8} xxl={9}>
+        <Alert message={'不支持拨打中国大陆(+86)号码'} type="info" showIcon  />
+        </Col>
 			</Row>
-
+			<Row gutter={16}>
+				<Col md={24} lg={8} xxl={9}></Col>
+				<Col md={24} lg={8} xxl={6}>
+        </Col>
+      </Row>
 			<Divider plain orientation="left" className="mb-0"></Divider>
 			<List header={<Typography.Text strong>Console Logs</Typography.Text>} bordered dataSource={logs} renderItem={item => <List.Item>{item}</List.Item>} />
 		</>

src/views/ChatHistory.jsx

@@ -8,12 +8,15 @@ import MessagesList from './Conversations/History/MessagesList';
 import ImageAlbumPreview from './Conversations/History/ImageAlumPreview';
 import { flush, pick } from '@/utils/commons';
 import { fetchConversationsSearch, CONVERSATION_PAGE_SIZE } from '@/actions/ConversationActions';
+import EmailDetail from './Conversations/Online/Components/EmailDetail';
+import SupplierEmailDrawer from './Conversations/Online/Components/EmailListDrawer';
 
 const { Sider, Content } = Layout;
 
 const Index = (props) => {
   const [formValues, setFormValues] = useFormStore((state) => [state.chatHistoryForm, state.setChatHistoryForm]);
   const [selectedConversation, setSelectedConversation] = useFormStore((state) => [state.chatHistorySelectChat, state.setChatHistorySelectChat]);
+  const [EmailList, ] = useFormStore((state) => [state.EmailList, ]);
 
   const [conversationsListLoading, setConversationsListLoading] = useState(false);
   const [conversationsList, setConversationsList] = useState([]);
@@ -45,20 +48,36 @@ const Index = (props) => {
       setSelectedConversation(data[0]);
     }
   };
+
+  const [openEmailDetail, setOpenEmailDetail] = useState(false);
+  const [emailDetail, setEmailDetail] = useState({});
+  const [initialPosition, setInitialPosition] = useState({})
+  const [initialSize, setInitialSize] = useState({})
+  const [emailItem, setEmailItem] = useState({});
+
+  const onOpenEmail = (emailMsg) => {
+    // setOpenEmailDetail(true);
+    // setEmailDetail({...emailMsg, order_opi: Number(selectedConversation?.opi_sn || 0)});
+    // console.log(emailMsg);
+    setEmailItem({ MAI_SN: emailMsg.msgtext?.email?.mai_sn, MAI_Subject: emailMsg.msgtext?.email?.subject, SenderReceiver: '', MAI_SendDate: '' })
+  }
+
   return (
     <>
       <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
       <Divider plain orientation='left' className='mb-0'></Divider>
-      <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 300px)', height: 'calc(100% - 300px)' }}>
-        <Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)' }}>
+      <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 262px)', height: 'calc(100% - 262px)' }}>
+        <Sider width={300} theme={'light'} className='h-full overflow-y-auto overflow-x-hidden' style={{ maxHeight: 'calc(100vh - 262px)', height: 'calc(100vh - 262px)' }}>
           <ConversationsList {...{ conversationsListLoading, conversationsList, selectedConversation, handleChatItemClick: setSelectedConversation, onLoadMore: getConversationsList, loadMoreVisible: pageParam.loadNextPage }} />
         </Sider>
-        <Content style={{ maxHeight: 'calc(100vh - 300px)', height: 'calc(100vh - 300px)', minWidth: '360px' }}>
+        <Content style={{ maxHeight: 'calc(100vh - 262px)', height: 'calc(100vh - 262px)', minWidth: '360px' }}>
           <Flex className='h-full relative'>
             <MessagesMatchList />
-            <MessagesList />
+            <MessagesList onOpenEmail={onOpenEmail} />
           </Flex>
           <ImageAlbumPreview />
+          <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`history-email-detail-${emailDetail.id}`} disabled {...{initialPosition, initialSize, setInitialPosition, setInitialSize}} />
+          <SupplierEmailDrawer showExpandBtn={false} list={EmailList} opi_sn={selectedConversation?.opi_sn} currentConversationID={selectedConversation?.sn} oid={selectedConversation?.coli_sn} emailItem={emailItem} />
         </Content>
       </Layout>
     </>

src/views/ChatWindow.jsx

@@ -1,17 +1,17 @@
 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,  LeftOutlined } from '@ant-design/icons';
 // import { useParams, useNavigate } from 'react-router-dom';
 import MessagesHeader from './Conversations/Online/MessagesHeader';
 import MessagesWrapper from './Conversations/Online/MessagesWrapper';
-import InputComposer from './Conversations/Online/Input/InputComposer';
 import ConversationsList from './Conversations/Online/ConversationsList';
-import CustomerProfile from './Conversations/Online/order/CustomerProfile';
-// import { useAuthContext } from '@/stores/AuthContext';
-// import useConversationStore from '@/stores/ConversationStore';
+import OrderProfile from '@/components/OrderProfile'
 import ReplyWrapper from './Conversations/Online/ReplyWrapper';
+import useConversationStore from '@/stores/ConversationStore';
+import { useShallow } from 'zustand/react/shallow';
 
 import './Conversations/Conversations.css';
+import EmailEditorPopup from './Conversations/Online/Input/EmailEditorPopup';
 
 const { Sider, Content, Header, Footer } = Layout;
 
@@ -21,35 +21,38 @@ const { Sider, Content, Header, Footer } = Layout;
 const ChatWindow = () => {
 
   const [collapsedLeft, setCollapsedLeft] = useState(false);
-  const [collapsedRight, setCollapsedRight] = useState(false);
+  const [collapsedRight, setCollapsedRight] = useState(true);
+
+
+    const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""));
 
   return (
     <>
-      <Layout hasSider className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
+      <Layout hasSider className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 166px)', height: 'calc(100% - 166px)' }}>
         <Sider
-          width={300}
+          width={380}
           theme={'light'}
           className='h-full overflow-y-auto h-parent'
-          style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
+          style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)' }}
           collapsible={true}
           breakpoint='xl'
           collapsedWidth={73}
-          collapsed={collapsedLeft}
+          collapsed={false}
           onBreakpoint={(broken) => {
-            setCollapsedLeft(broken)
-            setCollapsedRight(broken)
+            // setCollapsedLeft(broken)
+            // setCollapsedRight(broken)
           }}
           trigger={null}>
           <ConversationsList />
         </Sider>
 
-        <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)', minWidth: '360px' }}>
+        <Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
           <Layout className='h-full'>
-            <Header className='px-1 ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'>
+            <Header className='px-1 ant-layout-sider-light bg-white ant-card h-auto flex justify-between gap-1 items-center'>
               {/* <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 ? <RightOutlined /> : <LeftOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
             </Header>
             <Content className="flex-grow bg-whatsapp-bg relative" >
               <MessagesWrapper />
@@ -63,18 +66,19 @@ const ChatWindow = () => {
         </Content>
 
         <Sider
-          width={300}
+          width={400}
           theme={'light'}
           className=' overflow-y-auto'
-          style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
+          style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)' }}
           collapsible={true}
           breakpoint='xl'
           collapsedWidth={0}
           trigger={null}
           collapsed={collapsedRight}>
-          <CustomerProfile />
+          <OrderProfile coliSN={currentOrder} />
         </Sider>
       </Layout>
+      <EmailEditorPopup key='email-editor-online' />
     </>
   );
 };

src/views/Conversations/ChatAssign.jsx

@@ -21,11 +21,14 @@ function ChatAssign() {
   const [opi, setOpi] = useState({});
 
   async function refreshConversationList() {
-    const _list = await fetchConversationsSearch({ whatsapp_id: whatsappid });
+    const _list = await fetchConversationsSearch({ whatsapp_id: whatsappid })
     if (_list.length > 0) {
-      setCurrentConversation(_list[0]);
-      setConversationid(String(_list[0].conversationid));
-      setOpi({ label: _list[0].opi_name, value: String(_list[0].opi_sn) });
+      const unassignI = _list.findIndex((item) => item.opi_sn === 0)
+      if (unassignI > -1) {
+        setCurrentConversation(_list[unassignI])
+        setConversationid(String(_list[unassignI].conversationid))
+        setOpi({ label: _list[unassignI].opi_name, value: String(_list[unassignI].opi_sn) })
+      }
     }
   }
 
@@ -39,7 +42,7 @@ function ChatAssign() {
   return (
     <>
       <Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 32px)', height: 'calc(100vh - 32px)', minWidth: '360px' }}>
-        <Header className=' px-2 ant-layout-sider-light ant-card h-auto flex flex-col justify-between gap-1 '>
+        <Header className=' px-2 ant-layout-sider-light bg-white ant-card h-auto flex flex-col justify-between gap-1 '>
           <InputAssign className={'block py-2'} initialValues={{ conversationid, whatsappid }} {...{ conversationid, opi }} />
           <MessagesHeader />
         </Header>

src/views/Conversations/Conversations.css

@@ -98,7 +98,8 @@
     bottom: 0;
 }
 .chatwindow-wrapper .rce-container-mbox .rce-mbox{
-    max-width: 500px;
+    /* max-width: 500px; */
+    max-width: 70%;
 }
 .chatwindow-wrapper .rce-citem {
     background: transparent;
@@ -139,7 +140,7 @@
 .chatwindow-wrapper .epr-emoji-native,
 .chatwindow-wrapper .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper >textarea.ant-input
 {
-    font-family: 'Open Sans', 'Noto Sans',"Noto Color Emoji", 'Apple Color Emoji', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', Arial, sans-serif!important;
+    font-family: 'Open Sans', 'Noto Sans',"Noto Color Emoji", 'Apple Color Emoji', 'Twemoji Mozilla', 'EmojiOne Color', 'Android Emoji', Arial, sans-serif!important;
     font-weight: 400;
 }
 .chatwindow-wrapper .failed-msg .rce-mbox-forward{
@@ -186,7 +187,8 @@
     margin-top: 0;
     /* margin-left: 5px; */
     padding: 5px;
-    justify-content: flex-start;
+    /* justify-content: flex-start; */
+    justify-content: center;
     font-size: 12px;
     /* word-wrap: break-word; */
     text-wrap: nowrap;
@@ -194,10 +196,10 @@
     height: 100%;
 }
 .chatwindow-wrapper .whatsappme-container .rce-mbox{
-    background-color: #ccd5ae;
+    /* background-color: #ccd5ae; */
 }
 .chatwindow-wrapper .whatsappme-container .rce-mbox-right-notch{
-    fill: #ccd5ae;
+    /* fill: #ccd5ae; */
 }
 .chatwindow-wrapper .rce-mbox .rce-mbox-reply {
     background-color: rgba(236, 236, 236, 0.7);

src/views/Conversations/History/ConversationsList.jsx

@@ -21,9 +21,9 @@ const ConversationsList = ({ conversationsListLoading, handleChatItemClick, sele
             {...item}
             key={item.conversationid}
             id={item.conversationid}
-            letterItem={{ id: item.whatsapp_name || item.whatsapp_phone_number, letter: (item.whatsapp_name || item.whatsapp_phone_number).split(' ')[0] }}
+            letterItem={{ id: item.show_default, letter: (item.show_default).split("@")[0].slice(0, 4).split(' ')[0] }}
             alt={`${item.whatsapp_name}`}
-            title={item.whatsapp_name || item.whatsapp_phone_number}
+            title={item.show_default}
             subtitle={`${item.OPI_Name || ''} ${item.coli_id || ''}`}
             date={item.lasttime || item.lasttime}
             dateString={item.dateText}

src/views/Conversations/History/MergeConversationTo.jsx

@@ -103,7 +103,7 @@ const MergeConversationTo = ({ currentWAID, opi_sn, ...props }) => {
           setOpen(false);
           formInstance?.resetFields();
         }}
-        destroyOnClose
+        destroyOnHidden
         onOk={async () => {
           try {
             const values = await formInstance?.validateFields();

src/views/Conversations/History/MessagesList.jsx

@@ -1,15 +1,18 @@
 import { useRef, useEffect, useState, forwardRef, memo } from 'react';
-import { App, Flex, List, Button,  } from 'antd';
+import { App, Flex, List, Button, Image } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
 import useFormStore from '@/stores/FormStore';
-import { isEmpty, stringToColour, groupBy, isNotEmpty } from '@/utils/commons';
+import { isEmpty, stringToColour, groupBy, isNotEmpty, TagColorStyle } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
 import MergeConversationTo from './MergeConversationTo';
+import BubbleIM from '../Online/Components/BubbleIM';
+import BubbleEmail from '../Online/Components/BubbleEmail';
+import { ERROR_IMG, POPUP_FEATURES } from '@/config';
 
-const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 100;
-const MessagesList = ({ ...props }) => {
+const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 20;
+const MessagesList = ({ ...listProps }) => {
   const { message: appMessage } = App.useApp();
 
   const [formValues] = useFormStore((state) => [state.chatHistoryForm]);
@@ -17,6 +20,7 @@ const MessagesList = ({ ...props }) => {
   const [paramsForMsgList, setParamsForMsgList] = useFormStore((state) => [state.msgListParams, state.setMsgListParams]);
   const [selectMatch, setSelectedMatch] = useFormStore((state) => [state.msgHistorySelectMatch, state.setMsgHistorySelectMatch]);
   const [setImageAlbumList, setImagePreviewSrc] = useFormStore(useShallow((state) => [state.setImageAlbum, state.setImagePreviewSrc]));
+  const [ setEmailList] = useFormStore(useShallow((state) => [ state.setEmailList]));
 
   const [chatItemMessages, setChatItemMessages] = useState([]);
   const [messageListPreLoading, setMessageListPreLoading] = useState(false);
@@ -31,7 +35,7 @@ const MessagesList = ({ ...props }) => {
     setChatItemMessages((prevValue) => [].concat(data, prevValue));
     const loadPrePage = !(data.length === 0 || data.length < BIG_PAGE_SIZE);
     if (data.length > 0) {
-      setParamsForMsgList({ loadPrePage, pretime: data[0].orgmsgtime });
+      setParamsForMsgList({ loadPrePage, pretime: data[0].msgtime });
     }
   };
   const getMessagesNext = async (chatItem) => {
@@ -43,7 +47,7 @@ const MessagesList = ({ ...props }) => {
     setChatItemMessages((prevValue) => [].concat(prevValue, data));
     const loadNextPage = !(data.length === 0 || data.length < BIG_PAGE_SIZE);
     if (data.length > 0) {
-      setParamsForMsgList({ loadNextPage, lasttime: data[data.length - 1].orgmsgtime });
+      setParamsForMsgList({ loadNextPage, lasttime: data[data.length - 1].msgtime });
     }
   };
 
@@ -64,15 +68,16 @@ const MessagesList = ({ ...props }) => {
     if (isEmpty(selectedConversation.conversationid)) {
       return () => {};
     }
-    const firstActionPageParams = { opisn: (selectedConversation.opi_sn || 0), whatsappid: selectedConversation.whatsapp_phone_number, loadNextPage: true };
+    // opisn: (selectedConversation.opi_sn || 0), whatsappid: selectedConversation.whatsapp_phone_number,
+    const firstActionPageParams = {  conversationid: selectedConversation.conversationid , loadNextPage: true };
     // if (isEmpty(selectedConversation.matchMsgList)) {
     if (!isEmpty(formValues?.from_date)) {
       firstActionPageParams.lasttime = formValues.from_date;
       firstActionPageParams.loadPrePage = true;
     }
     if (!isEmpty(formValues?.search) && !isEmpty(selectedConversation.matchMsgList)) {
-      firstActionPageParams.pretime = selectedConversation.matchMsgList[0].orgmsgtime;
-      firstActionPageParams.lasttime = selectedConversation.matchMsgList[0].orgmsgtime;
+      firstActionPageParams.pretime = selectedConversation.matchMsgList[0].msgtime;
+      firstActionPageParams.lasttime = selectedConversation.matchMsgList[0].msgtime;
       firstActionPageParams.loadPrePage = true;
     }
     setParamsForMsgList(firstActionPageParams);
@@ -103,9 +108,11 @@ const MessagesList = ({ ...props }) => {
   // 更新是否需要显示上一页,下一页按钮
   useEffect(() => {
     if (chatItemMessages.length > 0) {
-  //     setParamsForMsgList({ pretime: chatItemMessages[0].orgmsgtime, lasttime: chatItemMessages[chatItemMessages.length - 1].orgmsgtime });
+  //     setParamsForMsgList({ pretime: chatItemMessages[0].msgtime, lasttime: chatItemMessages[chatItemMessages.length - 1].msgtime });
       const album = chatItemMessages.filter((ele) => ele.whatsapp_msg_type === 'image').map((ele) => ele.data.uri);
       setImageAlbumList(album);
+      const emailList = chatItemMessages.filter((ele) => ele.msg_source === 'email').map(ele => ({...ele, MAI_SN: ele.msgtext?.email?.mai_sn, MAI_Subject: ele.msgtext?.email?.subject, SenderReceiver: ele.from, MAI_SendDate: ele.msgtime, Direction: ele.msg_direction === 'inbound' ? '收' : '发' })).reverse();
+      setEmailList(emailList);
     }
     return () => {};
   }, [chatItemMessages]);
@@ -170,7 +177,7 @@ const MessagesList = ({ ...props }) => {
         {headerObj ? (
           <div className='text-neutral-500 text-center'>
             {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
-            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <Image src={headerObj.parameters[0].image.link} height={100} fallback={ERROR_IMG}></Image>}
             {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
               <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
                 [&nbsp;{headerObj.parameters[0].type}&nbsp;]
@@ -196,8 +203,9 @@ const MessagesList = ({ ...props }) => {
   // eslint-disable-next-line react/display-name
   const MessageBoxWithRef = forwardRef((props, ref) => (
     <li ref={ref}>
-      <MessageBox {...props} />
-    </li>
+      {['waba', 'wai'].includes((props.msg_source || '').toLowerCase()) && <MessageBox {...props} />}
+      {props.msg_source === 'email' && <BubbleEmail {...props} reposition='left' onOpenEmail={listProps.onOpenEmail} />}
+      </li>
   ));
 
   const handlePreview = (msg) => {
@@ -207,7 +215,7 @@ const MessagesList = ({ ...props }) => {
         return false;
 
       case 'document':
-        window.open(msg.data.link || msg.data.uri, '_blank', 'noopener,noreferrer');
+        window.open(msg.data.link || msg.data.uri, msg.data.uri, POPUP_FEATURES);
         return false;
 
       default:
@@ -252,16 +260,17 @@ const MessagesList = ({ ...props }) => {
                 title={message.whatsapp_msg_type === 'text' ? '' : message.title}
                 text={<RenderText str={message?.text || ''} className={message.status === 'failed' ? 'line-through text-neutral-400' : ''} template={message.template} />}
                 copiableDate={true}
-                dateString={message.dateString || message.localDate}
+                dateString={`${message.wabaName} - ${message.dateString || message.localDate}`}
                 className={[
                   'whitespace-pre-wrap mb-2',
                   message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
                   message.sender === 'me' ? 'whatsappme-container' : '',
                   focusMsg === message.id ? 'message-box-focus' : '',
                   message.status === 'failed' ? 'failed-msg' : '',
+                  message.sender === 'me' ? (message.msg_source.toLowerCase() === 'waba' ? `[&_.rce-mbox]:bg-waba-me` : `[&_.rce-mbox]:bg-whatsapp-me`) : '',
                 ].join(' ')}
                 style={{
-                  backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
+                  // backgroundColor: message.sender === 'me' ? '#ccd4ae' : '#fff',
                 }}
                 {...(message.type === 'meetingLink'
                   ? {
@@ -277,10 +286,10 @@ const MessagesList = ({ ...props }) => {
                     }
                   : {})}
                 renderAddCmp={
-                  <div key={'msg-prefix'} className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji'>
+                  <div key={'msg-prefix'} className='border-dashed border-0 border-t border-slate-300 text-slate-600 space-x-2 emoji ' style={{backgroundColor: 'unset'}}>
                     <span
                       className={`p-1 rounded-b ${message.msg_direction === 'outbound' ? 'text-white' : ''} `}
-                      style={{ backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset' }}>
+                      style={{ backgroundColor: message.msg_direction === 'outbound' ? stringToColour(message.senderName) : 'unset', ...TagColorStyle(message.senderName, true) }}>
                       {message.msg_direction === 'outbound' ? selectedConversation.OPI_Name : message.senderName}
                     </span>
                     <span>{message.dateString || message.localDate}</span>

src/views/Conversations/History/SearchForm.jsx

@@ -40,13 +40,13 @@ const SearchForm = memo(function ({ initialValues, onSubmit, onReset }) {
             <Input placeholder='关键词' allowClear />
           </Form.Item>
           <Form.Item label='消息渠道' name='mchannel' className='w-52'>
-            <Select mode='multiple' maxTagCount={0} allowClear options={[
-                { key: 'waba', label: 'WA商业号', value: 'waba' },
+            <Select maxTagCount={0} allowClear options={[
+                { key: 'WABA', label: 'WA商业号', value: 'WABA' },
                 { key: 'email', label: '邮件', value: 'email' },
-                { key: 'whatsapp', label: 'WhatsApp', value: 'whatsapp' },
+                { key: 'wai', label: 'WhatsApp', value: 'wai' },
                 ]} className='w-8' />
           </Form.Item>
-          <Form.Item label='消息类型' name='mtype' className='w-44'>
+          {/* <Form.Item label='消息类型' name='mtype' className='w-44'>
             <Select mode='multiple' maxTagCount={0} allowClear options={[
                 { key: 'image', label: '图片', value: 'image' },
                 { key: 'video', label: '视频', value: 'video' },
@@ -54,9 +54,10 @@ const SearchForm = memo(function ({ initialValues, onSubmit, onReset }) {
                 { key: 'file', label: '文件', value: 'file' },
                 { key: 'email', label: '邮件', value: 'email' },
                 ]} className='w-8' />
-          </Form.Item>
+          </Form.Item> */}
           <Form.Item label='日期' name='msgDateRange'>
             <RangePicker format={'YYYY-MM-DD'} />
+
           </Form.Item>
         </Flex>
         <div style={{ flex: '0 1 64px' }} className='flex justify-between'>

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

@@ -56,17 +56,17 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
             <>
             <b>From: </b>
             <span>
-              {/* {message?.emailOrigin?.fromName}&nbsp;&lt;{message?.emailOrigin.fromEmail}&gt; */}
               {message.msgOrigin?.from}
             </span>
             </> : <><b>To: </b>{message.msgOrigin?.to}</>
             }
+            {/* <b>Subject: </b>{message.msgOrigin.email.subject} */}
           </span>
         </>
       }
       // titleColor={message.sender !== 'me' ? '#4f46e5' : ''} // 600
       notch={false}
-      position={message.sender === 'me' ? 'right' : 'left'}
+      position={message.reposition || (message.sender === 'me' ? 'right' : 'left')}
       onReplyClick={() => onOpenEditor(message.msgOrigin)}
       onForwardClick={ () => { handleResend(message.msgOrigin); }}
       onOpen={() => handlePreview(message)}

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

@@ -1,12 +1,19 @@
-import { createContext, useEffect, useState, memo } from 'react';
-import { App, Button } from 'antd';
-import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
+import { memo } from 'react';
+import { App, Button, Image } 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 { WABIcon } from '@/components/Icons';
+import { ReplyIcon } from '@/components/Icons';
 import ChannelLogo from './ChannelLogo';
+import { ERROR_IMG } from '@/config';
+
+const outboundStyle = {
+  'waba': { color: '#ccd4ae' },
+  'whatsapp': { color: '#d9fdd3' },
+  'wai': { color: '#d9fdd3' },
+}
 
 const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, setNewChatFormValues, scrollToMessage, focusMsg, ...message }) => {
   const { message: appMessage } = App.useApp();
@@ -19,10 +26,10 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
   const RenderText = memo(function renderText({ str, className, template, message }) {
     let headerObj, footerObj, buttonsArr;
     if (!isEmpty(template) && !isEmpty(template.components)) {
-      const componentsObj = groupBy(template.components, (item) => item.type);
+      const componentsObj = groupBy(template.components.concat(template?.components_omit || []), (item) => item.type);
       headerObj = componentsObj?.header?.[0];
       footerObj = componentsObj?.footer?.[0];
-      buttonsArr = componentsObj?.buttons?.reduce((r, c) => r.concat(c.buttons), []);
+      buttonsArr = componentsObj?.button; // ?.reduce((r, c) => r.concat(c.buttons), []);
     }
 
     const parts = str.split(/(https?:\/\/[^\s()]+|\p{Emoji_Presentation}|\d{4,})/gmu).filter((s) => s !== '');
@@ -48,7 +55,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
         {headerObj ? (
           <div className='text-neutral-500 text-center'>
             {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
-            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <Image src={headerObj.parameters[0].image.link} height={100} fallback={ERROR_IMG}></Image>}
             {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
               <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
                 [&nbsp;{headerObj.parameters[0].type}&nbsp;]
@@ -78,17 +85,17 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
         {buttonsArr && buttonsArr.length > 0 ? (
           <div className='flex flex-row gap-1'>
             {buttonsArr.map((btn, index) =>
-              btn.type.toLowerCase() === 'url' ? (
-                <Button className='text-blue-500' size={'small'} href={btn.url} target={'_blank'} key={btn.url} rel='noreferrer'>
+              btn.sub_type.toLowerCase() === 'url' ? (
+                <Button className='text-blue-500' size={'small'} href={btn.url} target={'_blank'} key={`${btn.sub_type}_${btn.index}`} rel='noreferrer' icon={<ExportOutlined />}>
                   {btn.text}
                 </Button>
-              ) : btn.type.toLowerCase() === 'phone_number' ? (
-                <Button className='text-blue-500' size={'small'} key={btn.phone_number} rel='noreferrer'>
+              ) : btn.sub_type.toLowerCase() === 'phone_number' ? (
+                <Button className='text-blue-500' size={'small'} key={btn.phone_number} rel='noreferrer' icon={<PhoneOutlined />}>
                   {btn.text} ({btn.phone_number})
                 </Button>
               ) : (
-                <Button className='text-blue-500' size={'small'} key={btn.type}>
-                  {btn.text}
+                <Button className='text-blue-500' size={'small'} key={`${btn.type}_${btn.sub_type}_${btn.index}`} icon={btn.sub_type.toLowerCase() === 'copy_code' ? <CopyOutlined /> : btn.sub_type.toLowerCase() === 'quick_reply' ? <ReplyIcon /> : null}>
+                  {btn.text || btn.sub_type.toUpperCase()}
                 </Button>
               ),
             )}
@@ -99,8 +106,8 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
   });
   return (
     <MessageBox
-      {...message}
-      key={`${message.sn}.${message.id}`}
+      {...message} titleColor={TagColorStyle(message.title).color}
+      key={`IM.${message.id}`}
       position={message.sender === 'me' ? 'right' : 'left'}
       onReplyClick={() => setReferenceMsg(message)}
       onReplyMessageClick={() => scrollToMessage(message.reply.id)}
@@ -112,21 +119,22 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
       {...(message.sender === 'me'
         ? {
             // styles: { backgroundColor: '#ccd4ae' },
-            notchStyle: { fill: '#ccd4ae' }, // todo: channel[WhatsApp] color '#d9fdd3'
-            title: <><ChannelLogo channel={message.msg_source} />&nbsp;{message.wabaName}&nbsp;-&nbsp;{message.title}</>,
+            notchStyle: { fill: outboundStyle[message.msg_source.toLowerCase()].color },
+            title: <><ChannelLogo channel={message.msg_source} />{message.wabaName ? ` ${message.wabaName} - ${message.title || ''}` : ` ${message.title || message.from || ''}`}</>,
           }
         : {
           // title: <>&nbsp;<ChannelLogo channel={message.msg_source} />&nbsp;{message.title}</>,
           dateString: `${message.wabaName} - ${message.dateString}`,
         })}
       className={[
-        'whitespace-pre-wrap',
+        'whitespace-pre-wrap', '[&_.rce-mbox-reply-message]:line-clamp-3',
         message.whatsapp_msg_type === 'sticker' ? 'bg-transparent' : '',
         // message.sender === 'me' ? 'whatsappme-container' : '',
         focusMsg === message.id ? 'message-box-focus' : '',
         message.status === 'failed' ? 'failed-msg' : '',
         // '*:bg-waba-me'
-        message.sender === 'me' ? '*:!bg-waba-me' : '', // todo: channel color
+        message.sender === 'me' ? (message.msg_source.toLowerCase() === 'waba' ? `[&_.rce-mbox]:bg-waba-me` : `[&_.rce-mbox]:bg-whatsapp-me`) : '',
+        message.sender !== 'me' ? (message.msg_source.toLowerCase() === 'waba' ? `[&_.rce-mbox-time:before]:text-waba-600 [&_.rce-mbox-time:before]:font-semibold` : `[&_.rce-mbox-time:before]:text-whatsapp`) : '',
       ].join(' ')}
       {...(message.type === 'meetingLink'
         ? {

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

@@ -12,6 +12,8 @@ const ChannelLogo = ({channel, className, ...props}) => {
     case 'waba':
       return <WABIcon key={channel} className={`text-whatsapp ${className}  `} />;
     case 'wa':
+    case 'wai':
+    case 'whatsapp':
       return <WhatsAppOutlined key={channel} className={`text-whatsapp ${className}  `} />;
     case 'email':
       return <MailOutlined key={channel} className={`text-indigo-500 ${className} `} />

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Tag, Radio, Popover, Form } from 'antd';
+import { Button, Tag, Radio, Popover, Form, Space, Tooltip } from 'antd';
 import { isEmpty, objectMapper, TagColorStyle } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { OrderLabelDefaultOptions } from '@/stores/OrderStore';
-import { FilterIcon } from '@/components/Icons';
+import { FilterOutlined, FilterTwoTone } from '@ant-design/icons';
 
 const otypes = [
   { label: 'All', value: '', labelValue: '' },
+  { value: 'istoday@1', labelValue: '1', label: '今日' },
   ...OrderLabelDefaultOptions.filter((o) =>
     [240003, 240002].includes(o.value),
   ).map((o) => ({ ...o, labelValue: o.value, value: `label@${o.value}` })),
@@ -116,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'
@@ -125,7 +126,20 @@ const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
           onChange={(e) => {
             setFilterOtype(e.target.value)
           }}
-        />
+        /> */}
+        {tags.slice(0, 3).map((tag, ti) => (
+          <Tag.CheckableTag
+            className='mb-1'
+            key={tag.key}
+            checked={selectedTags.includes(tag.key)}
+            onChange={(checked) => handleTagsChange(tag, checked)}
+            style={TagColorStyle(
+              tag.label,
+              selectedTags.includes(tag.key),
+            )}>
+            {tag.label}
+          </Tag.CheckableTag>
+        ))}
         <Popover
           destroyTooltipOnHide
           placement='bottomLeft'
@@ -151,14 +165,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
@@ -176,29 +190,27 @@ const ChatListFilter = ({ onFilterChange, activeList, ...props }) => {
                 </Form.Item>
 
                 <Form.Item noStyle className='flex justify-center mb-0'>
-                  <Button.Group>
+                  <Space.Compact>
                     <Button onClick={onReset} type='primary' ghost>
                       重置
                     </Button>
                     {/* <Button htmlType='submit' type='primary'>
                       确定
                     </Button> */}
-                  </Button.Group>
+                  </Space.Compact>
                 </Form.Item>
               </Form>
             </>
           }>
-          <Button
-            icon={
-              <FilterIcon
-                className={
-                  isEmpty(selectedTags) ? 'text-neutral-500' : 'text-blue-500'
-                }
-              />
-            }
-            type='text'
-            size='middle'
-          />
+          <Tooltip title='更多筛选' >
+            <Button
+              icon={
+                isEmpty(selectedTags) ? <FilterOutlined className='text-neutral-500' /> : <FilterTwoTone />
+              }
+              type='text'
+              size='middle'
+            />
+          </Tooltip>
         </Popover>
       </div>
     </>

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

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Dropdown, Input, Button, Tag, Popover, Form, Tooltip } from 'antd';
+import { Dropdown, Input, Button, Tag, Popover, Form, Tooltip, Spin } from 'antd';
 import { CloseCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
-import { fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, fetchConversationItemTop, postConversationTags, deleteConversationTags } from '@/actions/ConversationActions';
+import { fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, fetchConversationItemTop, postConversationTags, deleteConversationTags, fetchCleanUnreadMsgCount } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 // import ConversationsNewItem from './ConversationsNewItem';
 import { flush, isEmpty, isNotEmpty, stringToColour, TagColorStyle } from '@/utils/commons';
@@ -26,6 +26,14 @@ const OrderSignEmoji = ({ item }) => (
 const NewTagForm = ({onSubmit,...props}) => {
   const [form] = Form.useForm();
   const [subLoding, setSubLoding] = useState(false);
+
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus()
+
+    return () => {}
+  }, [])
+
   const onFinish = async (values) => {
     // console.log('Received values of form[new_tag]: ', values);
     setSubLoding(true);
@@ -43,7 +51,7 @@ const NewTagForm = ({onSubmit,...props}) => {
       initialValues={{}}
       onFinish={onFinish}>
       <Form.Item name={'tag_label'} rules={[{ required: true, message: '请输入标签名' }]}>
-        <Input placeholder='新建并设置'  />
+        <Input placeholder='新建并设置' ref={inputRef} />
       </Form.Item>
       <Form.Item>
         <Button type='primary' htmlType='submit' loading={subLoding} >
@@ -67,9 +75,13 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
 
   const setClosedConversationList = useConversationStore((state) => state.setClosedConversationList);
 
+  const [currentHandleChat, setCurrentHandleChat] = useState({});
+  const [handleLoading, setHandleLoading] = useState(false);
+
   const itemTagsKeys = (item.tags || []).map(t => t.key);
   const [tags, addTag] = useConversationStore(state => [state.tags, state.addTag]);
   const handleConversationItemClose = async (item) => {
+    setHandleLoading(true);
     await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
     delConversationitem(item);
     if (String(order_sn) === String(item.coli_sn)) {
@@ -77,22 +89,44 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
     }
     const _clist = await fetchConversationsSearch({ opisn: userId, session_enable: 0 });
     setClosedConversationList(_clist);
+    setCurrentHandleChat({});
+    setHandleLoading(false);
   };
 
   const handleConversationItemUnread = async (item) => {
-    await fetchConversationItemUnread({ conversationid: item.sn });
+    setHandleLoading(true);
+    if (item.unread_msg_count < 999) {
+      await fetchConversationItemUnread({ conversationid: item.sn });
+    } else {
+      await fetchCleanUnreadMsgCount({ opisn: item.opi_sn, conversationid: item.sn });
+    }
     await refreshConversationList(item.lasttime);
     setListUpdateFlag(Math.random());
+    setCurrentHandleChat({});
+    setHandleLoading(false);
   }
 
   const handleConversationItemTop = async (item) => {
+    setHandleLoading(true);
     await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === 0 ? 1 : 0 });
     await refreshConversationList(item.lasttime);
     setListUpdateFlag(Math.random());
+    setCurrentHandleChat({});
+    setHandleLoading(false);
+  }
+
+  const handleConversationItemMuted = async (item) => {
+    setHandleLoading(true);
+    await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === -1 ? 0 : -1 });
+    await refreshConversationList(item.lasttime);
+    setListUpdateFlag(Math.random());
+    setCurrentHandleChat({});
+    setHandleLoading(false);
   }
 
   const handleConversationItemTags = async (item, tagKey, tagLabel) => {
     const _tags = (item.tags || []).map(t => t.key);
+    setHandleLoading(true);
     if (isNotEmpty(tagKey) && _tags.includes(Number(tagKey))) {
       await deleteConversationTags({ conversationid: item.sn, tag_id: tagKey, opisn: userId })
     } else {
@@ -109,12 +143,17 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
     await refreshConversationList(item.lasttime);
     setListUpdateFlag(Math.random());
     setContextMenuOpen(false);
+    setCurrentHandleChat({});
+    setHandleLoading(false);
   }
 
   const [contextMenuOpen, setContextMenuOpen] = useState(false);
-  const handleContextMenuOpenChange = (nextOpen, info) => {
+  const handleContextMenuOpenChange = (nextOpen, info, item) => {
     if (info.source === 'trigger' || nextOpen) {
       setContextMenuOpen(nextOpen);
+      setCurrentHandleChat(nextOpen ? item : {})
+    } else {
+      // setCurrentHandleChat({});
     }
   };
 
@@ -128,8 +167,9 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
   }, [contextMenuOpen])
 
   const RenderLastMsg = (msg) => {
+    const readFromMsg = msg?.originText || msg?.text || '';
     // const _text = isEmpty(msg) ? '' : msg.type === 'text' ? msg.text.body : `[${(msg?.type || '').toUpperCase()}]`;
-    const _text = isEmpty(msg) ? '' : (whatsappMsgTypeMapped?.[msg.type]?.renderForReply(msg) || {})?.message
+    const _text = isEmpty(msg?.type) ? '' : ((whatsappMsgTypeMapped?.[msg.type]?.renderForReply(msg) || {})?.message || readFromMsg)
     return (
       <>{_text}</>
     );
@@ -143,11 +183,12 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
         trigger={['contextMenu']}
         overlayClassName='z-[998]'
         open={contextMenuOpen}
-        onOpenChange={handleContextMenuOpenChange}
+        onOpenChange={(nextOpen, info) => handleContextMenuOpenChange(nextOpen, info, item)}
         menu={{
           items: [
-            item.top_state === 1 ? { label: '取消置顶', key: 'top' } : { label: '置顶会话', key: 'top' },
-            { label: '标记为未读', key: 'unread' },
+            { label: item.top_state === 1 ? '取消置顶' : '置顶会话', key: 'top' },
+            { label: item.unread_msg_count > 998 ? '标为已读' : '标记为未读', key: 'unread' },
+            // { label: item.top_state === -1 ? '取消静音' : '设为静音', key: 'mute' },
             {
               label: '设置标签',
               key: 'tags',
@@ -187,8 +228,9 @@ 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,
@@ -205,14 +247,17 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
             }
             switch (key) {
               case 'top':
-                setContextMenuOpen(false)
-                return handleConversationItemTop(item)
+                setContextMenuOpen(false);
+                return handleConversationItemTop(item);
+              case 'mute':
+                setContextMenuOpen(false);
+                return handleConversationItemMuted(item);
               case 'unread':
-                setContextMenuOpen(false)
-                return handleConversationItemUnread(item)
+                setContextMenuOpen(false);
+                return handleConversationItemUnread(item);
               case 'close':
-                setContextMenuOpen(false)
-                return handleConversationItemClose(item)
+                setContextMenuOpen(false);
+                return handleConversationItemClose(item);
               case 'edit0':
                 setOpenTags([])
                 setEditingChat({ ...item, is_new: false })
@@ -236,16 +281,21 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
               : item.top_state === 1
               ? 'bg-stone-100'
               : '',
+            'hover:bg-slate-50',
+            (item.sn) === (currentHandleChat?.sn) ? ' bg-slate-50 text-slate-500' : '',
             // String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
           ].join(' ')}>
           {/* <div className='pl-4 pt-1 text-xs text-right'>
             {tags.map((tag) => <Tag color={tag.color} key={tag.value}>{tag.label}</Tag>)}
           </div> */}
+          <Spin spinning={(item.sn) === (currentHandleChat?.sn) && (props.conversationsListLoading || handleLoading)} size='small'>
           <ChatItem
             {...item}
             key={item.sn}
             id={item.sn}
-            letterItem={{ id: item.show_default, letter: (item?.show_default || '').split("@")[0].slice(0, 5) }}
+            letterItem={ item.session_type === 1 ? void 0 : { id: item.show_default, letter: (item?.show_default || '').split("@")[0].slice(0, 5) }}
+            avatar={ item.session_type === 1 ? 'https://hiana-crm.oss-accelerate.aliyuncs.com/WAMedia/02ab0228-4c3c-4834-ac73-a6dfcdf81938.png' : void 0}
+            avatarSize={'small'}
             alt={item.whatsapp_name}
             title={
               <span>
@@ -257,13 +307,13 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
             }
             // subtitle={item.coli_id}
             subtitle={
-              <div>
+              <>
                 {/* <ReadIcon /> */}
                 {/* <DeliverIcon /> */}
                 {/* <SentIcon /> */}
                 {/* <span>{item.coli_id}</span> */}
                 {/* <span><ReadIcon />最后一条消息</span> */}
-                <span className='text-sm'>
+                <span className='text-xs'>
                   <RenderLastMsg {...item?.last_message} />
                 </span>
                 <div className='text-sm'>
@@ -275,11 +325,13 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
                   ))}
                   {/* <span title={'附加备注'}>附加备注</span> */}
                 </div>
-              </div>
+              </>
             }
             date={item.lasttime || item.last_received_time || item.last_send_time}
             dateString='' // 为了覆盖: 其他客户端发送的失败消息, 推送到此处产生新会话, 但是dataString是长字符串
             unread={item.unread_msg_count > 99 ? 0 : item.unread_msg_count}
+            muted={item.top_state === -1}
+            showMute={item.top_state === -1}
             // className={[
             //   String(item.sn) === String(currentConversation.sn) ? '__active text-primary  bg-whatsapp-bg' : '',
             //   String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
@@ -288,10 +340,10 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
             statusText={
               <ChannelLogo
                 channel={flush([
-                  item?.channels?.phone_number ? 'phone' : null,
+                  item?.channels?.phone_number ? 'waba' : null,
                   item?.channels?.email ? 'email' : null,
                   item?.channels?.whatsapp_phone_number ? 'waba' : null,
-                  item?.last_message?.type === 'email' ? 'email' : null,
+                  item?.last_message?.source || null, // wai, WABA, email
                 ])}
               />
             }
@@ -302,6 +354,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
               // () => <span key={'tag'} className='self-end>💎💴❤👑💼🤝💤💔💨✅🕳❓❔❇✳❎🚫❌🎈🎊🎁📜</span>,
             ]}
           />
+          </Spin>
         </div>
       </Dropdown>
     </>

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { App, Modal, Button, Table } from 'antd'
+import { App, Modal, Button, Table, Form, Row, Col, Input, Checkbox } from 'antd'
 import { ApiOutlined } from '@ant-design/icons'
 import { isEmpty, cloneDeep } from '@/utils/commons'
 import { fetchJSON } from '@/utils/request'
@@ -9,12 +9,17 @@ import dayjs from 'dayjs'
 import useAuthStore from '@/stores/AuthStore'
 import { fetchEmailBindOrderAction } from '@/actions/EmailActions'
 
-const fetchOrderList = async (params) => {
+const fetchMyOrderList = async (params) => {
   const { errcode, result } = await fetchJSON(`${API_HOST}/getdvancedwlorder`, params)
   return errcode !== 0 ? [] : result
 }
+const fetchHTOrderList = async (params) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/query_order`, params)
+  return errcode !== 0 ? [] : result
+}
 
-export const EmailBindFormModal = ({ mai_sn, conversationid, userId, onBoundSuccess, ...props }) => {
+export const EmailBindFormModal = ({ mai_sn, conversationid, userId, coliID, onBoundSuccess, ...props }) => {
+  const [form] = Form.useForm()
   const [open, setOpen] = useState(false)
 
   const { userId: loginUserId } = useAuthStore((state) => state.loginUser)
@@ -28,7 +33,7 @@ export const EmailBindFormModal = ({ mai_sn, conversationid, userId, onBoundSucc
     const copyObject = cloneDeep(values)
     delete copyObject.type
     const allEmpty = Object.values(copyObject).every((val) => {
-      return val === null || val === '' || val === undefined
+      return val === null || String(val).trim() === '' || val === undefined
     })
     if (allEmpty) {
       notification.warning({
@@ -39,12 +44,14 @@ export const EmailBindFormModal = ({ mai_sn, conversationid, userId, onBoundSucc
       })
       return false
     }
-    values.opisn = loginUserId
+    // values.opisn = loginUserId
+    values.sourcetype = values.is_biz ? '227002' : '227001'
+    delete values.is_biz
     setLoading(false)
     setSearchLoading(true)
     setSearchResult([])
-    const result = await fetchOrderList(values)
-    setSearchResult(result)
+    const result = await fetchHTOrderList(values)
+    setSearchResult(result.map(ele => ({...ele, sourcetype: values.sourcetype})))
     setSearchLoading(false)
   }
 
@@ -76,40 +83,58 @@ export const EmailBindFormModal = ({ mai_sn, conversationid, userId, onBoundSucc
       width: 222,
     },
     {
-      title: '客人姓名',
-      key: 'coli_guest',
-      dataIndex: 'coli_guest',
-      render: (text, record) => {
-        let regularText = ''
-        if (record.buytime > 0) regularText = '(R' + record.buytime + ')'
-        return text + regularText
-      },
+      title: '顾问',
+      key: 'OperatorName',
+      dataIndex: 'OperatorName',
+      width: 100,
     },
     {
-      title: '出发日期',
-      key: 'COLI_OrderStartDate',
-      dataIndex: 'COLI_OrderStartDate',
-      width: 120,
-      hidden: false,
-      sortDirections: ['ascend', 'descend'],
-      sorter: (a, b) => {
-        const datejsA = isEmpty(a.COLI_OrderStartDate) ? 0 : new dayjs(a.COLI_OrderStartDate).valueOf()
-        const datejsB = isEmpty(b.COLI_OrderStartDate) ? 0 : new dayjs(b.COLI_OrderStartDate).valueOf()
-        return datejsA - datejsB
-      },
+      title: '分配时间',
+      key: 'COLI_AssignDate',
+      dataIndex: 'COLI_AssignDate',
+      width: 100,
     },
     {
-      title: '附加信息',
-      ellipsis: true,
-      key: 'COLI_Introduction',
-      dataIndex: 'COLI_Introduction',
+      title: '天数',
+      key: 'COLI_Days',
+      dataIndex: 'COLI_Days',
+      width: 100,
     },
+    // {
+    //   title: '客人姓名',
+    //   key: 'coli_guest',
+    //   dataIndex: 'coli_guest',
+    //   render: (text, record) => {
+    //     let regularText = ''
+    //     if (record.buytime > 0) regularText = '(R' + record.buytime + ')'
+    //     return text + regularText
+    //   },
+    // },
+    // {
+    //   title: '出发日期',
+    //   key: 'COLI_OrderStartDate',
+    //   dataIndex: 'COLI_OrderStartDate',
+    //   width: 120,
+    //   hidden: false,
+    //   sortDirections: ['ascend', 'descend'],
+    //   sorter: (a, b) => {
+    //     const datejsA = isEmpty(a.COLI_OrderStartDate) ? 0 : new dayjs(a.COLI_OrderStartDate).valueOf()
+    //     const datejsB = isEmpty(b.COLI_OrderStartDate) ? 0 : new dayjs(b.COLI_OrderStartDate).valueOf()
+    //     return datejsA - datejsB
+    //   },
+    // },
+    // {
+    //   title: '附加信息',
+    //   ellipsis: true,
+    //   key: 'COLI_Introduction',
+    //   dataIndex: 'COLI_Introduction',
+    // },
     {
       title: '',
       key: 'action',
       width: 150,
       render: (_, record) => (
-        <Button type={'text'} className='text-primary' onClick={() => handleBindOrder({ coli_sn: record.COLI_SN, coli_id: record.COLI_ID })}>
+        <Button type={'text'} className='text-primary' onClick={() => handleBindOrder({ coli_sn: record.COLI_SN, coli_id: record.COLI_ID, sourcetype: record.sourcetype })}>
           关联此订单
         </Button>
       ),
@@ -131,9 +156,31 @@ export const EmailBindFormModal = ({ mai_sn, conversationid, userId, onBoundSucc
         onCancel={() => {
           setOpen(false)
         }}
-        destroyOnClose>
-        <AdvanceSearchForm onSubmit={onSearchOrder} loading={searchLoading} />
-        <Table key={'advanceOrderTable'} loading={loading} dataSource={searchResult} columns={searchResultColumns} pagination={searchResult.length <= 10 ? false : paginationProps} />
+        destroyOnHidden>
+        {/* <AdvanceSearchForm onSubmit={onSearchOrder} loading={searchLoading} /> */}
+        <Form
+          layout={'inline'}
+          form={form}
+          initialValues={{
+            orderLabel: '',
+            orderStatus: '',
+            remindState: '',
+            // ...initialValues,
+          }}
+          onFinish={onSearchOrder}>
+              <Form.Item label='订单号' name='coli_id' initialValue={coliID} rules={[{ required: true, message: '请输入订单号' }]}>
+                <Input placeholder='订单号' allowClear />
+              </Form.Item>
+              <Form.Item name='is_biz' className='' valuePropName='checked'>
+                <Checkbox>商务订单</Checkbox>
+              </Form.Item>
+            <div style={{ flex: '0 1 64px' }} className='flex justify-between'>
+              <Button type='primary' htmlType='submit' loading={searchLoading}>
+                搜索
+              </Button>
+            </div>
+        </Form>
+        <Table key={'advanceOrderTable'} loading={loading} dataSource={searchResult} columns={searchResultColumns} pagination={searchResult.length <= 10 ? false : paginationProps} rowKey={'COLI_SN'} />
       </Modal>
     </>
   )

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

@@ -0,0 +1,146 @@
+import { POPUP_FEATURES } from '@/config'
+import React, { useState, useEffect, useRef } from 'react'
+
+const EmailContent = ({ id, content: MailContent, className='', ...props }) => {
+  const [iframeHeight, setIframeHeight] = useState(5000) // Initial height
+  const [content, setContent] = useState(MailContent)
+  const iframeRef = useRef(null)
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    setContent(MailContent)
+  }, [MailContent])
+
+  const setIframeContent = (iframe, content) => {
+    if (!iframe || !iframe.contentDocument) {
+      console.error('Iframe not loaded or contentDocument is null')
+      return
+    }
+
+    const doc = iframe.contentDocument
+    doc.open()
+    // doc.write(content)
+    doc.write(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <style>
+            body  {
+              margin: 0;
+              padding: 0;
+              /*overflow-y: hidden;*/
+              width: 900px;
+              max-width: 100%;
+            }
+            img {
+              max-width: 90%;
+              height: auto;
+              object-fit: contain;
+            }
+            img:not(a img){ cursor: pointer;}
+            </style>
+        </head>
+        <body>
+            ${content}
+        </body>
+        </html>
+    `);
+    doc.close()
+  }
+
+  const calculateHeight = () => {
+    try {
+      if (iframeRef.current && iframeRef.current.contentDocument) {
+        const doc = iframeRef.current.contentDocument
+        const body = doc.body
+
+        if (body) {
+          try {
+            const links = doc.querySelectorAll('a')
+            links.forEach((link) => {
+              link.setAttribute('target', '_blank')
+            })
+            const imgs = doc.querySelectorAll('img:not(a img)')
+            imgs.forEach((img) => {
+              // open img in new tab
+              img.addEventListener('click', (e) => {
+                // e.preventDefault()
+                img.style.cursor = 'pointer'
+                window.open(img.src, img.src, POPUP_FEATURES)
+              })
+            })
+          } catch (e) {
+            // console.error('Could not access iframe content due to Same-Origin Policy or other error:', e)
+          }
+          requestAnimationFrame(() => {
+            const newHeight = Math.max(body.scrollHeight, body.offsetHeight, body.clientHeight)
+
+            // console.log('body.scrollHeight: ', body.scrollHeight)
+            // console.log('body.offsetHeight: ', body.offsetHeight)
+            // console.log('body.clientHeight: ', body.clientHeight)
+
+            const addMore = Math.max(Math.ceil(newHeight * 0.05), 120)
+            // console.log('Calculated height:', newHeight, addMore)
+            setIframeHeight(newHeight + addMore)
+          })
+          return
+        } else {
+          console.warn('iframe body is null or undefined')
+        }
+      } else {
+        console.warn('iframeRef.current or contentDocument is null')
+      }
+    } catch (error) {
+      console.error('Error calculating height:', error)
+    }
+    // setIframeHeight(200)
+  }
+
+  useEffect(() => {
+    const handleLoad = () => {
+      calculateHeight()
+    }
+
+    const currentIframe = iframeRef.current
+
+    if (currentIframe) {
+      currentIframe.addEventListener('load', handleLoad)
+      setIframeContent(currentIframe, content)
+    }
+
+    return () => {
+      if (currentIframe) {
+        currentIframe.removeEventListener('load', handleLoad)
+      }
+    }
+  }, [content])
+
+  // useEffect(() => {
+  //     if(iframeRef.current){
+  //         setIframeContent(iframeRef.current, content);
+  //         calculateHeight();
+  //     }
+  // }, [content])
+
+  return (
+    <div ref={containerRef} className={`space-y-4 w-full ${className}`}>
+      <div className='w-full relative pt-2'>
+        <iframe
+          key={id}
+          ref={iframeRef}
+          height={iframeHeight}
+          style={{
+            width: '100%',
+            height: `${iframeHeight}px`,
+            // border: '1px solid #e5e7eb',
+            border: 'none',
+            display: 'block',
+          }}
+          sandbox='allow-scripts allow-same-origin allow-popups'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default EmailContent

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

@@ -4,16 +4,19 @@ import { LoadingOutlined, ApiOutlined } from '@ant-design/icons';
 import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
 import { isEmpty, TagColorStyle } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
-import DnDModal from '@/components/DndModal'
+import DnDModal from '@/components/DnDModal'
 import useStyleStore from '@/stores/StyleStore'
 import { useEmailDetail,  } from '@/hooks/useEmail';
 import { EMAIL_ATTA_HOST } from '@/config';
 import EmailBindFormModal from './EmailBind';
+import EmailDetailInline from './EmailDetailInline';
+import EmailContent from './EmailContent';
 
 /**
  * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
+ * @property {*} disabled - 是否禁用操作: 回复, 转发 等
  */
-const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
+const EmailDetail = ({ open, setOpen, emailMsg={}, disabled=false, ...props }) => {
 
   // console.log('emailDetail', emailMsg);
 
@@ -22,16 +25,16 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
   const { conversationid, actionId, order_opi, coli_sn } = emailMsg
   const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {}
   const mailID = mai_sn || id
-  const [initialPosition, setInitialPosition] = useState({})
-  const [initialSize, setInitialSize] = useState({})
+  // const [initialPosition, setInitialPosition] = useState({})
+  // const [initialSize, setInitialSize] = useState({})
   function onHandleMove(e) {
     const { top, left, width, height } = e
-    setInitialPosition({ top, left })
+    props?.setInitialPosition({ top, left })
   }
   function onHandleResize(e) {
     const { top, left, width, height } = e
-    setInitialPosition({ top, left })
-    setInitialSize({ width, height })
+    props?.setInitialPosition({ top, left })
+    props?.setInitialSize({ width, height })
   }
 
   const [action, setAction] = useState('')
@@ -48,7 +51,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
 
   const [mobile] = useStyleStore((state) => [state.mobile])
 
-  const { loading, mailData, postEmailResend } = useEmailDetail(mailID)
+  const { loading, mailData, orderDetail, postEmailResend } = useEmailDetail(mailID)
   const [showBindBtn, setShowBindBtn] = useState(false);
   useEffect(() => {
     setShowBindBtn(isEmpty(mailData.info?.MAI_COLI_SN))
@@ -77,6 +80,7 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
    * * 已保存: []
    * * 已发送: 回复, 转发
    * * 失败: 重发
+   * todo: disabled 不显示
    */
   const ActionBtns = ({className, ...props}) => {
     const { status } = mailData.info
@@ -139,76 +143,28 @@ const EmailDetail = ({ open, setOpen, emailMsg={}, ...props }) => {
             {mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.email?.subject}
           </>
         }
-        initial={{ top: 74, left: 324 }}
+        initial={{ width: props.initialSize?.width || (window.innerWidth - 740), height: props.initialSize?.height || (window.innerHeight - 100), left: props.initialPosition?.left || (300 + 24), top: props.initialPosition?.top || 74 }}
         onMove={onHandleMove}
         onResize={onHandleResize}
         footer={<ActionBtns className='w-full !justify-start' />}>
-        <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
-          <div className=' font-bold'>{mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}</div>
-
-          <div>
-            <div className={['flex flex-wrap justify-end', window.innerWidth < 600 ? 'flex-col' : 'flex-row '].join(' ')}>
-              <div className=' grow shrink basis-0 flex flex-wrap gap-2 mb-2 items-center'>
-                <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From, true)}>
-                  {(mailData.info?.MAI_From || '').substring(0, 1)}
-                </Avatar>
-                <div className=' flex flex-col '>
-                  {/* <span className=' font-bold text-base'>{mailData.info?.fromName}</span> */}
-                  <span className='text-neutral-500 text-wrap break-words break-all '>{mailData.info?.MAI_From}</span>
-                </div>
-              </div>
-              <div className=' shrink-0 flex flex-col justify-start gap-1 items-end'>
-                <ActionBtns />
-                <div className='text-xs '>{mailData.info?.MAI_SendDate || emailMsg.localDate}</div>
-              </div>
-            </div>
-            <div className='text-sm'>
-              <span className='text-neutral-500 pr-2'>收件人:</span>
-              {mailData.info?.MAI_To}
-            </div>
-            {mailData.info?.cc && (
-              <div className='text-sm'>
-                <span className='text-neutral-500 pr-2'>抄送:</span>
-                {mailData.info.cc}
-              </div>
-            )}
-            {mailData.info?.bcc && (
-              <div className='text-sm'>
-                <span className='text-neutral-500 pr-2'>密送:</span>
-                {mailData.info.bcc}
-              </div>
-            )}
-            {mailData.attachments.length > 0 && (
-              <div className='mt-2 *:ml-2'>
-                <span>共{mailData.attachments.length}个附件</span>
-                <div className='flex flex-wrap gap-2'>
-                {mailData.attachments.map((atta) => (
-                  <a href={`${EMAIL_ATTA_HOST}${atta.ATI_ServerFile}`} key={atta.ATI_SN} target='_blank' rel='noreferrer'>
-                    {atta.ATI_Name}
-                  </a>
-                ))}
-                </div>
-              </div>
-            )}
-            <Divider className='my-2' />
-            <div className='mt-2 whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
-          </div>
-        </div>
+          <EmailDetailInline { ...{ mailData, emailMsg, loading, mailID } } />
       </DnDModal>
-      <EmailEditorPopup
+      {/* <EmailEditorPopup
         open={openEmailEditor}
         setOpen={setOpenEmailEditor}
         fromEmail={fromEmail}
         fromUser={mailData.info?.MAI_OPI_SN || order_opi}
         fromOrder={mailData.info?.MAI_COLI_SN || coli_sn}
         conversationid={conversationid}
+        oid={orderDetail.order_no}
+        customerDetail={orderDetail.customerDetail}
         // emailMsg={ReferEmailMsg}
         quoteid={mailID}
-        initial={{ ...initialPosition, ...initialSize }}
+        initial={{ ...props.initialPosition, ...props.initialSize }}
         mailData={mailData}
         action={action}
-        key={`email-detail-inner-${action}-popup_${mailID}`}
-      />
+        key={`email-detail-inner-${action}_${mailID}`}
+      /> */}
     </>
   )
 }

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

@@ -0,0 +1,344 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { App, Button, Divider, Avatar, List, Flex, Typography, Tooltip, Empty } from 'antd'
+import { LoadingOutlined, ApiOutlined, FilePdfOutlined, FileOutlined, FileWordOutlined, FileExcelOutlined, FileJpgOutlined, FileImageOutlined, FileTextOutlined, FileGifOutlined, GlobalOutlined, FileZipOutlined, DeleteOutlined, ExpandOutlined } from '@ant-design/icons'
+import { EditIcon, MailCheckIcon, ReplyAllIcon, ReplyIcon, ResendIcon, ShareForwardIcon, SendPlaneFillIcon, InboxIcon } from '@/components/Icons'
+import { isEmpty, TagColorStyle } from '@/utils/commons'
+import EmailEditorPopup from '../Input/EmailEditorPopup'
+import DnDModal from '@/components/DnDModal'
+import useStyleStore from '@/stores/StyleStore'
+import { openPopup, useEmailDetail, } from '@/hooks/useEmail'
+import { EMAIL_ATTA_HOST, POPUP_FEATURES } from '@/config'
+import EmailBindFormModal from './EmailBind'
+import EmailContent from './EmailContent'
+
+const extTypeMapped = {
+  txt: { icon: FileTextOutlined },
+  zip: { icon: FileZipOutlined, color: '#ffe78f' },
+  pdf: { icon: FilePdfOutlined, color: '#ad0b00' },
+  doc: { icon: FileWordOutlined, color: '#103f91' },
+  docx: { icon: FileWordOutlined, color: '#103f91' },
+  rtf: { icon: FileWordOutlined, color: '#103f91' },
+  xls: { icon: FileExcelOutlined, color: '#0c7d0c' },
+  xlsx: { icon: FileExcelOutlined, color: '#0c7d0c' },
+  jpg: { icon: FileImageOutlined, color: '#1985ff' },
+  jpeg: { icon: FileImageOutlined, color: '#1985ff' },
+  png: { icon: FileImageOutlined, color: '#1985ff' },
+  gif: { icon: FileGifOutlined, color: '#1985ff' },
+  html: { icon: GlobalOutlined, color: '#1985ff' },
+  htm: { icon: GlobalOutlined, color: '#1985ff' },
+  default: { icon: FileOutlined }, // rtf bmp
+}
+
+const FileTypeIcon = ({fileName}) => {
+  const ext = fileName.split('.').pop() || 'default';
+  const Com = extTypeMapped[ext]?.icon || FileOutlined;
+  const color = extTypeMapped[ext]?.color || 'inherit';
+  return <Com style={{ color: color }} size={36} />;
+};
+
+/**
+ * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
+ */
+const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, size, autoMark = false, ...props }) => {
+  // console.log('emailDetail', emailMsg);
+  const componentRef = useRef(null);
+  const [compactBtn, setCompactBtn] = useState(size==='small');
+
+  useEffect(() => {
+    if (componentRef.current) {
+      // console.log(componentRef.current.getBoundingClientRect().width);
+      setCompactBtn(componentRef.current.offsetWidth < 800);
+    }
+    return () => {}
+  }, [])
+
+  // const NEW_EMAIL_CONFIG = useMemo(() => {
+  //   return ['new', 'edit', 'reply', 'replyall', 'forward'].reduce((a, action) => ({...a, [`${action}-${mailID || 0}`]: {
+  //     url: `/email/${action}/${mailID || 0}`,
+  //     name: `${action}-${mailID || 0}`,
+  //     features: POPUP_FEATURES,
+  //   }}), {});
+  // }, [mailID]);
+
+  const { notification, message } = App.useApp()
+
+  const { conversationid, actionId, order_opi, coli_sn } = emailMsg
+  const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {}
+  // const mailID = mai_sn || id
+
+  // const [action, setAction] = useState('')
+
+  // const [openEmailEditor, setOpenEmailEditor] = useState(false)
+  // const [fromEmail, setFromEmail] = useState('')
+  // useEffect(() => {
+  //   setOpenEmailEditor(false)
+
+  //   return () => {}
+  // }, [mailID])
+
+  const onOpenEditor = (msgOrigin, action='reply') => {
+    openPopup(`/email/${action}/${mailID || 0}`, `${action}-${mailID || 0}`)
+    if (typeof props.onOpenEditor === 'function') {
+      props.onOpenEditor(msgOrigin, action);
+    } else {
+      // const { from, to } = msgOrigin
+      // setOpenEmailEditor(true)
+      // setFromEmail(action === 'edit' ? from : to)
+      // setAction(action)
+      // // setOpen(false)
+    }
+  }
+
+  const { loading, mailData, orderDetail, postEmailResend } = useEmailDetail(mailID, null, false, autoMark)
+  const [showBindBtn, setShowBindBtn] = useState(false)
+  useEffect(() => {
+    setShowBindBtn(mailID ? isEmpty(mailData.info?.MAI_COLI_SN) : false)
+    return () => {}
+  }, [mailID, mailData.info?.MAI_COLI_SN])
+
+  const handleView = async () => {
+    openPopup(`/email/view/${mailID || 0}`, `view-${mailID || 0}`, { fullscreen: true })
+  };
+
+  const handleResend = async () => {
+    if (isEmpty(mai_sn)) {
+      return false
+    }
+    try {
+      await postEmailResend({ mai_sn, conversationid, actionId })
+      // setOpen(false)
+    } catch (err) {
+      notification.error({
+        message: '请求失败',
+        description: err.message,
+        placement: 'top',
+        duration: 3,
+      })
+    }
+  }
+
+  const handleDel = async () => {
+    if (isEmpty(mai_sn)) {
+      return false
+    }
+    try {
+      //
+    } catch (err) {
+      notification.error({
+        message: '请求失败',
+        description: err.message,
+        placement: 'top',
+        duration: 3,
+      })
+    }
+  }
+
+  /**
+   * 根据状态, 显示操作
+   * * 已保存: []
+   * * 已发送: 回复, 转发
+   * * 失败: 重发
+   * todo: disabled 不显示
+   */
+  const renderActionBtns = ({ className, ...props }) => {
+    const { status } = mailData.info
+
+    let btns = []
+
+    // const showDoneBtn = mailData.info?.MAI_Direction !== 1 ? true : false
+    // if (showDoneBtn) {
+    //   btns.push(<Button type='text' key={'set-done'} onClick={() => { alert('todo')}} icon={<MailCheckIcon className={'text-yellow-600'} />} size='small'>已处理</Button>)
+    // }
+    // 没有关联订单的邮件`绑定订单`
+    if (showBindBtn) {
+      btns.push(<EmailBindFormModal key={'bind'} onBoundSuccess={() => setShowBindBtn(false)} {...{ conversationid, mai_sn, showBindBtn }} />)
+      btns.push(<Divider key='divider1' type='vertical' className='mx-0' />)
+    }
+
+    switch (status) {
+      case 'accepted':
+        break
+      case 'sent':
+      case '': // 接收的邮件没有发送状态
+        btns.push(
+          <Tooltip key='reply-t' title='回复'>
+          <Button key={'reply'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
+            {compactBtn ? '' : '回复'}
+          </Button>
+          </Tooltip>,
+        )
+        btns.push(
+          <Tooltip key='replyall-t' title='回复全部'>
+            <Button key={'replyall'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'replyall')} size='small' type='text' icon={<ReplyAllIcon className='text-indigo-500' />} >{compactBtn ? '' : '回复全部'}</Button>
+          </Tooltip>,
+        )
+        btns.push(
+          <Tooltip key='forward-t' title='转发'>
+          <Button key={'forward'} onClick={() => onOpenEditor(emailMsg.msgOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>{compactBtn ? '' : '转发'}</Button></Tooltip>,
+        )
+        break
+      case 'failed':
+        btns.push(
+          // <Tooltip key='delete-t' title='删除'>
+          // <Button key={'delete'} danger onClick={() => handleDel()} size='small' type='text' icon={<DeleteOutlined className='text-red-500' />}>{compactBtn ? '' : '删除'}</Button></Tooltip>,
+
+          <Tooltip key='resend-t' title='发送'>
+          <Button key={'resend'} onClick={() => handleResend()} size='small' type='text' icon={<SendPlaneFillIcon className='text-orange-500' />}>{compactBtn ? '' : '发送'}</Button></Tooltip>,
+        )
+        btns.push(
+          <Tooltip key='edit-t' title='编辑'>
+          <Button
+            key={'edit'}
+            onClick={() => onOpenEditor({ ...(emailMsg.msgOrigin || {}), content: mailData.content }, 'edit')}
+            size='small'
+            type='text'
+            icon={<EditIcon className='text-indigo-500' />}>{compactBtn ? '' : '编辑'}</Button></Tooltip>,
+        )
+        break
+      default:
+        break
+    }
+
+    const showFullBtn = variant !== 'full'
+    if (showFullBtn) {
+      btns.push(<Divider key='divider2' type='vertical' className='mx-0' />);
+      btns.push(
+        <Button key={'view'} onClick={() => handleView()} size='small' type='text' icon={<ExpandOutlined className='text-indigo-500' />}>
+          最大化
+        </Button>
+      )
+    }
+
+    return <div className={`flex justify-end items-center gap-1  ${className || ''}`}>{btns}</div>
+  }
+
+  const renderAttaList = ({ list }) => {
+    return (
+      <List
+        dataSource={list}
+        size='small'
+        className='[&_.ant-list-item]:p-1 [&_.ant-list-item]:justify-start'
+        renderItem={(atta) => (
+          <List.Item>
+            <FileTypeIcon fileName={atta.ATI_Name} />
+            <Typography.Text ellipsis={{ tooltip: { title: atta.ATI_Name, placement: 'left' } }} className='text-inherit'>
+              <span key={atta.ATI_SN} onClick={() => openPopup(`${EMAIL_ATTA_HOST}${atta.ATI_ServerFile}`, atta.ATI_SN)} size='small' className='text-blue-500 cursor-pointer'>
+                {atta.ATI_Name}
+              </span>
+            </Typography.Text>
+          </List.Item>
+        )}
+      />
+    )
+  };
+
+  const variantCls = (variant) => {
+    switch (variant) {
+      case 'outline':
+        return 'h-full border-y-0 border-x border-solid border-neutral-200'
+      case 'full':
+        return 'h-[calc(100dvh-16px)]'
+      default:
+        return 'h-full'
+    }
+  }
+
+  return mailID ? (
+    <>
+      <div ref={componentRef} className={`email-container flex flex-col gap-0 divide-y divide-neutral-200 divide-solid *:p-2 *:border-0 bg-white ${variantCls(variant)}`}>
+        <div className=''>
+          <div className='flex flex-wrap justify-between'>
+            <span className={(mailData.info?.MAI_ReadState || 0) > 0 ? '' : ' font-bold '}>
+              {loading ? <LoadingOutlined className='mr-1' /> : null}
+              {mailData.info?.MAI_Subject || emailMsg?.msgOrigin?.subject}
+            </span>
+            {/* <ActionBtns key='actions' className={'ml-auto'} /> */}
+            {renderActionBtns({ className: 'ml-auto'})}
+          </div>
+          <Divider className='my-2' />
+          <div className={['flex flex-wrap justify-end', window.innerWidth < 800 ? 'flex-col' : 'flex-row '].join(' ')}>
+            <div className=' flex-auto basis-0 flex flex-wrap gap-2 mb-2 items-center'>
+              <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From, true)}>
+                {(mailData.info?.MAI_From || '').substring(0, 1)}
+              </Avatar>
+              <div className=' flex flex-col '>
+                {/* <span className=' font-bold text-base'>{mailData.info?.fromName}</span> */}
+                <span className='text-neutral-500 text-wrap break-words break-all '>{mailData.info?.MAI_From}</span>
+              </div>
+            </div>
+            <div className=' ml-auto flex flex-col justify-start gap-1 items-end'>
+              {/* <ActionBtns /> */}
+              <div className='text-xs '>{mailData.info?.MAI_SendDate || emailMsg.localDate}</div>
+            </div>
+          </div>
+          <div className='text-sm'>
+            <span className='text-neutral-500 pr-2 w-14 inline-block text-justify' style={{ textAlignLast: 'justify' }}>
+              收件人
+            </span>
+            {mailData.info?.MAI_To}
+          </div>
+          {mailData.info?.MAI_CS && (
+            <div className='text-sm'>
+              <span className='text-neutral-500 pr-2 w-12 inline-block text-justify' style={{ textAlignLast: 'justify' }}>
+                抄送
+              </span>
+              {mailData.info.MAI_CS}
+            </div>
+          )}
+          {mailData.info?.bcc && (
+            <div className='text-sm'>
+              <span className='text-neutral-500 pr-2 w-12 inline-block text-justify' style={{ textAlignLast: 'justify' }}>
+                密送
+              </span>
+              {mailData.info.bcc}
+            </div>
+          )}
+        </div>
+        <div className='overflow-auto'>
+          <Flex className={` divide-gray-200 divide-solid gap-0 ${compactBtn === false ? 'divide-y-0 divide-x' : 'flex-col-reverse divide-x-0 '}`}>
+            {mailData.info?.mailType === 'text/html' ? (
+              <EmailContent content={mailData.content} id={mailID} key={mailID} />
+            ) : (
+              <div className='mt-2 whitespace-pre-wrap flex-auto' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
+            )}
+            {mailData.AttachList.length > 0 && (
+              <div className={`${compactBtn === false ? 'w-48' : 'border-b border-t-0'} overflow-hidden`}>
+                {mailData.attachments.length > 0 && (
+                  <>
+                    <span>&nbsp;附件 ({mailData.attachments.length})</span>
+                    {renderAttaList({ list: mailData.attachments || []})}
+                  </>
+                )}
+                {mailData.insideAttachments.length > 0 && <details>
+                  <summary>
+                    <span className='text-gray-500 italic'>&nbsp;文内附件 ({mailData.insideAttachments.length}) 已在正文显示&nbsp;</span><span className='cursor-pointer underline'>点击展开</span>
+                  </summary>
+                  {renderAttaList({ list: mailData.insideAttachments || []})}
+                </details>}
+              </div>
+            )}
+          </Flex>
+        </div>
+      </div>
+      {/* <EmailEditorPopup
+        open={openEmailEditor}
+        setOpen={setOpenEmailEditor}
+        fromEmail={fromEmail}
+        fromUser={mailData.info?.MAI_OPI_SN || order_opi}
+        fromOrder={mailData.info?.MAI_COLI_SN || coli_sn}
+        conversationid={conversationid}
+        oid={orderDetail.order_no}
+        customerDetail={orderDetail.customerDetail}
+        // emailMsg={ReferEmailMsg}
+        quoteid={mailID}
+        // initial={{ ...initialPosition, ...initialSize }}
+        mailData={void 0}
+        action={action}
+        key={`email-detail-inline-${action}_${mailID}`}
+      /> */}
+    </>
+  ) : (
+    <Empty description={'未打开邮件'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+  )
+}
+export default EmailDetailInline

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

@@ -1,41 +1,13 @@
-import { useEffect, useState } from 'react'
-import { App, Tooltip, Button, FloatButton } from 'antd'
+import { useState } from 'react'
+import { FloatButton } from 'antd'
 import { LoadingOutlined } from '@ant-design/icons'
 import { getEmailFetchAction } from '@/actions/EmailActions'
 import useAuthStore from '@/stores/AuthStore'
-import useConversationStore from '@/stores/ConversationStore'
 import { MailDownloadIcon } from '@/components/Icons'
-import { isEmpty } from '@/utils/commons'
 
 const EmailFetch = ({ ...props }) => {
-  const { notification, message } = App.useApp()
   const { userId, emailList } = useAuthStore((state) => state.loginUser)
 
-  const [globalNotify, clearGlobalNotify] = useConversationStore((state) => [state.globalNotify, state.clearGlobalNotify]);
-  useEffect(() => {
-    if (isEmpty(globalNotify)) {
-      return () => {}
-    }
-    // message.info(globalNotify[0].content, 3)
-    notification.open({
-      key: globalNotify[0].key,
-      message: globalNotify[0].title,
-      description: globalNotify[0].content,
-      duration: 5,
-      placement: 'top',
-      type: globalNotify[0].type,
-      onClick: () => {
-        clearGlobalNotify()
-      },
-    })
-    // setTimeout(() => {
-    //   clearGlobalNotify()
-    // }, 3030)
-
-    return () => {}
-  }, [globalNotify])
-
-
   const [getEmailLoading, setEmailLoading] = useState(false)
   const [fetchingText, setFetchingText] = useState('立即收件')
   const handleGetEmail = async () => {

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

@@ -0,0 +1,145 @@
+import { createContext, useEffect, useState, useRef, useMemo } from 'react'
+import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag, Drawer, Input, Tooltip } from 'antd'
+import { CloseOutlined, DownloadOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs'
+import { InboxIcon, SendPlaneFillIcon, ExpandIcon } from '@/components/Icons'
+import EmailDetailInline from './EmailDetailInline'
+import { debounce, isEmpty } from '@/utils/commons'
+import useConversationStore from '@/stores/ConversationStore';
+
+const EmailListDrawer = ({ showExpandBtn=true, title, list: otherEmailList, currentConversationID, opi_sn, oid, emailItem: clickItem, onOpenEditor, ...props }) => {
+
+  const [, setEmailMsg] = useConversationStore((state) => [state.emailMsg, state.setEmailMsg]);
+
+  const [open, setOpen] = useState(false)
+  const [selectedEmail, setSelectedEmail] = useState({})
+  const searchInputRef = useRef(null)
+  const [dataSource, setDataSource] = useState([])
+  useEffect(() => {
+    setOpen(false);
+    setDataSource(otherEmailList)
+    // setSelectedEmail({ MAI_SN: -1000 });
+
+    return () => {}
+  }, [otherEmailList])
+
+  const onClearSearch = () => {
+    setDataSource(otherEmailList)
+  }
+  const handleSearch = (value) => {
+    if (isEmpty(value)) onClearSearch()
+    const res = otherEmailList.filter((ele) => `${ele.MAI_Subject}${ele.SenderReceiver}`.toLowerCase().includes(value.toLowerCase()))
+    setDataSource(res)
+  }
+
+  const onClickEmailItem = (emailItem) => {
+    const emailMsg = {
+      conversationid: currentConversationID,
+      order_opi: opi_sn,
+      coli_sn: oid,
+      id: emailItem.MAI_SN,
+      MAI_SN: emailItem.MAI_SN,
+      msgOrigin: {
+        from: '',
+        to: '',
+        ...(emailItem?.msgOrigin || {}),
+        id: emailItem.MAI_SN,
+        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
+        subject: emailItem.MAI_Subject,
+      },
+    }
+    console.log('emailItem', emailItem);
+    setSelectedEmail(emailMsg)
+    setEmailMsg(emailMsg);
+  };
+
+  const [pageCurrent, setPageCurrent] = useState(1);
+  const onChangePagination = (page, size) => {
+    setPageCurrent(page)
+  }
+
+  useEffect(() => {
+    if (!isEmpty(clickItem)) {
+      const itemIndex = dataSource.findIndex((ele) => ele.MAI_SN === clickItem.MAI_SN);
+      const page = Math.ceil((itemIndex+1) / 8) || 1;
+      setPageCurrent(page);
+      onClickEmailItem({...clickItem, ...dataSource[itemIndex]});
+      setOpen(true);
+    }
+
+    return () => {}
+  }, [clickItem]);
+
+  return (
+    <>
+      {showExpandBtn ? <Button
+        icon={<ExpandIcon />}
+        type={'primary'}
+        className='ml-2'
+        ghost
+        size='small'
+        onClick={() => {
+          setOpen(true)
+        }}
+      /> : null}
+      <Drawer
+        zIndex={3}
+        mask={false}
+        width={1000}
+        styles={{ header: {} }}
+        title={
+          <>
+            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)} type='text' size='small' className='text-gray-500' />
+            <b>{title || '邮件列表'}</b>
+            <Input.Search
+              className=''
+              ref={searchInputRef}
+              allowClear
+              onClear={onClearSearch}
+              onPressEnter={(e) => {
+                handleSearch(e.target.value)
+                return false
+              }}
+              onSearch={(v, e, { source }) => handleSearch(v)}
+              placeholder={`输入: 标题/发件人, 回车搜索`}
+            />
+            <List
+              dataSource={dataSource}
+              className='h-[30vh] overflow-y-auto'
+              pagination={false}
+              renderItem={(emailItem) => (
+                <List.Item
+                  className={`hover:bg-stone-50 cursor-pointer !py-1 ${selectedEmail.MAI_SN === emailItem.MAI_SN ? 'bg-blue-100 font-bold ' : ''}`}
+                  onClick={() => onClickEmailItem(emailItem)}>
+                  <Flex vertical={false} wrap={false} className='w-full'>
+                    <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>
+                      {/* </Tooltip> */}
+                    </div>
+                    <div className='ml-1 max-w-40'>
+                      <Typography.Text ellipsis={{ tooltip: emailItem.SenderReceiver }}>{emailItem.SenderReceiver.replaceAll('"', '')}</Typography.Text>
+                    </div>
+                    <div className='ml-1 max-w-20'>
+                      <Typography.Text ellipsis={{ tooltip: emailItem.MAI_SendDate }}>{dayjs(emailItem.MAI_SendDate).format('MM-DD HH:mm')}</Typography.Text>
+                    </div>
+                  </Flex>
+                </List.Item>
+              )}
+            />
+          </>
+        }
+        classNames={{ header: '!py-1 !px-2 [&_.ant-drawer-title]:font-normal [&_.ant-list-pagination]:m-0', body: '!p-1 [&_.ant-list-pagination]:ms-1' }}
+        placement='right'
+        closeIcon={null}
+        onClose={() => {
+          setOpen(false)
+        }}
+        open={open}>
+        <EmailDetailInline {...{ mailID: selectedEmail.MAI_SN, emailMsg: selectedEmail, onOpenEditor }} />
+      </Drawer>
+    </>
+  )
+}
+export default EmailListDrawer

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

@@ -69,7 +69,7 @@ const EmailQuotation = ({ sfi_sn, ...props }) => {
         邮件
       </Button>
 
-      <EmailEditorPopup
+      {/* <EmailEditorPopup
         open={editorOpen}
         setOpen={setEditorOpen}
         fromEmail={pickEmail.key}
@@ -83,9 +83,10 @@ const EmailQuotation = ({ sfi_sn, ...props }) => {
         // initial={{ ...initialPosition, ...initialSize }}
         // mailData={mailData}
         draft={draft}
+        // customerDetail={customerDetail}
         action={'new'}
         key={`email-quotation-new-popup_${currentConversation.sn}`}
-      />
+      /> */}
     </>
   )
 }

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

@@ -0,0 +1,14 @@
+import { createContext, useEffect, useState } from 'react'
+import { Drawer } from 'antd'
+import SnippetList from '@/views/accounts/SnippetList'
+import useSnippetStore from '@/stores/SnippetStore'
+
+const GenerateAutoDocDrawer = ({ ...props }) => {
+  const [openSnippetDrawer, closeSnippetDrawer, snippetDrawerOpen] = useSnippetStore((state) => [state.openDrawer, state.closeDrawer, state.drawerOpen])
+  return (
+    <Drawer title='图文集' placement={'top'} size={'large'} onClose={() => closeSnippetDrawer()} open={snippetDrawerOpen}>
+      <SnippetList></SnippetList>
+    </Drawer>
+  )
+}
+export default GenerateAutoDocDrawer

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

@@ -0,0 +1,14 @@
+import { createContext, useEffect, useState } from 'react'
+import { Drawer } from 'antd'
+import { useOrderStore } from '@/stores/OrderStore'
+import GeneratePayment from '@/views/accounts/GeneratePayment'
+
+const GeneratePaymentDrawer = ({ ...props }) => {
+  const [openPaymentDrawer, closePaymentDrawer, paymentDrawerOpen] = useOrderStore((state) => [state.openDrawer, state.closeDrawer, state.drawerOpen])
+  return (
+    <Drawer title='支付链接' placement={'top'} size={'large'} onClose={() => closePaymentDrawer()} open={paymentDrawerOpen}>
+      <GeneratePayment></GeneratePayment>
+    </Drawer>
+  )
+}
+export default GeneratePaymentDrawer

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space } from 'antd';
+import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space,Typography } from 'antd';
 import { FileSearchOutlined, LoadingOutlined } from '@ant-design/icons';
 import { RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'
 import { InboxIcon, SendPlaneFillIcon } from '@/components/Icons';
@@ -13,6 +13,7 @@ import useStyleStore from '@/stores/StyleStore';
 import useAuthStore from '@/stores/AuthStore';
 import { sentMsgTypeMapped } from '@/channel/bubbleMsgUtils';
 import { v4 as uuid } from 'uuid';
+import dayjs from 'dayjs'
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 10;
 
@@ -320,6 +321,9 @@ const MessageListFilter = ({ ...props }) => {
 
     const [openEmailDetail, setOpenEmailDetail] = useState(false);
     const [emailDetail, setEmailDetail] = useState({});
+    const [initialPosition, setInitialPosition] = useState({})
+    const [initialSize, setInitialSize] = useState({})
+
     const onOpenEmail = (email_detail) => {
       setOpenEmailDetail(true);
       setEmailDetail(email_detail);
@@ -337,39 +341,36 @@ const MessageListFilter = ({ ...props }) => {
           renderItem={({ msgtext, ...item }) => (
             <List.Item
               // actions={[item.localDate]}
-              className='cursor-pointer'
+              className='cursor-pointer !py-1'
               onClick={() => {
                 onOpenEmail({ msgtext, ...item });
-                setOpenPopup(false);
+                // setOpenPopup(false);
               }}>
-              <List.Item.Meta
-                avatar={
-                  item.sender === 'me' ? <SendPlaneFillIcon className='text-primary' /> : <InboxIcon className='text-indigo-500' />
-                  // <Avatar size='small' style={CalColorStyle(item.senderName)}>
-                  //    {item.senderName.substring(0, 3)}
-                  //  </Avatar>
-                }
-                title={msgtext?.email?.subject}
-                // description={`To: ${msgtext.to}`}
-                description={
-                  <Flex justify={'space-between'} className='max-w-full overflow-hidden'>
-                    <div className='flex-auto line-clamp-1 break-all pr-2'>{`To: ${msgtext.to}`}</div>
-                    <div className=' basis-32 flex-grow-0 flex-shrink-0'>{item.localDate}</div>
-                  </Flex>
-                }
-              />
-              {msgtext?.email?.abstract}
+              <Flex vertical={false} wrap={false} className='w-full'>
+                <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
+                  {item.sender !== 'me' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
+                  {/* <Tooltip title={emailItem.MAI_Subject}> */}
+                  <Typography.Text>{msgtext?.email?.subject}</Typography.Text>
+                  {/* </Tooltip> */}
+                </div>
+                <div className='ml-1 max-w-40'>
+                  <Typography.Text ellipsis={{ tooltip: msgtext.to }}>{msgtext.to.replaceAll('"', '')}</Typography.Text>
+                </div>
+                <div className='ml-1 max-w-20'>
+                  <Typography.Text ellipsis={{ tooltip: item.localDate }}>{dayjs(item.localDate).format('MM-DD HH:mm')}</Typography.Text>
+                </div>
+              </Flex>
             </List.Item>
           )}
         />
-        <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`email-detail-1-${emailDetail.id}`} />
+        <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`email-detail-1-${emailDetail.id}`} {...{initialPosition, initialSize, setInitialPosition, setInitialSize}} />
       </>
     );
   };
 
   return (
     <>
-      <Popover
+      <Popover zIndex={3}
         // destroyTooltipOnHide
         placement='bottom'
         overlayClassName={[mobile === false ? 'w-2/5' : 'w-full max-h-full', 'max-h-[70%]'].join(' ')}
@@ -389,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/ConversationBind.jsx

@@ -126,7 +126,7 @@ export const ConversationBindFormModal = ({ currentConversationID, userId, onBou
         onCancel={() => {
           setOpen(false);
         }}
-        destroyOnClose>
+        destroyOnHidden>
         <AdvanceSearchForm onSubmit={onSearchOrder} loading={searchLoading} />
         <Table
           key={'advanceOrderTable'}

src/views/Conversations/Online/ConversationsList.jsx

@@ -7,7 +7,7 @@ import ConversationsNewItem from './ConversationsNewItem';
 import { debounce, flush, isEmpty, isNotEmpty, pick } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
-import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions } from "@/stores/OrderStore";
+// import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions } from "@/stores/OrderStore";
 import { useVisibilityState } from '@/hooks/useVisibilityState';
 import ChatListItem from './Components/ChatListItem';
 import ChatListFilter from './Components/ChatListFilter';
@@ -25,14 +25,14 @@ const Conversations = () => {
   const routerReplace = mobile === false ? true : false; // : true;
   const routePrefix = mobile === false ? `/order/chat` : `/m/chat`;
   const { state: orderRow } = useLocation();
-  const { coli_guest_WhatsApp } = orderRow || {};
+  const { coli_guest_WhatsApp, guest_email } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
   const userId = useAuthStore((state) => state.loginUser.userId);
 
   const initialState = useConversationStore((state) => state.initialState);
 
-  const [customerDetail] = useOrderStore((s) => [s.customerDetail])
+  // const [customerDetail] = useOrderStore((s) => [s.customerDetail])
 
   const [currentConversation, setCurrentConversation, updateCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation, state.updateCurrentConversation]);
   const [topList, pageList, conversationsList] = useConversationStore((state) => [state.topList, state.pageList, state.conversationsList]);
@@ -70,6 +70,7 @@ const Conversations = () => {
       olabel: otypeC === 'label' ? otypeV : '',
       ostate: otypeC === 'state' ? otypeV : '',
       intour: otypeC === 'intour' ? otypeV : '',
+      istoday: otypeC === 'istoday' ? otypeV : '',
       session_enable: activeList ? 1 : 0,
       lastpagetime: current ?
         dayjs(current).add(1, 'minutes').format('YYYY-MM-DDTHH:mm:ss')
@@ -159,21 +160,28 @@ const Conversations = () => {
     return () => {};
   }, [conversationsList, topList, pageList, listUpdateFlag, currentConversation.unread_msg_count]);
 
+  let orderChatRefreshing = false;
   useEffect(() => {
-    // console.log('effect get order c');
 
-    if (isEmpty(currentConversation.sn) && order_sn && shouldFetchCList && initialState) {
+    // console.log('first', isEmpty(currentConversation.sn) , order_sn , shouldFetchCList , initialState)
+    // isEmpty(currentConversation.sn) &&
+    if (order_sn && shouldFetchCList && initialState) {
       getOrderConversationList(order_sn)
     }
 
     return () => {}
-  }, [initialState, customerDetail.email])
+  }, [order_sn, shouldFetchCList, initialState])
 
 
   const getOrderConversationList = async (colisn) => {
+    if (orderChatRefreshing !== false) {
+      return false;
+    }
+    orderChatRefreshing = true;
 
     const { whatsapp_phone_number } = switchToC;
     const whatsappID = coli_guest_WhatsApp || whatsapp_phone_number || '';
+    const _email = guest_email || '';
     // if (isEmpty(conversationsList)) {
     //   return false;
     // }
@@ -184,10 +192,10 @@ const Conversations = () => {
 
     // let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${colisn}`);
     // 使用opisn + whatsappID 判断, 解决订单修改whatsappID号码之后获取新会话, 登录账号此处省略
-    if (!isEmpty(whatsappID) || !isEmpty(customerDetail.email)) {
+    if (!isEmpty(whatsappID) || !isEmpty(_email)) {
 
       findCurrentOrderChats = conversationsList.filter(
-        (item) => `${item.coli_sn}` === `${colisn}` && (`${item.whatsapp_phone_number}` === `${whatsappID}` || `${item.channels?.email}` === `${customerDetail.email}`)
+        (item) => `${item.coli_sn}` === `${colisn}` && (`${item.whatsapp_phone_number}` === `${whatsappID}` || `${item.channels?.email}` === `${_email}`)
       )
       findCurrentIndex = isEmpty(findCurrentOrderChats) ? -1 : 0; // findCurrentOrderChats.length-1;
       findCurrent = findCurrentOrderChats[findCurrentIndex];
@@ -197,7 +205,8 @@ const Conversations = () => {
       } else // if (!isEmpty(whatsappID))
         {
           try {
-            const data = await fetchOrderConversationsList({ opisn: userId, colisn: colisn, whatsappid: whatsappID, email: customerDetail.email });
+            setShouldFetchCList(false);
+            const data = await fetchOrderConversationsList({ opisn: userId, colisn: colisn, whatsappid: whatsappID, email: _email });
             if (!isEmpty(data)) {
               addToConversationList(data);
               findCurrentIndex = 0; // data.length-1; // data.lastIndexOf((item) => item.coli_sn === Number(colisn));
@@ -216,6 +225,7 @@ const Conversations = () => {
       findCurrentIndex = conversationsList.findIndex((item) => `${item.coli_sn}` === `${colisn}`);
       findCurrent = conversationsList[findCurrentIndex];
     }
+    orderChatRefreshing = false;
     if (findCurrentIndex >= 0) {
       setCurrentConversation(findCurrent);
       return findCurrent;
@@ -308,23 +318,34 @@ const Conversations = () => {
           // enterButton={'Filter'}
         />
         {/* TODO 这个在完成搜索历史会话后去掉，待讨论查询规则 */}
-        <Tooltip key={'conversation-list'} title={activeList ? '隐藏会话' : '活跃会话'}>
-          <Button onClick={toggleClosedConversationsList} icon={activeList ? <HistoryOutlined className='text-neutral-500' /> : <FireOutlined className=' text-orange-500' />} type='text' />
-        </Tooltip>
-      </div>
-      <ChatListFilter key='chat-list-filter'
+        </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 ? '🗂已隐藏' : '活跃会话'}>
+          <Button onClick={toggleClosedConversationsList} icon={activeList ? '🗂' : '📌'} type='text' />
+        </Tooltip>
+      }
+      {mobile && (
+        <AudioTwoTone className='px-3'
+          onClick={() => {
+            navigate(`/callcenter/call`)
+          }}
+        />
+      )}
+      </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
         {/* {mobile && conversationsListLoading && dataSource.length === 0 ? ( */}
-        {conversationsListLoading && currentLoading ? (
-          <div className='text-center py-2'>
-            <LoadingOutlined className='text-primary ' />
-          </div>
-        ) : null}
 
         <List
           itemLayout='vertical'
@@ -347,6 +368,7 @@ const Conversations = () => {
                 onSwitchConversation,
                 setNewChatModalVisible,
                 setEditingChat,
+                conversationsListLoading,
               }}
             />
           )}

src/views/Conversations/Online/ConversationsNewItem.jsx

@@ -21,7 +21,7 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
   }, []);
 
   useEffect(() => {
-    form.setFieldValue('wa_id', formatPhone);
+    if (isEmpty(initialValues.wa_id)) form.setFieldValue('wa_id', formatPhone.trim());
     return () => {};
   }, [formatPhone]);
 
@@ -38,7 +38,7 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
       layout='horizontal'
       form={form}
       name='form_in_modal'
-      initialValues={{ ...fromCurrent, ...initialValues, wa_id: formatPhone }}
+      initialValues={{ ...fromCurrent, ...initialValues, }}
       onValuesChange={onValuesChange}
       labelCol={{ span: 4 }}
       labelWrap={true}>
@@ -59,7 +59,7 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
       <Form.Item label='WhatsApp' name={'wa_id'} dependencies={['phone_number']}>
         <Input disabled={!initialValues.is_new && isNotEmpty(initialValues.wa_id)} />
       </Form.Item>
-      <Form.Item
+      <Form.Item hidden
         name={'email'}
         label='邮箱'
         validateStatus={contactValidateStatus}
@@ -67,7 +67,7 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
         rules={[{ type: 'email', message: '请输入正确的邮箱地址' }]}>
         <Input disabled={!initialValues.is_new && isNotEmpty(initialValues.email)} />
       </Form.Item>
-      {initialValues.is_current_order && (
+      {/* {initialValues.is_current_order && (
         <>
           <Form.Item name={'coli_id'} label={'关联当前订单'} rules={[{ required: true, message: '关联的订单' }]} validateStatus='warning' help='请务必确认关联的订单是否正确'>
             <Input placeholder='请先关联订单' disabled={initialValues.is_current_order} />
@@ -76,7 +76,7 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
             <Input placeholder='订单SN' />
           </Form.Item>
         </>
-      )}
+      )} */}
       {/* <div className=' text-neutral-500 italic'>如果会话已存在, 将直接切换</div> */}
     </Form>
   )
@@ -124,7 +124,7 @@ export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialVal
         onCancel();
         formInstance?.resetFields();
       }}
-      destroyOnClose
+      destroyOnHidden
       onOk={async () => {
         try {
           const values = await formInstance?.validateFields();

src/views/Conversations/Online/Input/ComposerTools.jsx

@@ -17,11 +17,11 @@ const ComposerTools = ({ channel, invokeSendUploadMessage, invokeSendMessage, in
   return (
     <>
       <Flex gap={4} className='*:text-primary *:rounded-none items-center'>
-        {['waba'].includes(channel) && <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />}
+        {['waba', 'wai'].includes(channel) && <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} channel={channel} />}
 
         <InputEmoji key='emoji' disabled={!talkabled} inputEmoji={inputEmoji} />
 
-        {['waba', 'wa'].includes(channel) && <InputMediaUpload key={'addNewMedia'} disabled={!talkabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />}
+        {['waba', 'wa', 'wai', 'whatsapp'].includes(channel) && <InputMediaUpload key={'addNewMedia'} disabled={!talkabled} {...{ invokeUploadFileMessage, invokeSendUploadMessage }} />}
 
         <PaymentlinkBtn />
         <SnippestBtn />

src/views/Conversations/Online/Input/EmailComposer.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
-import { App, Button, ConfigProvider, Dropdown, Flex, Select, Input, Tooltip, Form } from 'antd'
+import { App, Button, ConfigProvider, Dropdown, Flex, Select, Input, Tooltip, Form, Alert } from 'antd'
 import { DownOutlined, DollarOutlined, ExpandAltOutlined, ExpandOutlined, SendOutlined,  } from '@ant-design/icons'
 import EmailEditorPopup from './EmailEditorPopup'
 import useStyleStore from '@/stores/StyleStore'
@@ -26,6 +26,8 @@ const EmailComposer = ({ ...props }) => {
   // const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
   const { orderDetail, customerDetail } = useOrderStore()
 
+  const disabled = isEmpty(emailList);
+
   const emailListOption = emailList?.map((ele) => ({ ...ele, label: ele.email, key: ele.email, value: ele.email })) || []
   const emailListAddrMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.email]: v }), {});
 
@@ -150,6 +152,7 @@ const EmailComposer = ({ ...props }) => {
     setSendLoading(true)
     body.externalID = stickToCid
     body.actionID = `${stickToCid}.${msgObj.id}`
+    body.contenttype = 'text/plain';
     try {
       const bubbleMsg = cloneDeep(msgObj)
       bubbleMsg.id = `${stickToCid}.${msgObj.id}`
@@ -173,20 +176,6 @@ const EmailComposer = ({ ...props }) => {
     }
   }
 
-
-  const handleOpenNewWindow = () => {
-    const currentUrl = '/order/follow'; // window.location.href; // Get the current URL
-
-    const width = window.innerWidth - 700; // Adjust as needed
-    const height = window.innerHeight - 40; // Adjust as needed
-    const left = 324; // window.innerWidth / 2 - width / 2;
-    const top = 20; // window.innerHeight / 2 - height / 2;
-
-    const features = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no`;
-
-    window.open(currentUrl, '_blank', features);
-  };
-
   return (
     <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
       <Form
@@ -215,13 +204,6 @@ const EmailComposer = ({ ...props }) => {
                 type='text'
                 size='small'
                 onClick={() => openEditor(pickEmail.key)}
-                // onClick={handleOpenNewWindow}
-                icon={<ExpandOutlined className='text-indigo-600' />}
-              />
-              <Button
-                type='text'
-                size='small'
-                onClick={handleOpenNewWindow}
                 icon={<ExpandOutlined className='text-indigo-600' />}
               />
               </Tooltip>
@@ -234,8 +216,8 @@ const EmailComposer = ({ ...props }) => {
             ref={textInputRef}
             onFocus={() => handleFocus('mailcontent')}
             size='large'
-            maxLength={2000}
-            showCount={true}
+            // maxLength={2000}
+            // showCount={true}
             placeholder={!talkabled ? '请先选择会话' : '*纯文本邮件'}
             rows={2}
             disabled={!talkabled}
@@ -272,8 +254,11 @@ const EmailComposer = ({ ...props }) => {
         </Flex>
       </Flex>
       </Form>
+      {disabled &&
+        <Alert message="账户没有配置邮箱地址" description='请 重新登录 获取最新配置' type="warning" showIcon className=' absolute top-0 left-0 right-0 bottom-0' />
+      }
 
-        <EmailEditorPopup
+        {/* <EmailEditorPopup
           {...{ open, setOpen }}
           fromEmail={fromEmail}
           fromUser={fromUser}
@@ -282,9 +267,10 @@ const EmailComposer = ({ ...props }) => {
           conversationid={currentConversation.sn}
           toEmail={toEmail}
           draft={quickData}
+          customerDetail={customerDetail}
           action='new'
           key={'email-new-editor-popup'}
-        />
+        /> */}
     </ConfigProvider>
   )
 }

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -1,8 +1,8 @@
-import {  useEffect, useState } from 'react';
-import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox,  Popconfirm, Select, Space, Upload, Divider, Modal } from 'antd';
+import {  useEffect, useState, useRef, useCallback } from 'react';
+import { App, ConfigProvider, Button, Form, Input, Flex, Checkbox,  Popconfirm, Select, Space, Upload, Divider, Modal, Tabs } from 'antd';
 import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
 import '@dckj/react-better-modal/dist/index.css';
-import DnDModal from '@/components/DndModal';
+import DnDModal from '@/components/DnDModal';
 import useStyleStore from '@/stores/StyleStore';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
@@ -10,13 +10,15 @@ import useAuthStore from '@/stores/AuthStore';
 import LexicalEditor from '@/components/LexicalEditor';
 
 import { v4 as uuid } from 'uuid';
-import { cloneDeep, isEmpty, } from '@/utils/commons';
+import { cloneDeep, debounce, isEmpty, } from '@/utils/commons';
+import { writeIndexDB } from '@/utils/indexedDB';
 import './EmailEditor.css';
 import { postSendEmail } from '@/actions/EmailActions';
 import { sentMsgTypeMapped,   } from '@/channel/bubbleMsgUtils';
 import { EmailBuilder, useEmailDetail, useEmailSignature } from '@/hooks/useEmail';
 import useSnippetStore from '@/stores/SnippetStore'
 import { useOrderStore } from '@/stores/OrderStore'
+import PaymentlinkBtn from './PaymentlinkBtn';
 
 // 禁止上传的附件类型
 // .application, .exe, .app
@@ -43,7 +45,7 @@ const parseHTMLText = (html) => {
 }
 
 const generateQuoteContent = (mailData, isRichText = true) => {
-  const html = `<br><hr><p><b><strong >From: </strong></b><span >${((mailData.info?.MAI_From || '').replace(/</g,'&lt;').replace(/>/g,'&gt;'))} </span></p><p><b><strong >Sent: </strong></b><span >${mailData.info?.MAI_SendDate || ''}</span></p><p><b><strong >To: </strong></b><span >${(mailData.info?.MAI_To || '').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</span></p><p><b><strong >Subject: </strong></b><span >${mailData.info?.MAI_Subject || ''}</span></p><p>${mailData.info?.MAI_ContentType === 'text/html' ? mailData.content : mailData.content.replace(/\r\n/g, '<br>')}</p>`
+  const html = `<br><br><hr><p class="font-sans"><b><strong >From: </strong></b><span >${((mailData.info?.MAI_From || '').replace(/</g,'&lt;').replace(/>/g,'&gt;'))} </span></p><p  class="font-sans"><b><strong >Sent: </strong></b><span >${mailData.info?.MAI_SendDate || ''}</span></p><p  class="font-sans"><b><strong >To: </strong></b><span >${(mailData.info?.MAI_To || '').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</span></p><p  class="font-sans"><b><strong >Subject: </strong></b><span >${mailData.info?.MAI_Subject || ''}</span></p><p>${mailData.info?.MAI_ContentType === 'text/html' ? mailData.content : mailData.content.replace(/\r\n/g, '<br>')}</p>`
   return isRichText ? html : parseHTMLText(html)
 };
 
@@ -59,10 +61,9 @@ const generateMailContent = (mailData) => `<br><br><p>${mailData.content}</p>`
  * @property {string} quoteid - 引用邮件ID
  * @property {object} draft - 草稿
  */
-const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', draft = {}, ...props }) => {
+const EmailEditorPopup = () => {
 	const { notification, message } = App.useApp();
   const [form] = Form.useForm();
-
   const [mobile] = useStyleStore((state) => [state.mobile]);
   const [userId, username, emailList] = useAuthStore((state) => [state.loginUser.userId, state.loginUser.username, state.loginUser.emailList]);
   const emailListOption = emailList?.map(ele => ({ ...ele, label: ele.email, key: ele.email, value: ele.email })) || [];
@@ -71,8 +72,35 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
   const emailListMatMapped = emailListOption?.reduce((r, v) => ({ ...r, [v.mat_sn]: v }), {});
   // console.log('emailListMapped', emailListOption, emailListAddrMapped);
 
-  const mai_sn = quoteid;
-  const { loading: getLoading, mailData } = useEmailDetail(mai_sn, _mailData)
+  const emailEdiorProps = useConversationStore((state) => state.emailEdiorProps);
+  const [open, setOpen, closeEditor1, currentEditKey, setCurrentEditKey] = useConversationStore((state) => [state.editorOpen, state.setEditorOpen, state.closeEditor1, state.currentEditKey, state.setCurrentEditKey]);
+
+  const propsKeysArr = Array.from(emailEdiorProps.keys());
+  const propsArr = Array.from(emailEdiorProps.values());
+
+  const [activeEdit, setActiveEdit] = useState(emailEdiorProps.get(currentEditKey) || {});
+  // const { fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', draft = {}, receiverName, ...props } = emailEdiorProps.get(currentEditKey) || {};
+
+  const onChangeActiveEditor = (key) => {
+    setCurrentEditKey(key);
+    const _find = emailEdiorProps.get(key) || {};
+    setActiveEdit(_find);
+  };
+
+  const onEditTab = (targetKey, action) => {
+    if (action === 'add') {
+      //
+    } else {
+      if (propsKeysArr.length === 1) {
+        setOpen(false);
+      }
+      closeEditor1(targetKey);
+    }
+  };
+
+
+  const mai_sn = activeEdit.quoteid;
+  const { loading: getLoading, mailData } = useEmailDetail(mai_sn, activeEdit.mailData)
 
 
   const [stickToProps, setStickToProps] = useState({});
@@ -93,25 +121,29 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
     setNewToEmail('')
   }
 
+  const [contentPrefix, setContentPrefix] = useState('');
+
   // 存储: 会话ID,
   // 这个窗口没有模态, 即使不是focus, 还是需要保持会话ID
   // 否则, 会话列表切换之后, 会话ID更新, 导致消息关联错误
-  const [stickToCid, setStickToCid] = useState(conversationid);
+  const [stickToCid, setStickToCid] = useState(activeEdit.conversationid);
   useEffect(() => {
-    const propsObj = { open, setOpen, fromEmail, fromUser, fromOrder, oid, toEmail, conversationid, quoteid, mai: _mailData?.info?.MAI_MAT_SN, action, draft }
+    const propsObj = { ...activeEdit, mai: activeEdit.mailData?.info?.MAI_MAT_SN, }
+
+    setContentPrefix(activeEdit.oid ? `<p>Dear Mr./Ms. ${activeEdit.receiverName || ''}</p><p>Reference Number: ${activeEdit.oid}</p>` : '');
 
     // 没有引用邮件
-    if (isEmpty(quoteid)) {
+    if (isEmpty(activeEdit.quoteid)) {
       setStickToProps(propsObj)
       setPropsSerialize(JSON.stringify(propsObj))
 
-      setStickToCid(conversationid)
-      setEmailOrder(fromOrder)
-      setEmailOPI(fromUser)
-      setNewFromEmail(fromEmail)
-      setNewToEmail(toEmail)
+      setStickToCid(activeEdit.conversationid)
+      setEmailOrder(activeEdit.fromOrder)
+      setEmailOPI(activeEdit.fromUser)
+      setNewFromEmail(activeEdit.fromEmail)
+      setNewToEmail(activeEdit.toEmail)
 
-      const _findMat = emailListAddrMapped?.[fromEmail]?.mat_sn
+      const _findMat = emailListAddrMapped?.[activeEdit.fromEmail]?.mat_sn
       setEmailMat(_findMat)
 
       // if (open !== true) {
@@ -124,7 +156,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
       const reEmailUser = mailData.info?.MAI_OPI_SN
       const reEmailUserMat = mailData.info?.MAI_MAT_SN
 
-      setEmailOrder((prev) => reEmailO || prev || fromOrder)
+      setEmailOrder((prev) => reEmailO || prev || activeEdit.fromOrder)
       setEmailOPI((prev) => reEmailUser || prev)
       setEmailMat((prev) => reEmailUserMat || prev)
 
@@ -173,6 +205,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
     setTextContent(textContent);
     form.setFieldValue('content', htmlContent);
     form.setFieldValue('abstract', getAbstract(textContent));
+    debouncedSave({htmlContent});
   };
 
   const [initialForm, setInitialForm] = useState({});
@@ -184,7 +217,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
   useEffect(() => {
     // console.log('quoteid', quoteid, isEmpty(quoteid), isEmpty(mailData.info));
 
-    if (isEmpty(quoteid) && action !== 'new') {
+    if (isEmpty(activeEdit.quoteid) && activeEdit.action !== 'new') {
       return () => {}
     }
     const { info } = mailData
@@ -196,25 +229,25 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
 
     // const _initialContent = isEmpty(mailData.info) ? signatureBody : signatureBody+preQuoteBody
 
-    if (!isEmpty(mailData.info) && action !== 'edit') {
-      setInitialContent(signatureBody)
+    if (!isEmpty(mailData.info) && activeEdit.action !== 'edit') {
+      setInitialContent(contentPrefix + signatureBody)
     }
 
     const _formValues = {
-      to: info?.MAI_From || newFromEmail,
+      to: info?.replyToAll || newFromEmail,
       cc: info?.MAI_CS || '',
       // bcc: quote.bcc || '',
       subject: `Re: ${info.MAI_Subject || ''}`,
     }
     const forwardValues = { from: newFromEmail, subject: `Fw: ${info.MAI_Subject || ''}` }
-    if (action === 'reply') {
+    if (activeEdit.action === 'reply') {
       form.setFieldsValue(_formValues)
       setInitialForm(_formValues)
-    } else if (action === 'forward') {
+    } else if (activeEdit.action === 'forward') {
       setStickToCid('0')
       form.setFieldsValue(forwardValues)
       setInitialForm(forwardValues)
-    } else if (action === 'edit') {
+    } else if (activeEdit.action === 'edit') {
       const thisFormValues = {
         to: info?.MAI_To || '',
         cc: info?.MAI_CS || '',
@@ -226,11 +259,11 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
       // console.log('thisBody', thisBody);
 
       setInitialContent(thisBody)
-    } else if (action === 'new') {
-      const newEmail = { to: newToEmail, subject: draft?.subject || '' }
+    } else if (activeEdit.action === 'new') {
+      const newEmail = { to: newToEmail, subject: activeEdit.draft?.subject || '' }
       form.setFieldsValue(newEmail)
       setInitialForm(newEmail)
-      setInitialContent((draft?.content || '') + signatureBody)
+      setInitialContent((activeEdit.draft?.content || contentPrefix || '') + signatureBody)
     }
 
     return () => {}
@@ -386,7 +419,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
     body.coli_sn = emailOrder || '';
     // console.log('body', body, '\n', emailOrder);
     const values = await form.validateFields();
-    const preQuoteBody = quoteid ? (quoteContent ? quoteContent : generateQuoteContent(mailData, isRichText)) : '';
+    const preQuoteBody = activeEdit.quoteid ? (quoteContent ? quoteContent : generateQuoteContent(mailData, isRichText)) : '';
     body.mailcontent = isRichText ? EmailBuilder({ subject: values.subject, content: htmlContent+preQuoteBody }) : textContent+preQuoteBody
     body.cc = values.cc || '';
     body.bcc = values.bcc || '';
@@ -408,6 +441,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
     setSendLoading(true);
     body.externalID = stickToCid;
     body.actionID = `${stickToCid}.${msgObj.id}`;
+    body.contenttype = isRichText ? 'text/html' : 'text/plain';
     try {
       const bubbleMsg = cloneDeep(msgObj);
       bubbleMsg.id = `${stickToCid}.${msgObj.id}`;
@@ -444,6 +478,32 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
   const [openDrawerSnippet] = useSnippetStore((state) => [state.openDrawer])
   const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer])
 
+  const [bakData, setBakData] = useState({});
+  const idleCallbackId = useRef(null);
+  const debouncedSave = useCallback(
+    debounce((data) => {
+      idleCallbackId.current = window.requestIdleCallback(() => {
+        console.log('Saving data (idle, debounced):', data);
+        if (currentEditKey) writeIndexDB([{ ...data, key: currentEditKey }], 'draft', 'EmailEditor')
+      });
+    }, 1500), //  1.5s
+    []
+  );
+  const onEditChange = (changedValues, allValues) => {
+    console.log('onEditChange', changedValues,'\n', allValues)
+    // const { name, value } = e.target;
+    // setBakData(prevData => ({ ...prevData, [name]: value }));
+    // debouncedSave(bakData);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (idleCallbackId.current && window.cancelIdleCallback) {
+        window.cancelIdleCallback(idleCallbackId.current);
+      }
+    };
+  }, [debouncedSave]);
+
   return (
     <>
       <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
@@ -451,15 +511,19 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
           rootClassName='email-editor-wrapper  !border-indigo-300 '
           open={open}
           setOpen={setOpen}
-          initial={{ width: window.innerWidth - 700, height: window.innerHeight - 40, left: 300 + 24, top: 20 }}
+          // 300 + 24
+          // window.innerWidth - 600
+          initial={{ width: 880, height: window.innerHeight - 40, left: 20, top: 20 }}
           onCancel={() => {
             form.resetFields()
             stateReset()
           }}
+          titleClassName={`!pl-0 !pt-0 !pb-0`}
           title={
             <>
-              {getLoading ? <LoadingOutlined className='mr-1' /> : null}
-              {initialForm.subject || `${!isEmpty(quoteid) ? '回复: ' : '写邮件: '} ${newFromEmail || ''}`}
+            {/* {getLoading ? <LoadingOutlined className='mr-1' /> : null} */}
+            {/* {initialForm.subject || `${!isEmpty(quoteid) ? '回复: ' : '写邮件: '} ${newFromEmail || ''}`} */}
+            <Tabs editable type={'editable-card'} activeKey={currentEditKey} onChange={onChangeActiveEditor} className='[&_.ant-tabs-nav]:mb-0' items={propsArr.map(ele=>({...ele, label: (!isEmpty(activeEdit.quoteid) ? '回复: ' : '新邮件: ')+ele.subject}))} onEdit={onEditTab} hideAdd />
             </>
           }
           footer={
@@ -480,7 +544,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
             </div>
           }>
           <Form
-            form={form}
+            form={form} onValuesChange={onEditChange}
             preserve={false}
             name={`email_max_form-${Date.now().toString(32)}`}
             size='small'
@@ -527,13 +591,13 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
               }
             /> */}
             </Form.Item>
-            <Form.Item label='抄送' name={'cc'} hidden={!showCc} className='w-full pt-1'>
+            <Form.Item label='抄&nbsp;&nbsp;&nbsp;&nbsp;送' name={'cc'} hidden={!showCc} className='w-full pt-1' >
               <Input />
             </Form.Item>
-            <Form.Item label='密送' name={'bcc'} hidden={!showBcc} className='w-full pt-1'>
+            <Form.Item label='密&nbsp;&nbsp;&nbsp;&nbsp;送' name={'bcc'} hidden={!showBcc} className='w-full pt-1'>
               <Input />
             </Form.Item>
-            <Form.Item label='主题' name={'subject'} rules={[{ required: true }]} className='w-full pt-1'>
+            <Form.Item label='主&nbsp;&nbsp;&nbsp;&nbsp;题' name={'subject'} rules={[{ required: true }]} className='w-full pt-1'>
               <Input />
             </Form.Item>
             <Form.Item name='atta' label='' className='w-full py-1 border-b-0' valuePropName='fileList' getValueFromEvent={normFile}>
@@ -546,9 +610,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
                   <Button type={'link'} onClick={() => openDrawerSnippet()}>
                     图文集
                   </Button>
-                  <Button type={'link'} onClick={() => openPaymentDrawer()}>
-                    支付链接
-                  </Button>
+                  <PaymentlinkBtn type={'link'} />
                   {/* 更多工具 */}
                   {/* <Popover
                     content={
@@ -569,7 +631,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
             </Form.Item>
           </Form>
           <LexicalEditor {...{ isRichText }} onChange={handleEditorChange} defaultValue={initialContent} />
-          {quoteid && !showQuoteContent && (
+          {activeEdit.quoteid && !showQuoteContent && (
             <div className='flex justify-start items-center ml-2'>
               <Button className='flex gap-2 ' type='link' onClick={() => setShowQuoteContent(!showQuoteContent)}>
                 显示引用内容 ↓
@@ -580,7 +642,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
             </div>
           )}
           {showQuoteContent && (
-            <div contentEditable className='border-0 outline-none' onBlur={(e) => setQuoteContent(e.target.innerHTML)} dangerouslySetInnerHTML={{ __html: generateQuoteContent(mailData) }}></div>
+            <blockquote contentEditable className='border-0 outline-none' onBlur={(e) => setQuoteContent(`<blockquote>${e.target.innerHTML}</blockquote>`)} dangerouslySetInnerHTML={{ __html: generateQuoteContent(mailData) }}></blockquote>
           )}
         </DnDModal>
       </ConfigProvider>

src/views/Conversations/Online/Input/InputComposer.jsx

@@ -7,26 +7,27 @@ import useConversationStore from '@/stores/ConversationStore';
 import { SendOutlined, CloseCircleOutlined, LoadingOutlined, FileOutlined } from '@ant-design/icons'
 import { isEmpty, } from '@/utils/commons';
 import { v4 as uuid } from 'uuid';
-import { sentMsgTypeMapped, whatsappSupportFileTypes, uploadProgressSimulate } from '@/channel/bubbleMsgUtils';
+import { sentMsgTypeMapped, whatsappSupportFileTypes, uploadProgressSimulate, WABAccountsMapped } from '@/channel/bubbleMsgUtils';
 import { OSS_URL as aliOSSHost, DEFAULT_WABA } from '@/config';
 import { postUploadFileItem } from '@/actions/CommonActions';
 import dayjs from 'dayjs';
 import useStyleStore from '@/stores/StyleStore';
 import ComposerTools from './ComposerTools';
 import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions } from "@/stores/OrderStore";
+import { postSendMsg } from '@/actions/WaiAction';
 
 const ButtonStyleClsMapped =
 {
   'waba': 'bg-waba shadow shadow-waba-300 hover:!bg-waba-400 active:bg-waba-400 focus:bg-waba-400',
   'whatsapp': 'bg-whatsapp shadow shadow-whatsapp-300 hover:!bg-whatsapp-400 active:bg-whatsapp-400 focus:bg-whatsapp-400',
-  'wa': 'bg-whatsapp shadow shadow-whatsapp-300 hover:!bg-whatsapp-400 active:bg-whatsapp-400 focus:bg-whatsapp-400',
+  'wai': 'bg-whatsapp shadow shadow-whatsapp-300 hover:!bg-whatsapp-400 active:bg-whatsapp-400 focus:bg-whatsapp-400',
 };
 
-const InputComposer = ({ channel, currentActive }) => {
+const InputComposer = ({ channel, currentActive, lastWABAMsg = {} }) => {
   const { message: appMessage, notification: appNotification } = App.useApp();
   const [mobile] = useStyleStore((state) => [state.mobile]);
 
-  const {userId, whatsAppBusiness} = useAuthStore((state) => state.loginUser);
+  const {userId, whatsAppBusiness, whatsAppNo} = useAuthStore((state) => state.loginUser);
   const [customerDetail] = useOrderStore((s) => [s.customerDetail])
 
   const websocket = useConversationStore((state) => state.websocket);
@@ -35,11 +36,13 @@ const InputComposer = ({ channel, currentActive }) => {
   const [referenceMsg, setReferenceMsg] = useConversationStore((state) => [state.referenceMsg, state.setReferenceMsg]);
   const [complexMsg, setComplexMsg] = useConversationStore((state) => [state.complexMsg, state.setComplexMsg]);
   const sentOrReceivedNewMessage = useConversationStore((state) => state.sentOrReceivedNewMessage);
+  const updateMessageItem = useConversationStore((state) => state.updateMessageItem);
 
   const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
   const isExpired = !isEmpty(currentConversation.conversation_expiretime) ? dayjs(currentConversation.conversation_expiretime).add(8, 'hours').isBefore(dayjs()) : true;
   const gt24h = !isEmpty(currentConversation.last_received_time) ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
-  const lt24h = !isEmpty(currentConversation.last_received_time) ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') <= 24 : false;
+  // const lt24h = !isEmpty(currentConversation.last_received_time) ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') <= 24 : false;
+  const lt24h = !isEmpty(lastWABAMsg.date) ? dayjs().diff(dayjs(lastWABAMsg.date), 'hour') <= 24 : false;
   // lt24h || !isExpired
   const textabled = talkabled; //  && (lt24h || !isExpired); // 只要有一个时间没过期, 目前未知明确规则
   const textabled0 = talkabled && (lt24h || !isExpired); // 只要有一个时间没过期, 目前未知明确规则
@@ -66,7 +69,9 @@ const InputComposer = ({ channel, currentActive }) => {
         setFromIM(whatsAppBusiness || DEFAULT_WABA)
         break
       case 'wa':
-        setFromIM('') // todo: 个人WhatsApp号
+      case 'wai':
+      case 'whatsapp':
+        setFromIM(whatsAppNo)
         break
 
       default:
@@ -75,7 +80,7 @@ const InputComposer = ({ channel, currentActive }) => {
     }
 
     return () => {}
-  }, [channel, whatsAppBusiness])
+  }, [channel, whatsAppBusiness, whatsAppNo])
 
   useEffect(() => {
     const _to = currentConversation.whatsapp_phone_number || currentConversation.channel?.whatsapp_phone_number || currentConversation.channel?.phone_number // || customerDetail.whatsapp_phone_number
@@ -86,10 +91,11 @@ const InputComposer = ({ channel, currentActive }) => {
 
   const textInputRef = useRef(null);
   const [textContent, setTextContent] = useState('');
+  const [sendBtnLoading, setSendBtnLoading] = useState(false);
 
-  const invokeSendMessage = (msgObj) => {
+  const invokeSendMessage = async (msgObj) => {
     if (isEmpty(toIM)) {
-      appNotification.warning({ message: '缺少WhatsApp号码, 请先在会话列表右键菜单编辑联系人', placement: 'top' });
+      appNotification.warning({ message: '缺少WhatsApp号码', description: '请先在会话列表右键菜单编辑联系人, 补充WhatsApp号码', placement: 'bottom' });
       return false
     }
     const msgObjMerge = {
@@ -99,15 +105,31 @@ const InputComposer = ({ channel, currentActive }) => {
       from: fromIM,
       date: new Date(),
       status: 'waiting',
-      ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg, from: referenceMsg.waba } : {}),
+      ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg, } : {}),
       ...msgObj,
       id: `${currentConversation.sn}.${uuid()}`,
       msg_source: channel,
+      wabaName: channel === 'waba' ? WABAccountsMapped[fromIM]?.verifiedName : '',
+      externalId: currentConversation.sn || ''
     };
-    // olog('sendMessage------------------', msgObjMerge)
+    // console.log('sendMessage------------------', msgObjMerge)
     const contentToSend = sentMsgTypeMapped[msgObjMerge.type].contentToSend(msgObjMerge);
     // console.log('content to send-------------------------------------', contentToSend);
-    websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn, conversationid: currentConversation.sn, });
+
+    if (channel === 'wai') {
+      try {
+        setSendBtnLoading(true);
+        await postSendMsg({...contentToSend, });
+        setSendBtnLoading(false);
+      } catch (error) {
+        setSendBtnLoading(false);
+        appNotification.error({ message: '发送失败', description: error.message, placement: 'bottom', duration: 6, });
+        // appMessage.error(error.message || '发送失败');
+        return false;
+      }
+    } else if (channel === 'waba') {
+      websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn || '', conversationid: currentConversation.sn, });
+    }
     const contentToRender = sentMsgTypeMapped[msgObjMerge.type].contentToRender(msgObjMerge);
     // console.log(contentToRender, 'contentToRender  sendMessage------------------');
     sentOrReceivedNewMessage(contentToRender.conversationid, contentToRender);
@@ -131,6 +153,7 @@ const InputComposer = ({ channel, currentActive }) => {
       ...msgObj,
       id: `${currentConversation.sn}.${msgObj.id}`,
       msg_source: channel,
+      wabaName: channel === 'waba' ? WABAccountsMapped[fromIM]?.verifiedName : '',
     };
     // olog('invoke upload', msgObjMerge)
     const contentToRender = sentMsgTypeMapped[msgObjMerge.type].contentToRender(msgObjMerge);
@@ -138,9 +161,9 @@ const InputComposer = ({ channel, currentActive }) => {
     sentOrReceivedNewMessage(contentToRender.conversationid, contentToRender);
   };
 
-  const invokeSendUploadMessage = (msgObj) => {
+  const invokeSendUploadMessage = async (msgObj) => {
     if (isEmpty(toIM)) {
-      appNotification.warning({ message: '缺少WhatsApp号码, 请先在会话列表右键菜单编辑联系人', placement: 'top' });
+      appNotification.warning({ message: '缺少WhatsApp号码', description: '请先在会话列表右键菜单编辑联系人, 补充WhatsApp号码', placement: 'bottom' });
       return false
     }
     const msgObjMerge = {
@@ -154,10 +177,26 @@ const InputComposer = ({ channel, currentActive }) => {
       ...msgObj,
       id: `${currentConversation.sn}.${msgObj.id}`,
       msg_source: channel,
+      wabaName: channel === 'waba' ? WABAccountsMapped[fromIM]?.verifiedName : '',
+      externalId: currentConversation.sn || ''
     };
     const contentToSend = sentMsgTypeMapped[msgObjMerge.type].contentToSend(msgObjMerge);
     // olog('invoke upload send +++ ', contentToSend)
-    websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn, conversationid: currentConversation.sn, });
+    if (channel === 'wai') {
+      try {
+        setSendBtnLoading(true);
+        await postSendMsg({...contentToSend, });
+        setSendBtnLoading(false);
+      } catch (error) {
+        setSendBtnLoading(false);
+        updateMessageItem({ conversationid: currentConversation.sn || '', id: msgObjMerge.id, actionId: contentToSend.actionId, status: 'failed', replyButton: false, dateString: '发送失败 ❌' })
+        appNotification.error({ message: '发送失败', description: error.message, placement: 'bottom', duration: 6, });
+        // appMessage.error(error.message || '发送失败');
+        return false;
+      }
+    } else if (channel === 'waba') {
+      websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn || '', conversationid: currentConversation.sn, });
+    }
   };
 
   const [pastedUploading, setPastedUploading] = useState(false);
@@ -181,7 +220,7 @@ const InputComposer = ({ channel, currentActive }) => {
       type: fileTypeSupport,
       name: file.name,
       uploadStatus: 'loading',
-      data: { dataUri: '', link: '', width: '100%', height: 150, loading: uploadProgressSimulate() },
+      data: { dataUri: '', link: '', width: '100%', height: 150, loading: 0 },
       id: uuid(),
     };
     // 读取完毕后获取结果
@@ -264,7 +303,7 @@ const InputComposer = ({ channel, currentActive }) => {
 
   useEffect(() => {
     if (currentActive) focusInput();
-    if (!isEmpty(referenceMsg) && referenceMsg.waba !== fromIM.replace('+', '')) {
+    if (channel === 'waba' && !isEmpty(referenceMsg) && referenceMsg.waba.replace('+', '') !== fromIM.replace('+', '')) {
       setWabaWarning('注意: 回复的消息与当前使用的WABA账户不一致. 请到个人资料页面切换WABA商业号身份.')
     } else {
       setWabaWarning('');
@@ -277,13 +316,13 @@ const InputComposer = ({ channel, currentActive }) => {
   return (
     <div>
       {wabaWarning && <Alert message={wabaWarning} type="error" showIcon /> }
-      {isEmpty(toIM) && <Alert message="当前客人没有设置WhatsApp号码, 请先在会话列表右键菜单编辑联系人设置" type="warning" showIcon /> }
+      {isEmpty(toIM) && currentConversation.sn && <Alert message="当前客人没有设置WhatsApp号码, 请先在会话列表右键菜单编辑联系人设置" type="warning" showIcon /> }
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
           <div className='flex flex-col referrer-msg border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
             <span className=' text-primary pr-1 italic align-top'>{referenceMsg.senderName}</span>
             {referenceMsg.type === 'photo' && <Image width={100} src={referenceMsg.data.uri} />}
-            <span className='px-1 whitespace-pre-wrap'>{referenceMsg.originText}</span>
+            <span className='px-1 whitespace-pre-wrap line-clamp-3 overflow-hidden text-ellipsis break-words break-all'>{referenceMsg.originText}</span>
           </div>
           <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setReferenceMsg({})} />
         </Flex>
@@ -350,6 +389,7 @@ const InputComposer = ({ channel, currentActive }) => {
             onClick={handleSendText}
             type='primary'
             size='middle'
+            loading={sendBtnLoading}
             icon={<SendOutlined />}
             disabled={!textabled || pastedUploading}
             className={ButtonStyleClsMapped[channel]
@@ -362,6 +402,6 @@ const InputComposer = ({ channel, currentActive }) => {
   );
 };
 
-InputComposer.propTypes = { channel: PropTypes.oneOf(['waba', 'wa']) };
+InputComposer.propTypes = { channel: PropTypes.oneOf(['waba', 'wai']) };
 
 export default InputComposer;

src/views/Conversations/Online/Input/MediaUpload.jsx

@@ -68,7 +68,7 @@ const ImageUpload = ({ disabled, invokeUploadFileMessage, invokeSendUploadMessag
       onChange={({file}) => {
         if (file.status === 'done') {
           const { file_url } = file.response.result;
-          invokeSendUploadMessage({...fileObj, data: { ...fileObj.data, link: file_url, dataUri: file_url, uri: file_url, loading: 1 }});
+          invokeSendUploadMessage({...fileObj, data: { ...fileObj.data, link: file_url, dataUri: file_url, uri: file_url, loading: 0 }});
         }
         if (file.status === 'error') {
           message.error(`添加失败`);

src/views/Conversations/Online/Input/PaymentlinkBtn.jsx

@@ -1,15 +1,28 @@
 import { createContext, useEffect, useState } from 'react'
 import { useOrderStore } from '@/stores/OrderStore'
 import { Tooltip, Button } from 'antd'
+import GeneratePaymentDrawer from '../Components/GeneratePaymentDrawer'
 
-const PaymentlinkBtn = ({ ...props }) => {
+const PaymentlinkBtn = ({ type, ...props }) => {
   const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer])
 
   return (
-    <Tooltip title='支付链接' >
-      {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
-      <Button type='text' onClick={() => openPaymentDrawer()}  size={'middle'} className='px-1' >💲</Button>
-    </Tooltip>
+    <>
+      {/* <GeneratePaymentDrawer /> */}
+      <Tooltip title='支付链接'>
+        {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
+
+        {type === 'link' ? (
+          <Button type={'link'} onClick={() => openPaymentDrawer()}>
+            支付链接
+          </Button>
+        ) : (
+          <Button type='text' onClick={() => openPaymentDrawer()} size={'middle'} className='px-1'>
+            💲
+          </Button>
+        )}
+      </Tooltip>
+    </>
   )
 }
 export default PaymentlinkBtn

src/views/Conversations/Online/Input/Template.jsx

@@ -3,8 +3,8 @@ import { App, Popover, Flex, Button, List, Input, Tabs, Tag, Alert, Divider } fr
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
 import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
-import { cloneDeep, getNestedValue, groupBy, objectMapper, removeFormattingChars, sortArrayByOrder, TagColorStyle } from '@/utils/commons';
-import { replaceTemplateString } from '@/channel/bubbleMsgUtils';
+import { cloneDeep, flush, getNestedValue, groupBy, objectMapper, removeFormattingChars, sortArrayByOrder, sortObjectsByKeysMap, TagColorStyle } from '@/utils/commons';
+import { replaceTemplateString, whatsappTemplateBtnParamTypesMapped } from '@/channel/bubbleMsgUtils';
 import { isEmpty } from '@/utils/commons';
 import useStyleStore from '@/stores/StyleStore';
 
@@ -36,16 +36,33 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
     const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''))
     const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {})
 
+    if (key === 'header' && tempItem.components?.header?.[0]?.example?.header_url) {
+      const headerImg = { key: 'header_url', placeholder: '头图地址' };
+      tempArr.unshift(headerImg);
+    }
+    if (key === 'buttons' && (tempItem.components?.buttons?.[0]?.buttons || []).findIndex(btn => btn.type === 'COPY_CODE') !== -1) {
+      const btnCode = { key: 'copy_code', placeholder: '复制条码' };
+      tempArr.push(btnCode);
+    }
+    if (key === 'buttons' ) {
+      (tempItem.components?.buttons?.[0]?.buttons || []).filter(btn0 => btn0.type === 'URL').forEach((btn) => {
+        const hasParam = Object.prototype.hasOwnProperty.call(btn, "example");
+        const templateUrl = btn.url || ''
+        const urlParamKeys = (templateUrl.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, '')).map(key => ({ key }))
+        hasParam ? tempArr.push(...urlParamKeys) : false;
+      });
+    }
+
     return (
       <>
-        {tempArr.map((ele) =>
+        {tempArr.map((ele, i) =>
           typeof ele === 'string' ? (
             <span key={ele.trim()} className=' text-wrap'>
               {ele.replace(/\n+/g, '\n')}
             </span>
           ) : ele.key.includes('free') || ele.key.includes('detail') ? (
             <Input.TextArea
-              key={ele.key}
+              key={`${ele.key}_${i}`}
               rows={2}
               onChange={(e) => {
                 onInput(tempItem, ele.key, e.target.value, paramsVal)
@@ -59,14 +76,14 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
             />
           ) : (
             <Input
-              key={ele.key}
+              key={`${ele.key}_${i}`}
               onChange={(e) => {
                 onInput(tempItem, ele.key, e.target.value, paramsVal)
               }}
               className={ele.key.includes('free') || ele.key.includes('detail') ? `w-full block ` : `w-auto ${paramsVal[ele.key] ? 'max-w-24' : 'max-w-60'}`}
               size={'small'}
               title={ele.key}
-              placeholder={`${paramsVal[ele.key] || ele.key}  按Tab键跳到下一个空格`}
+              placeholder={`${paramsVal[ele.key] || ele.key}  ${ele?.placeholder || '按Tab键跳到下一个空格'}`}
               value={activeInput[tempItem.name]?.[ele.key] || paramsVal[ele.key] || ''}
               // onPressEnter={() => handleSendTemplate(tempItem)}
             />
@@ -83,14 +100,19 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
     return (
       <div className='pb-1'>
         {'text' === headerObj.format.toLowerCase() && <div>{renderForm({ tempItem }, 'header')}</div>}
-        {'image' === headerObj.format.toLowerCase() && <img src={headerObj.example.header_url} height={100}></img>}
+        {'image' === headerObj.format.toLowerCase() && (
+          <div className='flex items-center'>
+            <img src={headerObj.example.header_url} height={100} className='mr-1'></img>
+            {renderForm({ tempItem }, 'header')}
+          </div>
+        )}
         {['document', 'video'].includes(headerObj.format.toLowerCase()) && (
           <a href={headerObj.example.header_url} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
             [&nbsp;{headerObj.format}&nbsp;]({headerObj.example.header_url})
           </a>
         )}
       </div>
-    );
+    )
   }
   const renderButtons = ({ tempItem }) => {
     if (isEmpty(tempItem.components.buttons)) {
@@ -100,7 +122,8 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
     return (
       <div className='flex gap-1 pt-1'>
         {buttons.map((btn, index) =>
-          btn.type.toLowerCase() === 'url' ? (
+        <>
+          {btn.type.toLowerCase() === 'url' ? (
             <Button className='text-blue-500' size={'small'} href={btn.url} target={'_blank'} key={btn.url} rel='noreferrer'>
               {btn.text}
             </Button>
@@ -108,11 +131,18 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
             <Button className='text-blue-500' size={'small'} key={btn.phone_number} rel='noreferrer'>
               {btn.text} ({btn.phone_number})
             </Button>
-          ) : (
-            <Button className='text-blue-500' size={'small'} key={btn.type} rel='noreferrer'>
+          )
+          : btn.type.toLowerCase() === 'copy_code' ? null
+          // (
+          //   <span>{renderForm({ tempItem }, 'buttons')}</span>
+          // )
+          : (
+            <Button className='text-blue-500' size={'small'} key={`${btn.type}_${index}`} rel='noreferrer'>
               {btn.text}
             </Button>
-          )
+          )}
+          {Object.prototype.hasOwnProperty.call(btn, "example") ? (<span key={`${btn.type}_${index}`}>{renderForm({ tempItem }, 'buttons')}</span>) : null}
+          </>
         )}
       </div>
     );
@@ -160,14 +190,14 @@ const CategoryList = ({ dataSource, handleSendTemplate, valueMapped, onInput, ac
   )
 }
 
-const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
+const InputTemplate = ({ disabled = false, invokeSendMessage, channel }) => {
   const [mobile] = useStyleStore((state) => [state.mobile]);
 
   const searchInputRef = useRef(null);
   const { notification } = App.useApp();
   const loginUser = useAuthStore((state) => state.loginUser);
   const { whatsAppBusiness } = loginUser;
-  loginUser.usernameEN = loginUser.accountList[0].OPI_NameEN.split(' ')?.[0] || loginUser.username;
+  loginUser.usernameEN = (loginUser.accountList[0]?.OPI_NameEN || '').split(' ')?.[0] || loginUser.username;
   const currentConversation = useConversationStore((state) => state.currentConversation);
   const templates = useConversationStore((state) => state.templates);
 
@@ -179,12 +209,12 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const [searchContent, setSearchContent] = useState('');
 
   // 用于替换变量: customer, agent
-  const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { usernameEN: [{ key: 'agent_name' }, { key: 'your_name' }, { key: 'your_name1' }, { key: 'your_name2' }] }) };
+  const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { usernameEN: [{ key: 'agent_name' }, { key: 'your_name' }, { key: 'your_name1' }, { key: 'your_name2' }] }), ...{ order_number: currentConversation.coli_id } };
   useEffect(() => {
     setDataSource([]);
     // setDataSource(templates);
     const mappedByCategory = groupBy(templates, 'category');
-    const mappedByLang = groupBy(templates, 'language');
+    const mappedByLang = sortObjectsByKeysMap(groupBy(templates, 'displayLanguage'), ['en']); // todo: 按账户语种排序
     setTemplateCMapped(mappedByCategory);
     setTemplateLangMapped(mappedByLang);
     return () => {};
@@ -200,8 +230,11 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const handleSearchTemplates = (val) => {
     if (val.toLowerCase().trim() !== '') {
       const res = templates.filter(
-        (item) => item.name.includes(val.toLowerCase().trim()) || item.components_origin.some((itemc) => (itemc?.text || '').toLowerCase().includes(val.toLowerCase().trim()))
-      );
+        (item) =>
+          item.name.includes(val.toLowerCase().trim()) ||
+          item.displayName.includes(val.toLowerCase().trim()) ||
+          item.components_origin.some((itemc) => (itemc?.text || '').toLowerCase().includes(val.toLowerCase().trim())),
+      )
       setDataSource(res);
       return false;
     }
@@ -210,6 +243,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
 
   const handleSendTemplate = (fromTemplate) => {
     const mergeInput = { ...cloneDeep(valueMapped), ...activeInput[fromTemplate.name] };
+    // console.log('----------------------------------------------', mergeInput)
     let valid = true;
     const msgObj = {
       type: 'whatsappTemplate',
@@ -217,26 +251,83 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
       template: {
         name: fromTemplate.name,
         language: { code: fromTemplate.language },
-        components: sortArrayByOrder(fromTemplate.components_origin.map((citem) => {
+        components: sortArrayByOrder(fromTemplate.components_origin.reduce((r, citem) => {
           const keys = ((citem?.text || '').match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
           const params = keys.map((v) => ({ type: 'text', text: getNestedValue(mergeInput, [v]) }));
+          const notTextKeys = [];
+          const paramNotText = [];
 
           if (citem.type.toLowerCase() === 'header' && (citem?.format || 'text').toLowerCase() !== 'text') {
-            params[0] = { type: citem.format.toLowerCase(), [citem.format.toLowerCase()]: { link: citem.example.header_url[0] } };
+            params[0] = { type: citem.format.toLowerCase(), [citem.format.toLowerCase()]: { link: mergeInput?.header_url || citem.example.header_url[0] } };
+
+            // 头图可以不替换
+            // notTextKeys.push('header_url');
+            // mergeInput?.header_url ? paramNotText.push(mergeInput?.header_url || '') : false;
+          }
+
+          let buttonsComponents;
+          if (citem.type.toLowerCase() === 'buttons' ) {
+            buttonsComponents = citem.buttons.map((btn, i) => {
+              const hasParam = Object.prototype.hasOwnProperty.call(btn, "example"); // whatsappTemplateBtnParamTypesMapped
+              let fillBtn = {};
+              const paramKey = whatsappTemplateBtnParamTypesMapped[btn.type.toLowerCase()];
+              if (paramKey) {
+                params[0] = { type: paramKey, [paramKey]: mergeInput?.[btn.type.toLowerCase()] || '' };
+                notTextKeys.push(paramKey);
+                mergeInput?.[btn.type.toLowerCase()] ? paramNotText.push(mergeInput?.[btn.type.toLowerCase()] || '') : false;
+                fillBtn = { text: btn.text || `${btn.type}:${mergeInput?.[btn.type.toLowerCase()] || ''}` };
+              }
+              if (btn.type.toLowerCase() === 'url') {
+                const templateUrl = btn.url || '';
+                const urlParamKeys = (templateUrl.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
+                const urlParams = urlParamKeys.map(key => ({ type: 'text', text: getNestedValue(mergeInput, [key]) }))
+                params.push(...urlParams);
+                notTextKeys.push(...urlParamKeys);
+                urlParamKeys.forEach(key => {
+                  if (getNestedValue(mergeInput, [key])) {
+                    paramNotText.push(getNestedValue(mergeInput, [key]));
+                  }
+                });
+                fillBtn = hasParam ? { text: btn.text, url: replaceTemplateString(templateUrl, paramNotText) } : {};
+              }
+
+              // if (hasParam) {
+              //   notTextKeys.push(paramKey);
+              //   mergeInput?.[btn.type.toLowerCase()] ? paramNotText.push(mergeInput?.[btn.type.toLowerCase()] || '') : false;
+              // }
+
+              return hasParam ? { type: 'button', index: i, sub_type: btn.type.toLowerCase(), parameters: params, ...fillBtn } : null;
+            })
+            buttonsComponents = flush(buttonsComponents);
           }
+          // console.log('******', buttonsComponents, '\n', notTextKeys, '\n', paramNotText)
 
           const paramText = keys.length ? params.map((p) => p.text) : [];
           const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
           valid = keys.length !== paramText.filter((s) => s).length ? false : valid;
-          return ['body', 'header'].includes(citem.type.toLowerCase()) ? {
+          valid = notTextKeys.length !== paramNotText.filter((s) => s).length ? false : valid;
+          const _components = ['body', 'header'].includes(citem.type.toLowerCase()) ? [{
             type: citem.type.toLowerCase(),
             parameters: params,
             text: fillTemplate,
-          } : {...citem, type: citem.type.toLowerCase(),};
-        }), 'type', ['header', 'body', 'footer', 'buttons'] ),
+          }] : ['buttons'].includes(citem.type.toLowerCase()) ? buttonsComponents : [{...citem, type: citem.type.toLowerCase(),}];
+          return r.concat(_components);
+        }, []), 'type', ['body', 'header', 'footer', 'button', 'buttons'] ),
+        components_omit: fromTemplate.components_origin.reduce((r, citem) => {
+          const _componentItems =
+            citem.type.toLowerCase() === 'buttons'
+              ? citem.buttons.map((btn, index) => ({ ...btn, index, type: 'button', sub_type: btn.type.toLowerCase() }))
+              : [{ ...citem, type: citem.type.toLowerCase() }]
+          const staticComponents = _componentItems.filter((item) => !item.example && item.type.toLowerCase() !== 'body')
+          return r.concat(staticComponents)
+        }, []),
       },
       template_origin: fromTemplate,
     };
+    const plainTextMsgObj = {
+      type: 'text',
+      text: msgObj.template.components.filter(com => com.type.toLowerCase() === 'body').map((citem) => citem.text).join(''),
+    };
     if (valid !== true) {
       notification.warning({
         message: '提示',
@@ -247,7 +338,8 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
       });
       return false;
     }
-    invokeSendMessage(msgObj);
+    // console.log('------------------------------------------------------------------------------', msgObj );
+    invokeSendMessage(channel === 'waba' ? msgObj : plainTextMsgObj);
     setOpenTemplates(false);
     setActiveInput({});
   };
@@ -260,10 +352,6 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     });
   };
 
-
-
-
-
   return (
     <>
       <Popover
@@ -311,7 +399,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
               ...(Object.keys(templateLangMapped).map(lang => ({
                 key: lang, label: lang.toUpperCase(), children: <CategoryList key={'lang-templates-'+lang} dataSource={templateLangMapped[lang]} {...{ handleSendTemplate, activeInput, onInput, valueMapped}} />
               })))
-            ]} defaultActiveKey='utility' tabBarExtraContent={{right: <Alert type='info' message='为提升账号质量, 请尽量使用跟进模板' showIcon className='py-0' />, }} size='small' />
+            ]} defaultActiveKey='utility' tabBarExtraContent={{right: <Alert type='info' message={channel==='waba'?'请优先使用"触达率高"模板': '模板消息将用纯文本发送'} showIcon className='py-0' />, }} size='small' />
           ) :
             (
               // Search result

src/views/Conversations/Online/MessagesHeader.jsx

@@ -41,8 +41,7 @@ const MessagesHeader = () => {
                 <Typography.Text strong>{currentConversation.show_default}</Typography.Text>
                 {currentConversation.sn ? (
                   <div className='flex flex-col'>
-                    <Typography.Text>{currentConversation?.channels?.whatsapp_phone_number}</Typography.Text>
-                    <Typography.Text>{currentConversation?.channels?.email}</Typography.Text>
+                    <Typography.Text>{currentConversation.session_type === 1 ? '' : currentConversation?.channels?.whatsapp_phone_number}</Typography.Text>
                   </div>
                 ) : (
                   <Typography.Text strong type='danger'>

src/views/Conversations/Online/MessagesList.jsx

@@ -21,10 +21,16 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
     return () => '';
   }, [focusMsg])
 
-
+  const [previousScrollHeight, setPreviousScrollHeight] = useState(0);
   const scrollToBottom = (force = false) => {
     if (reference.current && (shouldScrollBottom || force)) {
       reference.current.scrollTop = reference.current.scrollHeight;
+    } else if (shouldScrollBottom === false) {
+      requestAnimationFrame(() => {
+        if (reference.current) {
+          reference.current.scrollTop = reference.current.scrollHeight - previousScrollHeight
+        }
+      })
     }
   };
 
@@ -39,20 +45,21 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
   useEffect(scrollToBottom, [messages]);
 
   const onLoadMore = async () => {
+    setPreviousScrollHeight(reference.current?.scrollHeight || 0);
     await getMoreMessages();
   };
   // eslint-disable-next-line react/display-name
   const MessageBoxWithRef = forwardRef((props, ref) => (
     <div ref={ref}>
-      {(props.msg_source || '').toLowerCase() === 'waba'
+      {['waba', 'wa', 'wai', 'whatsapp'].includes((props.msg_source || '').toLowerCase())
         && <BubbleIM {...props} {...{ scrollToMessage, focusMsg, handleContactClick, setNewChatModalVisible, setNewChatFormValues, handlePreview }} />}
       {props.msg_source === 'email' && <BubbleEmail {...props} onOpenEditor={listProps.onOpenEditor} onOpenEmail={listProps.onOpenEmail} />}
     </div>
   ));
 
   return (
-    <div className='relative h-full overflow-y-auto overflow-x-hidden flex flex-1'>
-      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1'>
+    <div className='relative h-full overflow-x-hidden flex flex-1'>
+      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1' key={'msg-list'}>
         {loadNextPage && messages.length > 0 && (
           <div className='text-center pt-3 mb-3 h-8 leading-8 '>
             {!longListLoading ? (
@@ -67,7 +74,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
         {messages.map((message, index) => (
           <MessageBoxWithRef
             ref={(el) => (messageRefs.current[index] = el)}
-            key={`${message.type}.${message.id}`}
+            key={`${message.type || ''}.${message.id}`}
             {...message}
           />
         ))}

src/views/Conversations/Online/MessagesWrapper.jsx

@@ -1,72 +1,108 @@
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect,  } from 'react';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { Image, Modal, Button } from 'antd';
 import MessagesList from './MessagesList';
-import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
+import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE, UNREAD_MARK } from '@/actions/ConversationActions';
 import useAuthStore from '@/stores/AuthStore';
 import { useVisibilityState } from '@/hooks/useVisibilityState';
 import ConversationNewItem from './ConversationsNewItem';
-import emailItem from './Components/emailSent.json';
-import emailReItem from './Components/emailRe.json';
 // import EmailEditor from './Input/bak/EmailEditor';
 import EmailEditorPopup from './Input/EmailEditorPopup';
 import EmailDetail from './Components/EmailDetail';
 import { useOrderStore, } from "@/stores/OrderStore";
 import { isEmpty } from '@/utils/commons';
+import useStyleStore from '@/stores/StyleStore';
+import EmailListDrawer from './Components/EmailListDrawer';
+import { POPUP_FEATURES } from '@/config';
 
 const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
   const userId = useAuthStore((state) => state.loginUser.userId);
 
+  const [mobile] = useStyleStore(state => [state.mobile]);
   const [currentConversation, updateCurrentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.updateCurrentConversation, state.setCurrentConversation]);
-  const conversationsList = useConversationStore((state) => state.conversationsList);
+  // const conversationsList = useConversationStore((state) => state.conversationsList);
   const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
-  const addToConversationList = useConversationStore((state) => state.addToConversationList);
+  // const addToConversationList = useConversationStore((state) => state.addToConversationList);
 
   const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
   const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
 
   const refreshTotalNotify = useConversationStore(useShallow((state) => state.refreshTotalNotify));
+  const currentConversationSN = useConversationStore(useShallow((state) => state.currentConversation.sn));
+  const currentConversationColiSN = useConversationStore(useShallow((state) => state.currentConversation.coli_sn));
 
-	const [orderDetail, ] = useOrderStore(state => [state.orderDetail, ]);
+	const [orderDetail, customerDetail] = useOrderStore(state => [state.orderDetail, state.customerDetail ]);
 
   const isVisible = useVisibilityState();
 
   const [longList, setLongList] = useState([]);
   const [longListLoading, setLongListLoading] = useState(false);
   const [shouldScrollBottom, setShouldScrollBottom] = useState(true);
+
+  const prevSN = useRef(currentConversationSN);
+  const prevColiSN = useRef(currentConversationColiSN);
+
   useEffect(() => {
-    if (currentConversation.sn && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
+    if (!mobile) {
+      prevSN.current = currentConversationSN
+      prevColiSN.current = currentConversationColiSN
+    }
+
+    return () => {}
+  }, [])
+
+
+  useEffect(() => {
+    // console.log('effect sn', currentConversationSN, prevSN);
+    // if (isEmpty(prevSN) || currentConversationSN === prevSN) {
+    //   return () => {};
+    // }
+    // console.log('effect sn', currentConversationSN, prevSN.current, 'llllllllllllllllll');
+    // console.log('if fetch', (activeMessages.length))
+
+    if (currentConversationSN && (mobile || prevSN.current !== currentConversationSN) && (activeMessages.length < 20 || forceGetMessages !== undefined)) {
+      // console.log('effect sn NOT empty GO fetch', currentConversationSN);
       getFirstPageMessages(currentConversation);
+    } else if (currentConversationSN) {
+      // console.log('--------------------- set ref longlist', currentConversationSN, currentConversationColiSN)
+      prevSN.current = currentConversationSN;
+      prevColiSN.current = currentConversationColiSN;
     }
     setShouldScrollBottom(true);
     return () => {};
-  }, [currentConversation.sn]);
+  }, [currentConversationSN]);
 
   useEffect(() => {
-    if (currentConversation.sn) {
+    // console.log('effect coli_sn', currentConversationSN, currentConversationColiSN, prevColiSN.current, 'xxxxxxxxxxxx');
+    // console.log('effect coli_sn After if', currentConversationSN, currentConversationNeedLoaded);
+
+    if (currentConversation.sn && (mobile || prevColiSN.current !== currentConversationColiSN)) {
+      // console.log('effect coli_sn NOT empty GO fetch', currentConversationSN);
       getFirstPageMessages({...currentConversation, });
     }
     setShouldScrollBottom(true);
     return () => {};
-  }, [currentConversation.coli_sn]);
+  }, [currentConversationColiSN]);
 
   useEffect(() => {
     setLongList(activeMessages);
     const thisLastTime = activeMessages.length > 0 ? activeMessages[0].msgtime : '';
     const loadNextPage = !(activeMessages.length === 0 || activeMessages.length < MESSAGE_PAGE_SIZE);
-    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
+    updateCurrentConversation({ lasttime1: thisLastTime, loadNextPage, });
     return () => {};
-  }, [activeMessages]);
+  }, [activeMessages, currentConversationSN]);
 
   useEffect(() => {
-    if (updateRead === true && isVisible && currentConversation.opi_sn && activeMessages.length > 0) {
+    const cleanCurrent = currentConversation.unread_msg_count < UNREAD_MARK; // || currentConversation?.last_message?.actionId; // todo: 取direction, msg_direction === 'outbound' ?? after send
+    // if (updateRead === true && isVisible && currentConversation.opi_sn && activeMessages.length > 0) {
+    if (updateRead === true && isVisible && currentConversation.opi_sn && cleanCurrent) {
       fetchCleanUnreadMsgCount({ opisn: currentConversation.opi_sn, conversationid: currentConversation.sn });
       updateCurrentConversation({ unread_msg_count: 0 });
       refreshTotalNotify();
     }
     return () => {};
-  }, [activeMessages.length, isVisible]);
+  }, [activeMessages.length, isVisible, currentConversationSN]);
 
 
   let refreshing = false;
@@ -76,16 +112,21 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
     }
     refreshing = true;
     setMsgLoading(true);
+    setLongList([]);
     const data = await fetchMessages({
       conversationid: item.sn,
-      opisn: forceGetMessages ? currentConversation.opi_sn || '' : userId,
+      opisn: forceGetMessages ? item.opi_sn || '' : userId,
       whatsappid: item.whatsapp_phone_number,
       lasttime: '',
-      coli_sn: currentConversation.coli_sn || '',
+      coli_sn: item.coli_sn || '',
     })
+    prevSN.current = item.sn;
+    prevColiSN.current = item.coli_sn;
+
     const thisLastTime = data.length > 0 ? data[0].msgtime : ''; // orgmsgtime
     const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
-    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
+    updateCurrentConversation({ lasttime1: thisLastTime, loadNextPage, });
+    // setPrevSN(item.sn);
 
     setMsgLoading(false);
     receivedMessageList(item.sn, data);
@@ -106,7 +147,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
     setLongList(prevValue => data.concat(prevValue));
     const thisLastTime = data.length > 0 ? data[0].msgtime : '';
     const loadNextPage = !(data.length === 0 || data.length < MESSAGE_PAGE_SIZE);
-    updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
+    updateCurrentConversation({ lasttime1: thisLastTime, loadNextPage, });
     return data.length;
   };
 
@@ -126,7 +167,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
         return false;
 
       case 'document':
-        window.open(msg.data.link || msg.data.uri, '_blank', 'noopener,noreferrer');
+        window.open(msg.data.link || msg.data.uri, msg.data.link || msg.data.uri, POPUP_FEATURES);
         return false;
 
       default:
@@ -152,30 +193,69 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
   const handleContactClick = (data) => {
     return data.length > 1 ? handleContactListClick(data) : handleContactItemClick(data[0]);
   }
+
   // EmailEditor
+  const [setEditorOpen, setEditorProps] = useConversationStore((state) => [state.setEditorOpen, state.setEditorProps]);
 
   const [openEmailEditor, setOpenEmailEditor] = useState(false);
   const [fromEmail, setFromEmail] = useState('');
   const [ReferEmailMsg, setReferEmailMsg] = useState('');
-  const onOpenEditor = (emailMsgContent) => {
+  const [action, setAction] = useState('')
+  const onOpenEditor = (emailMsgContent, action='reply') => {
     const { from, to } = emailMsgContent; // msgtext
-    // console.log('emailMsgContent', emailMsgContent);
+    console.log('emailMsgContent', emailMsgContent);
 
     setOpenEmailEditor(true);
-    setFromEmail(to);
+    // setFromEmail(to);
+    setFromEmail(action === 'edit' ? from : to)
     setReferEmailMsg({...emailMsgContent, order_opi: Number(orderDetail?.opi_sn || userId)});
+    setAction(action)
+    setEditorProps({
+      action,
+      fromEmail: action === 'edit' ? from : to,
+      fromUser: Number(orderDetail?.opi_sn || userId),
+      fromOrder: currentConversation.coli_sn,
+      oid: orderDetail?.order_no || emailMsgContent?.coli_id,
+      receiverName: customerDetail.name,
+      quoteid: emailMsgContent.mai_sn || emailMsgContent.id,
+      conversationid: currentConversation.sn,
+      subject: emailMsgContent.subject,
+    });
+    // setEditorOpen(true);
   };
 
   const [openEmailDetail, setOpenEmailDetail] = useState(false);
   const [emailDetail, setEmailDetail] = useState({});
+  const [initialPosition, setInitialPosition] = useState({})
+  const [initialSize, setInitialSize] = useState({})
+  const [emailItem, setEmailItem] = useState({});
+
   const onOpenEmail = (emailMsg) => {
-    setOpenEmailDetail(true);
-    setEmailDetail({...emailMsg, order_opi: Number(orderDetail?.opi_sn || userId)});
+    // setOpenEmailDetail(true);
+    // setEmailDetail({...emailMsg, order_opi: Number(orderDetail?.opi_sn || userId)});
+    setEmailItem({ MAI_SN: emailMsg.msgtext?.email?.mai_sn, MAI_Subject: emailMsg.msgtext?.email?.subject, SenderReceiver: '', MAI_SendDate: '' })
   }
 
+  const [emailList, setEmailList] = useState([]);
+  useEffect(() => {
+    const _emailList = longList
+      .filter((item) => item.msg_source === 'email')
+      .map((ele) => ({
+        ...ele,
+        MAI_SN: ele.msgtext?.email?.mai_sn,
+        MAI_Subject: ele.msgtext?.email?.subject,
+        SenderReceiver: ele.from,
+        MAI_SendDate: ele.msgtime,
+        Direction: ele.msg_direction === 'inbound' ? '收' : '发',
+      }))
+      .reverse()
+    setEmailList(_emailList);
+    setEmailItem({});
+  }, [longList]);
+
   return (
     <>
-      <MessagesList
+      <MessagesList key={`${currentConversationSN}_${currentConversationColiSN}`}
         messages={longList}
         dataSourceLen={longList.length}
         {...{
@@ -222,18 +302,21 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
         onCancel={() => setNewChatModalVisible(false)}
       />
       {/* <EmailEditor open ={openEmailEditor} setOpen={setOpenEmailEditor} reference={ReferEmailMsg} setRefernce={setReferEmailMsg} {...{ fromEmail, }} key={'email-editor-reply'} /> */}
-      <EmailEditorPopup
+      {/* <EmailEditorPopup
         open={openEmailEditor}
         setOpen={setOpenEmailEditor}
         fromEmail={fromEmail}
         fromUser={Number(orderDetail?.opi_sn || userId)}
         fromOrder={currentConversation.coli_sn}
-        oid={orderDetail?.order_no}
+        oid={orderDetail?.order_no || ReferEmailMsg?.coli_id}
+        customerDetail={customerDetail}
         quoteid={ReferEmailMsg.mai_sn || ReferEmailMsg.id}
         conversationid={currentConversation.sn}
-        key={`email-msg-reply-top-popup_${ReferEmailMsg.id}`}
-      />
-      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`email-detail-${emailDetail.id}`} />
+        key={`email-msg-reply-online_${ReferEmailMsg.id}`}
+        action={action}
+      /> */}
+      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailMsg={emailDetail} key={`email-detail-${emailDetail.id}`} {...{initialPosition, initialSize, setInitialPosition, setInitialSize}} />
+      <EmailListDrawer showExpandBtn={false} list={emailList} emailItem={emailItem} currentConversationID={currentConversation.sn} oid={currentConversation.coli_sn} opi_sn={currentConversation.opi_sn} {...{onOpenEditor}} />
     </>
   )
 };

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -10,7 +10,7 @@ import useStyleStore from '@/stores/StyleStore';
 import { isEmpty } from '@/utils/commons';
 import { DEFAULT_CHANNEL } from '@/config';
 import { WABAccounts, WABAccountsMapped } from '@/channel/bubbleMsgUtils';
-import useAuthStore, { PERM_USE_EMAL} from '@/stores/AuthStore';
+import useAuthStore, { PERM_USE_WHATSAPP } from '@/stores/AuthStore';
 
 /**
  * @ignore
@@ -49,7 +49,10 @@ const ReplyWrapper = () => {
     setActiveChannel(activeKey);
   };
 
+  const [lastWABAMsg, setLastWABAMsg] = useState({});
+
   const [referenceMsg] = useConversationStore((state) => [state.referenceMsg]);
+  const [sessionType] = useConversationStore((state) => [state.currentConversation.session_type]);
   const activeMessages = useConversationStore(
     useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn] : []))
   );
@@ -59,6 +62,12 @@ const ReplyWrapper = () => {
     const channel = thisLastChannel === 'email' ? 'email' : DEFAULT_CHANNEL;
     setActiveChannel((thisLastChannel || DEFAULT_CHANNEL).toLowerCase());
 
+    // console.time('lastWABAMsg');
+    const lastInWABAMsgI = activeMessages.findLastIndex(ele => ele.msg_source === 'WABA' && ele.msg_direction=== 'inbound' && ele.status !== 'failed');
+    const lastWABAMsg = lastInWABAMsgI !== -1 ? activeMessages[lastInWABAMsgI] : {};
+    setLastWABAMsg(lastWABAMsg);
+    // console.timeEnd('lastWABAMsg')
+
     return () => {};
   }, [activeMessages]);
 
@@ -72,12 +81,31 @@ const ReplyWrapper = () => {
 
   const replyTypes = [
     // { key: 'waba', label: mobile ? '' : (<WABASwitcher />), icon: <WABIcon />, children: <InputComposer channel={'waba'} /> },
-    { key: 'waba', label: mobile ? '' : `商业号(${WABAccountsMapped[whatsAppBusiness]?.verifiedName || '-'})`, icon: <WABIcon />, children: <InputComposer currentActive={activeChannel==='waba'} channel={'waba'} /> },
-    { key: 'email', label: mobile ? '' : '邮件', icon: <MailOutlined className='text-indigo-500' />, children: isPermitted(PERM_USE_EMAL) ? <EmailComposer currentActive={activeChannel==='email'} /> : <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>敬请期待</div> },
-    // { key: 'whatsapp', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
-    { key: 'wa', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>正在开发……敬请期待</div> },
+    {
+      key: 'waba', disabled: sessionType === 1,
+      label: mobile ? '' : `商业号(${WABAccountsMapped[whatsAppBusiness]?.verifiedName || '-'})`,
+      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: 'wai',
+      label: mobile ? '' : 'WhatsApp',
+      icon: <WhatsAppOutlined className='text-whatsapp' />,
+      children: isPermitted(PERM_USE_WHATSAPP) ? (
+        <InputComposer channel={'wai'} />
+      ) : (
+        <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>请联系你的主管申请开通</div>
+      ),
+    },
+    // {
+    //   key: 'wa',
+    //   label: mobile ? '' : 'WhatsApp',
+    //   icon: <WhatsAppOutlined className='text-whatsapp' />,
+    //   children: <div className='p-2 py-4 text-center text-whatsapp bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>正在开发……敬请期待</div>,
+    // },
     // TODO: ⬆️WA未登录，要提示用户到个人页面扫码
-  ];
+  ]
 
   return (
     <div className='reply-wrapper rounded rounded-b-none emoji bg-white'>

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

@@ -1,12 +1,13 @@
-import { LinkOutlined, MailOutlined, PhoneOutlined, UserOutlined, WhatsAppOutlined } from "@ant-design/icons";
-import { App, Button, Card, Empty, Flex, Select, Spin, Typography, Divider, Modal, List, Row, Col, Tag } from "antd";
+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, Badge } from "antd";
 import { useEffect, useState, useRef, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, } from "react-router-dom";
+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 } 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";
@@ -14,8 +15,12 @@ import ConversationsNewItem from "./../ConversationsNewItem";
 import { useConversationNewItem } from "@/hooks/useConversation";
 import EmailDetail from './../Components/EmailDetail';
 import { postEditConversationItemColiAction } from "@/actions/ConversationActions";
+import useStyleStore from '@/stores/StyleStore';
+import SupplierEmailDrawer from "../Components/EmailListDrawer";
 
-const CustomerProfile = () => {
+// @Deprecated 作废，试用 OrderProfile 代替
+const CustomerProfile = ({ disabled }) => {
+  const navigate = useNavigate();
 	const { notification, message } = App.useApp();
 	const [loading, setLoading] = useState(false);
 	const [isModalOpen, setIsModalOpen] = useState(false);
@@ -23,19 +28,21 @@ const CustomerProfile = () => {
 	const [orderList, setOrderList] = useState([]);
 	const orderCommentRef = useRef(null);
 
-	const currentOrder = useConversationStore(state => state.currentConversation?.coli_sn || "");
-	const currentConversationID = useConversationStore(state => state.currentConversation?.sn || "");
+  const [mobile] = useStyleStore(state => [state.mobile]);
+	const currentOrder = useConversationStore(useShallow(state => state.currentConversation?.coli_sn || ""));
+	const currentConversationID = useConversationStore(useShallow(state => state.currentConversation?.sn || ""));
 	const channels = useConversationStore(state => state.currentConversation?.channels);
 	const [updateCurrentConversation] = useConversationStore(state => [state.updateCurrentConversation]);
-	const [emailMsg, setEmailMsg, detailPopupOpen, setDetailOpen, openDetail] = useConversationStore(state => [state.emailMsg, state.setEmailMsg, state.detailPopupOpen, state.setDetailOpen, state.openDetail]);
 	const loginUser = useAuthStore(state => state.loginUser);
 	const [
     orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder
    ] = useOrderStore(s => [
     s.orderDetail, s.customerDetail, s.lastQuotation, s.quotationList, s.fetchOrderDetail, s.setOrderPropValue, s.appendOrderComment, s.fetchOtherEmail, s.otherEmailList, s.fetchHistoryOrder
   ]);
+  const [resetOrderStore] = useOrderStore(state => [state.resetOrderStore])
 
   const [chatOrder, setChatOrder] = useState(currentOrder);
+  const [orderRemindState, setOrderRemindState] = useState(orderDetail.remindstate);
 
 	const orderLabelOptions = copy(OrderLabelDefaultOptions);
 	orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });
@@ -48,7 +55,6 @@ const CustomerProfile = () => {
         const mapOrderList = orderList.map(o => {
           return { value: o.coli_sn, label: o.coli_id }
         })
-        // mapOrderList.unshift({ value: 0, label: "全部" });
         setOrderList(mapOrderList)
         if (!isEmpty(orderList)) {
           setChatOrder(currentOrder)
@@ -56,16 +62,26 @@ const CustomerProfile = () => {
       })
   }
 
+	const prevOrder = useRef(currentOrder);
+  useEffect(() => {
+    if (!mobile) prevOrder.current = currentOrder
+    // console.log('---- 000 useEffect -----', currentOrder)
+    return () => {}
+  }, [])
+
 	useEffect(() => {
     setChatOrder(currentOrder)
-		if (currentOrder) {
+    // console.log('---- useEffect -----', currentOrder, prevOrder.current)
+		if (currentOrder && (mobile || (prevOrder.current !== currentOrder) || isEmpty(orderDetail))) {
 			setLoading(true);
 			fetchOrderDetail(currentOrder)
         .then(result => {
+          prevOrder.current = currentOrder
           setOrderNumber(result.orderDetail.order_no)
           setChatOrder(result.orderDetail.order_no)
+          setOrderRemindState(String(result.orderDetail.remindstate));
           const queryEmail = result.customerDetail.email || channels?.email || '';
-          const queryWA = channels?.whatsapp_phone_number || ''
+          const queryWA = result.customerDetail.whatsapp_phone_number || result.customerDetail.phone || channels?.whatsapp_phone_number || ''
           getHistoryOrder(queryEmail, queryWA)
         })
 				.finally(() => setLoading(false))
@@ -79,20 +95,23 @@ const CustomerProfile = () => {
 				});
 
 
-      fetchOtherEmail(currentOrder)
-        .then(result => {
-          // console.info(result)
-        })
-        .finally(() => setLoading(false))
-        .catch(reason => {
-          notification.error({
-            message: "查询供应商邮件出错",
-            description: reason.message,
-            placement: "top",
-            duration: 60,
-          });
-        });
-		}
+      // fetchOtherEmail(currentOrder)
+      //   .then(result => {
+      //     // console.info(result)
+      //   })
+      //   .finally(() => setLoading(false))
+      //   .catch(reason => {
+      //     notification.error({
+      //       message: "查询供应商邮件出错",
+      //       description: reason.message,
+      //       placement: "top",
+      //       duration: 60,
+      //     });
+      //   });
+		} else if (isEmpty(currentOrder)) {
+      resetOrderStore();
+    }
+    return () => {} // resetOrderStore()
 	}, [currentOrder]);
 
 	let regularText = "";
@@ -107,22 +126,7 @@ const CustomerProfile = () => {
 		setNewChatModalVisible(false);
 	};
 
-  const handleEmailClick = useCallback((emailItem) => {
-    const emailMsg = {
-      conversationid: currentConversationID,
-      order_opi: orderDetail.opi_sn,
-      coli_sn: currentOrder,
-      id: emailItem.MAI_SN,
-      msgOrigin: {
-        from: '',
-        to: '',
-        id: emailItem.MAI_SN,
-        email: { mai_sn: emailItem.MAI_SN, subject: emailItem.MAI_Subject, id: emailItem.MAI_SN },
-      },
-    }
-    setEmailMsg(emailMsg);
-    openDetail();
-  }, [])
+  const [clicked3rdEmailItem, setClicked3rdEmailItem] = useState({});
 
   const handleOrderSwitch = async (coli_sn) => {
     await postEditConversationItemColiAction({conversationid: currentConversationID, coli_sn });
@@ -130,9 +134,27 @@ const CustomerProfile = () => {
     updateCurrentConversation({ coli_sn });
   };
 
+  const handleSetRemindState = async (checkedValue) => {
+    const state = checkedValue.filter(v => v !== orderRemindState);
+    const oldState = orderRemindState;
+
+    try {
+      if (isEmpty(state)) {
+        setOrderRemindState(null);
+      } else {
+        setOrderRemindState(state[0]);
+      }
+      await fetchSetRemindStateAction({ coli_sn: chatOrder, remindstate: state });
+      message.success('设置成功');
+    } catch (error) {
+      notification.warning({ message: '设置失败', description: error.message, placement: 'top', duration: 60 });
+      setOrderRemindState(oldState);
+    }
+  }
+
 	if (currentOrder) {
 		return (
-			<div className="divide-x-0 divide-y divide-dashed divide-gray-300">
+			<div className="divide-x-0 divide-y divide-dashed divide-gray-300 [&_.ant-divider]:my-1">
 				<Spin spinning={loading}>
 					<Card
 						className="p-2 "
@@ -144,10 +166,11 @@ const CustomerProfile = () => {
               variant="borderless"
               value={chatOrder}
               options={orderList}
-              onSelect={handleOrderSwitch}
+              // onSelect={handleOrderSwitch}
+              onChange={handleOrderSwitch}
               />}
 						actions={[
-							<Select
+							<Select disabled={disabled} className={`[&_.ant-select-selection-item]:text-gray-950`}
 								key={"orderlabel"}
 								size="small"
 								style={{
@@ -171,7 +194,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={{
@@ -199,12 +222,23 @@ const CustomerProfile = () => {
 						<Flex gap={10}>
 							<Flex vertical={true} justify="space-between">
 								<Typography.Text>
+                  <FieldNumberOutlined className="pr-1" />
+									{orderDetail.order_no}
+								</Typography.Text>
+								<Typography.Text>
 									<UserOutlined className=" pr-1" />
 									{customerDetail.name + regularText}
 								</Typography.Text>
 								<Typography.Text>
 									<PhoneOutlined className=" pr-1" />
-									{customerDetail.phone}
+									<Button
+										type="link"
+										size={"small"}
+										onClick={() => {
+											navigate(`/callcenter/call/` + customerDetail.phone);
+										}}>
+										{customerDetail.phone}
+									</Button>
 								</Typography.Text>
 								<Typography.Text>
 									<MailOutlined className=" pr-1" />
@@ -217,7 +251,7 @@ const CustomerProfile = () => {
 										size={"small"}
 										onClick={() => {
 											setNewChatModalVisible(true);
-											setNewChatFormValues((prev) => ({ ...prev, phone_number: customerDetail.whatsapp_phone_number, name: customerDetail.name, email: customerDetail.email, is_current_order: true }))
+											setNewChatFormValues((prev) => ({ ...prev, phone_number: customerDetail.whatsapp_phone_number, name: customerDetail.name, email: customerDetail.email, is_current_order: true, coli_id: orderDetail.order_no }))
 										}}>
 										{customerDetail.whatsapp_phone_number}
 									</Button>
@@ -233,13 +267,19 @@ const CustomerProfile = () => {
 							</Flex>
 						</Flex>
 					</Card>
+          <Divider orientation="left">
+            <Typography.Text strong>催信:</Typography.Text>
+          </Divider>
+          {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>
 					<Flex vertical={true} className="p-2 ">
 						<Conditional
 							condition={quotationList.length > 0}
-							whenFalse={<Empty description={<span>暂无报价</span>}></Empty>}
+							whenFalse={<Empty imageStyle={{ height: 30 }} escription={<span>暂无报价</span>}></Empty>}
 							whenTrue={
 								<>
 									<p className="m-0 py-2 line-clamp-2 ">
@@ -254,12 +294,13 @@ const CustomerProfile = () => {
 								</>
 							}
 						/>
-					</Flex>
-
+					</Flex>*/}
+          {/*
           <Divider orientation="left">
             <Typography.Text strong>供应商邮件</Typography.Text>
+            <Badge count={otherEmailList.length} className='ml-2' color="oklch(62.3% 0.214 259.815)" />
+            <SupplierEmailDrawer title={'供应商邮件'} list={otherEmailList} currentConversationID={currentConversationID} opi_sn={orderDetail.opi_sn} oid={currentOrder} emailItem={clicked3rdEmailItem} />
           </Divider>
-
           <List
             dataSource={otherEmailList}
             pagination={
@@ -271,21 +312,27 @@ const CustomerProfile = () => {
             }
             renderItem={(email) => (
               <List.Item
-                className='hover:bg-stone-50 cursor-pointer'
-                onClick={() => {
-                  handleEmailClick(email)
-                }}>
+                className='hover:bg-stone-50 cursor-pointer [&.ant-list-item]:py-1 [&.ant-list-item]:px-2'
+                onClick={() => setClicked3rdEmailItem(email) }>
                   <Flex
-                    vertical
+                    vertical className="w-full"
                   >
-                    <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}} 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"} disabled={disabled}
+              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
@@ -317,16 +364,8 @@ 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}`} />
 
 			</div>
 		);

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

@@ -3,6 +3,7 @@ import { Button, Flex, List, Popover } from 'antd'
 import { useState } from 'react'
 import EmailQuotation from '../Components/EmailQuotation'
 
+// @Deprecated 作废，已经不用
 const QuotesHistory = ((props) => {
 
   const [open, setOpen] = useState(false)

src/views/DesktopApp.jsx

@@ -22,14 +22,11 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 import { Link, NavLink, Outlet, useHref } from 'react-router-dom'
 
 import '@/assets/App.css'
-import AppLogo from '@/assets/highlights_travel_300_300.png'
+import AppLogo from '@/assets/highlights_travel_300_300_250613.png'
 import 'react-chat-elements/dist/main.css'
 import ReloadPrompt from './ReloadPrompt'
 import ClearCache from './ClearCache'
 
-import SnippetList from '@/views/accounts/SnippetList'
-import GeneratePayment from '@/views/accounts/GeneratePayment'
-
 import { BUILD_VERSION, BUILD_DATE } from '@/config'
 
 const { Header, Footer, Content } = Layout
@@ -103,6 +100,9 @@ function DesktopApp() {
       intervalId = setInterval(step, 1000); // 1000ms = 1s
     } else {
       document.title = '销售平台';
+      if ('clearAppBadge' in navigator) {
+        navigator.clearAppBadge().catch(() => {})
+      }
     }
     return () => {
       if (intervalId) {
@@ -122,26 +122,8 @@ function DesktopApp() {
           width: '100%',
           background: 'white',
         }}>
-        <Drawer
-          title='图文集'
-          placement={'top'}
-          size={'large'}
-          onClose={() => closeSnippetDrawer()}
-          open={snippetDrawerOpen}
-          >
-          <SnippetList></SnippetList>
-        </Drawer>
-        <Drawer
-          title='支付链接'
-          placement={'top'}
-          size={'large'}
-          onClose={() => closePaymentDrawer()}
-          open={paymentDrawerOpen}
-          >
-          <GeneratePayment></GeneratePayment>
-        </Drawer>
         <Row gutter={{ md: 24 }} align='middle'>
-          <Col flex='220px'>
+          <Col flex='240px'>
             <NavLink to='/'>
               <img src={AppLogo} className='logo' alt='App logo' />
             </NavLink>
@@ -170,9 +152,17 @@ function DesktopApp() {
                     </Link>
                   ),
                 },
+                // {
+                //   key: '/callcenter/call',
+                //   label: <Link to='/callcenter/call'>语音通话</Link>,
+                // },
                 {
                   key: '/chat/history',
-                  label: <Link to='/chat/history'>聊天记录</Link>,
+                  label: <Link to='/chat/history'>历史记录</Link>,
+                },
+                {
+                  key: '/customer_relation/index',
+                  label: <Link to='/customer_relation/index'>客户运营</Link>,
                 },
               ]}
             />
@@ -185,7 +175,7 @@ function DesktopApp() {
               display: 'flex',
               justifyContent: 'end',
             }}>
-            <ReloadPrompt />
+            <ReloadPrompt style={{marginRight: 'auto'}} />
             <Dropdown
               menu={{
                 items: [
@@ -232,7 +222,7 @@ function DesktopApp() {
       <Layout>
         <Content
           style={{
-            padding: 24,
+            padding: 8,
             margin: 0,
             minHeight: 280,
             background: colorBgContainer,