plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -1,505 +0,0 @@
-import {computed, designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup, Carousel, CarouselGroup, Checkbox, CheckboxGroup, Collapse, CollapseGroup, Input, KeepAlive, Segment, SegmentGroup, Tag} from "../../../../packages";
-import React, {useState} from "react";
-import {iKeepAliveMeta} from "../../../../packages/components/KeepAlive/utils/keepalive.utils";
-import {delay} from "plain-utils/utils/delay";
-
-export const demo1 = designPage(() => {
-
-  const DemoInput = () => {
-    const [text, setText] = useState("hello world");
-    return <Input modelValue={text} onChange={setText}/>;
-  };
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-  const DemoCarousel = () => {
-    return (
-      <CarouselGroup autoplay={0}>
-        <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>
-    );
-  };
-
-  const DemoCollapse = () => {
-    return (
-      <CollapseGroup>
-        <Collapse title={'专家方向'}>
-          <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
-          <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
-          <p>走专家路线可能是大多数技术人的选择；</p>
-        </Collapse>
-        <Collapse title={'管理方向'}>
-          <p>另一个职业方向就是技术管理；</p>
-          <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
-          <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
-          <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
-        </Collapse>
-        <Collapse title={'产品&业务方向'}>
-          <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
-          <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
-          <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
-        </Collapse>
-      </CollapseGroup>
-    );
-  };
-
-
-  const types = ['input', 'carousel', 'collapse'] as const;
-
-  const state = reactive({ type: types[0] });
-
-  return () => (
-    <DemoRow title="基本用法">
-
-      <SegmentGroup v-model={state.type}>
-        {types.map(i => (
-          <Segment label={i} key={i} val={i}/>
-        ))}
-      </SegmentGroup>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive>
-          {{
-            input: () => (<DemoInput/>),
-            carousel: () => (<DemoCarousel/>),
-            collapse: () => (<DemoCollapse/>),
-          }[state.type]()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const types = ['input', 'textarea', 'multiInput', 'text', 'multiText'] as const;
-
-  const state = reactive({
-    type: types[0]
-  });
-
-  const multiInputValue = ['王五', '赵六'];
-
-  return () => (
-    <DemoRow title="渲染纯文本">
-
-      <SegmentGroup v-model={state.type}>
-        {types.map(i => (
-          <Segment label={i} key={i} val={i}/>
-        ))}
-      </SegmentGroup>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive>
-          {{
-            input: () => (
-              <Input key="input" modelValue="张三"/>
-            ),
-            textarea: () => (
-              <Input textarea key="textarea" modelValue="李四"/>
-            ),
-            multiInput: () => (
-              <Input multiple key="multiInput" modelValue={multiInputValue}/>
-            ),
-            text: () => (
-              "hello world text"
-            ),
-            multiText: () => (
-              <React.Fragment key="multiText">
-                <span>hello</span>
-                <span>world</span>
-                <span>multiple text</span>
-              </React.Fragment>
-            ),
-          }[state.type]()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const DemoInput: React.FC<{ prefix: string }> = (props) => {
-    const [text, setText] = useState("hello world");
-    return <Input modelValue={text} onChange={setText} prefix={<span>{props.prefix}</span>}/>;
-  };
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
-    return (
-      <CarouselGroup autoplay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <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>
-    );
-  };
-
-  const DemoCollapse = () => {
-    return (
-      <CollapseGroup>
-        <Collapse title={'专家方向'}>
-          <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
-          <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
-          <p>走专家路线可能是大多数技术人的选择；</p>
-        </Collapse>
-        <Collapse title={'管理方向'}>
-          <p>另一个职业方向就是技术管理；</p>
-          <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
-          <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
-          <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
-        </Collapse>
-        <Collapse title={'产品&业务方向'}>
-          <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
-          <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
-          <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
-        </Collapse>
-      </CollapseGroup>
-    );
-  };
-
-
-  const types = ['input', 'carousel', 'collapse'] as const;
-
-  const state = reactive({
-    type: types[0],
-    publicText: '支付方式'
-  });
-
-  return () => (
-    <DemoRow title="变化属性">
-
-      <Input v-model={state.publicText}/>
-
-      <SegmentGroup v-model={state.type} style={{ marginTop: '16px' }}>
-        {types.map(i => (
-          <Segment label={i} key={i} val={i}/>
-        ))}
-      </SegmentGroup>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive>
-          {{
-            input: () => (<DemoInput prefix={state.publicText}/>),
-            carousel: () => (<DemoCarousel coverText={state.publicText}/>),
-            collapse: () => (<DemoCollapse/>),
-          }[state.type]()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const types = ['input', 'textarea', 'multiInput', 'text', 'multiText'] as const;
-
-  const state = reactive({
-    type: types[0]
-  });
-
-  const multiInputValue = ['王五', '赵六'];
-
-  return () => (
-    <DemoRow title="组件有多个节点">
-
-      <SegmentGroup v-model={state.type}>
-        {types.map(i => (
-          <Segment label={i} key={i} val={i}/>
-        ))}
-      </SegmentGroup>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive>
-          {{
-            input: () => (
-              <React.Fragment key="input">
-                <Input modelValue="张三1"/>
-                <Input modelValue="张三2"/>
-              </React.Fragment>
-            ),
-            textarea: () => (
-              <React.Fragment key="textarea">
-                <Input textarea modelValue="李四1"/>
-                <Input textarea modelValue="李四2"/>
-              </React.Fragment>
-            ),
-            multiInput: () => (
-              <React.Fragment key="multiInput">
-                <Input multiple modelValue={multiInputValue}/>
-                <Input multiple modelValue={multiInputValue}/>
-              </React.Fragment>
-            ),
-            text: () => (
-              "hello world text"
-            ),
-            multiText: () => (
-              <>
-                <span>hello</span>
-                <span>world</span>
-                <span>multiple text</span>
-              </>
-            ),
-          }[state.type]()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const DemoInput: React.FC<{ prefix: string }> = (props) => {
-    const [text, setText] = useState("hello world");
-    return <Input modelValue={text} onChange={setText} prefix={<span>{props.prefix}</span>}/>;
-  };
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
-    return (
-      <CarouselGroup autoplay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <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>
-    );
-  };
-
-  const DemoCollapse = () => {
-    return (
-      <CollapseGroup>
-        <Collapse title={'专家方向'}>
-          <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
-          <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
-          <p>走专家路线可能是大多数技术人的选择；</p>
-        </Collapse>
-        <Collapse title={'管理方向'}>
-          <p>另一个职业方向就是技术管理；</p>
-          <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
-          <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
-          <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
-        </Collapse>
-        <Collapse title={'产品&业务方向'}>
-          <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
-          <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
-          <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
-        </Collapse>
-      </CollapseGroup>
-    );
-  };
-
-  const componentNames = ['input', 'carousel', 'collapse'] as const;
-
-  const state = reactive({
-    publicText: '支付方式',
-    components: {
-      input: {
-        count: 0,
-        key: () => `input_${state.components.input.count}`,
-        render: () => (<DemoInput key={state.components.input.key()} prefix={state.publicText}/>),
-      },
-      carousel: {
-        count: 0,
-        key: () => `carousel_${state.components.carousel.count}`,
-        render: () => (<DemoCarousel key={state.components.carousel.key()} coverText={state.publicText}/>),
-      },
-      collapse: {
-        count: 0,
-        key: () => `collapse_${state.components.collapse.count}`,
-        render: () => (<DemoCollapse key={state.components.collapse.key()}/>),
-      }
-    },
-    showComponent: componentNames[0],
-    cacheComponents: [...componentNames],
-    cacheKeys: computed((): string[] => {
-      return state.cacheComponents.map((i) => state.components[i].key());
-    }),
-    isCache: (meta: iKeepAliveMeta): boolean => !!state.cacheKeys.find((i) => i === meta.key),
-  });
-
-  const handleCacheChange = () => {
-    /*令KeepAlive render*/
-    state.isCache = (meta: iKeepAliveMeta) => !!state.cacheKeys.find(i => i === meta.key);
-  };
-
-  const handleRefresh = (componentName: typeof componentNames[number]) => {
-    state.components[componentName].count++;
-  };
-
-  return () => (
-    <DemoRow title="部分内容不缓存，部分内容缓存，缓存的内容手动控制重新渲染">
-
-      <Input v-model={state.publicText}/>
-
-      <div>
-        <SegmentGroup v-model={state.showComponent} style={{ marginTop: '16px' }}>
-          {componentNames.map(i => (
-            <Segment label={i} key={i} val={i}/>
-          ))}
-        </SegmentGroup>
-
-        <div style={{ marginTop: '16px', marginLeft: '8px', display: 'inline-block' }}>
-          <CheckboxGroup v-model={state.cacheComponents} onChange={handleCacheChange}>
-            <ButtonGroup status="secondary">
-              {componentNames.map(i => (
-                <Button key={i}>
-                  <Checkbox status="primary" val={i} label={`缓存${i}`}/>
-                </Button>
-              ))}
-            </ButtonGroup>
-          </CheckboxGroup>
-        </div>
-
-        <div style={{ marginTop: '16px', marginLeft: '8px', display: 'inline-block' }}>
-          <ButtonGroup status="secondary">
-            {componentNames.map(i => (
-              <Button key={i} onClick={() => handleRefresh(i)}>刷新{i}</Button>
-            ))}
-          </ButtonGroup>
-        </div>
-      </div>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive
-          isCache={state.isCache}
-        >
-          {state.components[state.showComponent].render()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-
-  const DemoInput: React.FC<{ prefix: string }> = (props) => {
-    const [text, setText] = useState("hello world");
-    return <Input modelValue={text} onChange={setText} prefix={<span>{props.prefix}</span>}/>;
-  };
-
-  const publicItemStyles = {
-    color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px'
-  };
-  const DemoCarousel: React.FC<{ coverText: string }> = (props) => {
-    return (
-      <CarouselGroup autoplay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <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>
-    );
-  };
-
-  const DemoCollapse = () => {
-    return (
-      <CollapseGroup>
-        <Collapse title={'专家方向'}>
-          <p>经过几年的技术积累，大量的项目历练，很自然地就朝着专家的方向过渡了；</p>
-          <p>技术人普遍具有的一个特征就是不喜欢管一些乱七八糟的事，更愿意钻研感兴趣的技术，解决一些技术难题；</p>
-          <p>走专家路线可能是大多数技术人的选择；</p>
-        </Collapse>
-        <Collapse title={'管理方向'}>
-          <p>另一个职业方向就是技术管理；</p>
-          <p>技术管理要求的更综合，日常的工作涉及项目管理，跨部门沟通，团队管理，技术体系建设等方面；</p>
-          <p>做技术管理意味着远离一线coding，渐渐失去自己的技术优势，80%的精力是帮助团队同学成长，通过团队完成既定目标；</p>
-          <p>技术人要经历一个心态的转变。但企业招人过去最主要的目的是解决实际面临的技术问题，所以对于技术管理来说，技术还是一个基本面，不能完全放下，还是要时刻关注技术大方向；</p>
-        </Collapse>
-        <Collapse title={'产品&业务方向'}>
-          <p>还有一个职业方向是转型做产品经理更多地贴近业务；</p>
-          <p>我身边有越来越多的前端做了几年的研发后转型做了产品；</p>
-          <p>技术人转型做产品，其实是比较有优势的，一方面懂技术能更好地和研发沟通，另一方面产品设计上更容易落地；</p>
-        </Collapse>
-      </CollapseGroup>
-    );
-  };
-
-  const types = ['input', 'carousel', 'collapse'] as const;
-
-  const state = reactive({
-    type: types[0],
-    publicText: '支付方式',
-    initList: [] as string[],
-    destroyList: [] as string[],
-
-    isCache: (meta: iKeepAliveMeta) => true as boolean,
-  });
-
-  const onInit = (meta: iKeepAliveMeta) => state.initList.push(meta.key);
-
-  const clearCache = (key: string) => {
-    if (key === state.type) {
-      $message('不要销毁正在显示的内容');
-      return;
-    }
-    state.destroyList.push(key);
-    /*修改isCache，触发KeepAlive更新渲染*/
-    state.isCache = (meta: iKeepAliveMeta) => state.destroyList.indexOf(meta.key) === -1;
-
-    delay().then(() => {
-      /*渲染完毕之后KeepAlive已经销毁掉对应的key，此时重置destroyList，并且将initList中已经缓存的key移除，下次这个key重新初始化的时候再添加*/
-      state.destroyList = state.destroyList.filter(i => i !== key);
-      state.initList = state.initList.filter(i => i !== key);
-    });
-  };
-
-  return () => (
-    <DemoRow title="动态控制缓存以及销毁">
-
-      <Input v-model={state.publicText}/>
-
-      <div>
-        <SegmentGroup v-model={state.type} style={{ marginTop: '16px' }}>
-          {types.map(i => (
-            <Segment label={i} key={i} val={i}/>
-          ))}
-        </SegmentGroup>
-
-        <div style={{ marginTop: '16px', display: 'inline-block' }}>
-          {state.initList.map(i => (<Tag key={i} label={`销毁${i}`} closeable onClose={() => clearCache(i)}/>))}
-        </div>
-      </div>
-
-      <div style={{ marginTop: '16px' }}>
-        <KeepAlive
-          onInit={onInit}
-          isCache={state.isCache}
-          onBeforeUnmount={() => {state.initList = [];}}
-        >
-          {{
-            input: () => (<DemoInput key="input" prefix={state.publicText}/>),
-            carousel: () => (<DemoCarousel key="carousel" coverText={state.publicText}/>),
-            collapse: () => (<DemoCollapse key="collapse"/>),
-          }[state.type]()}
-        </KeepAlive>
-      </div>
-    </DemoRow>
-  );
-});
-

package/src/pages/index/components/normal/DemoList.scss

@@ -1,15 +0,0 @@
-.demo-list {
-  .test-item {
-    position: relative;
-    height: 120px;
-    width: 200px;
-    margin-bottom: 12px;
-    margin-right: 12px;
-    border-radius: plv(border-radius);
-    border: solid 1px plv(border-color);
-    padding: 12px;
-    color: plv(text-1);
-    background-color: plv(background-lite);
-    display: inline-block !important;
-  }
-}

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

@@ -1,82 +0,0 @@
-import {designComponent, reactive} from "plain-design-composition";
-import React from "react";
-import './DemoList.scss';
-import {shuffle} from "plain-utils/object/shuffle";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, ButtonGroup, List} from "../../../../packages";
-
-export default designComponent({
-  setup() {
-
-    let count = 0;
-
-    const animations = [
-      'elevator',
-      'fade',
-      'accordionVertical',
-      'accordionHorizontal',
-      'none',
-      undefined,
-    ] as any[];
-
-    const state = reactive({
-      cities: [
-        { id: '广州市', name: '广州市' },
-        { id: '上海市', name: '上海市' },
-        { id: '北京市', name: '北京市' },
-        { id: '深圳市', name: '深圳市' },
-        { id: '长沙市', name: '长沙市' },
-        { id: '南京市', name: '南京市' },
-      ],
-      animations: animations[0],
-    });
-
-    const handler = {
-      add: (index: number) => {
-        const item = state.cities[index];
-        if (!item) return;
-        state.cities.splice(index + 1, 0, {
-          id: `count_${count++}`,
-          name: `${item.id}_${count}`,
-        });
-      },
-      remove: (index: number) => {
-        state.cities.splice(index, 1);
-      },
-    };
-
-    return () => (
-      <div className={'demo-list'}>
-        <DemoRow title={'基本用法，设置动画'}>
-          <ButtonGroup>
-            <Button onClick={() => handler.add(0)}>add</Button>
-            <Button onClick={() => handler.remove(0)}>remove</Button>
-            <Button onClick={() => state.cities = shuffle(state.cities)}>shuffle</Button>
-          </ButtonGroup>
-        </DemoRow>
-        <DemoRow title={'动画'}>
-          {animations.map(ani => (
-            <Button label={String(ani)} active={state.animations === ani} key={String(ani)} onClick={() => state.animations = ani}/>
-          ))}
-        </DemoRow>
-        <DemoRow>
-          <List enterAnimation={state.animations} leaveAnimation={state.animations}>
-            {state.cities.map((city, index) => (
-              <div className={"test-item"} key={city.name}>
-                <span>{city.name}</span>
-                <div style={{ position: 'absolute', right: '8px', bottom: '8px' }}>
-                  <Button label={'add'} status={'success'} size={'mini'} style={{ marginRight: '8px' }}
-                          onClick={() => handler.add(index)}
-                  />
-                  <Button label={'remove'} status={'success'} size={'mini'}
-                          onClick={() => handler.remove(index)}
-                  />
-                </div>
-              </div>)
-            )}
-          </List>
-        </DemoRow>
-      </div>
-    );
-  },
-});

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

@@ -1,83 +0,0 @@
-import {designPage, getComponentCls, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Loading, LoadingMask} from "../../../../packages";
-
-export const demo1 = designPage(() => () => (
-  <DemoRow title="基本用法">
-    <Loading/> <span>loading...</span>
-  </DemoRow>
-));
-export const demo2 = designPage(() => () => (
-  <DemoRow title="类型">
-    <Loading type="alpha"/>
-    <Loading type="beta"/>
-    <Loading type="delta"/>
-    <Loading type="gamma"/>
-    <Loading type="epsilon"/>
-    <Loading type="zeta"/>
-    <Loading type="eta"/>
-    <Loading type="thet"/>
-    <Loading type="iot"/>
-    <Loading type="kappa"/>
-  </DemoRow>
-));
-export const demo3 = designPage(() => () => (
-  <DemoRow title="控制字体大小">
-    <Loading type="alpha" style={{ fontSize: '32px' }}/>
-    <Loading type="beta" style={{ fontSize: '32px' }}/>
-    <Loading type="gamma" style={{ fontSize: '32px' }}/>
-    <Loading type="delta" style={{ fontSize: '32px' }}/>
-    <Loading type="epsilon" style={{ fontSize: '32px' }}/>
-    <Loading type="zeta" style={{ fontSize: '32px' }}/>
-    <Loading type="eta" style={{ fontSize: '32px' }}/>
-    <Loading type="thet" style={{ fontSize: '32px' }}/>
-    <Loading type="iot" style={{ fontSize: '32px' }}/>
-    <Loading type="kappa" style={{ fontSize: '32px' }}/>
-  </DemoRow>
-));
-export const demo4 = designPage(() => () => (
-  <DemoRow title="控制字体颜色">
-    <Loading type="alpha" style={{ color: '#511f9b' }}/>
-    <Loading type="beta" style={{ color: '#511f9b' }}/>
-    <Loading type="gamma" style={{ color: '#511f9b' }}/>
-    <Loading type="delta" style={{ color: '#511f9b' }}/>
-    <Loading type="epsilon" style={{ color: '#511f9b' }}/>
-    <Loading type="zeta" style={{ color: '#511f9b' }}/>
-    <Loading type="eta" style={{ color: '#511f9b' }}/>
-    <Loading type="thet" style={{ color: '#511f9b' }}/>
-    <Loading type="iot" style={{ color: '#511f9b' }}/>
-    <Loading type="kappa" style={{ color: '#511f9b' }}/>
-  </DemoRow>
-));
-export const demo5 = designPage(() => () => (
-  <DemoRow title="预定义颜色">
-    <Loading status="secondary"/>
-    <Loading status="primary"/>
-    <Loading status="success"/>
-    <Loading status="warn"/>
-    <Loading status="error"/>
-  </DemoRow>
-));
-export const demo6 = designPage(() => {
-
-  const state = reactive({
-    flag1: {
-      loading: true,
-      init: true,
-    },
-  });
-
-  return () => (
-    <DemoRow title={"组件调用loading-mask"}>
-      <Checkbox label="init content" v-model={state.flag1.init}/>
-      <Checkbox label="open mask" v-model={state.flag1.loading}/>
-      <p>如果父节点的position不为fixed、relative、absolute，loading-mask会自动将父节点的样式设置为 relative</p>
-      {!!state.flag1.init && (
-        <div style={{ height: '300px', width: '300px', backgroundColor: `var(--${getComponentCls('secondary-1')})` }}>
-          <Button label={'this is button'}/>
-          <LoadingMask v-model={state.flag1.loading} message={'loading...'}/>
-        </div>
-      )}
-    </DemoRow>
-  );
-});