plain-design 0.0.97 → 1.0.0-beta.10

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

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

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

@@ -0,0 +1,144 @@
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Layout, LayoutSection} from "../../../../packages";
+
+export const demo1 = designPage(() => {
+  return () => (
+    <DemoRow title="基本用法">
+      <Layout>
+        <LayoutSection position="left">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>左侧调节区域</div>
+            <div>(初始化时自动宽度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ height: '200px', padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+            主内容区域
+          </div>
+        </LayoutSection>
+        <LayoutSection position="right" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>右侧调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+  return () => (
+    <DemoRow title="纵向">
+      <Layout vertical style={{ height: '500px' }}>
+        <LayoutSection position="top">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>上方调节区域</div>
+            <div>(初始化时自动高度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+            主内容区域
+          </div>
+        </LayoutSection>
+        <LayoutSection position="bottom" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>下方调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo3 = designPage(() => {
+  return () => (
+    <DemoRow title="嵌套布局">
+      <Layout vertical style={{ height: '500px' }}>
+        <LayoutSection position="top">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>上方调节区域</div>
+            <div>(初始化时自动高度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ position: 'absolute', inset: '0' }}>
+            <Layout style={{ height: '100%' }}>
+              <LayoutSection position="left">
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                  <div>左侧调节区域</div>
+                  <div>(初始化时自动宽度)</div>
+                </div>
+              </LayoutSection>
+              <LayoutSection>
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+                  主内容区域
+                </div>
+              </LayoutSection>
+              <LayoutSection position="right" modelValue={80}>
+                <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                  <div>右侧调节区域</div>
+                  <div>(初始化固定80px)</div>
+                </div>
+              </LayoutSection>
+            </Layout>
+          </div>
+        </LayoutSection>
+        <LayoutSection position="bottom" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>下方调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});
+
+
+export const demo4 = designPage(() => {
+  return () => (
+    <DemoRow title="嵌套布局2">
+      <Layout>
+        <LayoutSection position="left">
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>左侧调节区域</div>
+            <div>(初始化时自动宽度)</div>
+          </div>
+        </LayoutSection>
+        <LayoutSection>
+          <Layout vertical style={{ height: '500px' }}>
+            <LayoutSection position="top">
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                <div>上方调节区域</div>
+                <div>(初始化时自动高度)</div>
+              </div>
+            </LayoutSection>
+            <LayoutSection>
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-1)' }}>
+                主内容区域
+              </div>
+            </LayoutSection>
+            <LayoutSection position="bottom" modelValue={80}>
+              <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+                <div>下方调节区域</div>
+                <div>(初始化固定80px)</div>
+              </div>
+            </LayoutSection>
+          </Layout>
+        </LayoutSection>
+        <LayoutSection position="right" modelValue={80}>
+          <div style={{ padding: '16px', backgroundColor: 'var(--custom-gray-2)', height: '100%' }}>
+            <div>右侧调节区域</div>
+            <div>(初始化固定80px)</div>
+          </div>
+        </LayoutSection>
+      </Layout>
+    </DemoRow>
+  );
+});

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

@@ -0,0 +1,15 @@
+.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;
+  }
+}