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

src/components/Conditional.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react'
+
+export type ConditionalProps = {
+  /**
+   * the condition to test against
+   */
+  condition: boolean
+  /**
+   * the component to render when condition is true
+   */
+  whenTrue: ReactNode
+  /**
+   * the component to render when condition is false
+   */
+  whenFalse: ReactNode
+}
+
+export function Conditional({ condition, whenFalse, whenTrue }: ConditionalProps) {
+  return condition ? whenTrue : whenFalse;
+}

src/views/App.jsx

@@ -120,7 +120,7 @@ function App() {
     <ConfigProvider
       theme={{
         token: {
-          colorPrimary: '#645822',
+          colorPrimary: '#1ba784',
           borderRadius: 4
         },
         algorithm: theme.defaultAlgorithm,

src/views/OrderFollow.jsx

@@ -1,12 +1,16 @@
 import { useNavigate } from 'react-router-dom'
 import { useRef, useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
-import { Row, Col, Divider, Table , Card, Button, Input, 
-  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Flex
+import {
+  Row, Col, Divider, Table, Card, Button, Input,
+  Space, Segmented, Radio, Select, AutoComplete, Spin, Typography, Flex, DatePicker, List, Avatar
 } from 'antd'
 import {
-  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined , AppstoreOutlined
+  StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
 } from '@ant-design/icons'
+import { Conditional } from '@/components/Conditional'
+
+const { RangePicker } = DatePicker;
 
 const dataSource = [
   {
@@ -82,24 +86,24 @@ const columns = [
     width: 300,
     render: (text, record, inde) => {
       return (
-        <Space size="middle">
-          <a>{text}</a>
+        <Space size='middle'>
+          {text}
           <Segmented
-    options={[
-      {
-        label: '潜力',
-        value: '潜力',
-      },
-      {
-        label: '重点',
-        value: '重点',
-      },
-      {
-        label: '休眠',
-        value: '休眠',
-      },
-    ]}
-  />
+            options={[
+              {
+                label: '潜力',
+                value: '潜力',
+              },
+              {
+                label: '重点',
+                value: '重点',
+              },
+              {
+                label: '休眠',
+                value: '休眠',
+              },
+            ]}
+          />
         </Space>
       )
     }
@@ -108,15 +112,23 @@ const columns = [
     title: '客人姓名',
     dataIndex: 'fullname',
     key: 'fullname',
+    render: (text, record, index) => {
+      return (
+        <Space size='middle'>
+          <a>{text}</a>
+        </Space>
+      )
+    }
   },
   {
     title: '订单状态',
     dataIndex: 'orderStatus',
     key: 'orderStatus',
+    width: 120,
     render: (text, record, inde) => {
       return (
         <Select
-          defaultValue="新订单"
+          defaultValue='新订单'
           style={{
             width: 100,
           }}
@@ -170,10 +182,90 @@ const columns = [
 ];
 
 function OrderFollow() {
-  
+
+  const [taskCategory, setTaskCategory] = useState('today')
+
   useEffect(() => {
   }, [])
-  
+
+  function AdvanceCriteria() {
+    return (
+      <Space direction='vertical' style={{ width: '100%' }}>
+        <Row gutter={[16, 16]} justify='start' align='middle'>
+          
+          <Col span={2}>
+          <Select
+          defaultValue='全部'
+          style={{
+            width: 100,
+          }}
+          options={[
+            {
+              value: '潜力',
+              label: '潜力',
+            },
+            {
+              value: '重点',
+              label: '重点',
+            },
+            {
+              value: '休眠',
+              label: '休眠',
+            }
+          ]}
+        />
+          </Col>
+          <Col span={2}>
+        <Select
+          defaultValue='全部'
+          style={{
+            width: 100,
+          }}
+          options={[
+            {
+              value: '新订单',
+              label: '新订单',
+            },
+            {
+              value: '报价中',
+              label: '报价中',
+            },
+            {
+              value: '丢失',
+              label: '丢失',
+            },
+            {
+              value: '一催',
+              label: '一催',
+            },
+            {
+              value: '二催',
+              label: '二催',
+            },
+            {
+              value: '三催',
+              label: '三催',
+            },
+          ]}
+        />
+          </Col>
+        <Col span={6}>
+        <Input placeholder="订单号" allowClear />
+          </Col>
+          
+        <Col span={4}>
+        <RangePicker />
+          </Col>
+          <Col span={2}>
+            <Button icon={<SearchOutlined />} onClick={() => {
+              search()
+            }}>搜索</Button>
+          </Col>
+        </Row>
+      </Space>
+    )
+  }
+
   return (
     <Spin spinning={false} delay={500}>
       <Space direction='vertical' style={{ width: '100%' }}>
@@ -189,15 +281,16 @@ function OrderFollow() {
                 { label: '走团后一月', value: 'lastMonth' },
                 { label: '高级查询', value: 'advance' }
               ]}
-              value={'today'}
-              onChange={({ target: { value } }) => {              
-                setSearchType(value)
+              value={taskCategory}
+              onChange={({ target: { value } }) => {
+                setTaskCategory(value)
               }}
               optionType='button'
               buttonStyle='solid'
             />
           </Col>
         </Row>
+        <Conditional condition={taskCategory==='advance'} whenTrue={<AdvanceCriteria />} />
       </Space>
       <Divider plain orientation='left'></Divider>
       <Space

src/views/Standlone.jsx

@@ -97,7 +97,7 @@ function Standlone() {
     <ConfigProvider
       theme={{
         token: {
-          colorPrimary: '#645822',
+          colorPrimary: '#1ba784',
           borderRadius: 4
         },
         algorithm: theme.defaultAlgorithm,