@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/_base/_story/a11y.jsx

@@ -1,1302 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-    Avatar,
-    Badge,
-    Breadcrumb,
-    Button,
-    Layout,
-    Nav,
-    Pagination,
-    Popover,
-    Rating,
-    Row,
-    Steps,
-    Space,
-    Tag,
-    Timeline,
-    Tooltip,
-    Col,
-    Typography,
-    Anchor,
-    BackTop,
-    Tabs,
-    TabPane,
-    Calendar,
-    Card,
-    Collapse,
-    Descriptions,
-    Dropdown,
-    Empty,
-    List,
-    ButtonGroup,
-    Modal,
-    OverflowList,
-    Slider,
-    SideSheet,
-    Table,
-    Banner,
-    Popconfirm,
-    Notification,
-    Progress,
-    Toast,
-    Spin,
-    Form,
-    Select,
-    Collapsible,
-    Skeleton,
-    Tree,
-    Transfer
-} from '@douyinfe/semi-ui';
-import {
-    IconSemiLogo,
-    IconBell,
-    IconHelpCircle,
-    IconBytedanceLogo,
-    IconHome,
-    IconHistogram,
-    IconLive,
-    IconSetting,
-    IconEdit,
-    IconCamera,
-    IconAlarm,
-    IconBookmark,
-    IconDuration,
-    IconFolder,
-    IconDelete,
-    IconUpload,
-    IconSun,
-    IconMoon,
-    IconSearch
-} from '@douyinfe/semi-icons';
-import {
-    IllustrationConstruction,
-    IllustrationConstructionDark,
-    IllustrationNoResult,
-    IllustrationNoResultDark,
-    IllustrationSuccess,
-    IllustrationSuccessDark,
-    IllustrationFailure,
-    IllustrationFailureDark,
-    IllustrationNoAccess,
-    IllustrationNoAccessDark,
-    IllustrationNoContent,
-    IllustrationNoContentDark,
-    IllustrationNotFound,
-    IllustrationNotFoundDark,
-    IllustrationIdle,
-    IllustrationIdleDark
-} from '@douyinfe/semi-illustrations';
-import './a11y.scss';
-
-SemiA11y.storyName = 'Semi A11y';
-
-const raw = [
-    {
-        key: '1',
-        name: 'Semi Design 设计稿标题可能有点长这时候应该显示 Tooltip.fig',
-        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
-        size: '2M',
-        owner: '姜鹏志',
-        updateTime: '2020-02-02 05:13',
-        avatarBg: 'grey',
-    },
-    {
-        key: '2',
-        name: 'Semi Design 分享演示文稿',
-        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
-        size: '2M',
-        owner: '郝宣',
-        updateTime: '2020-01-17 05:31',
-        avatarBg: 'red',
-    },
-    {
-        key: '3',
-        name: '设计文档',
-        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
-        size: '34KB',
-        owner: 'Zoey Edwards',
-        updateTime: '2020-01-26 11:01',
-        avatarBg: 'light-blue',
-    },
-    {
-        key: '4',
-        name: 'Semi Pro 设计文档可能也有点长所以也会显示Tooltip',
-        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
-        size: '34KB',
-        owner: '姜琪',
-        updateTime: '2020-01-26 11:01',
-        avatarBg: 'green',
-    },
-];
-
-const treeData = [
-    {
-        label: '亚洲',
-        value: 'Asia',
-        key: '0',
-        children: [
-            {
-                label: '中国',
-                value: 'China',
-                key: '0-0',
-                children: [
-                    {
-                        label: '北京',
-                        value: 'Beijing',
-                        key: '0-0-0',
-                    },
-                    {
-                        label: '上海',
-                        value: 'Shanghai',
-                        key: '0-0-1',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        label: '北美洲',
-        value: 'North America',
-        key: '1',
-    }
-];
-
-const listData = [
-    {
-        title: '审核管理平台',
-        rating: 4.5,
-        feedbacks: 124,
-    },
-    {
-        title: '扁鹊',
-        rating: 4,
-        feedbacks: 108,
-    },
-    {
-        title: '直播审核平台',
-        rating: 3.5,
-        feedbacks: 244,
-    },
-    {
-        title: '抖音安全测试',
-        feedbacks: 189,
-    },
-    {
-        title: '内容平台',
-        rating: 3,
-        feedbacks: 128,
-    },
-    {
-        title: '策略平台',
-        rating: 4,
-        feedbacks: 156,
-    },
-];
-
-const style = { width: '90%' };
-const initValues = {
-    name: 'semi',
-    business: ['ulikeCam'],
-    role: 'ued',
-    switch: true,
-    files: [
-        {
-            uid: '1',
-            name: 'vigo.png',
-            status: 'success',
-            size: '130KB',
-            preview: true,
-            url:
-                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/vigo.png',
-        },
-        {
-            uid: '2',
-            name: 'jiafang1.jpeg',
-            status: 'validateFail',
-            size: '222KB',
-            percent: 50,
-            preview: true,
-            fileInstance: new File([new ArrayBuffer(2048)], 'jiafang1.jpeg', { type: 'image/jpeg' }),
-            url:
-                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-        },
-        {
-            uid: '3',
-            name: 'jiafang2.jpeg',
-            status: 'uploading',
-            size: '222KB',
-            percent: 50,
-            preview: true,
-            fileInstance: new File([new ArrayBuffer(2048)], 'jiafang2.jpeg', { type: 'image/jpeg' }),
-            url:
-                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-        },
-    ],
-};
-
-const listItemStyle = {
-    border: '1px solid var(--semi-color-border)',
-    backgroundColor: 'var(--semi-color-bg-2)',
-    borderRadius: '3px',
-    paddingLeft: '20px',
-    margin: '8px 2px',
-};
-
-const descriptionData = [
-    { key: '实际用户数量', value: '1,480,000' },
-    { key: '7天留存', value: '98%' },
-    { key: '安全等级', value: '3级' },
-    { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
-    { key: '认证状态', value: '未认证' },
-];
-const descriptionStyle = {
-    boxShadow: 'var(--semi-shadow-elevated)',
-    backgroundColor: 'var(--semi-color-bg-2)',
-    borderRadius: '4px',
-    padding: '10px',
-    margin: '10px',
-    width: '200px',
-};
-
-const emptyStyle = {
-    padding: 30,
-};
-
-const transferData = Array.from({ length: 100 }, (v, i) => {
-    return {
-        label: `选项名称 ${i}`,
-        value: i,
-        disabled: false,
-        key: i,
-    };
-});
-
-const items = [
-    { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
-    { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
-    { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
-    { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
-    { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
-    { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
-];
-
-const empty = (
-    <Empty
-        image={<IllustrationNoResult />}
-        darkModeImage={<IllustrationNoResultDark />}
-        description={'搜索无结果'}
-    />
-);
-
-const placeholder = (
-    <div style={style}>
-        <Skeleton.Avatar style={{ marginRight: 12 }} />
-        <div>
-            <Skeleton.Title style={{ width: 120, marginBottom: 12, marginTop: 12 }} />
-            <Skeleton.Paragraph style={{ width: 240 }} rows={3} />
-        </div>
-    </div>
-);
-
-export default function SemiA11y() {
-    const { Header, Footer, Sider, Content } = Layout;
-    const { Title, Text, Paragraph } = Typography;
-    const [modalVisible, setModalVisible] = useState(false);
-    const [sideSheetVisible, setSideSheetVisible] = useState(false);
-    const [overflowWidth, setOverflowWidth] = useState(100);
-    const [isOpen, setCollapsibleOpen] = useState(false);
-    const [dataSource, setData] = useState(raw);
-    const [mode, setMode] = useState('light');
-    const [stringData, setStringData] = useState([]);
-
-    const removeRecord = key => {
-        let newDataSource = [...dataSource];
-        if (key != null) {
-            let idx = newDataSource.findIndex(data => data.key === key);
-
-            if (idx > -1) {
-                newDataSource.splice(idx, 1);
-                setData(newDataSource);
-            }
-        }
-    };
-
-    const columns = [
-        {
-            title: '标题',
-            dataIndex: 'name',
-            width: 400,
-            render: (text, record, index) => {
-                return (
-                    <span style={{ display: 'flex', alignItems: 'center' }}>
-                        <Avatar
-                            size="small"
-                            shape="square"
-                            src={record.nameIconSrc}
-                            style={{ marginRight: 12 }}
-                        ></Avatar>
-                        {/* 宽度计算方式为单元格设置宽度 - 非文本内容宽度 */}
-                        <Text heading={5} ellipsis={{ showTooltip: true }} style={{ width: 'calc(400px - 76px)' }}>
-                            {text}
-                        </Text>
-                    </span>
-                );
-            },
-        },
-        {
-            title: '大小',
-            dataIndex: 'size',
-            width: 150,
-        },
-        {
-            title: '所有者',
-            dataIndex: 'owner',
-            render: (text, record, index) => {
-                return (
-                    <div>
-                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
-                            {typeof text === 'string' && text.slice(0, 1)}
-                        </Avatar>
-                        {text}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '更新日期',
-            dataIndex: 'updateTime',
-        },
-        {
-            title: '',
-            width: 100,
-            dataIndex: 'operate',
-            render: (text, record) => (
-                <Button icon={<IconDelete />} theme="borderless" onClick={() => removeRecord(record.key)} />
-            ),
-        },
-    ];
-
-    const onConfirm = () => {
-        Toast.success('确认保存！');
-    };
-
-    const onCancel = () => {
-        Toast.warning('取消保存！');
-    };
-
-    const switchMode = () => {
-        const body = document.body;
-        if (body.hasAttribute('theme-mode')) {
-            body.removeAttribute('theme-mode');
-            setMode('light');
-        } else {
-            body.setAttribute('theme-mode', 'dark');
-            setMode('dark');
-        }
-    };
-
-    const handleStringSearch = (value) => {
-        let result;
-        if (value) {
-            result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-        } else {
-            result = [];
-        }
-        setStringData(result);
-    };
-
-    const renderOverflow = items => {
-        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
-    };
-    const renderOverflowItem = (item, ind) => {
-        return (
-            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
-                {item.icon}
-                {item.key}
-            </Tag>
-        );
-    };
-
-    useEffect(() => {
-        document.body && document.body.setAttribute('data-page', 'a11y');
-
-        return () => {
-            document.body && document.body.removeAttribute('data-page');
-        };
-    }, []);
-
-    return (
-        <>
-            <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
-                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
-                    <div>
-                        <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
-                            <Nav.Header>
-                                <IconSemiLogo style={{ width: '96px', height: '36px', fontSize: 36 }} />
-                                <span
-                                    style={{
-                                        color: 'var(--semi-color-text-2)',
-                                    }}
-                                >
-                                    <span
-                                        style={{
-                                            marginRight: '24px',
-                                            color: 'var(--semi-color-text-0)',
-                                            fontWeight: '600',
-                                        }}
-                                    >
-                                        模版推荐
-                                    </span>
-                                    <span style={{ marginRight: '24px' }}>所有模版</span>
-                                    <span>我的模版</span>
-                                </span>
-                            </Nav.Header>
-                            <Nav.Footer>
-                                <Button
-                                    theme="borderless"
-                                    icon={mode === 'dark' ? <IconSun size="large" /> : <IconMoon size="large" />}
-                                    style={{
-                                        color: 'var(--semi-color-text-2)',
-                                        marginRight: '12px',
-                                    }}
-                                    onClick={switchMode}
-                                />
-                                <Button
-                                    theme="borderless"
-                                    icon={<IconBell size="large" />}
-                                    style={{
-                                        color: 'var(--semi-color-text-2)',
-                                        marginRight: '12px',
-                                    }}
-                                />
-                                <Button
-                                    theme="borderless"
-                                    icon={<IconHelpCircle size="large" />}
-                                    style={{
-                                        color: 'var(--semi-color-text-2)',
-                                        marginRight: '12px',
-                                    }}
-                                />
-                                <Avatar color="orange" size="small">
-                                    YJ
-                                </Avatar>
-                            </Nav.Footer>
-                        </Nav>
-                    </div>
-                </Header>
-                <Layout>
-                    <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
-                        <Nav
-                            style={{ maxWidth: 220, height: '100%' }}
-                            defaultSelectedKeys={['Home']}
-                            items={[
-                                { itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },
-                                { itemKey: 'Histogram', text: '基础数据', icon: <IconHistogram size="large" /> },
-                                { itemKey: 'Live', text: '测试功能', icon: <IconLive size="large" /> },
-                                { itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },
-                            ]}
-                            footer={{
-                                collapseButton: true,
-                            }}
-                        />
-                    </Sider>
-                    <Content
-                        style={{
-                            padding: '24px',
-                            backgroundColor: 'var(--semi-color-bg-1)',
-                            maxHeight: 'calc(100vh - 120px)',
-                        }}
-                    >
-                        <Breadcrumb
-                            style={{
-                                marginBottom: '24px',
-                            }}
-                            routes={['首页', '当这个页面标题很长时需要省略', '上一页', '详情页']}
-                        />
-                        <div
-                            style={{
-                                borderRadius: '10px',
-                                border: '1px solid var(--semi-color-border)',
-                                padding: '32px',
-                            }}
-                            className="rows-container"
-                        >
-                            <Row id="基本示例">
-                                <Pagination total={80} showSizeChanger></Pagination>
-                                <Steps current={1}>
-                                    <Steps.Step title="Finished" description="This is a description." />
-                                    <Steps.Step title="In Progress" description="This is a description." />
-                                    <Steps.Step title="Waiting" description="This is a description." />
-                                </Steps>
-                                <Steps current={1} status="error">
-                                    <Steps.Step title="Finished" description="This is a description" />
-                                    <Steps.Step title="In Process" description="This is a description" />
-                                    <Steps.Step title="Waiting" description="This is a description" />
-                                </Steps>
-                            </Row>
-                            <Row>
-                                <div style={{ display: 'flex' }}>
-                                    <div style={{ padding: 8 }}>
-                                        <Badge count={5} theme="solid">
-                                            <Avatar color="blue" shape="square">
-                                                XZ
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                    <div style={{ padding: 8 }}>
-                                        <Badge count={5} theme="light">
-                                            <Avatar color="cyan" shape="square">
-                                                YB
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                    <div style={{ padding: 8 }}>
-                                        <Badge count={5} theme="inverted">
-                                            <Avatar color="indigo" shape="square">
-                                                LX
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                    <div style={{ padding: 8 }}>
-                                        <Badge dot theme="solid">
-                                            <Avatar color="light-blue" shape="square">
-                                                YZ
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                    <div style={{ padding: 8 }}>
-                                        <Badge dot theme="light">
-                                            <Avatar color="teal" shape="square">
-                                                HW
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                    <div
-                                        style={{
-                                            padding: '8px',
-                                            borderRadius: '4px',
-                                            backgroundColor: 'var(--semi-color-fill-0)',
-                                        }}
-                                    >
-                                        <Badge dot theme="inverted">
-                                            <Avatar color="green" shape="square">
-                                                XM
-                                            </Avatar>
-                                        </Badge>
-                                    </div>
-                                </div>
-                                <div>
-                                    <Space wrap>
-                                        <Tag color="grey">grey tag</Tag>
-                                        <Tag color="blue">blue tag</Tag>
-                                        <Tag color="blue" type="ghost">
-                                            ghost tag
-                                        </Tag>
-                                        <Tag color="blue" type="solid">
-                                            solid tag
-                                        </Tag>
-                                        <Tag color="red">red tag</Tag>
-                                        <Tag color="green">green tag</Tag>
-                                        <Tag color="orange">orange tag</Tag>
-                                        <Tag color="teal">teal tag</Tag>
-                                        <Tag color="violet">violet tag</Tag>
-                                        <Tag color="white">white tag</Tag>
-                                    </Space>
-                                </div>
-                                <div>
-                                    <Space>
-                                        <Popover content={'hi semi-design'} style={{ padding: 8 }}>
-                                            <Tag style={{ marginRight: 8 }}>I am Popover</Tag>
-                                        </Popover>
-                                        <Tooltip content={'hi semi-design'}>
-                                            <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
-                                        </Tooltip>
-                                        <Dropdown
-                                            render={
-                                                <Dropdown.Menu>
-                                                    <Dropdown.Item>Menu Item 1</Dropdown.Item>
-                                                    <Dropdown.Item>Menu Item 2</Dropdown.Item>
-                                                    <Dropdown.Item>Menu Item 3</Dropdown.Item>
-                                                </Dropdown.Menu>
-                                            }
-                                        >
-                                            <Tag>I am dropdown</Tag>
-                                        </Dropdown>
-                                        <Rating defaultValue={3} size="small" style={{ marginRight: 8 }} />
-                                    </Space>
-                                </div>
-                                <div className="mt12">
-                                    <Space>
-                                        <Button onClick={() => setModalVisible(true)}>Modal</Button>
-                                        <Button type="tertiary" onClick={() => setSideSheetVisible(true)}>
-                                            SideSheet
-                                        </Button>
-                                        <Button
-                                            type="warning"
-                                            onClick={() =>
-                                                Notification.open({
-                                                    title: 'Hi, Bytedance',
-                                                    content: 'ies dance dance dance',
-                                                    duration: 3,
-                                                })
-                                            }
-                                        >
-                                            Notification
-                                        </Button>
-                                        <Popconfirm
-                                            title="确定是否要保存此修改？"
-                                            content="此修改将不可逆"
-                                            onConfirm={onConfirm}
-                                            onCancel={onCancel}
-                                        >
-                                            <Button type="danger">Popconfirm</Button>
-                                        </Popconfirm>
-                                        <Modal
-                                            title="基本对话框"
-                                            visible={modalVisible}
-                                            onOk={() => setModalVisible(false)}
-                                            onCancel={() => setModalVisible(false)}
-                                        >
-                                            This is the content of a basic modal.
-                                            More content...
-                                        </Modal>
-                                        <SideSheet
-                                            title="滑动侧边栏"
-                                            visible={sideSheetVisible}
-                                            onCancel={() => setSideSheetVisible(false)}
-                                        >
-                                            <p>This is the content of a basic side sheet.</p>
-                                            <p>Here is more content...</p>
-                                        </SideSheet>
-                                    </Space>
-                                </div>
-                            </Row>
-                            <Row>
-                                <Col span={12} style={{ paddingRight: 24 }}>
-                                    <div style={{ maxWidth: 640 }}>
-                                        <Banner
-                                            className="mb12"
-                                            fullMode={false}
-                                            type="info"
-                                            bordered
-                                            icon={null}
-                                            closeIcon={null}
-                                            title={
-                                                <div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
-                                                    不知道 AppKey？
-                                                </div>
-                                            }
-                                            description={
-                                                <div>
-                                                    你可先联系对应的研发同学，确认是否已在
-                                                    <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text>
-                                                    申请了应用，并填写对应的信息。
-                                                </div>
-                                            }
-                                        />
-                                        <Banner
-                                            className="mb12"
-                                            fullMode={false}
-                                            type="warning"
-                                            bordered
-                                            icon={null}
-                                            closeIcon={null}
-                                            title={
-                                                <div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
-                                                    不知道 AppKey？
-                                                </div>
-                                            }
-                                            description={
-                                                <div>
-                                                    你可先联系对应的研发同学，确认是否已在
-                                                    <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text>
-                                                    申请了应用，并填写对应的信息。
-                                                </div>
-                                            }
-                                        />
-                                        <Banner
-                                            className="mb12"
-                                            fullMode={false}
-                                            type="danger"
-                                            bordered
-                                            icon={null}
-                                            closeIcon={null}
-                                            title={
-                                                <div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
-                                                    不知道 AppKey？
-                                                </div>
-                                            }
-                                            description={
-                                                <div>
-                                                    你可先联系对应的研发同学，确认是否已在
-                                                    <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text>
-                                                    申请了应用，并填写对应的信息。
-                                                </div>
-                                            }
-                                        />
-                                        <Banner
-                                            fullMode={false}
-                                            type="success"
-                                            bordered
-                                            icon={null}
-                                            closeIcon={null}
-                                            title={
-                                                <div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>
-                                                    不知道 AppKey？
-                                                </div>
-                                            }
-                                            description={
-                                                <div>
-                                                    你可先联系对应的研发同学，确认是否已在
-                                                    <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text>
-                                                    申请了应用，并填写对应的信息。
-                                                </div>
-                                            }
-                                        />
-                                    </div>
-                                </Col>
-                                <Col span={12}>
-                                    <Title style={{ margin: '8px 0' }}>h1. Semi Design</Title>
-                                    <Title heading={2} style={{ margin: '8px 0' }}>
-                                        h2. Semi Design
-                                    </Title>
-                                    <Title heading={3} style={{ margin: '8px 0' }}>
-                                        h3. Semi Design
-                                    </Title>
-                                    <Title heading={4} style={{ margin: '8px 0' }}>
-                                        h4. Semi Design
-                                    </Title>
-                                    <Title heading={5} style={{ margin: '8px 0' }}>
-                                        h5. Semi Design
-                                    </Title>
-                                    <Title heading={6} style={{ margin: '8px 0' }}>
-                                        h6. Semi Design
-                                    </Title>
-                                </Col>
-                            </Row>
-                            <Row id="组件">
-                                <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                                    <Empty
-                                        image={<IllustrationSuccess style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationSuccessDark style={{ width: 150, height: 150 }} />}
-                                        description={'创建成功'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationFailure style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationFailureDark style={{ width: 150, height: 150 }} />}
-                                        description={'加载失败'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />}
-                                        description={'没有权限'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
-                                        description={'暂无内容，请添加'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationNotFound style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationNotFoundDark style={{ width: 150, height: 150 }} />}
-                                        description={'页面404'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
-                                        description={'搜索无结果'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
-                                        description={'建设中'}
-                                        style={emptyStyle}
-                                    />
-                                    <Empty
-                                        image={<IllustrationIdle style={{ width: 150, height: 150 }} />}
-                                        darkModeImage={<IllustrationIdleDark style={{ width: 150, height: 150 }} />}
-                                        description={'神游四方'}
-                                        style={emptyStyle}
-                                    />
-                                </div>
-                            </Row>
-                            <Row>                                       
-                                <Timeline>
-                                    <Timeline.Item time="2019-07-14 10:35" type="ongoing">
-                                        审核中
-                                    </Timeline.Item>
-                                    <Timeline.Item time="2019-06-13 16:17" type="success">
-                                        发布成功
-                                    </Timeline.Item>
-                                    <Timeline.Item time="2019-05-14 18:34" type="error">
-                                        审核失败
-                                    </Timeline.Item>
-                                </Timeline>
-                                <div style={{ width: 200 }}>
-                                    <Progress className="mb12" percent={10} stroke="#fc8800" aria-label='download progress'/>
-                                    <Progress className="mb12" percent={25} stroke="#f93920" aria-label='download progress'/>
-                                    <Progress className="mb12" percent={50} aria-label='download progress'/>
-                                    <Progress className="mb12" percent={80} aria-label='download progress'/>
-                                    <Progress className="mb12" percent={80} size="large" aria-label='download progress'/>
-                                    <Progress className="mb12" percent={80} style={{ height: '8px' }} aria-label='download progress'/>
-                                </div>
-                                <div className="mb12">
-                                    <Skeleton placeholder={placeholder} loading={true} active>
-                                        <div style={{
-                                            display: 'flex',
-                                            alignItems: 'flex-start',
-                                        }}>
-                                            <Avatar color="blue" style={{ marginRight: 12 }}>
-                                                UI
-                                            </Avatar>
-                                            <div>
-                                                <h3>Semi UI</h3>
-                                                <p>Hi, Bytedance dance dance.</p>
-                                                <p>Hi, Bytedance dance dance.</p>
-                                                <p>Hi, Bytedance dance dance.</p>
-                                            </div>
-                                        </div>
-                                    </Skeleton>
-                                </div>
-                                <div>
-                                    <Spin size="small" />
-                                    <Spin size="middle" />
-                                    <Spin size="large" />
-                                </div>
-                            </Row>
-                            <Row>
-                                <div style={{ width: 300 }}>
-                                    <Slider
-                                        step={1}
-                                        value={overflowWidth}
-                                        onChange={value => setOverflowWidth(value)}
-                                    />
-                                    <div style={{ width: `${overflowWidth}%` }}>
-                                        <OverflowList
-                                            items={items}
-                                            overflowRenderer={renderOverflow}
-                                            visibleItemRenderer={renderOverflowItem}
-                                        />
-                                    </div>
-                                </div>
-                            </Row>
-                            <Row id="设计语言">
-                                <Table
-                                    style={{ minHeight: 350 }}
-                                    columns={columns}
-                                    dataSource={dataSource}
-                                    pagination={false}
-                                    empty={empty}
-                                />
-                            </Row>
-                            <Row id="物料平台">
-                                <Form
-                                    initValues={initValues}
-                                    style={{ padding: 10, width: '100%' }}
-                                    onValueChange={v => console.log(v)}
-                                >
-                                    <Form.Section text={'基本信息'}>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.Input
-                                                    field="name"
-                                                    label="名称（Input）"
-                                                    initValue={'mikeya'}
-                                                    style={style}
-                                                    trigger="blur"
-                                                />
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.DatePicker
-                                                    field="date"
-                                                    label="日期（DatePicker）"
-                                                    style={style}
-                                                    initValue={new Date()}
-                                                    placeholder="请选择生效日期"
-                                                />
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.Select
-                                                    field="role"
-                                                    style={style}
-                                                    label="角色（Select）"
-                                                    placeholder="请选择你的角色"
-                                                >
-                                                    <Select.Option value="operate">运营</Select.Option>
-                                                    <Select.Option value="rd">开发</Select.Option>
-                                                    <Select.Option value="pm">产品</Select.Option>
-                                                    <Select.Option value="ued">设计</Select.Option>
-                                                </Form.Select>
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.Select
-                                                    field="business"
-                                                    multiple
-                                                    style={style}
-                                                    placeholder="请选择业务线"
-                                                    label="业务线（多选Select）"
-                                                    extraText={
-                                                        <div
-                                                            style={{
-                                                                color: 'rgba(var(--semi-blue-5), 1)',
-                                                                fontSize: 14,
-                                                                userSelect: 'none',
-                                                                cursor: 'pointer',
-                                                            }}
-                                                        >
-                                                            没有找到合适的业务线？
-                                                        </div>
-                                                    }
-                                                >
-                                                    <Select.Option value="abc">Semi</Select.Option>
-                                                    <Select.Option value="ulikeCam">轻颜相机</Select.Option>
-                                                    <Select.Option value="toutiao">今日头条</Select.Option>
-                                                </Form.Select>
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.Cascader
-                                                    placeholder="请选择所在地区"
-                                                    treeData={treeData}
-                                                    field="area"
-                                                    label="地区（Cascader）"
-                                                    style={style}
-                                                ></Form.Cascader>
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.TreeSelect
-                                                    field="tree"
-                                                    style={style}
-                                                    label="节点（TreeSelect）"
-                                                    placeholder="请选择服务节点"
-                                                    treeData={treeData}
-                                                    filterTreeNode
-                                                ></Form.TreeSelect>
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.TagInput
-                                                    field="product"
-                                                    label="产品（TagInput）"
-                                                    placeholder="请输入产品"
-                                                    style={style}
-                                                />
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.AutoComplete
-                                                    field="email"
-                                                    label="邮箱（AutoComplete）"
-                                                    data={stringData}
-                                                    showClear
-                                                    prefix={<IconSearch />}
-                                                    placeholder="搜索... "
-                                                    onSearch={handleStringSearch}
-                                                    style={style}
-                                                />
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={24}>
-                                                <Form.Upload
-                                                    field="files"
-                                                    label="证明文件（Upload）"
-                                                    action="//semi.design/api/upload"
-                                                >
-                                                    <Button icon={<IconUpload />} theme="light">
-                                                        点击上传
-                                                    </Button>
-                                                </Form.Upload>
-                                            </Col>
-                                        </Row>
-                                    </Form.Section>
-                                    <Form.Section text="资源详情">
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.TextArea
-                                                    style={{ ...style, height: 120 }}
-                                                    field="description"
-                                                    label="申请理由（TextArea）"
-                                                    placeholder="请填写申请资源理由"
-                                                />
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.CheckboxGroup
-                                                    field="type"
-                                                    direction="horizontal"
-                                                    label="申请类型（CheckboxGroup）"
-                                                    initValue={['user', 'admin']}
-                                                    rules={[{ required: true }]}
-                                                >
-                                                    <Form.Checkbox value="admin">admin</Form.Checkbox>
-                                                    <Form.Checkbox value="user">user</Form.Checkbox>
-                                                    <Form.Checkbox value="guest">guest</Form.Checkbox>
-                                                    <Form.Checkbox value="root">root</Form.Checkbox>
-                                                </Form.CheckboxGroup>
-                                                <Form.RadioGroup
-                                                    field="isMonopolize"
-                                                    label="是否独占资源（Radio）"
-                                                    rules={[
-                                                        { type: 'boolean' },
-                                                        { required: true, message: '必须选择是否独占 ' },
-                                                    ]}
-                                                >
-                                                    <Form.Radio value={true}>是</Form.Radio>
-                                                    <Form.Radio value={false}>否</Form.Radio>
-                                                </Form.RadioGroup>
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.TimePicker
-                                                    field="time"
-                                                    label="截止时刻（TimePicker）"
-                                                    style={{ width: '90%' }}
-                                                />
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.InputNumber
-                                                    field="number"
-                                                    label="申请数量（InputNumber）"
-                                                    initValue={20}
-                                                    style={style}
-                                                />
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.Slider
-                                                    field="range"
-                                                    label="资源使用报警阈值(%)（Slider）"
-                                                    initValue={10}
-                                                    style={{ width: '90%' }}
-                                                />
-                                            </Col>
-                                            <Col span={12}>
-                                                <Form.Switch field="switch" label="开关(Switch)" />
-                                            </Col>
-                                        </Row>
-                                        <Row>
-                                            <Col span={12}>
-                                                <Form.Rating
-                                                    field="rating"
-                                                    label="满意度(Rating)"
-                                                    initValue={2}
-                                                    style={{ width: '90%' }}
-                                                />
-                                            </Col>
-                                        </Row>
-                                    </Form.Section>
-                                    <Form.Checkbox value="false" field="agree" noLabel={true}>
-                                        我已阅读并清楚相关规定（Checkbox）
-                                    </Form.Checkbox>
-                                    <Button type="primary" htmlType="submit" className="btn-margin-right">
-                                        提交(submit)
-                                    </Button>
-                                    <Button htmlType="reset">重置(reset)</Button>
-                                </Form>
-                            </Row>
-                            <Row>
-                                <Col span="12">
-                                    <Tree
-                                        treeData={treeData}
-                                        defaultExpandAll
-                                        style={{
-                                            width: 260,
-                                            height: 420,
-                                            border: '1px solid var(--semi-color-border)'
-                                        }}
-                                    />
-                                </Col>
-                                <Col span="12">
-                                    <Transfer
-                                        style={{ width: 568, height: 416 }}
-                                        dataSource={transferData}
-                                        onChange={(values, items) => console.log(values, items)}
-                                    />
-                                </Col>
-                            </Row>
-                            <Row id="主题商店">
-                                <List
-                                    grid={{
-                                        gutter: 12,
-                                        xs: 0,
-                                        sm: 0,
-                                        md: 12,
-                                        lg: 8,
-                                        xl: 8,
-                                        xxl: 6,
-                                    }}
-                                    dataSource={listData}
-                                    renderItem={item => (
-                                        <List.Item style={listItemStyle}>
-                                            <div>
-                                                <h3 style={{ color: 'var(--semi-color-text-0)', fontWeight: 500 }}>
-                                                    {item.title}
-                                                </h3>
-                                                <Descriptions
-                                                    align="center"
-                                                    size="small"
-                                                    row
-                                                    data={[
-                                                        {
-                                                            key: '满意度',
-                                                            value: (
-                                                                <Rating allowHalf size="small" value={item.rating} />
-                                                            ),
-                                                        },
-                                                        { key: '反馈数', value: item.feedbacks },
-                                                    ]}
-                                                />
-                                                <div
-                                                    style={{
-                                                        margin: '12px 0',
-                                                        display: 'flex',
-                                                        justifyContent: 'flex-end',
-                                                    }}
-                                                >
-                                                    <ButtonGroup theme="borderless" style={{ marginTop: 8 }}>
-                                                        <Button>编辑</Button>
-                                                        <Button>更多</Button>
-                                                    </ButtonGroup>
-                                                </div>
-                                            </div>
-                                        </List.Item>
-                                    )}
-                                />
-                                <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                                    <Descriptions align="center" data={descriptionData} style={descriptionStyle} />
-                                    <Descriptions align="justify" data={descriptionData} style={descriptionStyle} />
-                                    <Descriptions align="left" data={descriptionData} style={descriptionStyle} />
-                                    <Descriptions align="plain" data={descriptionData} style={descriptionStyle} />
-                                </div>
-                                <div
-                                    style={{
-                                        backgroundColor: 'var(--semi-color-fill-0)',
-                                        padding: 20,
-                                    }}
-                                >
-                                    <Row gutter={[16, 16]}>
-                                        <Col span={8}>
-                                            <Card title="Card Title" bordered={false}>
-                                                Card Content
-                                            </Card>
-                                        </Col>
-                                        <Col span={8}>
-                                            <Card title="Card Title" bordered={false}>
-                                                Card Content
-                                            </Card>
-                                        </Col>
-                                        <Col span={8}>
-                                            <Card title="Card Title" bordered={false}>
-                                                Card Content
-                                            </Card>
-                                        </Col>
-                                    </Row>
-                                    <Row gutter={[16, 16]}>
-                                        <Col span={16}>
-                                            <Card title="Card Title" bordered={false}>
-                                                Card Content
-                                            </Card>
-                                        </Col>
-                                        <Col span={8}>
-                                            <Card title="Card Title" bordered={false}>
-                                                Card Content
-                                            </Card>
-                                        </Col>
-                                    </Row>
-                                </div>
-                            </Row>
-                            <Row>
-                                <Calendar mode="month" />
-                            </Row>
-                            <Row>
-                                <Collapse className="mt12">
-                                    <Collapse.Panel header="This is panel header 1" itemKey="1">
-                                        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-                                    </Collapse.Panel>
-                                    <Collapse.Panel header="This is panel header 2" itemKey="2">
-                                        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-                                    </Collapse.Panel>
-                                    <Collapse.Panel header="This is panel header 3" itemKey="3">
-                                        <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-                                    </Collapse.Panel>
-                                </Collapse>
-                                <Tabs type="button" className="mt12">
-                                    <TabPane tab="文档" itemKey="1">
-                                        文档
-                                    </TabPane>
-                                    <TabPane tab="快速起步" itemKey="2">
-                                        快速起步
-                                    </TabPane>
-                                    <TabPane tab="帮助" itemKey="3">
-                                        帮助
-                                    </TabPane>
-                                </Tabs>
-                                <div className="mt12" style={{ height: 200 }}>
-                                    <Button onClick={() => setCollapsibleOpen(!isOpen)}>Toggle</Button>
-                                    <Collapsible isOpen={isOpen}>
-                                        <ul>
-                                            <li>
-                                                <p>Semi Design 以内容优先进行设计。</p>
-                                            </li>
-                                            <li>
-                                                <p>更容易地自定义主题。</p>
-                                            </li>
-                                            <li>
-                                                <p>适用国际化场景。</p>
-                                            </li>
-                                            <li>
-                                                <p>效率场景加入人性化关怀。</p>
-                                            </li>
-                                        </ul>
-                                    </Collapsible>
-                                </div>
-                                <Anchor style={{ position: 'fixed', top: 150, right: 50 }}>
-                                    <Anchor.Link href="#基本示例" title="基本示例" />
-                                    <Anchor.Link href="#组件" title="组件" />
-                                    <Anchor.Link href="#设计语言" title="设计语言" />
-                                    <Anchor.Link href="#物料平台" title="物料平台" />
-                                    <Anchor.Link href="#主题商店" title="主题商店" />
-                                </Anchor>
-                                <BackTop style={{ bottom: 100, right: 50 }} target={() => document && document.querySelector('.semi-layout-content' || window)} visibilityHeight={-1} />
-                            </Row>
-                        </div>
-                    </Content>
-                </Layout>
-                <Footer
-                    style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '20px',
-                        color: 'var(--semi-color-text-2)',
-                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',
-                    }}
-                >
-                    <span
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                        }}
-                    >
-                        <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
-                        <span>{`Copyright © ${(new Date()).getFullYear()} Semi Design. All Rights Reserved. `}</span>
-                    </span>
-                    <span>
-                        <span style={{ marginRight: '24px' }}>平台客服</span>
-                        <span>反馈建议</span>
-                    </span>
-                </Footer>
-            </Layout>
-        </>
-    );
-}