plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/pages/index/components/normal/DemoBadge.tsx

@@ -1,53 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Badge, Button} from "../../../../packages";
-
-export default designPage(() => {
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Badge data={12}>
-          <Button label={'消息'}/>
-        </Badge>
-      </DemoRow>
-      <DemoRow title={'颜色'}>
-        <Badge data={12} status="primary">
-          <Button label={'Primary'} status="primary"/>
-        </Badge>
-        <Badge data={12} status="success">
-          <Button label={'Success'} status="success"/>
-        </Badge>
-        <Badge data={12} status="warn">
-          <Button label={'Warn'} status="warn"/>
-        </Badge>
-        <Badge data={12} status="error">
-          <Button label={'Error'} status="error"/>
-        </Badge>
-      </DemoRow>
-      <DemoRow title={'位置'}>
-        <Badge data={12} bottom={false} start={true}>
-          <Button label={'消息'}/>
-        </Badge>
-        <Badge data={12} bottom={false} start={false}>
-          <Button label={'消息'}/>
-        </Badge>
-        <Badge data={12} bottom={true} start={true}>
-          <Button label={'消息'}/>
-        </Badge>
-        <Badge data={12} bottom={true} start={false}>
-          <Button label={'消息'}/>
-        </Badge>
-      </DemoRow>
-      <DemoRow title={'仅显示小红点'}>
-        <Badge data={12} dot>
-          <Button label={'消息'}/>
-        </Badge>
-      </DemoRow>
-      <DemoRow title={'最大值'}>
-        <Badge data={200} max={99}>
-          <Button label={'消息'}/>
-        </Badge>
-      </DemoRow>
-    </div>
-  );
-});

package/src/pages/index/components/normal/DemoButton.tsx

@@ -1,300 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => () => (
-  <DemoRow title="按钮类型">
-    Hello
-    <span>World</span>
-    <Button label="Flat" mode="flat"/>
-    <Button label="Fill" mode="fill"/>
-    <Button label="Outline" mode="outline"/>
-    <Button label="Text" mode="text"/>
-
-    <Button icon="pi-plus" mode="flat"/>
-    <Button icon="pi-plus" mode="fill"/>
-    <Button icon="pi-plus" mode="outline"/>
-    <Button icon="pi-plus" mode="text"/>
-  </DemoRow>
-));
-
-export const demo2 = designPage(() => () => (
-  <DemoRow title="按钮图标">
-    <Button label="删除" icon="pi-delete" size="mini"/>
-    <Button label="删除" icon="pi-delete" size="small"/>
-    <Button label="删除" icon="pi-delete" size="normal"/>
-    <Button label="删除" icon="pi-delete" size="large"/>
-    <Button icon="pi-plus"/>
-  </DemoRow>
-));
-
-export const demo3 = designPage(() => () => (
-  <DemoRow title="按钮大小">
-    <Button label="Mini" size="mini"/>
-    <Button label="Small" size="small"/>
-    <Button label="Normal" size="normal"/>
-    <Button label="Large" size="large"/>
-
-    <Button icon="pi-plus" size="mini"/>
-    <Button icon="pi-plus" size="small"/>
-    <Button icon="pi-plus" size="normal"/>
-    <Button icon="pi-plus" size="large"/>
-    <div style={{ marginTop: '8px' }}>
-      <Button label="取消" size="mini" style={{ marginRight: '8px' }}/>
-      <Button label="确定" size="mini" mode="fill"/>
-    </div>
-  </DemoRow>
-));
-
-export const demo4 = designPage(() => () => (
-  <DemoRow title="按钮形状">
-    <Button label="Square" shape="square"/>
-    <Button label="Round" shape="round"/>
-    <Button icon="pi-plus" shape="square"/>
-    <Button icon="pi-plus" shape="round"/>
-  </DemoRow>
-));
-
-export const demo5 = designPage(() => {
-  return () => (
-    <DemoRow title="按钮状态">
-      <DemoLine>
-        <Button mode="flat" label="Secondary" status="secondary"/>
-        <Button mode="flat" label="Primary" status="primary"/>
-        <Button mode="flat" label="Success" status="success"/>
-        <Button mode="flat" label="Warn" status="warn"/>
-        <Button mode="flat" label="Error" status="error"/>
-      </DemoLine>
-      <DemoLine>
-        <Button mode="fill" label="Secondary" status="secondary"/>
-        <Button mode="fill" label="Primary" status="primary"/>
-        <Button mode="fill" label="Success" status="success"/>
-        <Button mode="fill" label="Warn" status="warn"/>
-        <Button mode="fill" label="Error" status="error"/>
-      </DemoLine>
-      <DemoLine>
-        <Button mode="outline" label="Secondary" status="secondary"/>
-        <Button mode="outline" label="Primary" status="primary"/>
-        <Button mode="outline" label="Success" status="success"/>
-        <Button mode="outline" label="Warn" status="warn"/>
-        <Button mode="outline" label="Error" status="error"/>
-      </DemoLine>
-      <DemoLine>
-        <Button mode="text" label="Secondary" status="secondary"/>
-        <Button mode="text" label="Primary" status="primary"/>
-        <Button mode="text" label="Success" status="success"/>
-        <Button mode="text" label="Warn" status="warn"/>
-        <Button mode="text" label="Error" status="error"/>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-  const state = reactive({
-    loading: false,
-  });
-
-  const openLoading = () => {
-    state.loading = true;
-    setTimeout(() => {
-      state.loading = false;
-    }, 2000);
-  };
-
-  return () => (
-    <DemoRow title="加载中按钮">
-      <ButtonGroup>
-        <Button label="提交" loading/>
-        <Button label="开启加载状态" icon="pi-download" loading={state.loading} onClick={openLoading}/>
-        <Button label="提交"/>
-        <Button icon="pi-download" loading={state.loading} onClick={openLoading}/>
-      </ButtonGroup>
-      <br/>
-      <div>
-        <Button label="提交" loading/>
-      </div>
-      <br/>
-      <ButtonGroup>
-        <Button label="开启加载状态" icon="pi-download" loading={state.loading} onClick={openLoading} mode="fill"/>
-        <Button label="提交" mode="fill"/>
-      </ButtonGroup>
-      <br/>
-      <div>
-        <Button label="提交" loading/>
-        <Button label="提交"/>
-      </div>
-      {/*<Button label="openLoading" loading={state.loading} onClick={openLoading}/>*/}
-    </DemoRow>
-  );
-});
-
-export const demo7 = designPage(() => {
-  return () => (
-    <DemoRow title="块级按钮">
-      <div style={{ width: '20vw' }}>
-        <Button label="提交" block/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo_1 = designPage(() => () => (
-  <DemoRow title="去掉按钮默认内边距">
-    <Button label="提交" noPadding style={{ minWidth: 'auto', height: 'auto' }}/>
-  </DemoRow>
-));
-
-export const demo8 = designPage(() => {
-
-  return () => (
-    <DemoRow title="点击事件节流">
-      <Button label="500ms" onClick={() => $message('click:' + Date.now())} throttleClick={500}/>
-      <Button label="1s" onClick={() => $message('click:' + Date.now())} throttleClick={1000}/>
-    </DemoRow>
-  );
-});
-export const demo9 = designPage(() => () => (
-  <DemoRow title="禁用按钮">
-    <DemoLine>
-      <Button label="Flat" mode="flat"/>
-      <Button label="Fill" mode="fill"/>
-      <Button label="Outline" mode="outline"/>
-      <Button label="Text" mode="text"/>
-
-      <Button icon="pi-plus" mode="flat"/>
-      <Button icon="pi-plus" mode="fill"/>
-      <Button icon="pi-plus" mode="outline"/>
-      <Button icon="pi-plus" mode="text"/>
-    </DemoLine>
-    <DemoLine>
-      <Button label="Flat" mode="flat" disabled/>
-      <Button label="Fill" mode="fill" disabled/>
-      <Button label="Outline" mode="outline" disabled/>
-      <Button label="Text" mode="text" disabled/>
-
-      <Button icon="pi-plus" mode="flat" disabled/>
-      <Button icon="pi-plus" mode="fill" disabled/>
-      <Button icon="pi-plus" mode="outline" disabled/>
-      <Button icon="pi-plus" mode="text" disabled/>
-    </DemoLine>
-  </DemoRow>
-));
-export const demo10 = designPage(() => () => (
-  <DemoRow title="只读按钮">
-    <Button label="Flat" mode="flat" readonly/>
-    <Button label="Fill" mode="fill" readonly/>
-    <Button label="Outline" mode="outline" readonly/>
-    <Button label="Text" mode="text" readonly/>
-
-    <Button icon="pi-plus" mode="flat" readonly/>
-    <Button icon="pi-plus" mode="fill" readonly/>
-    <Button icon="pi-plus" mode="outline" readonly/>
-    <Button icon="pi-plus" mode="text" readonly/>
-  </DemoRow>
-));
-
-
-export const demoGroup1 = designPage(() => {
-  return () => (
-    <DemoRow title="按钮组：基本用法">
-      <ButtonGroup>
-        <Button label="支付方式"/>
-        <Button icon="pi-down"/>
-      </ButtonGroup>
-      <br/>
-      <ButtonGroup>
-        <Button label="导出数据"/>
-        <Button label="下载快照"/>
-        <Button icon="pi-download"/>
-      </ButtonGroup>
-      <br/>
-      <ButtonGroup shape="round">
-        <Button label="导出数据"/>
-        <Button label="下载快照"/>
-        <Button icon="pi-download"/>
-      </ButtonGroup>
-
-      <br/>
-      <ButtonGroup mode="fill">
-        <Button label="下载"/>
-        <Button icon="pi-down"/>
-      </ButtonGroup>
-      <br/>
-      <ButtonGroup mode="fill">
-        <Button label="导出数据"/>
-        <Button label="下载快照"/>
-        <Button icon="pi-download"/>
-      </ButtonGroup>
-
-      <br/>
-      <ButtonGroup mode="outline">
-        <Button label="下载"/>
-        <Button icon="pi-down"/>
-      </ButtonGroup>
-      <br/>
-      <ButtonGroup mode="outline">
-        <Button label="导出数据"/>
-        <Button label="下载快照"/>
-        <Button icon="pi-download"/>
-      </ButtonGroup>
-
-      <br/>
-      <ButtonGroup mode="text">
-        <Button label="下载"/>
-        <Button icon="pi-down"/>
-      </ButtonGroup>
-      <br/>
-      <ButtonGroup mode="text">
-        <Button label="导出数据"/>
-        <Button label="下载快照"/>
-        <Button icon="pi-download"/>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-export const demoGroup2 = designPage(() => {
-  return () => (
-    <DemoRow title="按钮组：纵向">
-      <ButtonGroup vertical>
-        <Button label="导出数据" icon="pi-download"/>
-        <Button label="导入数据" icon="pi-upload"/>
-        <Button label="生成快照" icon="pi-image"/>
-        <Button label="刷新缓存" icon="pi-refresh"/>
-      </ButtonGroup>
-      <ButtonGroup vertical mode="fill">
-        <Button label="导出数据" icon="pi-download"/>
-        <Button label="导入数据" icon="pi-upload"/>
-        <Button label="生成快照" icon="pi-image"/>
-        <Button label="刷新缓存" icon="pi-refresh"/>
-      </ButtonGroup>
-      <ButtonGroup vertical mode="outline">
-        <Button label="导出数据" icon="pi-download"/>
-        <Button label="导入数据" icon="pi-upload"/>
-        <Button label="生成快照" icon="pi-image"/>
-        <Button label="刷新缓存" icon="pi-refresh"/>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demoGroup3 = designPage(() => {
-
-  const state = reactive({
-    active: 0
-  });
-
-  return () => (
-    <DemoRow title="按钮组：其他">
-      <ButtonGroup>
-        <Button label="导出数据" icon="pi-download" mode={state.active === 0 ? 'fill' : undefined} onClick={() => state.active = 0}/>
-        <Button label="导入数据" icon="pi-upload" mode={state.active === 1 ? 'fill' : undefined} onClick={() => state.active = 1}/>
-        <Button label="生成快照" icon="pi-image" mode={state.active === 2 ? 'fill' : undefined} onClick={() => state.active = 2}/>
-        <Button label="刷新缓存" icon="pi-refresh" mode={state.active === 3 ? 'fill' : undefined} onClick={() => state.active = 3}/>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/normal/DemoCard.tsx

@@ -1,176 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Card, Dropdown, DropdownOption, Icon, Tooltip} from "../../../../packages";
-
-export default designPage(() => {
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Card title={'桃花庵歌'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'小型卡片'}>
-        <Card title={'桃花庵歌'} mini width="225">
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'卡片阴影'}>
-        <Card title={'shadow=null'} shadow={null as any}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              无阴影
-            </>
-          }}
-        </Card>
-        <Card title={'shadow=normal'} shadow={'normal'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              一直显示阴影
-            </>
-          }}
-        </Card>
-        <Card title={'shadow=hover'} shadow={'hover'}>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              鼠标炫富显示阴影
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'标题描述'}>
-        <Card title={'桃花庵歌'}>
-          {{
-            desc: () => '标题下面的描述',
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-        <Card>
-          {{
-            head: () => <span>桃花庵歌 <Icon icon="pi-info-circle-fill"/></span>,
-            desc: () => <span>标题下面的描述 <Icon icon="pi-info-circle-fill"/></span>,
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'取消内边距'}>
-        <Card title={'桃花庵歌'} noPadding>
-          {{
-            operator: () => <Button label={'更多'} mode={'text'}/>,
-            default: () => <>
-              <div>桃花坞里桃花庵</div>
-              <div>桃花庵里桃花仙</div>
-              <div>桃花仙人种桃树</div>
-              <div>又摘桃花换酒钱</div>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title={'海报图'}>
-        <Card title={'圣诞之夜'} shadow={"hover"}>
-          {{
-            poster: () => <img src="https://img.zcool.cn/community/01acd9554beac2000001bf72509649.jpg@1280w_1l_2o_100sh.jpg" style={{ width: '100%', height: 'auto' }}/>,
-            desc: () => <>
-              <div>1. 有奖竞猜活动</div>
-              <div>2. 大转盘抽奖</div>
-              <div>3. 海量红包大礼</div>
-            </>,
-            operator: () => (
-              <Dropdown placement={'right'}>
-                {{
-                  reference: ({ open }: { open?: boolean | undefined | null }) => (
-                    <Button mode={'text'}>
-                      <span>更多</span>
-                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
-                    </Button>
-                  ),
-                  popper: () => <>
-                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
-                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
-                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
-                  </>
-                }}
-              </Dropdown>
-            )
-          }}
-        </Card>
-      </DemoRow>
-      <DemoRow title="底部操作栏">
-        <Card title={'圣诞之夜'} shadow={'normal'}>
-          {{
-            default: () => <>
-              <div>1、有奖竞猜活动</div>
-              <div>2、大转盘抽奖</div>
-              <div>3、海量红包大礼</div>
-            </>,
-            operator: () => <>
-              <Dropdown placement={'right'}>
-                {{
-                  reference: ({ open }: { open?: boolean | undefined | null }) => (
-                    <Button mode={'text'}>
-                      <span>更多</span>
-                      <Icon icon={open ? 'pi-up' : 'pi-down'}/>
-                    </Button>
-                  ),
-                  popper: () => <>
-                    <DropdownOption label={'分享'} icon={'pi-share-alt'} onClick={() => $message("分享")}/>
-                    <DropdownOption label={'收藏'} icon={'pi-star'} onClick={() => $message("收藏")}/>
-                    <DropdownOption label={'点赞'} icon={'pi-thumb-up'} onClick={() => $message("点赞")}/>
-                  </>
-                }}
-              </Dropdown>
-            </>,
-            foot: () => <>
-              <Tooltip message={'分享'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-share-alt'}/>
-                </div>
-              </Tooltip>
-              <Tooltip message={'收藏'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-star'}/>
-                </div>
-              </Tooltip>
-              <Tooltip message={'点赞'}>
-                <div className={'card-foot-button'}>
-                  <Icon icon={'pi-thumb-up'}/>
-                </div>
-              </Tooltip>
-            </>
-          }}
-        </Card>
-      </DemoRow>
-    </div>
-  );
-});

package/src/pages/index/components/normal/DemoCarousel.tsx

@@ -1,125 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Carousel, CarouselGroup} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <CarouselGroup>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'两个元素，三个元素'}>
-        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-        </CarouselGroup>
-        <CarouselGroup style={{ width: '400px', display: 'inline-flex' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'禁用前后按钮'}>
-        <CarouselGroup disabledOperator>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'指示器'}>
-        <DemoLine title={'禁用指示器'}>
-          <CarouselGroup disabledIndicator style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'鼠标悬浮激活指示器'}>
-          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'自定义指示器'}>
-          <CarouselGroup style={{ width: '400px' }} indicatorTrigger={'hover'} v-slots={{
-            default: () => <>
-              <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-              <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-              <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-              <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-            </>,
-            indicator: ({ active, index }) => (
-              <div key={index} style={{ marginRight: '8px', height: '5px', width: '5px', backgroundColor: `rgba(255,255,255,${active ? '1' : '0.5'})` }}/>
-            )
-          }}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'cover覆盖内容'}>
-        <CarouselGroup v-slots={{
-          default: () => <>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </>,
-          cover: () => (
-            <div style={{ pointerEvents: 'none', textAlign: 'center', padding: '20px', color: 'white', boxSizing: 'border-box' }}>
-              this is cover content
-            </div>
-          )
-        }}/>
-      </DemoRow>
-
-      <DemoRow title={'自动播放'}>
-        <DemoLine title={'禁用自动播放'}>
-          <CarouselGroup autoplay={0} style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-        <DemoLine title={'时间间隔为6s'}>
-          <CarouselGroup autoplay={6000} style={{ width: '400px' }}>
-            <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-            <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-            <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-            <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-          </CarouselGroup>
-        </DemoLine>
-      </DemoRow>
-
-      <DemoRow title={'纵向切换'}>
-        <CarouselGroup vertical>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-      <DemoRow title={'卡片形式切换'}>
-        <CarouselGroup card autoplay={0} style={{ width: '500px' }}>
-          <Carousel style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</Carousel>
-          <Carousel style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</Carousel>
-          <Carousel style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</Carousel>
-          <Carousel style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</Carousel>
-        </CarouselGroup>
-      </DemoRow>
-    </div>
-  );
-});