plain-design 1.0.0-beta.33 → 1.0.0-beta.35

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, CarouselItem, Carousel, 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 (
-      <Carousel autoPlay={0}>
-        <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
-      </Carousel>
-    );
-  };
-
-  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 (
-      <Carousel autoPlay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
-      </Carousel>
-    );
-  };
-
-  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 (
-      <Carousel autoPlay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
-      </Carousel>
-    );
-  };
-
-  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 (
-      <Carousel autoPlay={0} cover={
-        <div style={{ textAlign: 'center', color: 'white', padding: '16px' }}>
-          {props.coverText}
-        </div>
-      }>
-        <CarouselItem style={{ backgroundColor: '#8A2BE2', ...publicItemStyles }}>panel1</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#409EFF', ...publicItemStyles }}>panel2</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#F38585', ...publicItemStyles }}>panel3</CarouselItem>
-        <CarouselItem style={{ backgroundColor: '#455a64', ...publicItemStyles }}>panel4</CarouselItem>
-      </Carousel>
-    );
-  };
-
-  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

@@ -1,144 +0,0 @@
-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

@@ -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;
-  }
-}