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