feat:静态页添加

src/App.tsx

@@ -6,7 +6,7 @@ import RouterConfig from "./components/RouterConfig";
 const App: FC = () => {
   return (
     <HashRouter>
-      <Nav/>
+      {/* <Nav/> */}
       <RouterConfig />
     </HashRouter>
   );

src/components/Nav.tsx

@@ -10,7 +10,7 @@ const Nav: FC = () => {
         <Link to="/">首页</Link>
       </Menu.Item>
       <Menu.Item key="actions" icon={<SettingOutlined/>}>
-        <Link to="/actions">操作</Link>
+        <Link to="/findCustom">操作</Link>
       </Menu.Item>
       <Menu.Item key="externalUser" icon={<UserOutlined />}>
         <Link to="/external-user">人</Link>

src/components/RouterConfig.tsx

@@ -4,6 +4,7 @@ import Home from "../pages/Home";
 import Actions from "../pages/Actions";
 import ExternalUser from "../pages/ExternalUser";
 import ExternalChat from "../pages/ExternalChat";
+import FindCustom from "../pages/findCustom";
 
 const RouterConfig: FC = () => {
   return (
@@ -11,8 +12,8 @@ const RouterConfig: FC = () => {
       <Route exact path="/">
         <Home/>
       </Route>
-      <Route path="/actions">
-        <Actions/>
+      <Route path="/findCustom">
+        <FindCustom/>
       </Route>
       <Route path="/external-user">
         <ExternalUser/>

src/css/home.css

@@ -9,6 +9,9 @@ p{
 .spaceBetween{
     justify-content: space-between;
 }
+.flex-wrap{
+    flex-wrap: wrap;
+}
 .more{
     width:30px;
     height:30px;
@@ -68,12 +71,110 @@ p{
 .inner{
     padding:21px;
 }
-.mgl20{
-    margin-left:30px;
+.mgr20{
+    margin-right:30px;
 }
 .greyWord{
-    color:#A5ADB3
+    color:#A5ADB3;
+    line-height: 40px;
 }
 .showt{
     margin-bottom: 24px;
 }
+.labelStyle{
+    height: 24px;
+    background: #E6F1FC;
+    border-radius: 4px;
+    border: 1px solid #A3D0FD;
+    font-size: 10px;
+    font-weight: 400;
+    color: #1B9AEE;
+    line-height: 14px;
+    padding:0 10px;
+    line-height: 24px;
+    margin-right:10px;
+}
+.grey{
+    width:100%;
+    border-top: 1px solid #F3F3F3;
+}
+.greyb{
+    padding-bottom:20px;
+    border-bottom: 1px solid #F3F3F3;
+}
+.blue{
+    background-color: rgba(1,113,194,.05)!important;
+    color: #0171c2!important;
+    border: 1px solid rgba(1,113,194,.4)!important;
+}
+.green{
+    background: #ECFFEC !important;
+    border: 1px solid #038924 !important;
+    color: #038924 !important;
+}
+.orange{
+    background: #FFF7E6 !important;
+    border: 1px solid #F7B500 !important;
+    color: #F7B500 !important;
+}
+.red{
+    background: #FFEDED !important;
+    border: 1px solid #C21C07 !important;
+    color: #C21C07 !important;
+}
+.greyl{
+    background: #F7F7F7 !important;
+    border: 1px solid #8C8C8C !important;
+    color: #8C8C8C !important;
+}
+.tags{
+    border-radius: 4px !important;
+    height: 25px !important;
+    line-height: 24px !important;
+}
+.labelAdd{
+    border-bottom: 1px solid #F3F3F3;
+    padding: 28px 20px;
+}
+.line{
+    width: 31px;
+    height: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right:10px;
+    border-radius: 4px;
+}
+.innerline{
+    width: 16px;
+    height: 5px;
+    background: #0171C2;
+    border-radius: 14px;
+}
+.mgt20{
+    margin-top:20px;
+}
+.innerGreen{
+    background: #038924;
+}
+.innerOrgane{
+    background: #F7B500;
+}
+.innerRed{
+    background: #C21C07;
+}
+.innerGrey{
+    background: #8C8C8C;
+}
+.greyInt{
+    width:70%;
+    height: 36px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    border: 1px solid #D9D9D9;
+}
+.avatar{
+    width:60px;
+    height:60px;
+}
\ No newline at end of file

src/pages/findCustom.tsx

+import * as React from 'react'
+import {useCallback, useState} from 'react'
+import {jsSdk} from "../index";
+import {Button, Input,Table,Tabs,Space} from "antd";
+
+const {TextArea} = Input
+const { TabPane } = Tabs;
+
+const Actions: React.FC = () => {
+  const [msg, setMsg] = useState<string>('')
+  const [columns]=useState<any>([
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      render: (text:string, record:any) => (
+        <Space size="middle">
+          <img className='avatar' src={record.avatar} alt="" />
+        </Space>
+      ),
+    },
+    {
+      title: '昵称',
+      className: 'name',
+      dataIndex:'name',
+      align:'center'
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      align:'center'
+    },
+    {
+      title: '组织',
+      dataIndex: 'org',
+      align:'center'
+    },
+    {
+      title: '操作',
+      align:'center',
+      dataIndex: 'action',
+      render: (text:string, record:any) => (
+        <Space size="middle">
+          {record.link?
+          <Button type="primary" danger onClick={unlink.bind(this,record)}>取消关联</Button>:
+          <Button type="primary" onClick={link.bind(this,record)}>关联</Button>}
+        </Space>
+      ),
+    }
+  ])
+  const [listData, setListData] = useState<any>([
+    {
+      key: '1',
+      name: 'John Brown',
+      avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
+      phone: '13323232323',
+      org:'行知',
+      link:true
+    },
+    {
+      key: '2',
+      name: 'John Brown2',
+      avatar: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
+      phone: '13323232323',
+      org:'行知',
+      link:false
+    }
+  ])
+  const [tabs]=useState<any>(['客户档案','纷享销客','戈友好物','戈友圈'])
+  // const tabIndex ='0'
+  const [tabIndex,setTabindex] = useState('0')
+  //事件
+  //tab更改事件
+  const callback = (e:any)=>{
+    console.log(e,tabIndex)
+    let newvalue = e
+    setTabindex((tabIndex:any)=>{
+      return newvalue
+    })
+    console.log(tabIndex)
+    // this.setSate({
+
+    // })
+  }
+  //关联
+  const link = (value:any,e:any)=>{
+    console.log(e)
+  }
+  //取消关联
+  const unlink = (value:any,e:any)=>{
+    console.log(e,value)
+  }
+  const sendMsg = useCallback(async () => {
+    if (!msg) alert('消息不能为空')
+
+    await jsSdk.invoke('sendChatMessage', {
+      msgtype: 'text',
+      text: {
+        content: msg
+      }
+    });
+  }, [msg])
+
+  return (
+    <div>
+      <Tabs defaultActiveKey={tabIndex} onChange={callback.bind(this)} >
+        {
+          tabs.map((item:any,idx:number)=> <TabPane tab={item} key={idx}>
+            <Table
+              columns={columns}
+              dataSource={listData}
+              scroll={{ x: 300 }}
+              bordered
+            />
+        </TabPane>)
+        }
+      </Tabs>
+    </div>
+  )
+}
+
+export default Actions