feat(componentTest): 添加组件测试页面基础结构(样式未开发)
parent
5b2f1020d2
commit
c375745670
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styles from './style/index.module.less';
|
||||||
|
import { Button, Input, Radio, Space, Tag, Divider } from '@arco-design/web-react';
|
||||||
|
import { IconSearch } from '@arco-design/web-react/icon';
|
||||||
|
import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
|
||||||
|
import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';
|
||||||
|
|
||||||
|
const Group = Radio.Group;
|
||||||
|
|
||||||
|
const ComponentTest = () => {
|
||||||
|
return (
|
||||||
|
<div className={styles['component-test']}>
|
||||||
|
<div className={styles['header']}>
|
||||||
|
<Group defaultValue={'Beijing'} name="button-radio-group">
|
||||||
|
{['总数126', '已测试45', '未测试81'].map((item, index) => {
|
||||||
|
return (
|
||||||
|
<Radio key={item} value={item}>
|
||||||
|
{({ checked }) => {
|
||||||
|
return (
|
||||||
|
<Tag size="large" tabIndex={-1} key={item} color={['purple', 'arcoblue', 'orangered'][index]}>
|
||||||
|
{item}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</Radio>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
<Space split={<Divider type="vertical" />}>
|
||||||
|
<Input
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder={'搜索'}
|
||||||
|
style={{ width: 236 }}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginLeft: 5, borderRadius: 4 }}
|
||||||
|
>
|
||||||
|
实例指引
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
<div className={styles['content']}>
|
||||||
|
<div className={styles['left']}>
|
||||||
|
<SideBar />
|
||||||
|
</div>
|
||||||
|
<div className={styles['right']}>
|
||||||
|
<InstanceList />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ComponentTest;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const InstanceList = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
实例列表
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InstanceList;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const SideBar = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
侧边栏
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SideBar;
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
.component-test {
|
||||||
|
height: 98%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 17px 19px 0 24px;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue