index.tsx 3.93 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Button, Card, Icon, List, Typography } from 'antd';
陈帅's avatar
陈帅 committed
2
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
3

陈帅's avatar
陈帅 committed
4
import { Dispatch } from 'redux';
5
import { PageHeaderWrapper } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
6
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
7 8
import { StateType } from './model';
import { CardListItemDataType } from './data.d';
9
import styles from './style.less';
10

陈帅's avatar
陈帅 committed
11 12
const { Paragraph } = Typography;

陈帅's avatar
陈帅 committed
13
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
陈帅's avatar
陈帅 committed
14
  BLOCK_NAME_CAMEL_CASE: StateType;
陈帅's avatar
陈帅 committed
15
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
16 17 18 19 20 21 22 23 24 25 26 27 28
  loading: boolean;
}
interface PAGE_NAME_UPPER_CAMEL_CASEState {
  visible: boolean;
  done: boolean;
  current?: Partial<CardListItemDataType>;
}

@connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
陈帅's avatar
陈帅 committed
29
    BLOCK_NAME_CAMEL_CASE: StateType;
陈帅's avatar
陈帅 committed
30 31 32 33 34 35
    loading: {
      models: { [key: string]: boolean };
    };
  }) => ({
    BLOCK_NAME_CAMEL_CASE,
    loading: loading.models.list,
陈帅's avatar
陈帅 committed
36
  }),
陈帅's avatar
陈帅 committed
37 38 39 40 41
)
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
  PAGE_NAME_UPPER_CAMEL_CASEProps,
  PAGE_NAME_UPPER_CAMEL_CASEState
> {
42
  componentDidMount() {
陈帅's avatar
陈帅 committed
43 44
    const { dispatch } = this.props;
    dispatch({
45
      type: 'BLOCK_NAME_CAMEL_CASE/fetch',
46 47 48 49 50 51 52
      payload: {
        count: 8,
      },
    });
  }

  render() {
陈帅's avatar
陈帅 committed
53
    const {
54
      BLOCK_NAME_CAMEL_CASE: { list },
陈帅's avatar
陈帅 committed
55 56
      loading,
    } = this.props;
57 58 59

    const content = (
      <div className={styles.pageHeaderContent}>
afc163's avatar
afc163 committed
60
        <p>
afc163's avatar
afc163 committed
61
          段落示意:蚂蚁金服务设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,
afc163's avatar
afc163 committed
62 63
          提供跨越设计与开发的体验解决方案。
        </p>
64 65
        <div className={styles.contentLink}>
          <a>
jim's avatar
jim committed
66 67
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" />{' '}
            快速开始
68 69
          </a>
          <a>
jim's avatar
jim committed
70 71
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" />{' '}
            产品简介
72 73
          </a>
          <a>
jim's avatar
jim committed
74 75
            <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" />{' '}
            产品文档
76 77 78 79 80 81 82
          </a>
        </div>
      </div>
    );

    const extraContent = (
      <div className={styles.extraImg}>
jim's avatar
jim committed
83 84 85 86
        <img
          alt="这是一个标题"
          src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
        />
87 88
      </div>
    );
陈帅's avatar
陈帅 committed
89
    const nullData: Partial<CardListItemDataType> = {};
90
    return (
陈帅's avatar
陈帅 committed
91
      <PageHeaderWrapper content={content} extraContent={extraContent}>
92
        <div className={styles.cardList}>
陈帅's avatar
陈帅 committed
93
          <List<Partial<CardListItemDataType>>
nikogu's avatar
nikogu committed
94
            rowKey="id"
nikogu's avatar
nikogu committed
95
            loading={loading}
nikogu's avatar
nikogu committed
96
            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
陈帅's avatar
陈帅 committed
97
            dataSource={[nullData, ...list]}
陈帅's avatar
陈帅 committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
            renderItem={item => {
              if (item && item.id) {
                return (
                  <List.Item key={item.id}>
                    <Card
                      hoverable
                      className={styles.card}
                      actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]}
                    >
                      <Card.Meta
                        avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                        title={<a>{item.title}</a>}
                        description={
                          <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
                            {item.description}
                          </Paragraph>
                        }
                      />
                    </Card>
                  </List.Item>
                );
              }
              return (
nikogu's avatar
nikogu committed
121 122 123 124
                <List.Item>
                  <Button type="dashed" className={styles.newButton}>
                    <Icon type="plus" /> 新增产品
                  </Button>
nikogu's avatar
nikogu committed
125
                </List.Item>
陈帅's avatar
陈帅 committed
126 127
              );
            }}
nikogu's avatar
nikogu committed
128
          />
129
        </div>
130
      </PageHeaderWrapper>
131 132 133
    );
  }
}
lijiehua's avatar
lijiehua committed
134

135
export default PAGE_NAME_UPPER_CAMEL_CASE;