You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import styles from './style/index.module.less';
|
|
import CustomCard from '@/components/CustomCard/index';
|
|
import CollapseBox from './collapseBox';
|
|
import { Space, Input, Button, Tabs, Tag } from '@arco-design/web-react';
|
|
|
|
const InputSearch = Input.Search;
|
|
const TabPane = Tabs.TabPane;
|
|
|
|
function ComponentLibrary() {
|
|
return (
|
|
<>
|
|
<div className={styles['comp-library-container']}>
|
|
<CustomCard>
|
|
<Space
|
|
size={20}
|
|
style={{ marginBottom: '5px' }}
|
|
>
|
|
<InputSearch allowClear placeholder="输入名称搜索组件" style={{ width: 350 }} />
|
|
<Button type="primary">组件推荐</Button>
|
|
</Space>
|
|
<Tabs defaultActiveTab="1">
|
|
<TabPane
|
|
key="1"
|
|
title={
|
|
<span>
|
|
<span>我的组件</span>
|
|
<Tag color="arcoblue">
|
|
216
|
|
</Tag>
|
|
</span>
|
|
}
|
|
>
|
|
<CollapseBox componentType="myLibs" />
|
|
</TabPane>
|
|
<TabPane
|
|
key="2"
|
|
title={
|
|
<span>
|
|
<span>公开组件</span>
|
|
<Tag color="arcoblue">
|
|
31
|
|
</Tag>
|
|
</span>
|
|
}>
|
|
<CollapseBox componentType="pubLibs" />
|
|
</TabPane>
|
|
<TabPane
|
|
key="3"
|
|
title={
|
|
<span>
|
|
<span>协同组件</span>
|
|
<Tag color="arcoblue">
|
|
0
|
|
</Tag>
|
|
</span>
|
|
}
|
|
>
|
|
<CollapseBox componentType="teamLibs" />
|
|
</TabPane>
|
|
</Tabs>
|
|
</CustomCard>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ComponentLibrary; |