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

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

@@ -1,291 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {$message, ArrowStep, ArrowStepGroup, Button, ButtonGroup, Checkbox, Icon, InputNumber, Step, StepGroup, Tooltip} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {DemoLine} from "../../Demo/DemoLine";
-import './DemoStep.scss';
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      1: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      2: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      3: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      4: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      5: {
-        index: 2,
-      },
-      6: {
-        index: 1,
-      },
-    },
-    showFlag: true,
-    val1: {
-      0: 1,
-      1: 2,
-      3: 'step1',
-    },
-  });
-
-  return () => {
-    return (
-      <div className={'demo-step'}>
-        <DemoRow title={'基本用法'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[1].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[1].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[1].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[1].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[1].index}
-              vertical={state.val[1].vertical}
-              mini={state.val[1].mini}
-              titleAlignBottom={state.val[1].titleAlignBottom}
-              currentStatus={state.val[1].index === 5 ? 'finish' : undefined}
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'步骤图标'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[2].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[2].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[2].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[2].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[2].index}
-              vertical={state.val[2].vertical}
-              mini={state.val[2].mini}
-              titleAlignBottom={state.val[2].titleAlignBottom}
-              currentStatus={state.val[2].index === 5 ? 'finish' : undefined}
-            >
-              <Step icon="pi-safe" title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step icon="pi-schedule" title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step icon="pi-shake" title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step icon="pi-home" title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step icon="pi-skin" title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'小圆点'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[3].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[3].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[3].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[3].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[3].index}
-              vertical={state.val[3].vertical}
-              mini={state.val[3].mini}
-              titleAlignBottom={state.val[3].titleAlignBottom}
-              currentStatus={state.val[3].index === 5 ? 'finish' : undefined}
-              dotIcon
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'步骤状态'}>
-          <DemoLine>
-            <StepGroup dotIcon>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup>
-              <Step title="Finish" message="This step is finish" status="finish" icon="pi-check"/>
-              <Step title="Process" message="This step is processing..." status="process" icon="pi-info-circle-fill"/>
-              <Step title="error" message="This step is error!" status="error" icon="pi-close"/>
-              <Step title="Wait" message="This step is not start." status="wait" icon="pi-thunderbolt"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup dotIcon vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'通过绑定val切换步骤'}>
-          <DemoLine title={'当前步骤索引'}>
-            <ButtonGroup>
-              <Button label={'step1'} onClick={() => state.val1[3] = 'step1'} active={state.val1[3] === 'step1'}/>
-              <Button label={'step2'} onClick={() => state.val1[3] = 'step2'} active={state.val1[3] === 'step2'}/>
-              <Button label={'step3'} onClick={() => state.val1[3] = 'step3'} active={state.val1[3] === 'step3'}/>
-              <Button label={'step4'} onClick={() => state.val1[3] = 'step4'} active={state.val1[3] === 'step4'}/>
-              <Button label={'step5'} onClick={() => state.val1[3] = 'step5'} active={state.val1[3] === 'step5'}/>
-            </ButtonGroup>
-          </DemoLine>
-          <StepGroup current={state.val1[3]} currentStatus={state.val1[3] === 'step5' ? 'finish' : undefined}>
-            <Step title="获取token" message="调用接口，获取token" val={'step1'}/>
-            <Step title="上传logo" message="使用token上传logo图片" val={'step2'}/>
-            <Step title="创建卡券" message="调用接口创建卡券信息" val={'step3'}/>
-            <Step title="创建二维码" message="调用接口创建二维码" val={'step4'}/>
-            <Step title="显示二维码" message="在应用中显示二维码" val={'step5'}/>
-          </StepGroup>
-          <div style={{
-            height: '100px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: 'dashed 1px #e1e1e1'
-          }}>
-            <h1 style={{ display: state.val1[3] === 'step1' ? '' : 'none' }}>Step 1</h1>
-            <h1 style={{ display: state.val1[3] === 'step2' ? '' : 'none' }}>Step 2</h1>
-            <h1 style={{ display: state.val1[3] === 'step3' ? '' : 'none' }}>Step 3</h1>
-            <h1 style={{ display: state.val1[3] === 'step4' ? '' : 'none' }}>Step 4</h1>
-            <h1 style={{ display: state.val1[3] === 'step5' ? '' : 'none' }}>Step 5</h1>
-          </div>
-        </DemoRow>
-        <DemoRow title={'自定义标题以及文本内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[4].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[4].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[4].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[4].titleAlignBottom}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[4].index}
-              vertical={state.val[4].vertical}
-              mini={state.val[4].mini}
-              titleAlignBottom={state.val[4].titleAlignBottom}
-              currentStatus={state.val[4].index === 5 ? 'finish' : undefined}
-            >
-              <Step>
-                {{
-                  head: () => (<Tooltip message="获取token"><span>获取token</span></Tooltip>),
-                  content: () => (<span>1、调用接口，获取token</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="上传logo"><span>上传logo</span></Tooltip>),
-                  content: () => (<span>2、使用token上传logo图片</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建卡券"><span>创建卡券</span></Tooltip>),
-                  content: () => (<span>3、调用接口创建卡券信息</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建二维码"><span>创建二维码</span></Tooltip>),
-                  content: () => (<span>4、调用接口创建二维码</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="显示二维码"><span>显示二维码</span></Tooltip>),
-                  content: () => (<span>5、在应用中显示二维码</span>)
-                }}
-              </Step>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条'}>
-          <DemoLine title={'当前步骤条索引'}>
-            <InputNumber width="120" v-model={state.val[5].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[5].index}>
-            <ArrowStep title={'获取token'} onClick={() => $message('获取token')}/>
-            <ArrowStep title={'上传logo'} onClick={() => $message('上传logo')}/>
-            <ArrowStep title={'创建卡券'} onClick={() => $message('创建卡券')}/>
-            <ArrowStep title={'创建二维码'} onClick={() => $message('创建二维码')}/>
-            <ArrowStep title={'显示二维码'} onClick={() => $message('显示二维码')}/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：状态'}>
-          <ArrowStepGroup>
-            <ArrowStep title="Finish" status="finish"/>
-            <ArrowStep title="Process" status="process"/>
-            <ArrowStep title="error" status="error"/>
-            <ArrowStep title="Wait" status="wait"/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：自定义内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[6].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[6].index} className={'custom-content-slot'}>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-safe'}/>
-              <span>获取token</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-schedule'}/>
-              <span>上传logo</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-shake'}/>
-              <span>创建卡券</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-home'}/>
-              <span>创建二维码</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-skin'}/>
-              <span>显示二维码</span>
-            </ArrowStep>
-          </ArrowStepGroup>
-        </DemoRow>
-      </div>
-    );
-  };
-});

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

@@ -1,338 +0,0 @@
-import {designPage, Fragment, getComponentCls, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Input, Radio, RadioGroup, Tab, TabGroup, useDialog} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const DemoBasic = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <TabGroup headType="text">
-        <Tab title="用户管理" style={{ backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300" onMounted={() => console.log('111 mounted')}/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300" onMounted={() => console.log('222 mounted')}/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300" onMounted={() => console.log('333 mounted')}/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoDirection = designPage(() => {
-  const state = reactive({
-    position: 'top'
-  });
-
-  return () => (
-    <DemoRow title="方向">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any}>
-        <Tab title="用户管理">
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoHeadType = designPage(() => {
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-  });
-
-  return () => (
-    <DemoRow title="页签类型">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any} headType={state.headType as any}>
-        <Tab title="用户管理">
-          <div style={{ height: '100px', padding: '20px 0' }}>
-            用户管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="配置管理">
-          <div style={{ height: '200px', padding: '20px 0' }}>
-            配置管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-        <Tab title="数据集管理">
-          <div style={{ height: '300px', padding: '20px 0' }}>
-            数据集管理：
-            <Input width="300"/>
-          </div>
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoLongTabs = designPage(() => {
-
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-  });
-
-  return () => (
-    <DemoRow title="超长页签">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <TabGroup headPosition={state.position as any} headType={state.headType as any}>
-        {new Array(10).fill(0).map((_, index) => (
-          <Fragment key={index}>
-            <Tab title={`用户管理_${index}`}>
-              <div style={{ height: '100px', backgroundColor: `var(--${getComponentCls('gray-3')})` }}>
-                {`user management_${index}`}
-              </div>
-            </Tab>
-            <Tab title={`配置管理_${index}`}>
-              <div style={{ height: '200px', backgroundColor: `var(--${getComponentCls('gray-2')})` }}>
-                {`config management_${index}`}
-              </div>
-            </Tab>
-            <Tab title={`数据集管理_${index}`}>
-              <div style={{ height: '300px', backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-                {`data map_${index}`}
-              </div>
-            </Tab>
-          </Fragment>
-        ))}
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-
-export const DemoDynamic = designPage(() => {
-
-  const state = reactive({
-    tabs: [
-      '用户管理',
-      '配置管理',
-      '数据集管理',
-      '网点管理',
-      // 以下数据用来模拟超长数据
-      /*'价格配置',
-      '系统配置',
-      '开发配置',
-      '参数配置',
-      '装修配置',
-      '源点配置',
-      '网站地图',
-      '黑名单',
-      '白名单',
-      '工作流',
-      '审批流',*/
-    ],
-  });
-
-  const { $dialog } = useDialog();
-
-  const addTab = () => {
-    $dialog({
-      editType: 'input',
-      confirmButton: true,
-      cancelButton: true,
-      handleConfirm: ({ editValue }) => {
-        editValue = String(editValue || "").trim();
-        if (!editValue) {
-          return;
-        }
-        if (state.tabs.indexOf(editValue) > -1) {
-          $dialog.warn('唯一性冲突！');
-          return;
-        }
-        state.tabs.unshift(editValue);
-      }
-    });
-  };
-
-  const resetTabData = () => {
-    const data = [
-      '用户管理',
-      '配置管理',
-      '数据集管理',
-      '网点管理',
-      '价格配置',
-      '系统配置',
-      '开发配置',
-      '参数配置',
-      '装修配置',
-      '源点配置',
-      '网站地图',
-      '黑名单',
-      '白名单',
-      '工作流',
-      '审批流',
-    ];
-    state.tabs = state.tabs.length <= 4 ? data : data.slice(0, 4);
-  };
-
-  return () => (
-    <DemoRow title="动态增减标签页">
-      <TabGroup closeable>
-        {{
-          default: () => state.tabs.map((tab, index) => (
-            <Tab key={tab} title={tab} onClose={() => state.tabs.splice(index, 1)}>
-              <div style={{ height: '100px', padding: '20px 0' }}>
-                {tab}：
-                <Input width="300"/>
-              </div>
-            </Tab>
-          )),
-          operator: () => (
-            <>
-              <Button label="新页签" icon="pi-plus" onClick={addTab}/>
-              <Button mode="outline" label={state.tabs.length > 4 ? '短页签' : '长页签'} status="error" onClick={resetTabData}/>
-            </>
-          )
-        }}
-      </TabGroup>
-    </DemoRow>
-  );
-});
-
-export const DemoFitHeight = designPage(() => {
-  const state = reactive({
-    position: 'top',
-    headType: 'text',
-
-  });
-
-  return () => (
-    <DemoRow title="固定高度">
-      <DemoLine>
-        <RadioGroup v-model={state.position}>
-          <Radio val="top" label="top"/>
-          <Radio val="bottom" label="bottom"/>
-          <Radio val="left" label="left"/>
-          <Radio val="right" label="right"/>
-        </RadioGroup>
-      </DemoLine>
-      <DemoLine>
-        <RadioGroup v-model={state.headType}>
-          <Radio val="text" label="text"/>
-          <Radio val="card" label="card"/>
-          <Radio val="shadow" label="shadow"/>
-        </RadioGroup>
-      </DemoLine>
-      <div style={{ height: '200px' }}>
-        <TabGroup headPosition={state.position as any} headType={state.headType as any} fitHeight>
-          {new Array(10).fill(0).map((_, index) => (
-            <Fragment key={index}>
-              <Tab title={`用户管理_${index}`}>
-                <div style={{ height: '200px', backgroundColor: `var(--${getComponentCls('gray-1')})` }}>
-                  {`user management_${index}`}
-                </div>
-              </Tab>
-              <Tab title={`配置管理_${index}`}>
-                <div style={{ height: '400px', backgroundColor: `var(--${getComponentCls('gray-2')})` }}>
-                  {`config management_${index}`}
-                </div>
-              </Tab>
-              <Tab title={`数据集管理_${index}`}>
-                <div style={{ height: '600px', backgroundColor: `var(--${getComponentCls('gray-3')})` }}>
-                  {`data map_${index}`}
-                </div>
-              </Tab>
-            </Fragment>
-          ))}
-        </TabGroup>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoInit = designPage(() => {
-  return () => <>
-    <DemoRow title="标签初始化控制">
-      <TabGroup>
-        <Tab title="用户管理" style={{ padding: '20px 0' }}>
-          <span>用户管理：</span>
-          <Input
-            onMounted={() => console.log('用户管理 mounted',)}
-            onUnmounted={() => console.log('用户管理 unmount',)}
-          />
-        </Tab>
-        <Tab title="立即初始化" style={{ padding: '20px 0' }} init>
-          <span>子模块数据管理：</span>
-          <Input
-            onMounted={() => console.log('立即初始化 mounted',)}
-            onUnmounted={() => console.log('立即初始化 unmount',)}
-          />
-        </Tab>
-        <Tab title="关闭的时候销毁" style={{ padding: '20px 0' }} destroyOnHide>
-          <span>数据集：</span>
-          <Input
-            modelValue={'初始值'}
-            onMounted={() => console.log('关闭的时候销毁 mounted',)}
-            onUnmounted={() => console.log('关闭的时候销毁 unmount',)}
-          />
-        </Tab>
-      </TabGroup>
-    </DemoRow>
-  </>;
-});