tntd 1.3.65 → 1.4.1

package/docs/README.md

@@ -1,1643 +0,0 @@
-## 简介(tntd)
-
-tntd 是同盾前端 UED 部门，基于特定业务场景开发的一套业务场景组件。
-
-### 功能特性
-
--   Layout, UED 部门统一的外框架组件，包含头整体页面布局、头部导航、菜单
--   QueryListScene, 查询列表页，主要适用场景是表单查询 + Table 页面及组件，包含了数据管理，通用逻辑处理如： 分页、查询、重置、表单内容自适应展开、收缩、Loading、轮询等
-
-### 环境依赖
-
--   nodejs、npm
--   React、antd
-
-### 安装
-
--   npm install tntd --save
-
-### 运行 DEMO
-
--   npm install
--   npm run start
-
-### 目录结构
-
-<pre>
-.
-├── components(组件源码)
-|   ├── layout
-|   └── querylistscene
-├── lib(babel编译后的代码)
-|   ├── layout
-|   └── querylistscene
-├── babel.config.js
-├── package.json
-└── README.td
-</pre>
-
-### 使用
-
-```js
-import ReactDOM from "react-dom";
-import { QueryListScene, Layout } from "tntd";
-
-const { QueryForm, Field, QueryList } = QueryListScene;
-const columns = [
-    {
-        title: "ID",
-        dataIndex: "id",
-        width: 60,
-    },
-    {
-        title: "项目名称",
-        dataIndex: "name",
-        sorter: (a, b) => a.name > b.name,
-    },
-];
-const query = params => {
-    return new Promise(resolve => {
-        resolve([
-            { id: 1, name: "xxx" },
-            { id: 2, name: "yyy" },
-        ]);
-    });
-};
-
-ReactDOM.render(
-    <Layout
-        logo=""
-        name="应用名称"
-        enName="Application English Name"
-        userInfo={{}}
-        menus={[]}
-        onMenuChange={onMenuChange}
-        onMenuSelect={onMenuSelect}
-        onLanguageChange={onLanguageChange}
-        onThemeChange={onThemeChange}
-        onAppChange={onAppChange}
-    >
-        <QueryListScene query={query} title="查询列表页">
-            <QueryForm>
-                <Field type="string" name="name" props={{ placeholder: "名称" }} />
-                <Field type="date" name="date" />
-                <Field
-                    type="select"
-                    name="select"
-                    props={{
-                        placeholder: "状态",
-                        options: ["初始化", "运行中", "成功", "失败"],
-                    }}
-                />
-            </QueryForm>
-            <QueryList columns={columns} />
-        </QueryListScene>
-    </Layout>,
-    document.getElementById("root")
-);
-```
-
-## Layout 外框架组件
-
-### 代码演示
-
-#### 初始化数据
-
-```jsx
-import { createGlobalStyle } from "styled-components";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-const menus = [
-    {
-        children: [
-            {
-                code: "dadicasesearch",
-                enName: "dadicasesearch",
-                icon: "home",
-                menuName: "案件检索",
-                path: "/orion/case/relation",
-            },
-        ],
-        code: "casegraph",
-        enName: "casegraph",
-        groupIcon: "box",
-        groupName: "案件分析",
-    },
-    {
-        children: [
-            {
-                code: "taglist",
-                enName: "taglist",
-                icon: "home",
-                menuName: "标签管理",
-                path: "/orion/tag/list",
-            },
-            {
-                code: "tagdata",
-                enName: "tagdata",
-                icon: "layer-color",
-                menuName: "打标数据管理",
-                path: "/orion/tag/datalist",
-            },
-        ],
-        code: "tagmm",
-        enName: "tagmm",
-        groupIcon: "warning",
-        groupName: "标签管理",
-    },
-    {
-        children: [
-            {
-                code: "QX0101",
-                enName: "Organization Manage",
-                icon: "org",
-                menuName: "机构管理\t",
-                path: "/bridge/permission/organization",
-            },
-            {
-                code: "QX0102",
-                enName: "Role Manage",
-                icon: "role",
-                menuName: "角色管理",
-                path: "/bridge/permission/role",
-            },
-            {
-                code: "QX0103",
-                enName: "User Manage",
-                icon: "user-group",
-                menuName: "用户管理",
-                path: "/bridge/permission/user",
-            },
-        ],
-        code: "permission",
-        enName: "Permission Manage",
-        groupIcon: "user",
-        groupName: "权限管理",
-    },
-    {
-        children: [
-            {
-                code: "QX0201",
-                enName: "Function Register",
-                icon: "python",
-                menuName: "功能注册",
-                path: "/bridge/system/register",
-            },
-            {
-                code: "QX0202",
-                enName: "Solution",
-                icon: "python",
-                menuName: "解决方案",
-                path: "/bridge/system/solution",
-            },
-            {
-                code: "QX0203",
-                enName: "System Configuration",
-                icon: "Python",
-                menuName: "系统设置",
-                path: "/bridge/system/startup",
-            },
-        ],
-        code: "QX0203",
-        enName: "System Configuration",
-        groupIcon: "box",
-        groupName: "解决方案",
-    },
-];
-const userInfo = {
-    account: "admin",
-    avatar: "male1",
-    expiration: 1924963199000,
-    firstLogin: "0",
-    gender: 0,
-    gmtCreate: 1551771456000,
-    gmtModified: 1570607897000,
-    lang: "cn",
-    layout: "default",
-    orgUuid: "a8202aea546f48979754bdd45c471b08",
-    roleUuids: '["ee8dbc99831b4a9cb17578b51bbb09e0"]',
-    salt: "9ac81141a689494eb769d39956bf5656",
-    simplified: 1,
-    status: 0,
-    theme: "default",
-    tryDate: 1571033960000,
-    tryTime: 1,
-    userName: "超级管理员",
-    uuid: "c693e0ec0a2e4bf8b71eef8152d88a29",
-};
-
-Object.assign(window, {
-    store: {
-        menus,
-        userInfo,
-    },
-});
-
-ReactDOM.render(<GlobalStyle />, document.getElementById("root"));
-```
-
-#### 全家桶模式（新）
-
-```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import Layout from "../components/Layout/index";
-
-const { menus, userInfo } = window.store;
-const onMenuChange = param => {
-    console.log("onMenuChange:", param);
-};
-const onMenuSelect = param => {
-    console.log("onMenMenuSelectChange:", param);
-};
-const onLanguageChange = language => {
-    console.log("onLanguageChange:", language);
-};
-const onThemeChange = theme => {
-    console.log("onThemeChange:", theme);
-};
-const onAppChange = param => {
-    console.log("onAppChange", param);
-};
-const onLogoClick = () => {
-    console.log("logo click");
-};
-
-ReactDOM.render(
-    <Layout
-        logo=""
-        name="私有云全家桶"
-        enName="Private Cloud"
-        selectedAppKey="enterprise"
-        config={{
-            globalNavigation: true,
-        }}
-        appList={[
-            { key: "movie", name: "电影图谱" },
-            { key: "enterprise", name: "企业图谱" },
-        ]}
-        userInfo={userInfo}
-        selectedMenuKey="tagdata"
-        menus={menus}
-        onMenuChange={onMenuChange}
-        onMenuSelect={onMenuSelect}
-        onLanguageChange={onLanguageChange}
-        onThemeChange={onThemeChange}
-        onAppChange={onAppChange}
-        onLogoClick={onLogoClick}
-        onLogout={() => alert("do logout")}
-    ></Layout>,
-    document.getElementById("root")
-);
-```
-
-#### 全家桶模式（旧）
-
-```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import Layout from "../components/Layout/index";
-import DevelopmentLogin from "../components/DevelopmentLogin";
-
-const { HeaderActionItem } = Layout;
-const { menus, userInfo } = window.store;
-const onMenuChange = param => {
-    console.log("onMenuChange:", param);
-};
-const onMenuSelect = param => {
-    console.log("onMenuMenuSelectChange:", param);
-};
-const onLanguageChange = language => {
-    console.log("onLanguageChange:", language);
-};
-const onThemeChange = theme => {
-    console.log("onThemeChange:", theme);
-};
-const onAppChange = param => {
-    console.log("onAppChange", param);
-};
-const onLogoClick = () => {
-    console.log("logo click");
-};
-
-ReactDOM.render(
-    <Layout
-        logo=""
-        name="私有云全家桶"
-        enName="Private Cloud"
-        selectedAppKey="enterprise"
-        size="large"
-        compatible
-        appList={[
-            { key: "movie", name: "电影图谱" },
-            { key: "enterprise", name: "企业图谱" },
-        ]}
-        userInfo={userInfo}
-        selectedMenuKey="tagdata"
-        menus={menus}
-        onMenuChange={onMenuChange}
-        onMenuSelect={onMenuSelect}
-        onLanguageChange={onLanguageChange}
-        onThemeChange={onThemeChange}
-        onAppChange={onAppChange}
-        onLogoClick={onLogoClick}
-        extraHeaderActions={[
-            <HeaderActionItem key="help" onClick={() => console.log("Help")}>
-                <DevelopmentLogin
-                    signIn={userInfo =>
-                        new Promise(resolve => {
-                            setTimeout(() => {
-                                resolve({ tdToken: "_td_token_", userId: "_uid_" });
-                            }, 100);
-                        })
-                    }
-                />
-            </HeaderActionItem>,
-        ]}
-    ></Layout>,
-    document.getElementById("root")
-);
-```
-
-#### 全家桶 Pass 模式
-
-```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import Layout from "../components/Layout/index";
-
-const { menus, userInfo } = window.store;
-const onApplicationChange = appKey => {
-    console.log("onApplicationChange:", appKey);
-};
-
-ReactDOM.render(
-    <Layout
-        type="paas"
-        compatible
-        size="large"
-        appKey="orion"
-        logo=""
-        name="私有云全家桶"
-        enName="Private Cloud"
-        userInfo={userInfo}
-        menus={menus}
-        onApplicationChange={onApplicationChange}
-    ></Layout>,
-    document.getElementById("root")
-);
-```
-
-#### Pass 模式 - 自定义菜单
-
-```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
-import { Menu, Layout as AntLayout } from "antd";
-import styled from "styled-components";
-import Layout from "../components/Layout/index";
-import Icon from "../components/Icon/index";
-
-const { HeaderNavs, HeaderActionItem } = Layout;
-const { Sider } = AntLayout;
-const { menus, userInfo } = window.store;
-const navs = [
-    {
-        name: "数据开发",
-        key: "/dataocean/",
-        menus: [
-            { name: "作业开发", key: "home" },
-            { name: "资源管理", key: "resource" },
-            { name: "函数管理", key: "func" },
-        ],
-    },
-    {
-        name: "数据管理",
-        key: "/dataocean/dm",
-        menus: [
-            { name: "数据管理概览", key: "overview" },
-            { name: "数据查找", key: "search" },
-            { name: "我的表管理", key: "table" },
-        ],
-    },
-    {
-        name: "运维中心",
-        key: "/dataocean/jm",
-        menus: [
-            { name: "数据管理概览", key: "jm1" },
-            { name: "数据查找", key: "jm2" },
-            { name: "我的表管理", key: "jm3" },
-        ],
-    },
-    {
-        name: "系统管理",
-        key: "/dataocean/system",
-        menus: [
-            { name: "数据管理概览", key: "system1" },
-            { name: "数据查找", key: "system2" },
-            { name: "我的表管理", key: "system3" },
-        ],
-    },
-];
-
-const SideMenu = props => {
-    const [collapsed, setCollapsed] = useState(false);
-    const { selectedNav } = props;
-    const MenuTitleBlock = styled.div`
-        margin: 10px 20px 8px;
-        line-height: 48px;
-        height: 48px;
-        vertical-align: middle;
-        border-bottom: 1px solid #e8e8e8;
-        font-size: 16px;
-        i {
-            float: right;
-            line-height: 48px;
-            cursor: pointer;
-        }
-    `;
-
-    console.log("collapsed...", collapsed);
-
-    return (
-        <Sider
-            width={216}
-            theme="light"
-            collapsed={collapsed}
-            style={{ boxShadow: "0 1px 10px 0 rgba(0,0,0,0.10)" }}
-        >
-            <MenuTitleBlock>
-                {!collapsed && selectedNav.name}
-                <Icon
-                    type={collapsed ? "menu-unfold" : "menu-fold"}
-                    onClick={() => {
-                        setCollapsed(!collapsed);
-                    }}
-                />
-            </MenuTitleBlock>
-            <Menu
-                defaultSelectedKeys={selectedNav.menus[0].key}
-                mode="inline"
-                theme="light"
-                style={{
-                    border: "none",
-                }}
-            >
-                {(selectedNav.menus || []).map(menu => (
-                    <Menu.Item key={menu.key}>
-                        <Icon type="chart-pie-alt" />
-                        <span>{menu.name}</span>
-                    </Menu.Item>
-                ))}
-            </Menu>
-        </Sider>
-    );
-};
-
-const PassLayout = props => {
-    const [selectedNav, setSelectedNav] = useState(navs[0]);
-    const onNavChange = nav => {
-        setSelectedNav(nav);
-    };
-
-    return (
-        <Layout
-            type="paas"
-            compatible
-            size="large"
-            appKey="orion"
-            logo=""
-            name="私有云全家桶"
-            enName="Private Cloud"
-            userInfo={userInfo}
-            menus={menus}
-            config={{
-                language: false,
-                theme: false,
-            }}
-            headerNavs={<HeaderNavs navs={navs} onChange={onNavChange} />}
-            extraHeaderActions={[
-                <HeaderActionItem key="help" onClick={() => alert("Help")}>
-                    <Icon type="zhibiao" />
-                </HeaderActionItem>,
-                <HeaderActionItem key="mail" onClick={() => alert("Mail")}>
-                    <Icon type="guanjia" />
-                </HeaderActionItem>,
-            ]}
-            sideMenu={<SideMenu selectedNav={selectedNav} />}
-        >
-            {props.children}
-        </Layout>
-    );
-};
-
-ReactDOM.render(<PassLayout>PassLayout</PassLayout>, document.getElementById("root"));
-```
-
-### API
-
-#### Layout
-
-| 属性名称            | 属性说明                                                                                                             | 类型             | 默认值                                                                                     | 是否必须                       |
-| :------------------ | :------------------------------------------------------------------------------------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------- | :----------------------------- |
-| type                | Layout 类型，全家桶风格、Paas 风格；default                                                                          | string           | default                                                                                    | 否                             |
-| size                | Layout 里面 header，菜单等高度尺寸设置，目前是不设置或设置为 large，large 是老的样式                                 | string           | default                                                                                    | 否                             |
-| compatible          | 兼容模式，新的全家桶设计样式与现有的不一致，为了保证老的项目过渡，需要保持原有的全家桶风格则设置                     | boolean          | false                                                                                      | 否                             |
-| appKey              | 当前应用的前缀,如 图谱 orion, 机器学习 turing, 解决方案中 path 的前缀，type=paas 才需要                              | string           | 无                                                                                         | 否                             |
-| logo                | 应用的 logo, 如果对应的应用 logo 图片有内置在 layout 组件中则，传对应应用的 key 即可，否则传 React Component、string | React Component  | 无                                                                                         | 是                             |
-| name                | 应用名称                                                                                                             | string           | 无                                                                                         | 是                             |
-| enName              | 应用名称英文名称                                                                                                     | string           | 无                                                                                         | 否（需要支持英文模式则需要传） |
-| userInfo            | 用户信息,统一登录用户信息数据直接传过来                                                                              | Object           | 无                                                                                         | 否                             |
-| selectedMenuKey     | 激活菜单选中,目前是用 menuTree 中的 code 作为标识                                                                    | string           | menus[0].children[0]                                                                       | 否                             |
-| menus               | 菜单信息，解决方案中 menuTree 接口获取的菜单数据直接传过来                                                           | Array            | 无                                                                                         | 否                             |
-| config              | 功能配置信息，主题(theme)、语言切换(language)、用户头像(avatar)、应用切换(application)、全局导航(globalNavigation)   | Object           | { theme: true, language: true, avatar: true, application: false, globalNavigation: false } | 否                             |
-| headerNavs          | 头部导航组件，如果有需要可以在头部区域加导航                                                                         | React Component  | 无                                                                                         | 否                             |
-| extraHeaderActions  | 头部右上角一些额外操作项，主要适用于一些定制化场景                                                                   | Array、ReactNode | 无                                                                                         | 否                             |
-| sideMenu            | 侧边栏菜单组件，有自定义侧边栏菜单的场景时可用                                                                       | ReactNode        | 无                                                                                         | 否                             |
-| onMenuChange        | 菜单切换回调事件                                                                                                     | Function         | 无                                                                                         | 否                             |
-| onBeforeMenuChange  | 菜单切换前回调事件（return false 则可以禁止默认行为）                                                                | Function         | 无                                                                                         | 否                             |
-| onMenuSelect        | 菜单选中回调事件                                                                                                     | Function         | 无                                                                                         | 否                             |
-| onThemeChange       | 主题切换回调事件                                                                                                     | Function         | 无                                                                                         | 否                             |
-| onLanguageChange    | 语言切换回调事件                                                                                                     | Function         | 无                                                                                         | 否                             |
-| onApplicationChange | 应用切换回调事件                                                                                                     | Function         | 无                                                                                         | 否                             |
-| onLogoClick         | logo 区域点击事件                                                                                                    | Function         | 无                                                                                         | 否                             |
-| onLogout            | 退出登录事件                                                                                                         | Function         | 跳转登录页面                                                                               | 否                             |
-
-#### HeaderNavs
-
-| 属性名称    | 属性说明                                                         | 类型     | 默认值      | 是否必须 |
-| :---------- | :--------------------------------------------------------------- | :------- | :---------- | :------- |
-| navs        | 导航数据,格式[{ name: "看板", key: "/dashboard" }], key 要求唯一 | Array    | 无          | 是       |
-| selectedKey | 指定选中的导航                                                   | String   | navs[0].key | 否       |
-| onChange    | 导航变化事件回调函数 onChange(Object: selectedNav)               | Function | 无          | 否       |
-| onSelect    | 选中导航事件回调函数 onSelect(Object: selectedNav)               | Function | 无          | 否       |
-
-## QueryListScene 查询列表
-
-主要用于查询列表页面场景，主要包括三部分: 表单查询、操作工具栏、表格数据展示。组件特点：
-
--   标签结构化、语义化，提高代码可读性
--   样式统一，方便统一维护升级
--   数据状态管理 + 通用逻辑涵盖(如 Loading、分页、切换页码、查询、重置、自动轮询等)
-
-### 安装
-
-```
-npm install tntd --save
-```
-
-### 代码演示
-
-```jsx
-import React, { Fragment } from "react";
-import ReactDOM from "react-dom";
-import { Button, Popconfirm, Divider, ButtonGroup, Cascader } from "antd";
-import { QueryListScene, Icon } from "tntd";
-import { createGlobalStyle } from "styled-components";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        overflow: visible;
-    }
-}
-`;
-
-const { QueryForm, Field, Toolbar, QueryList, createActions } = QueryListScene;
-const actions = createActions();
-
-const ColumnActions = ({ record }) => {
-    const onDelete = () => {
-        new Promise(resolve => {
-            resolve(true);
-        }).then(() => {
-            actions.search();
-        });
-    };
-
-    return (
-        <span>
-            <a>编辑</a>
-            <Divider type="vertical" />
-            <Popconfirm title="删除确认" onConfirm={onDelete} okText="确认" cancelText="取消">
-                <a>删除</a>
-            </Popconfirm>
-            <Divider type="vertical" />
-            <a download target="__blank" href={`/download?id=${record.id}`}>
-                下载
-            </a>
-        </span>
-    );
-};
-
-const columns = [
-    {
-        title: "ID",
-        dataIndex: "id",
-        width: 60,
-    },
-    {
-        title: "项目名称",
-        dataIndex: "name",
-        sorter: (a, b) => a.name > b.name,
-    },
-    {
-        title: "管理员",
-        dataIndex: "owner",
-        width: 100,
-    },
-    {
-        title: "创建时间",
-        dataIndex: "createTime",
-        width: 200,
-    },
-    {
-        title: "状态",
-        dataIndex: "status",
-        width: 100,
-    },
-    {
-        title: "操作",
-        dataIndex: "operation",
-        width: 150,
-        render: (val, record) => <ColumnActions record={record} />,
-    },
-];
-const query = ({ current = 1, pageSize = 10, ...rest }) => {
-    console.log("query", { current, pageSize, rest });
-    return new Promise(resolve => {
-        setTimeout(() => {
-            resolve({
-                current,
-                pageSize,
-                total: 100,
-                data: new Array(100)
-                    .fill(1)
-                    .map((item, index) => ({
-                        id: index + 1,
-                        name: `项目${index + 1}`,
-                        owner: `张三${index + 1}`,
-                        createTime: "2019-09-10 16:30:34",
-                        status: ["初始化", "运行中", "成功", "失败"][index % 4],
-                    }))
-                    .slice((current - 1) * pageSize, current * pageSize),
-            });
-        }, 500);
-    });
-};
-
-const ExtraActions = (
-    <Button.Group>
-        <Button icon="cloud-upload" />
-        <Button icon="cloud-download" />
-        <Button icon="setting" />
-    </Button.Group>
-);
-
-ReactDOM.render(
-    <Fragment>
-        <QueryListScene title="项目管理" query={query} actions={actions} interval={3000}>
-            <QueryForm
-                extraActions={ExtraActions}
-                showFieldCount={3}
-                initialValues={{
-                    name: "xxx",
-                    status: "initial",
-                    obj: {
-                        name: "zhangsan",
-                    },
-                }}
-            >
-                <Field
-                    type="selectInput"
-                    name="obj"
-                    props={{
-                        placeholder: "名称",
-                        options: [
-                            { label: "名称", value: "name" },
-                            { label: "ID", value: "id" },
-                        ],
-                    }}
-                />
-                <Field type="input" name="name" props={{ placeholder: "名称" }} />
-                <Field
-                    name="cascader"
-                    component={Cascader}
-                    props={{
-                        options: [
-                            {
-                                value: "zhejiang",
-                                label: "Zhejiang",
-                                children: [
-                                    {
-                                        value: "hangzhou",
-                                        label: "Hangzhou",
-                                        children: [
-                                            {
-                                                value: "xihu",
-                                                label: "West Lake",
-                                            },
-                                        ],
-                                    },
-                                ],
-                            },
-                        ],
-                    }}
-                />
-                <Field title="日期" type="date" name="date1" />
-                <Field
-                    title="状态"
-                    type="select"
-                    name="status"
-                    props={{
-                        placeholder: "状态",
-                        options: [
-                            { label: "初始化", value: "initial" },
-                            { label: "运行中", value: "running" },
-                            { label: "成功", value: "success" },
-                            { label: "失败", value: "fail" },
-                        ],
-                    }}
-                />
-                <Field title="日期" type="date" name="date" />
-                <Field title="日期范围" type="dateRange" name="date2" />
-                <Field
-                    title="状态"
-                    type="select"
-                    name="select1"
-                    props={{
-                        placeholder: "状态",
-                        options: ["初始化", "运行中", "成功", "失败"],
-                    }}
-                />
-                <Field title="名称" type="input" name="name2" props={{ placeholder: "名称" }} />
-                <Field
-                    title="状态2"
-                    type="select"
-                    name="select2"
-                    props={{
-                        placeholder: "状态",
-                        options: ["初始化", "运行中", "成功", "失败"],
-                    }}
-                />
-            </QueryForm>
-            <Toolbar>
-                <Button type="primary">新增</Button>
-                <Button type="warning">删除</Button>
-            </Toolbar>
-            <QueryList rowKey="id" bordered={false} paginationSticky columns={columns} />
-        </QueryListScene>
-        <GlobalStyle />
-    </Fragment>,
-    document.getElementById("root")
-);
-```
-
-### QueryListScene with memory
-
--   使用场景: 从列表页跳转到其它页面再回到列表页时会记住查询条件及分页参数。
--   重置记忆数据：actions.resetMemoryData
-
-```jsx
-import React, { useState, useEffect, Fragment } from "react";
-import ReactDOM from "react-dom";
-import { Button } from "antd";
-import { QueryListScene } from "tntd";
-
-const { QueryForm, Field, Toolbar, QueryList, createActions } = QueryListScene;
-const actions = createActions();
-
-const QueryListPage = () => {
-    const [visible, setVisible] = useState(true);
-    const query = params => {
-        params.pageSize = params.pageSize || 10;
-        const { current, pageSize } = params;
-        console.log("memory query params...", params);
-
-        return Promise.resolve({
-            current,
-            pageSize,
-            total: 100,
-            data: new Array(100)
-                .fill(1)
-                .map((item, index) => ({
-                    id: index + 1,
-                    name: `项目${index + 1}`,
-                    owner: `张三${index + 1}`,
-                    createTime: "2019-09-10 16:30:34",
-                    status: ["初始化", "运行中", "成功", "失败"][index % 4],
-                }))
-                .slice((current - 1) * pageSize, current * pageSize),
-        });
-    };
-
-    return (
-        <Fragment>
-            <Button type={visible ? "danger" : "primary"} onClick={() => setVisible(!visible)}>
-                {visible ? "销毁列表" : "显示列表"}
-            </Button>
-            <Button onClick={actions.resetMemoryData}>重置记忆数据</Button>
-            {visible ? (
-                <QueryListScene memory actions={actions} query={query}>
-                    <QueryForm initialValues={{ name: "项目" }}>
-                        <Field
-                            name="name"
-                            type="input"
-                            props={{
-                                placeholder: "名称",
-                            }}
-                        />
-                        <Field
-                            type="select"
-                            name="status"
-                            props={{
-                                placeholder: "状态",
-                                options: ["初始化", "运行中", "成功", "失败"],
-                            }}
-                        />
-                    </QueryForm>
-                    <QueryList
-                        columns={[
-                            { dataIndex: "id", title: "ID" },
-                            { dataIndex: "name", title: "名称" },
-                            { dataIndex: "owner", title: "负责人" },
-                            { dataIndex: "status", title: "状态" },
-                        ]}
-                    />
-                </QueryListScene>
-            ) : (
-                <p style={{ color: "red" }}>列表已销毁</p>
-            )}
-        </Fragment>
-    );
-};
-
-ReactDOM.render(<QueryListPage />, document.getElementById("root"));
-```
-
-### API
-
-#### QueryListScene
-
-| 属性名称  | 属性说明                                                                             | 类型    | 默认值 | 是否必须 |
-| :-------- | :----------------------------------------------------------------------------------- | :------ | :----- | :------- |
-| query     | 查询数据方法,调用时会把 queryform 数据作为参数                                       | Promise | 无     | 是       |
-| title     | 标题                                                                                 | string  | 无     | 否       |
-| actions   | 组件上聚合的方法，需由 createActions 方法创建出来                                    | Object  | 无     | 否       |
-| interval  | 轮训时间间隔单位 ms，设置该值后列表可自动轮询                                        | number  | 无     | 否       |
-| memory    | 组件销毁时是否需要记住表单和分页数据                                                 | boolean | false  | 否       |
-| className | css 类                                                                               | string  | 无     | 否       |
-| size      | 目前主要设置 header 高度，默认按照新的设计，如果需要保持原有系统不变，则设置为 large | string  | 无     | 否       |
-
-#### QueryForm
-
-| 属性名称       | 属性说明                                                  | 类型      | 默认值 | 是否必须 |
-| :------------- | :-------------------------------------------------------- | :-------- | :----- | :------- |
-| title          | 标题                                                      | string    | 无     | 否       |
-| showFieldCount | 显示在外面的表单数量(尽在“更多条件”在 Drawer 交互时使用)  | number    | 无     | 否       |
-| showExpand     | 展开/收起功能配置，默认开启                               | boolean   | true   | 否       |
-| showSearch     | 搜索按钮显示配置，默认开启                                | boolean   | true   | 否       |
-| showReset      | 重置按钮显示配置，默认开启                                | boolean   | true   | 否       |
-| drawerProps    | Drawer props（参见 antd，设置样式宽度时可用）             | Object    | 无     | 否       |
-| extraActions   | 额外操作                                                  | ReactNode | 无     | 否       |
-| renderActions  | 表单操作, 自定义操作按钮，默认是查询、重置                | Function  | 无     | 否       |
-| onChange       | 表单变化事件，onChange(values, { name, value, preValue }) | Function  | 无     | 否       |
-
-#### Field
-
-| 属性名称  | 属性说明                                                                                                                                                           | 类型   | 默认值 | 是否必须 |
-| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | :----- | :------- |
-| name      | 表单项名，保证唯一                                                                                                                                                 | string | 无     | 是       |
-| title     | 表单 label                                                                                                                                                         | string | 无     | 否       |
-| type      | 表单类型 input、search, number、select、selectInput、 date、 dateRange                                                                                             | 无     | 否     |
-| component | 表单组件，如果内置的 type 表单组件不满足需求的话，可以直接传 ReactNode 类型的表单组件，其优先级高于 type,如 antd TreeSelect、Cascader 等，也可以完全自定义表单组件 | 无     | 否     |
-| props     | 表单元素属性，参照 antd, Input, InputNumber, Select, DatePicker                                                                                                    | Object | 无     | 否       |
-| className | 添加样式 class                                                                                                                                                     | string | 无     | 否       |
-
-#### Toolbar
-
-无
-
-#### QueryList
-
-同 antd Table
-
-| 属性名称         | 属性说明                                       | 类型    | 默认值 | 是否必须 |
-| :--------------- | :--------------------------------------------- | :------ | :----- | :------- |
-| localPagination  | 前端分页，数据一次性从接口获取，前端分页时使用 | boolean | false  | 否       |
-| paginationSticky | 分页是否吸底（sticky）                         | boolean | false  | 否       |
-
-#### createActions
-
-```
-const { createActions } = QueryListScene;
-const actions = createActions();
-
-actions对象接口如下：
-{
-    // 设置查询表单数据（默认自动查询，不需要查询needSearch传false）
-    setFormData: (data: Object, needSearch = true),
-    // 重置表单数据
-    resetFormData: (needSearch = false),
-    // 重置记忆数据，form、pagination
-    resetMemoryData(),
-    // 设置表格数据
-    setTableDataSource: (dataSource: Array),
-    // 设置分页数据
-    setPagination: (
-        pagination: Object = {
-            current,
-            pageSize,
-            total
-        }
-    ),
-    // 查询列表, params 为查询参数，会扩展到formData上, showLoading：是否显示loading
-    search: (params?: Object, showLoading?: boolean = true),
-
-    // 获取表单数据，name不传则是整个表单数据对象，传了name则获取单个表单值
-    getFormData: (name?: string),
-    // 获取当前查询条件的表单数据，与getFormData的区别在于，这里是已执行过查询的数据
-    getSubmittedFormData: (name?: string),
-    // 获取列表数据
-    getTableDataSource: (),
-    // 获取分页数据
-    getPagination: ()
-}
-```
-
-## Icon 组件
-
-### 代码演示
-
-```jsx
-import { Fragment, useState } from "react";
-import ReactDOM from "react-dom";
-import { createGlobalStyle } from "styled-components";
-import { Icon } from "tntd";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-ReactDOM.render(<Icon type="analysis" />, document.getElementById("root"));
-```
-
-```jsx
-import { Fragment, useState } from "react";
-import ReactDOM from "react-dom";
-import styled, { createGlobalStyle } from "styled-components";
-import { Input } from "antd";
-import { Icon } from "tntd";
-import { iconList as icons } from "tntd/Icon";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-const IconList = styled.ul`
-    margin: 10px 0;
-    overflow: hidden;
-    list-style: none;
-`;
-const IconItem = styled.li`
-    position: relative;
-    float: left;
-    width: 16.66%;
-    height: 100px;
-    margin: 3px 0;
-    padding: 10px 0 0;
-    overflow: hidden;
-    color: #555;
-    text-align: center;
-    list-style: none;
-    background-color: inherit;
-    border-radius: 4px;
-    cursor: pointer;
-    -webkit-transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-    &:hover {
-        color: #fff;
-        background-color: #1890ff;
-    }
-    .tnt-icon {
-        margin: 12px 0 8px;
-        font-size: 36px;
-        -webkit-transition: -webkit-transform 0.3s ease-in-out;
-        transition: -webkit-transform 0.3s ease-in-out;
-        transition: transform 0.3s ease-in-out;
-        transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-        will-change: transform;
-    }
-`;
-
-const IconsDemo = props => {
-    const [searchValue, setSearchValue] = useState();
-
-    return (
-        <Fragment>
-            <Input.Search
-                onChange={evt => setSearchValue(evt.target.value)}
-                placeholder="输入icon标识搜索"
-            />
-            <IconList>
-                {icons
-                    .filter(icon => !searchValue || new RegExp(searchValue, "i").test(icon))
-                    .map(icon => (
-                        <IconItem key={icon}>
-                            <Icon type={icon} />
-                            <p>{icon}</p>
-                        </IconItem>
-                    ))}
-            </IconList>
-            <GlobalStyle />
-        </Fragment>
-    );
-};
-
-ReactDOM.render(<IconsDemo />, document.getElementById("root"));
-```
-
-### API
-
-#### Icon
-
-| 属性名称 | 属性说明      | 类型   | 默认值 | 是否必须 |
-| :------- | :------------ | :----- | :----- | :------- |
-| type     | icon 类型标识 | string | 无     | 是       |
-| prefix   | type 前缀     | string |        | 否       |
-
-## Modal 全屏浮层组件
-
-### 代码演示
-
-```jsx
-import { Fragment, useState } from "react";
-import ReactDOM from "react-dom";
-import { createGlobalStyle } from "styled-components";
-import { Button } from "antd";
-import { Modal } from "tntd";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-const FullscreenModalDemo = props => {
-    const [visible, setVisible] = useState(false);
-
-    return (
-        <Fragment>
-            <Button type="primary" onClick={() => setVisible(true)}>
-                带全屏Modal
-            </Button>
-            <Modal
-                visible={visible}
-                title="司南"
-                logo="https://sinan.tongdun.me/cdn/bucket/20191127134944493_favicon.png"
-                onCancel={() => setVisible(false)}
-                onToggleFullscreen={isFullscreen => console.log(`isFullscreen: ${isFullscreen}`)}
-            >
-                <iframe src="https://sinan.tongdun.me/book/2085" />
-            </Modal>
-            <GlobalStyle />
-        </Fragment>
-    );
-};
-
-ReactDOM.render(<FullscreenModalDemo />, document.getElementById("root"));
-```
-
-### API
-
-#### Modal
-
-同 antd Modal
-
-| 属性名称           | 属性说明     | 类型     | 默认值 | 是否必须 |
-| :----------------- | :----------- | :------- | :----- | :------- |
-| logo               | logo 地址    | string   | 无     | 是       |
-| supportFullscreen  | 是否支持全屏 | boolean  | true   | 否       |
-| onToggleFullscreen | 全屏切换事件 | Function | null   | 否       |
-
-## Columns 组件
-
-### 代码演示
-
-```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
-import { createGlobalStyle } from "styled-components";
-import { Button } from "antd";
-import { Columns, Icon } from "tntd";
-import "antd/dist/antd.css";
-
-const { Item } = Columns;
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-const Demo = props => {
-    const [activeTabKey, setActiveTabKey] = useState(null);
-    const [activeTabKey1, setActiveTabKey1] = useState(null);
-
-    const tabList = [
-        {
-            key: "1",
-            tab: "tab1",
-        },
-        {
-            key: "2",
-            tab: "tab2",
-        },
-    ];
-    const contentList = {
-        "1": <p>content1</p>,
-        "2": <p>content2</p>,
-    };
-    const tabList1 = [
-        {
-            key: "3",
-            tab: "tab3",
-        },
-        {
-            key: "4",
-            tab: "tab4",
-        },
-    ];
-    const contentList1 = {
-        "3": <p>content3</p>,
-        "4": <p>content4</p>,
-    };
-
-    return (
-        <>
-            <Columns gutter={12} height={300}>
-                <Item
-                    title={
-                        <div>
-                            <Icon type="edit" style={{ marginRight: 10 }} />
-                            修改
-                        </div>
-                    }
-                    span={4}
-                    hoverable={true}
-                    style={{ color: "#bbb" }}
-                    cover={<span>123</span>}
-                    loading={true}
-                >
-                    修改修改修改修改修改修改修改修改修改修改修改修改
-                </Item>
-                <Item
-                    title="测试2"
-                    extra={
-                        <Button size="small" type="primary" icon="more">
-                            更多
-                        </Button>
-                    }
-                    span={4}
-                >
-                    我的column 我的column 我的column 我的column 我的column
-                </Item>
-                <Item title="测试3" span={4}>
-                    我的column 我的column 我的column 我的column 我的column我的column 我的column
-                    我的column 我的column 我的column我的column 我的column 我的column 我的column
-                    我的column我的column 我的column 我的column 我的column 我的column我的column
-                    我的column 我的column 我的column 我的column我的column 我的column 我的column
-                    我的column 我的column我的column 我的column 我的column 我的column
-                    我的column我的column 我的column 我的column 我的column 我的column我的column
-                    我的column 我的column 我的column 我的column我的column 我的column 我的column
-                    我的column 我的column我的column 我的column 我的column 我的column
-                    我的column我的column 我的column 我的column 我的column 我的column我的column
-                    我的column 我的column 我的column 我的column我的column 我的column 我的column
-                    我的column 我的column我的
-                </Item>
-                <Item
-                    title="测试4"
-                    span={12}
-                    tabList={tabList}
-                    defaultActiveTabKey="2"
-                    activeTabKey={activeTabKey}
-                    onTabChange={key => setActiveTabKey(key)}
-                    tabBarExtraContent={
-                        <Button size="small" type="primary" icon="plus">
-                            添加
-                        </Button>
-                    }
-                >
-                    {contentList[activeTabKey]}
-                </Item>
-            </Columns>
-            <Columns height={400} gutter={[20, 24]}>
-                <Item
-                    bordered={true}
-                    span={12}
-                    tabList={tabList1}
-                    activeTabKey={activeTabKey1}
-                    onTabChange={key => setActiveTabKey1(key)}
-                    tabBarExtraContent={
-                        <Button size="small" type="primary" icon="search">
-                            搜索
-                        </Button>
-                    }
-                >
-                    我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦！
-                    {contentList1[activeTabKey1]}
-                </Item>
-                <Item title="测试5" span={12} bordered={true}>
-                    我是一段很长很长很长段文本哦我是一段很长很长很长段文本哦我是
-                </Item>
-            </Columns>
-        </>
-    );
-};
-
-ReactDOM.render(<Demo />, document.getElementById("root"));
-```
-
-### API
-
-#### Columns
-
-| 参数    | type         | description                   | default |
-| :------ | :----------- | :---------------------------- | :------ |
-| align   | top          | middle                        | bottom  | 垂直对齐方式(同 antd 中的 row 使用方法相同 ) | top |
-| gutter  | number/array | 同 antd 中的 row 使用方法类似 | 0       |
-| justify | start        | end                           | center  | space-around | space-between | 水平排列方式(同 antd 中的 row 使用方法相同 ) | start |
-| height  | int          | 列的高度                      | -       |
-
-#### Columns.Item
-
-| 参数                | type                                 | description                                     | default                 |
-| :------------------ | :----------------------------------- | :---------------------------------------------- | :---------------------- |
-| span                | int                                  | 与 antd 中 col 的 span 的使用方法相同           | 24                      |
-| extra               | string/ReactNode                     | title 右上角的操作区域                          | -                       |
-| title               | string/ReactNode                     | column 标题                                     | -                       |
-| hoverable           | boolean                              | 鼠标移过时可浮起                                | false                   |
-| bordered            | boolean                              | 是否有边框                                      | false（默认边框是阴影） |
-| tabList             | Array<{key: string, tab: ReactNode}> | 标题列表                                        | -                       |
-| activeTabKey        | string                               | 当前激活页签的 key                              | -                       |
-| onTabChange         | (key) => void                        | 页签切换的回调                                  | -                       |
-| defaultActiveTabKey | string                               | 初始化选中页签的 key，如果没有设置 activeTabKey | 第一个页签              |
-| tabBarExtraContent  | ReactNode                            | tab bar 上额外的元素                            | -                       |
-| headStyle           | CSSProperties                        | 自定义标题区域样式                              | -                       |
-
-## DevelopmentLogin 组件
-
-### 代码演示
-
-```jsx
-import { Fragment, useState } from "react";
-import ReactDOM from "react-dom";
-import { createGlobalStyle } from "styled-components";
-import { DevelopmentLogin } from "tntd";
-import "antd/dist/antd.css";
-
-const GlobalStyle = createGlobalStyle`
-  .site-body {
-    .ichYgh {
-        padding: 0;
-        overflow: visible;
-    }
-}
-`;
-
-ReactDOM.render(
-    <DevelopmentLogin
-        signIn={params => {
-            console.log("login info...", params);
-            // TODO 发送请求到后端登录，返回一个promise
-            // 目前组件内部在拿到返回的数据后默认的处理逻辑如下：
-            /*
-            const { tdToken: token, userId } = res || {};
-
-            cookies.set('_td_token_', token, { path: '/' });
-            cookies.set('_uid_', userId, { path: '/' });
-            */
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    resolve({
-                        tdToken: "tdToken",
-                        userId: "userId",
-                    });
-                }, 100);
-            });
-        }}
-    />,
-    document.getElementById("root")
-);
-```
-
-### API
-
-#### DevelopmentLogin
-
-| 属性名称 | 属性说明         | 类型                         | 默认值 | 是否必须 |
-| :------- | :--------------- | :--------------------------- | :----- | :------- |
-| signIn   | 登录时执行的方法 | Function(返回值类型 Promise) | 无     | 是       |
-
-<br/>
-
-## Handle 组件
-
-### 代码演示
-
-```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import "antd/dist/antd.css";
-import { Button, Table } from "antd";
-import { Handle } from "tntd";
-
-const Demo = props => {
-    const dataSource = [
-        {
-            key: "1",
-            name: "胡彦斌",
-            age: 32,
-            address: "西湖区湖底公园1号",
-        },
-        {
-            key: "2",
-            name: "胡彦祖",
-            age: 42,
-            address: "西湖区湖底公园1号",
-        },
-    ];
-
-    const columns = [
-        {
-            title: "姓名",
-            dataIndex: "name",
-            key: "name",
-        },
-        {
-            title: "年龄",
-            dataIndex: "age",
-            key: "age",
-        },
-        {
-            title: "住址",
-            dataIndex: "address",
-            key: "address",
-        },
-        {
-            title: "操作",
-            dataIndex: "opera",
-            render: () => (
-                <Handle className="custom-class">
-                    <a
-                        onClick={() => {
-                            console.log("online");
-                        }}
-                    >
-                        上线
-                    </a>
-                    <a>查看</a>
-                    <a>编辑</a>
-                    <a>测试</a>
-                    <a>导入</a>
-                    <a>导出</a>
-                </Handle>
-            ),
-        },
-    ];
-
-    return <Table dataSource={dataSource} columns={columns} rowKey={(e, i) => i} />;
-};
-
-ReactDOM.render(<Demo />, document.getElementById("root"));
-```
-
-### API
-
-#### Handle
-
-| 属性名称  | 属性说明                              | 类型   | 默认值 | 是否必须 |
-| :-------- | :------------------------------------ | :----- | :----- | :------- |
-| type      | 类型，展示“更多”的模式，Icon 或者文字 | String | 文字   | 否       |
-| num       | 最多展示的个数                        | Number | 3      | 否       |
-| divider   | 分隔线                                | Bool   | true   | 否       |
-| lang      | 中英文                                | String | cn     | 否       |
-| className | 自定义类名                            | String | 无     | 否       |
-
-## Page 组件
-
-### 代码演示
-
-```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
-import styled from "styled-components";
-import { Button, Divider } from "antd";
-import { Page } from "tntd";
-import "antd/dist/antd.css";
-
-const { Box } = Page;
-
-const left = "< 返回列表";
-const center = "先灰再白后灰";
-const right = (
-    <>
-        <Button>预览</Button>
-        <Button type="primary">保存</Button>
-    </>
-);
-
-const Demo = props => {
-    return (
-        <div>
-            <Page title={left} center={center} extra={right}>
-                <Box width="200">第一列</Box>
-                <Box mode="white">第二列</Box>
-                <Box width="200">第三列</Box>
-            </Page>
-        </div>
-    );
-};
-
-ReactDOM.render(<Demo />, document.getElementById("root"));
-```
-
-### API
-
-#### Page
-
-| 参数         | 说明                                                                   | 类型              | 默认值  | 是否必须 |
-| :----------- | :--------------------------------------------------------------------- | :---------------- | :------ | :------- |
-| title        | 标题栏左侧内容                                                         | ReactNode         | -       | 否       |
-| center       | 标题栏中间内容                                                         | ReactNode         | -       | 否       |
-| extra        | 标题栏右侧内容                                                         | ReactNode         | -       | 否       |
-| headerHeight | 标题栏的高度                                                           | string/int        | 50px    | 否       |
-| height       | 组件整体高度                                                           | string            | 100vh   | 否       |
-| size         | 根据 size 尺寸调整标题栏的 padding 值，Page.Box 组件也会继承 size 属性 | `default | small` | default | 否       |
-
-#### Page.Box
-
-描述：Page.Box 包裹了 antd 库中的 Card 组件，Box 属性都会透传到 Card 组件。
-
-| 参数      | 说明                                           | 类型          | 默认值               | 是否必须 |
-| :-------- | :--------------------------------------------- | :------------ | :------------------- | :------- |
-| width     | 30%代表占父容器的百分比， 30 代表固定宽度 30px | string/int    | flex:1，代表均分空间 | 否       |
-| mode      | white 是白色背景，gray 为灰色背景              | `white| gray` | gray                 | 否       |
-| noPadding | 如果为 true，Box 的 padding 为 0               | boolean       | false                | 否       |
-
-## ArrayInput 组件
-
-### 代码演示 1
-
-```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
-import { Button, Icon, Input, Select } from "antd";
-import { ArrayInput } from "tntd";
-import "antd/dist/antd.css";
-
-const Option = Select.Option;
-
-const Demo = () => {
-    const [value, setValue] = useState([{ type: "input" }]);
-    return (
-        <ArrayInput
-            value={value}
-            onChange={v => {
-                console.log("值修改了", v);
-                setValue(v);
-            }}
-            plusTip="注意要添加哦"
-            deleteTip="注意要删除了哦"
-            require
-        >
-            {(row, index) => {
-                return (
-                    <>
-                        <Select
-                            name="type"
-                            placeholder="联动"
-                            span={4}
-                            onChange={(value, index, changeValue) => {
-                                changeValue(index, "string", undefined);
-                            }}
-                        >
-                            <Option value="input">输入框</Option>
-                            <Option value="select">选择框</Option>
-                        </Select>
-                        {row.type === "input" ? (
-                            <Input name="string" placeholder="输入值" span={6} />
-                        ) : (
-                            <Select name="string" placeholder="下拉值" span={6}>
-                                <Option value="input">下拉值1</Option>
-                                <Option value="select">下拉值2</Option>
-                            </Select>
-                        )}
-                        <Input name="input" placeholder="输入框" />
-                    </>
-                );
-            }}
-        </ArrayInput>
-    );
-};
-
-ReactDOM.render(<Demo />, document.getElementById("root"));
-```
-
-### 代码演示 2
-
-```jsx
-import React, { useState } from "react";
-import ReactDOM from "react-dom";
-import { Button, Icon, Input, Select } from "antd";
-import { ArrayInput } from "tntd";
-import "antd/dist/antd.css";
-
-const Option = Select.Option;
-
-const Demo = () => {
-    return (
-        <ArrayInput mode="table">
-            {(row, index) => {
-                return [
-                    <Select
-                        name="type"
-                        placeholder="联动"
-                        title="第一列"
-                        span={4}
-                        onChange={(value, index, changeValue) => {
-                            changeValue(index, "string", undefined);
-                        }}
-                    >
-                        <Option value="input">输入框</Option>
-                        <Option value="select">选择框</Option>
-                    </Select>,
-                    row.type === "input" ? (
-                        <Input name="string" placeholder="输入值" title="第二列" span={6} />
-                    ) : (
-                        <Select name="string" placeholder="下拉值" title="第二列" span={6}>
-                            <Option value="input">下拉值1</Option>
-                            <Option value="select">下拉值2</Option>
-                        </Select>
-                    ),
-                    <Input name="input" placeholder="输入框" title="第三列" span={6} />,
-                ];
-            }}
-        </ArrayInput>
-    );
-};
-
-ReactDOM.render(<Demo />, document.getElementById("root"));
-```
-
-### API
-
-#### ArrayInput
-
-| 参数         | type         | description                   | default |
-| :----------- | :----------- | :---------------------------- | :------ |
-| defaultValue | array        | 默认值                        |         |
-| value        | array        | 可控值                        |         |
-| onChange     | Function     | 值变化时的回调                |         |
-| mode         | string       | 展示形式(list 或者 table)     | list    |
-| gutter       | number/array | 同 antd 中的 row 使用方法类似 | 10      |
-| require      | boolean      | 是否至少有一列                | false   |
-| children     | Function     | 每行渲染函数                  |         |
-| deleteTip    | string       | 删除按钮说明文案              |         |
-| plusTip      | string       | 添加按钮说明文案              |         |
-
-#### children 中输入控件参数
-
-| 参数  | type   | description                   | default |
-| :---- | :----- | :---------------------------- | :------ |
-| name  | string | 控件的 key(必填)              |         |
-| span  | number | 同 antd 中的 Col 使用方法类似 | 4       |
-| title | string | mode 为 table 的时候必填      |         |