feat(component): 添加组件列表页面
- 在 ideContainer 中引入并注册 componentList 路由- 新增 componentList 页面组件及样式文件 - 更新菜单配置，将 componentList 添加到导航路径中- 调整右侧边栏和日志栏的显示逻辑，支持组件列表页面展示 - 实现组件列表页面的基础布局与交互功能master
parent
51f180d4e9
commit
7aa5ed95bf
@ -0,0 +1,82 @@
|
||||
import React, { useState } from 'react';
|
||||
import styles from './style/index.module.less';
|
||||
import { Button, Divider, Input, Space, Table, Radio } from '@arco-design/web-react';
|
||||
import { IconSearch } from '@arco-design/web-react/icon';
|
||||
|
||||
const Group = Radio.Group;
|
||||
|
||||
const GlobalVarContainer = () => {
|
||||
const [selectedItem, setSelectedItem] = useState('数字类型');
|
||||
|
||||
const menuItems = [
|
||||
'我的组件',
|
||||
'协同组件',
|
||||
'组件审核'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles['comp-list-container']}>
|
||||
{/*左侧菜单*/}
|
||||
<div className={styles['comp-list-menu']}>
|
||||
{menuItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={selectedItem === item ? styles['selected'] : ''}
|
||||
onClick={() => setSelectedItem(item)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles['comp-list-content']}>
|
||||
{/*头部*/}
|
||||
<div className={styles['comp-list-header']}>
|
||||
<div className={styles['comp-list-search']}>
|
||||
<Space>
|
||||
<Input
|
||||
prefix={<IconSearch />}
|
||||
placeholder={'搜索'}
|
||||
style={{ width: 236 }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: 5, borderRadius: 4 }}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div className={styles['comp-list-handle']}>
|
||||
<Radio.Group defaultValue={'Beijing'} name="button-radio-group">
|
||||
{['未设计', '编码中', '已部署'].map((item) => {
|
||||
return (
|
||||
<Radio key={item} value={item}>
|
||||
{({ checked }) => {
|
||||
return (
|
||||
<Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
|
||||
{item}
|
||||
</Button>
|
||||
);
|
||||
}}
|
||||
</Radio>
|
||||
);
|
||||
})}
|
||||
</Radio.Group>
|
||||
<Space split={<Divider type="vertical" />}>
|
||||
<Button type="secondary" style={{ borderRadius: 4 }}>生成组件</Button>
|
||||
<Button type="outline" style={{ borderRadius: 4 }}>导入组件</Button>
|
||||
<Button type="primary" style={{ borderRadius: 4 }}>+ 新增组件</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/*数据列表*/}
|
||||
<div className={styles['comp-list-list']}>
|
||||
{/*<Table columns={columns} data={eventData} pagination={false} />*/}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalVarContainer;
|
||||
@ -0,0 +1,53 @@
|
||||
.comp-list-container {
|
||||
display: flex;
|
||||
height: 98%;
|
||||
background-color: #ffffff;
|
||||
padding: 17px 19px 0 24px;
|
||||
|
||||
.comp-list-menu {
|
||||
flex: 1;
|
||||
border-right: 4px solid #E5E6EB;
|
||||
padding-left: 30px;
|
||||
|
||||
& > div {
|
||||
width: 80%;
|
||||
height: 36px;
|
||||
margin: 6px 0;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
background-color: #F0EEFC;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comp-list-content {
|
||||
flex: 8;
|
||||
padding: 0 0 0 40px;
|
||||
|
||||
.comp-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.comp-list-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.comp-list-handle {
|
||||
}
|
||||
}
|
||||
|
||||
.comp-list-list {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
function ComponentDevelopment() {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
组件开发
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ComponentDevelopment;
|
||||
Loading…
Reference in New Issue