Merge remote-tracking branch 'origin/main' into dev/chat

# Conflicts:
#	package.json
#	src/main.jsx
#	src/stores/ConversationContext.js
#	src/views/Conversations/ChatWindow.jsx
#	src/views/Conversations/Components/ConversationsList.jsx
#	src/views/Conversations/Components/CustomerProfile.jsx
#	src/views/Conversations/Components/InputBox.jsx
#	src/views/Conversations/Components/Messages.jsx
#	src/views/Conversations/ConversationProvider.jsx
#	src/views/Conversations/Conversations.css
#	tailwind.config.js
#	vite.config.js

src/main.jsx

@@ -2,23 +2,22 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { configure } from 'mobx';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { AuthContext } from '@/stores/AuthContext';
+import { AuthContext } from '@/stores/AuthContext'
-import { ThemeContext } from '@/stores/ThemeContext';
+import { ThemeContext } from '@/stores/ThemeContext'
-import ConversationProvider from '@/views/Conversations/ConversationProvider';
+import ConversationProvider from '@/views/Conversations/ConversationProvider'
-import Auth from '@/stores/Auth';
+import Auth from '@/stores/Auth'
-import App from '@/views/App';
+import App from '@/views/App'
-import Standlone from '@/views/Standlone';
+import Standlone from '@/views/Standlone'
-import OrderFollow from '@/views/OrderFollow';
+import OrderFollow from '@/views/OrderFollow'
-import ChatHistory from '@/views/ChatHistory';
+import ChatHistory from '@/views/ChatHistory'
-import SalesManagement from '@/views/SalesManagement';
+import SalesManagement from '@/views/SalesManagement'
-import DingdingQRCode from '@/views/DingdingQRCode';
+import DingdingQRCode from '@/views/DingdingQRCode'
-import DingdingCallbak from '@/views/DingdingCallbak';
+import AccountProfile from '@/views/AccountProfile'
-import AccountProfile from '@/views/AccountProfile';
+import ErrorPage from '@/views/ErrorPage'
-import ErrorPage from '@/views/ErrorPage';
 
-import Conversations from '@/views/Conversations/ChatWindow';
+import Conversations from '@/views/Conversations/ChatWindow'
-// import Conversations from '@/views/Conversations/ChatApp';
+// import Conversations from '@/views/Conversations/ChatApp'
-import '@/assets/index.css';
+import '@/assets/index.css'
 
 configure({
   useProxies: 'ifavailable',
@@ -48,7 +47,6 @@ const router = createBrowserRouter([
     element: <Standlone />,
     children: [
       { path: 'dingding/qrcode', element: <DingdingQRCode /> },
-      { path: 'dingding/callback', element: <DingdingCallbak /> },
     ],
   },
 ]);

src/views/AccountProfile.jsx

@@ -22,10 +22,10 @@ function AccountProfile() {
     <Row> 
       <Col span={12} offset={6}>
         <Descriptions title='个人信息' layout='vertical' column={2}>
-          <Descriptions.Item label='名字'><Space size='middle'><Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${new Date().toString()}`} />​骆梅玉​</Space></Descriptions.Item>
+          <Descriptions.Item label='名字'><Space size='middle'><Avatar src={loginUser.avatarUrl} />{loginUser.username}​</Space></Descriptions.Item>
-          <Descriptions.Item label='手机'>+86-15878301602</Descriptions.Item>
+          <Descriptions.Item label='HT 账号'>{loginUser.accountName}</Descriptions.Item>
-          <Descriptions.Item label='邮件'>christyluo@hainatravel.com</Descriptions.Item>
+          <Descriptions.Item label='手机'>{loginUser.stateCode} {loginUser.mobile}</Descriptions.Item>
-          <Descriptions.Item label='部门'>海纳业务组-GH事业部群-GH销售</Descriptions.Item>
+          <Descriptions.Item label='邮件'>{loginUser.email}</Descriptions.Item>
         </Descriptions>
       </Col>
     </Row>

src/views/App.jsx

@@ -15,7 +15,7 @@ import { isEmpty } from '@/utils/commons';
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
 
-// SecurityApp
+// AuthApp
 function App() {
 
   const { colorPrimary, borderRadius } = useThemeContext()

src/views/DingdingCallbak.jsx

@@ -1,56 +0,0 @@
-import React, { useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { Card, Typography, Flex, Result, Button } from 'antd'
-import { useRequest } from 'ahooks'
-
-const { Title } = Typography
-const { Meta } = Card
-
-import { useAuthContext } from '@/stores/AuthContext'
-
-function DingdingCallbak() {
-
-  const navigate = useNavigate()
-  const params = new URLSearchParams(window.location.search)
-  const code = params.get('code')
-  const state = params.get('state')
-
-  console.info('code: ' + code)
-  console.info('state: ' + state)
-  
-  const { loginUser, permissionList } = useAuthContext()
-  console.info('loginUser: ')
-  console.info(loginUser)
-  console.info('permissionList: ')
-  console.info(permissionList)
-
-
-  // const { data, error, loading } = useRequest(() => {
-  //   return new Promise((resolve) => {
-  //     setTimeout(() => {
-  //       resolve('use Request data...');
-  //     }, 1000);
-  //   });
-  // });
-  setTimeout(() => {
-    loginUser.userId = 999
-    loginUser.openId = '987654321'
-    navigate('/s/account/profile')
-  }, 1000);
-
-  useEffect(() => {
-  }, [])
-
-  return (
-    <Flex justify='center' align='center' gap='middle' vertical>
-    <Title level={4}>正在获取你的权限，请稍等</Title>
-    <Result
-    status='403'
-    title='403'
-    subTitle='你没有绑定钉钉账号，无法登陆。'
-  />
-    </Flex>
-  )
-}
-
-export default DingdingCallbak;

src/views/DingdingQRCode.jsx

@@ -1,15 +1,21 @@
-import { Card, Flex, Typography } from 'antd'
+import { Result, Spin, Flex, Typography } from 'antd'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useAuthContext } from '@/stores/AuthContext'
 
 const { Title } = Typography
-const { Meta } = Card
 
 // 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information#title-qpi-0qv-anm
 
 function DingdingQRCode() {
 
+  const navigate = useNavigate()
+  const { loginUser } = useAuthContext()
+  const [loginStatus, setLoginStatus] = useState(0)
+
   useEffect(() => {
-    import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then((module) => {
+    import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => {
       window.DTFrameLogin(
         {
           id: 'qrCodeContainer',
@@ -17,34 +23,76 @@ function DingdingQRCode() {
           height: 300,
         },
         {
-          redirect_uri: encodeURIComponent('https://sales.mycht.cn/dingding/callback'),
+          redirect_uri: encodeURIComponent('https://sales.mycht.cn/p/dingding/callback'),
           client_id: 'dingwgdx6emlxr3fcrg8',
           scope: 'openid',
           response_type: 'code',
-          state: 'state1111',
+          state: 'global-sales',
           prompt: 'consent',
         },
         (loginResult) => {
-          const { redirectUrl, authCode, state } = loginResult
+          const { authCode } = loginResult
-          // 这里可以直接进行重定向
+          console.log(loginResult)
-          window.location.href = redirectUrl
+          setLoginStatus(200)
-          // 也可以在不跳转页面的情况下，使用code进行授权
+
-          console.log(authCode)
+          fetch(`https://p9axztuwd7x8a7.mycht.cn/dingtalk/dingtalkwork/WhatsAppAuth?authCode=${authCode}`)
+            .then(response => response.json())
+            .then(json => {
+              // {"errcode":0,"errmsg":"ok","result":{"nick":"廖一军","unionId":"j7cuUCplZe1ZiiqjQNUUmFwiEiE","avatarUrl":"https://static-legacy.dingtalk.com/media/lALPBDDrhXr716HNAoDNAoA_640_640.png","openId":"iioljiPmZ4RPoOYpkFiSn7IKAiEiE","mobile":"18777396951","stateCode":"86","email":"lyj@hainatravel.com","opisn":"383"}}
+              if (json.errcode === 0) {
+                loginUser.userId = json.result.opisn
+                loginUser.accountName = json.result.opisn
+                loginUser.username = json.result.nick
+                loginUser.avatarUrl = json.result.avatarUrl
+                loginUser.stateCode = json.result.stateCode
+                loginUser.mobile = json.result.mobile
+                loginUser.email = json.result.email
+                loginUser.openId = json.result.openId
+                navigate('/account/profile')
+              } else {
+                setLoginStatus(403)
+              }
+            })
         },
         (errorMsg) => {
-          // 这里一般需要展示登录失败的具体原因
+          setLoginStatus(403)
-          alert(`Login Error: ${errorMsg}`)
+          console.error(`Login Error: ${errorMsg}`)
         },
       )
     })
   }, [])
 
-  return (
+  if (loginStatus === 200) {
-    <Flex justify='center' align='center' gap='middle' vertical>
+    return (
-      <Title level={4}>使用钉钉扫码</Title>
+      <Flex justify='center' align='center' gap='middle' vertical>
-      <div id='qrCodeContainer' style={{ border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
+        <Result
-    </Flex>
+      status='success'
-  )
+      title='扫码成功'
+      subTitle='正在获取你的权限'
+      extra={[
+        <Spin size='small' />
+      ]}
+    />
+      </Flex>
+    )
+  } else if (loginStatus === 403) {
+    return (
+      <Flex justify='center' align='center' gap='middle' vertical>
+      <Result
+      status='403'
+      title='403'
+      subTitle='你没有绑定钉钉账号，无法登陆。'
+    />
+      </Flex>
+    )
+  } else {
+    return (
+      <Flex justify='center' align='center' gap='middle' vertical>
+        <Title level={4}>使用钉钉扫码</Title>
+        <div id='qrCodeContainer' style={{ border: '12px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
+      </Flex>
+    )
+  }
 }
 
 export default DingdingQRCode

src/views/OrderFollow.jsx

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router-dom'
 import { memo, useMemo, useCallback, useEffect, useState } from 'react'
 import {
-  Row, Col, Divider, Table, Card, Button, Input,
+  Row, Badge, Divider, Table, Card, Button, Input,
-  Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
+  Space, Tag, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
@@ -83,29 +83,11 @@ const columns = [
     title: '订单号',
     dataIndex: 'orderNumber',
     key: 'orderNumber',
-    width: 300,
+    width: 222,
-    render: (text, record, inde) => {
+    render: (text, record, index) => {
-      return (
+      if (index === 1) return <Space size='middle'>{text}<Tag color='red'>重点</Tag></Space>
-        <Space size='middle'>
+      else if (index === 2) return <Space size='middle'>{text}<Tag color='green'>潜力</Tag></Space>
-          {text}
+      else return <Space size='middle'>{text}<Tag color='blue'>休眠</Tag></Space>
-          <Segmented
-            options={[
-              {
-                label: '潜力',
-                value: '潜力',
-              },
-              {
-                label: '重点',
-                value: '重点',
-              },
-              {
-                label: '休眠',
-                value: '休眠',
-              },
-            ]}
-          />
-        </Space>
-      )
     }
   },
   {
@@ -116,6 +98,13 @@ const columns = [
       return (
         <Space size='middle'>
           <a>{text}</a>
+          <Badge
+        className="site-badge-count-109"
+        count={Math.floor(Math.random() * (100 - 2 + 1) + 2)}
+        style={{
+          backgroundColor: '#52c41a',
+        }}
+      />
         </Space>
       )
     }
@@ -125,42 +114,11 @@ const columns = [
     dataIndex: 'orderStatus',
     key: 'orderStatus',
     width: 120,
-    render: (text, record, inde) => {
+    render: (text, record, index) => {
-      return (
+      if (index === 1) return text + '(一催)'
-        <Select
+      else if (index === 2) return text + '(二催)'
-          defaultValue='新订单'
+      else if (index === 3) return text + '(三催)'
-          style={{
+      else return text
-            width: 100,
-          }}
-          bordered={false}
-          options={[
-            {
-              value: '新订单',
-              label: '新订单',
-            },
-            {
-              value: '报价中',
-              label: '报价中',
-            },
-            {
-              value: '丢失',
-              label: '丢失',
-            },
-            {
-              value: '一催',
-              label: '一催',
-            },
-            {
-              value: '二催',
-              label: '二催',
-            },
-            {
-              value: '三催',
-              label: '三催',
-            },
-          ]}
-        />
-      )
     }
   },
   {
@@ -181,11 +139,10 @@ const columns = [
   },
 ]
 
-const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
+const AdvanceSearchForm = memo(function ({ onSubmit }) {
   const [form] = Form.useForm()
-  console.info('AdvanceSearch: ')
   function handleSubmit(values) {
-    onSubmit(values);
+    onSubmit?.(values)
   }
   return (
     <Form
@@ -278,8 +235,6 @@ function OrderFollow() {
   const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
 
   const handleSubmit = useCallback((criteria) => {
-    console.info('onSubmit.searchCriteria: ')
-    console.info(criteria)
     setSearchCriteria({
       ...criteria,
       type: 'advance'
@@ -292,7 +247,7 @@ function OrderFollow() {
   return (
     <>
       <Space direction='vertical' size='large' style={{ width: '100%' }}>
-        <Flex gap='large' justify='start' align='center' horizontal>
+        <Flex gap='large' justify='start' align='center' horizontal='true'>
           <Radio.Group
             options={[
               { label: '今日任务', value: 'today' },
@@ -327,13 +282,11 @@ function OrderFollow() {
   )
 
   function OrderList({ searchCriteria }) {
-
-    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
-    console.info(countryList)
-    console.info('OrderList.searchCriteria: ')
     console.info(searchCriteria)
+    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+  
     return (
-      <Table loading={countryList === null} dataSource={dataSource} columns={columns} />
+      <Table loading={countryList === null} dataSource={countryList === null ? null : dataSource} columns={columns} />
     )
   }
 }

src/views/SalesManagement.jsx

@@ -1,17 +1,16 @@
 import { useNavigate } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
+import { memo, useRef, useCallback, useEffect, useState } from 'react'
-import { Row, Col, Divider, Table , Card, Button, Input, 
+import {
-  Space, Empty, Radio, Select, DatePicker, Spin, List, Avatar
+  Row, Col, Divider, Table, Card, Button, Input,
+  Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined, ImportOutlined
 } from '@ant-design/icons'
 
-import {useFormInput} from '@/hooks/useFormInput'
 import {useGetJson} from '@/hooks/userFetch'
 
-const { Search } = Input;
+const { RangePicker } = DatePicker
-const { RangePicker } = DatePicker;
 
 const dataSource = [
   {
@@ -72,70 +71,155 @@ const dataSource = [
   },
 ];
 
-const columns = [
+const AdvanceSearchForm = memo(function ({ onSubmit }) {
-  {
+  console.info('AdvanceSearchForm')
-    title: '顾问',
+  const [form] = Form.useForm()
-    dataIndex: 'travelAdvisor',
+  function handleSubmit(values) {
-    key: 'travelAdvisor',
+    onSubmit?.(values)
-  },
+  }
-  {
+  return (
-    title: '客人名单',
+    <Form
-    dataIndex: 'contactList',
+      layout={'inline'}
-    key: 'contactList',
+      form={form}
-  },
+      initialValues={{ orderLabel: '全部' }}
-  {
+      onFinish={handleSubmit}
-    title: '重点订单',
+      style={{
-    dataIndex: 'important',
+        maxWidth: 'none',
-    key: 'important',
+      }}
-  },
+    >
-  {
+      <Form.Item label='标签' name='orderLabel'>
-    title: '潜力客户',
+        <Select
-    dataIndex: 'star',
+          style={{
-    key: 'star',
+            width: 100,
-  },
+          }}
-  {
+          options={[
-    title: '成型',
+            {
-    dataIndex: 'ing',
+              value: '潜力',
-    key: 'ing',
+              label: '潜力',
-  },
+            },
-];
+            {
+              value: '重点',
+              label: '重点',
+            },
+            {
+              value: '休眠',
+              label: '休眠',
+            }
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label='状态' name='orderStatus'>
+        <Select
+          style={{
+            width: 100,
+          }}
+          options={[
+            {
+              value: '新订单',
+              label: '新订单',
+            },
+            {
+              value: '报价中',
+              label: '报价中',
+            },
+            {
+              value: '丢失',
+              label: '丢失',
+            },
+            {
+              value: '一催',
+              label: '一催',
+            },
+            {
+              value: '二催',
+              label: '二催',
+            },
+            {
+              value: '三催',
+              label: '三催',
+            },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label='订单号' name='orderNumber'>
+        <Input placeholder='订单号' allowClear />
+      </Form.Item>
+      <Form.Item label='出发日期' name='startDate'>
+        <RangePicker />
+      </Form.Item>
+      <Form.Item >
+        <Button type='primary' htmlType='submit'>搜索</Button>
+      </Form.Item>
+    </Form>
+  )
+})
 
-function SalesManagement() {
+const SalesTable = function({formValues}) {
+  console.info('SalesTable')
+  console.info(formValues)
 
-  const keywordProps = useFormInput('')
+  const isMounted = useRef(false)
-  const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+  
-  console.info(countryList)
+  const [salesData, setSalesData] = useState([])
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
+    console.info('SalesTable.useEffect')
+    console.info(isMounted)
+    setLoading(true)
+    // setSalesData([]) // 可改为设置加载状态
+    setTimeout(() => {
+      const randomData = dataSource.map(data => {
+        data.important = Math.floor(Math.random() * (100 - 2 + 1) + 2)
+        return data
+      })
+      setSalesData([...randomData])
+      setLoading(false)
+    }, 1000)
+    isMounted.current = true
+  }, [formValues])
+    
+  const columns = [
+    {
+      title: '顾问',
+      dataIndex: 'travelAdvisor',
+      key: 'travelAdvisor',
+    },
+    {
+      title: '重点订单',
+      dataIndex: 'important',
+      key: 'important',
+    },
+    {
+      title: '潜力客户',
+      dataIndex: 'star',
+      key: 'star',
+    },
+    {
+      title: '成型',
+      dataIndex: 'ing',
+      key: 'ing',
+    },
+  ]
+  return (
+    <Table dataSource={salesData} loading={loading} columns={columns} />
+  )
+}
+
+function SalesManagement() {
+
+  const [formValues, setFormValues] = useState({})
+
+  const handleSubmit = useCallback((values) => {
+    setFormValues({...values})
   }, [])
-  
+    
   return (
-    <Spin spinning={false} delay={500}>
+    <>
-      <Space direction='vertical' style={{ width: '100%' }}>
+      <AdvanceSearchForm onSubmit={handleSubmit} />
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-        <Col span={6}>
-        <RangePicker />
-          </Col>
-        <Col span={6}>
-        <Input placeholder='关键词' {...keywordProps} />
-          </Col>
-        <Col span={6}>
-          <Button icon={<ImportOutlined />} onClick={() => {console.info(keywordProps.value)}}>OK</Button>
-          <Button icon={<ImportOutlined />}>导入联系人</Button>
-          </Col>
-        </Row>
-      </Space>
       <Divider plain orientation='left'></Divider>
-      <Space
+      <SalesTable formValues={formValues} />
-        direction='vertical'
+    </>
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
-        <Table dataSource={dataSource} columns={columns} />
-      </Space>
-    </Spin>
   )
 }
 

vite.config.js

@@ -17,29 +17,18 @@ export default defineConfig({
     sourcemap: true,
     manifest: true,
     chunkSizeWarningLimit: 555,
-    rollupOptions: {
+    // rollupOptions: {
-      output: {
+    //   output: {
-        manualChunks(id) {
+    //     manualChunks(id) {
-          // if (id.includes('antd')) {
+    //       if (id.includes('node_modules')) {
-          //   console.info('chunk: ' + id)
+    //         return id.toString().split('node_modules/')[1].split('/')[0].toString();
-          //   return 'antd-component'
+    //       }
-          // } else if (id.includes('rc-')) {
+    //     },
-          //   return 'rc-component'
+    //     chunkFileNames: (chunkInfo) => {
-          // } else if (id.includes('ant-design')) {
+    //       const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
-          //   return 'ant-design'
+    //       return `assets/[name].[hash].js`;
-          // } else {
+    //     }
-          //   // console.info('chunk: ' + id)
+    //   }
-          // }
+    // }
-          if (id.includes('node_modules')) {
-            return id.toString().split('node_modules/')[1].split('/')[0].toString();
-          }
-        },
-        chunkFileNames: (chunkInfo) => {
-          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
-          // const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
-          return `assets/[name].[hash].js`;
-        }
-      }
-    }
   }
 })