0.2.7 • Published 7 months ago

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

Weekly downloads
-
License
-
Repository
-
Last release
7 months ago

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

ZeusLayoutHeader(头部导航条)

props

npm.io

继承了 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

npm.io

继承了 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

npm.io

继承了 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
labellabel 标签的文本string0.0.1
field字段名(必须唯一)string0.0.1
options配置选项内容{ id, name }[]0.0.1
rules校验规则any[]0.0.1
picker选择器类型date / week / month / quarter / year0.0.1
showTime时间选择boolean0.0.1

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

ZeusTable(表单组件)

props

npm.io

继承了 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 />
0.2.7

7 months ago

0.2.3

8 months ago

0.2.5

8 months ago

0.2.4

8 months ago

0.1.44

8 months ago

0.1.45

8 months ago

0.1.46

8 months ago

0.1.47

8 months ago

0.1.48

8 months ago

0.2.1

8 months ago

0.2.2

8 months ago

0.1.42

8 months ago

0.1.43

8 months ago

0.1.40

8 months ago

0.1.39

8 months ago

0.1.37

9 months ago

0.1.36

9 months ago

0.1.35

10 months ago

0.1.32

11 months ago

0.1.30

1 year ago

0.1.27

1 year ago

0.1.28

1 year ago

0.1.29

1 year ago

0.1.20

1 year ago

0.1.21

1 year ago

0.1.22

1 year ago

0.1.23

1 year ago

0.1.24

1 year ago

0.1.25

1 year ago

0.1.26

1 year ago

0.1.19

1 year ago

0.1.18

1 year ago

0.1.17

1 year ago

0.1.16

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.8

1 year ago

0.1.9

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.2

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.1

1 year ago

0.0.997

1 year ago

0.0.999

1 year ago

0.0.998

1 year ago

0.1.0

1 year ago

0.0.996

1 year ago

0.0.995

1 year ago

0.0.994

1 year ago

0.0.993

1 year ago

0.0.992

1 year ago

0.0.991

1 year ago

0.0.990

1 year ago

0.0.988

1 year ago

0.0.986

1 year ago

0.0.985

1 year ago

0.0.984

1 year ago

0.0.983

1 year ago

0.0.982

1 year ago

0.0.981

1 year ago

0.0.980

1 year ago

0.0.978

2 years ago

0.0.977

2 years ago

0.0.974

2 years ago

0.0.972

2 years ago

0.0.971

2 years ago

0.0.970

2 years ago

0.0.969

2 years ago

0.0.968

2 years ago

0.0.964

2 years ago

0.0.967

2 years ago

0.0.966

2 years ago

0.0.965

2 years ago

0.0.953

2 years ago

0.0.84

2 years ago

0.0.952

2 years ago

0.0.85

2 years ago

0.0.951

2 years ago

0.0.86

2 years ago

0.0.950

2 years ago

0.0.87

2 years ago

0.0.957

2 years ago

0.0.913

2 years ago

0.0.88

2 years ago

0.0.956

2 years ago

0.0.912

2 years ago

0.0.89

2 years ago

0.0.955

2 years ago

0.0.911

2 years ago

0.0.954

2 years ago

0.0.910

2 years ago

0.0.82

2 years ago

0.0.83

2 years ago

0.0.906

2 years ago

0.0.949

2 years ago

0.0.905

2 years ago

0.0.948

2 years ago

0.0.904

2 years ago

0.0.947

2 years ago

0.0.903

2 years ago

0.0.909

2 years ago

0.0.908

2 years ago

0.0.907

2 years ago

0.0.920

2 years ago

0.0.963

2 years ago

0.0.962

2 years ago

0.0.961

2 years ago

0.0.924

2 years ago

0.0.923

2 years ago

0.0.922

2 years ago

0.0.921

2 years ago

0.0.960

2 years ago

0.0.917

2 years ago

0.0.916

2 years ago

0.0.959

2 years ago

0.0.915

2 years ago

0.0.958

2 years ago

0.0.914

2 years ago

0.0.919

2 years ago

0.0.918

2 years ago

0.0.931

2 years ago

0.0.930

2 years ago

0.0.935

2 years ago

0.0.934

2 years ago

0.0.933

2 years ago

0.0.932

2 years ago

0.0.927

2 years ago

0.0.926

2 years ago

0.0.925

2 years ago

0.0.929

2 years ago

0.0.942

2 years ago

0.0.941

2 years ago

0.0.940

2 years ago

0.0.902

2 years ago

0.0.945

2 years ago

0.0.901

2 years ago

0.0.944

2 years ago

0.0.943

2 years ago

0.0.90

2 years ago

0.0.939

2 years ago

0.0.938

2 years ago

0.0.937

2 years ago

0.0.936

2 years ago

0.0.79

2 years ago

0.0.81

2 years ago

0.0.78

2 years ago

0.0.77

2 years ago

0.0.76

2 years ago

0.0.75

2 years ago

0.0.74

2 years ago

0.0.73

2 years ago

0.0.72

2 years ago

0.0.71

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago