import React, { Component } from 'react'
import { Space, Tag, Typography } from 'antd'

const { Title, Text } = Typography

export default class index extends Component {
    render() {
        return (
            <Space direction="vertical" className="w-100-p">
                <Text>
                    种子模版已经提供了业务组件通用的架构，可以在{' '}
                    <Tag className="ml-xs" color="orange">
                        /seed
                    </Tag>
                    中获取架构代码。
                </Text>
                <Title level={4}>模版解释</Title>
                <ul>
                    <li className="mb-md">
                        <Tag color="orange">/seed/query-table/index.jsx</Tag>
                        通用查询表格模版。
                    </li>
                    <li className="mb-md">
                        <Tag color="orange">/seed/query-table-form/form.jsx</Tag>
                        简单的编辑弹出框内表单，配合外部使用
                        <Tag className="ml-xs" color="red">
                            modal-form
                        </Tag>
                        。
                    </li>
                    <li className="mb-md">
                        <Tag color="orange">/seed/form</Tag>
                        <ul className="mt-md">
                            <li className="mb-md">
                                <Tag color="orange">/index.jsx</Tag>
                                大型表单主页。可在此调用数据详情接口并分配给各个分片表单，统合分片表单。
                            </li>
                            <li className="mb-md">
                                <Tag color="orange">/part.jsx</Tag>
                                大型表单分片。主要考虑到一个文件中维护的表单字段过多，所以在此拆分。
                            </li>
                        </ul>
                    </li>
                    <li className="mb-md">
                        <Tag color="orange">/seed/form-tabe</Tag>
                        <ul className="mt-md">
                            <li className="mb-md">
                                <Tag color="orange">/index.jsx</Tag>
                                大型标签页-表单主页。可在此调用数据详情接口并分配给各个标签页及以下分片表单。
                            </li>
                            <li className="mb-md">
                                <Tag color="orange">/tab</Tag>
                                <ul className="mt-md">
                                    <li className="mb-md">
                                        <Tag color="orange">/index.jsx</Tag>
                                        单个标签页内主页，在此统合分片表单并传递数据。
                                    </li>
                                    <li className="mb-md">
                                        <Tag color="orange">/part.jsx</Tag>
                                        大型表单分片。同上。
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </Space>
        )
    }
}
