feature: REST服务页面

src/api/api.tsx

@@ -7,5 +7,12 @@ export default {
         method: 'get',
         params: {
         }
+    }),
+
+    restlist: ():Promise<any> => HttpRequest({
+      url: url + '/restlist',
+      method: 'get',
+      params: {
+      }
     })
-}
+}

src/pages/home.tsx

@@ -1,35 +1,148 @@
-import styles from './index.less';
-import { Layout, Menu } from 'antd';
-import { useState } from 'react';
+import './index.less';
+import { Layout, Menu, Tabs, Table, Divider, Tag } from 'antd';
+import React from 'react';
+import useUrlState from '@ahooksjs/use-url-state';
+import { useMount } from 'ahooks'
+import api from '../api/api'
+import { useEffect, useState } from 'react';
+import timestampToTime from '@/utils';
+const { TabPane } = Tabs;
 const { SubMenu } = Menu;
+const { Column, ColumnGroup } = Table;
 const { Header, Content, Sider } = Layout;
-
+type Detail = {
+  Detail:string
+  Env:string
+  Host:string
+  Port:number
+  ServiceName:string
+  UpTime:number
+  Version?:string
+}
+const data: Detail[] = [
+  {
+    Detail: "",
+    Env: "qa",
+    Host: "127.0.0.1",
+    Port: 6910,
+    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+    UpTime: 1649995051,
+    Version: "",
+  },{
+    Detail: "",
+    Env: "qa",
+    Host: "127.0.0.1",
+    Port: 6910,
+    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+    UpTime: 1649995051,
+    Version: ""
+  },{
+    Detail: "",
+    Env: "qa",
+    Host: "127.0.0.1",
+    Port: 6910,
+    ServiceName: "com.ywt.gapi.check_prescription.CheckPrescriptionService",
+    UpTime: 1649995051,
+    Version: ""
+  },
+];
+const data2: Detail[] = data.map(item => {return {...item,Env:'dev'}})
+const data3: Detail[] = data.map(item => {return {...item,Env:'qa1'}})
+const data4: Detail[] = data.map(item => {return {...item,Env:'prod'}})
+const tabsList = [
+  {
+    name: 'qa',
+    key: 'qa',
+    list: data
+  },
+  {
+    name: 'dev',
+    key: 'dev',
+    list: data2
+  },
+  {
+    name: 'qa1',
+    key: 'qa1',
+    list: data3
+  },
+  {
+    name: 'prod',
+    key: 'prod',
+    list: data4
+  }
+];
 export default function IndexPage() {
-  const [value, setValue] = useState(0);
-  const complexIncrease = () => {
-    setTimeout(() => {
-      setValue(value + 1)
-    },0)
+  const [key,setKey] = useState('qa')
+  const [list,setList] = useState(data)
+  const [label,setLabel] = useUrlState({ count: tabsList[0].name })
+  useMount(()=>{
+      setLabel({ count: label.count ? label.count : tabsList[0].name })
+      setKey(label.count ? label.count : tabsList[0].key)
+  })
+  const columns = [
+    {
+      title: '服务名称',
+      dataIndex: 'ServiceName',
+    },
+    {
+      title: 'IP',
+      dataIndex: 'Host',
+    },
+    {
+      title: '端口',
+      dataIndex: 'Port',
+    },
+    {
+      title: 'Env',
+      dataIndex: 'Env',
+    },
+    {
+      title: '上线时间',
+      dataIndex: 'UpTime',
+      render: (text:number) => <a>{timestampToTime(text)}</a>
+    },
+    {
+      title: '备注',
+      dataIndex: 'Detail',
+    },
+  ];
+  
+  useEffect(() => {
+    api.restlist().then((res) => {
+      console.log(res);
+    })
+  })
+
+  const tabChange = (index:string) => {
+    setKey(index)
+    const instance = tabsList.find(item=>item.key === index)
+    if(instance){
+      setList(instance.list)
+      setLabel({ count: instance.name})
+    }
   }
-  return (
-    <>
-    <section>
-        <h2>计数器</h2>
-        <h3>{value}</h3>
 
-        <button>-</button>
-        <button onClick={() => setValue(value+1)}>+</button>
-      </section>
-      <section>
-        <h2>计数器</h2>
-        <h3>{value}</h3>
 
-        <button onClick={complexIncrease}>延迟</button>
-      </section>
-      </>
-    // <Layout>
-    //   <span>home</span>
-      
-    // </Layout>
+  return (
+    <Layout>
+      <div style={{ justifyContent: 'center' }}>
+        <Tabs defaultActiveKey={key} activeKey={key} onChange={tabChange}>
+          {tabsList.map((item) => {
+            return (
+              <TabPane tab={item.name} key={item.key} >
+                
+              </TabPane>
+            )
+          })}
+        </Tabs>
+        <Table
+          columns={columns}
+          dataSource={list}
+          key="tablekey11"
+        >
+        </Table>
+      </div>
+    </Layout>
   );
 }
+