feat(componentTest): 添加组件测试页面基础结构(样式未开发)

master
钟良源 4 months ago
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…
Cancel
Save