plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/pages/index/components/form/DemoFormSize.tsx

@@ -1,274 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, CheckboxGroup, Form, FormItem, Icon, Input, InputNumber, Radio, RadioGroup, Select, SelectOption, Tooltip} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'large'}>
-      <Form column={1} modelValue={state.formData} size="large">
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoNormal = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'normal'}>
-      <Form column={1} modelValue={state.formData} size="normal">
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoSmall = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'small'}>
-      <Form column={1} modelValue={state.formData} size="small">
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demoMini = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'mini'}>
-      <Form column={1} modelValue={state.formData} size="mini">
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/form/DemoFormVertical.tsx

@@ -1,280 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, CheckboxGroup, Form, FormItem, Icon, Input, InputNumber, Radio, RadioGroup, Select, SelectOption, Tooltip} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'单列表单'}>
-      <Form column={1} modelValue={state.formData} verticalLabel>
-        <FormItem label={'客户名称'} field={'name'} required>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'} required>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'}>
-          <div style={{ display: 'flex' }}>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.joinTime}/>
-            </div>
-            <div>&nbsp;至&nbsp;</div>
-            <div style={{ flex: 1, overflow: 'hidden' }}>
-              <Input v-model={formData.name}/>
-            </div>
-          </div>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'}/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'}>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'单列居中表单(label不占用宽度)'}>
-      <div>
-        <Form column={1} modelValue={state.formData} singleColumnCenter verticalLabel>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'}>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'}>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'双列表单'}>
-      <div>
-        <Form column={2} modelValue={state.formData} verticalLabel>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'} block>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'} block>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-  const state = reactive({
-    formData: {} as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'三列表单'}>
-      <div>
-        <Form column={3} modelValue={state.formData} verticalLabel>
-          <FormItem label={'客户名称'} field={'name'} required>
-            <Input v-model={formData.name}/>
-          </FormItem>
-          <FormItem label={'客户员工数量'} field={'type'} required>
-            {{
-              default: () => <InputNumber v-model={formData.type}/>,
-              append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-            }}
-          </FormItem>
-          <FormItem label={'客户加入时间'} field={'joinTime'}>
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.joinTime}/>
-              </div>
-              <div>&nbsp;至&nbsp;</div>
-              <div style={{ flex: 1, overflow: 'hidden' }}>
-                <Input v-model={formData.name}/>
-              </div>
-            </div>
-          </FormItem>
-          <FormItem label={'是否老客户'} field={'oldFlag'}>
-            <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-              <Radio label={'老客户'} val={'Y'}/>
-              <Radio label={'非老客户'} val={'N'}/>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label={'客户性质'} field={'properties'}>
-            <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-              <Checkbox label={'大客户'} val={'large'}/>
-              <Checkbox label={'潜在客户'} val={'potential'}/>
-              <Checkbox label={'长久客户'} val={'long'}/>
-              <Checkbox label={'赢单客户'} val={'order'}/>
-            </CheckboxGroup>
-          </FormItem>
-          <FormItem label={'客户级别'} field={'level'}>
-            <Select v-model={formData.level}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          <FormItem label={'备注'} field={'comments'} block>
-            <Input textarea v-model={formData.comments}/>
-          </FormItem>
-          <FormItem colon={false} contentAlign={'center'} block>
-            <Button label={'取消'} style={{ marginRight: '4px' }}/>
-            <Button mode="fill" label={'提交'}/>
-          </FormItem>
-        </Form>
-      </div>
-    </DemoRow>
-  );
-});

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

@@ -1,66 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Alert, Button} from "../../../../packages";
-
-export default designPage(() => {
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <div style={{ width: '800px' }}>
-          <Alert style={{ marginBottom: '10px' }}>
-            Form校验模式的有点就是能够兼容所有的组件，包括原生表单控件以及其他组件库的组件。
-            当校验失败的时候，FormItem底部必定会显示红色的警告信息；
-          </Alert>
-          <Alert label={'不显示状态图标'} icon={null}/>
-        </div>
-      </DemoRow>
-      <DemoRow title={'状态'}>
-        <Alert status="primary" key="primary" label="Primary" style={{ marginBottom: '8px' }}/>
-        <Alert status="success" key="success" label="Success" style={{ marginBottom: '8px' }}/>
-        <Alert status="warn" key="warn" label="Warn" style={{ marginBottom: '8px' }}/>
-        <Alert status="error" key="error" label="Error" style={{ marginBottom: '8px' }}/>
-        <Alert status="secondary" key="secondary" label="Secondary" style={{ marginBottom: '8px' }}/>
-      </DemoRow>
-      <DemoRow title={'带标题'}>
-        <Alert message={'默认状态下的提示文本'} label={'默认状态'} status={'primary'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'成功状态下的提示文本'} label={'成功状态'} status={'success'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'警告状态下的提示文本'} label={'警告状态'} status={'warn'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'失败状态下的提示文本'} label={'失败状态'} status={'error'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'提示状态下的提示文本'} label={'提示状态'} status={'secondary'} style={{ marginBottom: '8px' }}/>
-      </DemoRow>
-      <DemoRow title={'文本对其方式'}>
-        <Alert label={'居中对齐'} align={'center'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'默认状态下的提示文本'} label={'左对齐'} status={'primary'} align={'left'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'成功状态下的提示文本'} label={'居中对齐'} status={'success'} align={'center'} style={{ marginBottom: '8px' }}/>
-        <Alert message={'警告状态下的提示文本'} label={'右对齐'} status={'warn'} align={'right'} style={{ marginBottom: '8px' }}/>
-      </DemoRow>
-      <DemoRow title={'深色主题'}>
-
-        <Alert theme="deep" status="primary" key="primary" label="Primary" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" status="success" key="success" label="Success" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" status="warn" key="warn" label="Warn" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" status="error" key="error" label="Error" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" status="secondary" key="secondary" label="Secondary" style={{ marginBottom: '8px' }}/>
-
-        <Alert theme="deep" message="默认状态下的提示文本" label="默认状态" status="primary" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" message="成功状态下的提示文本" label="成功状态" status="success" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" message="警告状态下的提示文本" label="警告状态" status="warn" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" message="失败状态下的提示文本" label="失败状态" status="error" style={{ marginBottom: '8px' }}/>
-        <Alert theme="deep" message="提示状态下的提示文本" label="提示状态" status="secondary" style={{ marginBottom: '8px' }}/>
-      </DemoRow>
-      <DemoRow title={'自定义图标、标题以及内容'}>
-        <Alert icon={'pi-send'} status={'success'}>
-          {{
-            default: () => <>
-              <span>自定义标题</span>
-              <Button icon={'pi-right'} mode={'text'} size={'mini'}/>
-            </>,
-            desc: () => <>
-              <Button label={'点击了解更多'} mode={'text'} size={'mini'} style={{ padding: '0' }}/>
-            </>
-          }}
-        </Alert>
-      </DemoRow>
-    </div>
-  );
-});