玄学react description

import {useEffect, useMemo, useState} from "react";
import {Card, Descriptions, Layout, Menu, Table, Tabs, theme} from "antd";
import {useParams} from "react-router";
import {getAppDetail} from "../../../../../../services/api2/getAppDetail";
import {Content, Header} from "antd/es/layout/layout";

import React from "react";

export function AppDetail() {
    const [appDetail, setAppDetail] = useState()
    const {appId} = useParams();

    // useEffect(() => {
    //     getAppDetail(appId).then(
    //         (res) => {
    //             console.log(res)
    //             setAppDetail({
    //                 appDescription: res.app_description,
    //                 appId: res.app_id,
    //                 appName: res.app_name,
    //                 appUrl: res.app_url,
    //                 insType: res.ins_type,
    //                 processList: res.process_list,
    //                 serverList: res.server_list,
    //             });
    //         })
    // }, [])

    const items2 = [
        {
            key: '1',
            label: 'Product',
            children: 'Cloud Database',
        },
        {
            key: '2',
            label: 'Billing Mode',
            children: 'Prepaid',
        },
        {
            key: '3',
            label: 'Automatic Renewal',
            children: 'YES',
        },
        {
            key: '4',
            label: 'Order time',
            children: '2018-04-24 18:00:00',
        },
        {
            key: '5',
            label: 'Usage Time',
            children: '2019-04-24 18:00:00',
            span: 2,
        },
        {
            key: '7',
            label: 'Negotiated Amount',
            children: '$80.00',
        },
        {
            key: '8',
            label: 'Discount',
            children: '$20.00',
        },
        {
            key: '9',
            label: 'Official Receipts',
            children: '$60.00',
        },
        {
            key: '10',
            label: 'Config Info',
            children: (
                <>
                    Data disk type: MongoDB
                    <br />
                    Database version: 3.4
                    <br />
                    Package: dds.mongo.mid
                    <br />
                    Storage space: 10 GB
                    <br />
                    Replication factor: 3
                    <br />
                    Region: East China 1
                    <br />
                </>
            ),
        },
    ];


    // const {
    //     token: { colorBgContainer },
    // } = theme.useToken();

    return (
        <Layout>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <div style={{color: "white", fontSize: '24px', fontFamily: '微软雅黑'}}>
                    APP详情界面
                </div>

            </Header>

            <Content
                style={{
                    padding: '0 50px',
                    height: '800px'
                }}
            >
                <div style={{margin:'30px'}} />

                <Descriptions
                    title="App详情"
                    bordered
                    items={items2}
                />
                {/*<Card title="Card title" bordered={false}*/}

            </Content>

        </Layout>

        // <Descriptions
        //     title="App详情"
        //     bordered
        //     items={items}
        // />

    )
}


// const columns =  [
//     {
//         title: '应用标识',
//         dataIndex: 'appId',
//         key: 'appId'
//     },
//     {
//         title: '应用名称',
//         dataIndex: 'appName',
//         key: 'appName'
//     },
//     {
//         title: '应用功能描述',
//         dataIndex: 'appDescription',
//         key: 'appDescription'
//     },
//     {
//
//     }
// ]
{/*<Table*/}
{/*    style={{*/}
{/*        margin: "30px",*/}
{/*        marginLeft: "60px",*/}
{/*        marginRight: "60px"*/}
{/*    }}*/}
{/*    columns={columns}*/}
{/*/>*/}