@zeuss-design/zeuss-design-layout

基于 react.v18 + ts + vite + antd 封装的一套模板组件

ZeusLayoutHeader(头部导航条)

props

继承了 Antd Select props 的所有 API 🔜

并且新增了一些 API

示例

<ZeusLayoutHeader
  logo={<img src={Logo} alt="Logo" />}
  logoTitle={false}
  selectOption={[
    {
      label: '宙斯',
      value: 'zeuss'
    }
  ]}
  selectClick={e => {
    console.log(e)
  }}
  placeholder={'请选择...'}
  rightContentRender={<button>个人中心</button>}
/>

ZeusLayoutHeader-API

参数	说明	类型	默认值	版本
logo	左侧的 logo 图标, 传 false 不展示	ReactNode / boolean	-	0.0.1
logoTitle	左侧标题的图标, 传 false 不展示	ReactNode / boolean	-	0.0.1
selectOption	配置选项内容	{ label, value }[]	-	0.0.1
selectClick	点击事件	(value: { label, value }) => void	-	0.0.1
rightContentRender	自定义内容, 固定右侧靠低居中展示	boolean	-	0.0.1

ZeusMenu(菜单导航)

props

继承了 Antd Menu props 的所有 API 🔜

并且新增了一些 API

示例

<ZeusMenu
  header={'业务'}
  defaultSelectedKeys={['1']}
  mode="inline"
  items={[
    {
      label: 'Navigation One',
      key: '1',
      icon: <MailOutlined />
    },
    {
      label: 'Navigation Two',
      key: 'app',
      icon: <AppstoreOutlined />
    }
  ]}
  onClick={(e: any) => {
    console.log(e)
  }}
/>

ZeusMenu-API

参数	说明	类型	默认值	版本
header	导航菜单的标题或者 logo 图标	ReactNode / string	-	0.0.1

ZeusSearchForm(检索内容)

props

继承了 Antd Form props 的所有 API 🔜

并且新增了一些 API

示例

const formItems: FormItem[] = [
  {
    type: 'input',
    label: '内容查询',
    field: 'content'
  },
  {
    type: 'select',
    label: '下拉查询',
    field: 'select',
    options: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' }
    ],
    rules: [{ required: true, message: '请选择下拉框选项' }]
  },
  {
    type: 'dateRange',
    label: '开始时间',
    field: 'start-dateRange'
  },
  {
    type: 'dateRange',
    label: '结束时间',
    field: 'end-dateRange'
  },
  {
    type: 'rangePicker',
    label: '时间区间',
    field: 'rangePicker',
    showTime: true
  },
  {
    type: 'rangePicker',
    label: '时间区间(周)',
    field: 'rangePicker-week',
    picker: 'week'
  },
  {
    type: 'rangePicker',
    label: '时间区间(月)',
    field: 'rangePicker-month',
    picker: 'month'
  },
  {
    type: 'rangePicker',
    label: '时间区间(季)',
    field: 'rangePicker-quarter',
    picker: 'quarter'
  },
  {
    type: 'rangePicker',
    label: '时间区间(年)',
    field: 'rangePicker-year',
    picker: 'year'
  }
]

const onSearch = (values: { [attr: string]: string }) => {
  console.log(values)
}

;<ZeusSearchForm
  form={form}
  onSearch={onSearch}
  formItems={formItems}
  clientHeight={e => console.log(e)}
/>

ZeusSearchForm-API

参数	说明	类型	默认值	版本
form	通过 Form.useForm() 创建,每一个 form 控制一个实例,必须字段	any	-	0.0.1
onSearch	返回搜索框内输入信息	(values: { [attr: string]: string }) => void	-	0.0.1
formItems	搜索框展示信息	any[]	-	0.0.1
clientHeight	返回搜索框元素的实时高度	(values: number) => void	-	0.0.1

formItems

名称	说明	类型	版本
type	'input' => 返回一个 Input 输入框	'input' / 'select' / 'dateRange' / 'rangePicker'	0.0.1
type	'select' => 返回一个 Select 输入框	'input' / 'select' / 'dateRange' / 'rangePicker'	0.0.1
type	'dateRange' => 返回一个 DatePicker 输入框	'input' / 'select' / 'dateRange' / 'rangePicker'	0.0.1
type	'rangePicker' => 返回一个 RangePicker 输入框	'input' / 'select' / 'dateRange' / 'rangePicker'	0.0.1
label	label 标签的文本	string	0.0.1
field	字段名(必须唯一)	string	0.0.1
options	配置选项内容	{ id, name }[]	0.0.1
rules	校验规则	any[]	0.0.1
picker	选择器类型	date / week / month / quarter / year	0.0.1
showTime	时间选择	boolean	0.0.1

showTime 和 picker 不能同时设置。
暂时不可用 initialValues 和 initialValue 为时间设置默认值。

ZeusTable(表单组件)

props

继承了 Antd Table props 的所有 API 🔜

并且新增了一些 API

示例

const tableListDataSource = []

for (let i = 0; i < 80; i += 1) {
  tableListDataSource.push({
    key: i,
    name: 'AppName',
    containers: Math.floor(Math.random() * 20),
    creator: creators[Math.floor(Math.random() * creators.length)],
    status: valueEnum[Math.floor(Math.random() * 10) % 4],
    createdAt: Date.now() - Math.floor(Math.random() * 100000),
    memo:
      i % 2 === 1
        ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴'
        : '简短备注文案'
  })
}

const columns: CustomColumnsType<any> = [
  {
    title: '应用名称',
    width: 80,
    dataIndex: 'name',
    render: (_: any) => <a>{_}</a>
  },
  {
    title: '容器数量',
    dataIndex: 'containers',
    align: 'right',
    sorter: (a: { containers: number }, b: { containers: number }) =>
      a.containers - b.containers
  },
  {
    title: '状态',
    width: 80,
    show: false,
    dataIndex: 'status'
  },
  {
    title: '创建自',
    width: 80,
    dataIndex: 'createdAt'
  },
  {
    title: '创建者',
    width: 100,
    dataIndex: 'creator',
    filters: filterTableListDataSource(tableListDataSource, 'creator'),
    onFilter: (value, record) => record.creator.indexOf(value) === 0
  },
  {
    title: '备注文案',
    width: 200,
    dataIndex: 'memo'
  },
  {
    title: '操作',
    width: 180,
    key: 'option',
    render: () => (
      <Space>
        <a key="link">链路</a>
        <a key="link2">报警</a>
        <a key="link3">监控</a>
      </Space>
    )
  }
]

const SideLeftRender = <span>左侧自定义内容</span>
const SideRightRender = (
  <>
    <Space>
      <span>右侧自定义内容</span>
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
    </Space>
  </>
)

;<ZeusTable
  rowKey="key"
  columns={columns}
  dataSource={tableListDataSource}
  SideLeftRender={SideLeftRender}
  SideRightRender={SideRightRender}
/>

ZeusTable-API

参数	说明	类型	默认值	版本
SideLeftRender	左侧的自定义内容	ReactNode	-	0.0.1
SideRightRender	右侧的自定义内容	ReactNode	-	0.0.1
columns	表格列的配置描述，增加了 show 字段，控制默认是否展示	CustomColumnsType[]	-	0.0.1
dataSource	数据数组	object[]	-	0.0.1
rowKey	表格行 key 的取值，可以是字符串或一个函数	string / function(record): string	-	0.0.1

ZeusResult(空状态组件)

示例

<ZeusResult />