plain-design 1.0.0-beta.22 → 1.0.0-beta.23

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

@@ -1,505 +1,505 @@
-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>
-  );
-});
-
+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>
+  );
+});
+