@zeuss-design/zeuss-design-layout v0.1.17

基于 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

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

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

formItems

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

ZeusResult(空状态组件)

示例

<ZeusResult />