From a1b9d9b24861eb14733d246599fc2dba4976829a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 16 Apr 2019 18:30:29 +0800
Subject: [PATCH] CardList finish

---
 .../components/PageHeaderWrapper/index.tsx    | 18 ++++-
 BasicList/src/_mock.ts                        |  6 +-
 .../components/PageHeaderWrapper/index.tsx    | 22 +++--
 CardList/src/{_mock.js => _mock.ts}           | 19 +++--
 .../src/components/PageHeaderWrapper/index.js | 25 ------
 .../components/PageHeaderWrapper/index.less   | 81 ++++++++++++++++++-
 .../components/PageHeaderWrapper/index.tsx    | 56 +++++++++++++
 CardList/src/data.d.ts                        | 29 +++++++
 CardList/src/{index.js => index.tsx}          | 53 +++++++++---
 CardList/src/model.js                         | 28 -------
 CardList/src/model.ts                         | 54 +++++++++++++
 CardList/src/{service.js => service.ts}       |  2 +-
 CardList/src/style.less                       |  4 +-
 package.json                                  |  2 +-
 14 files changed, 310 insertions(+), 89 deletions(-)
 rename CardList/src/{_mock.js => _mock.ts} (88%)
 delete mode 100644 CardList/src/components/PageHeaderWrapper/index.js
 create mode 100644 CardList/src/components/PageHeaderWrapper/index.tsx
 create mode 100644 CardList/src/data.d.ts
 rename CardList/src/{index.js => index.tsx} (71%)
 delete mode 100644 CardList/src/model.js
 create mode 100644 CardList/src/model.ts
 rename CardList/src/{service.js => service.ts} (61%)

diff --git a/BasicForm/src/components/PageHeaderWrapper/index.tsx b/BasicForm/src/components/PageHeaderWrapper/index.tsx
index 8b18708e..2776ca83 100644
--- a/BasicForm/src/components/PageHeaderWrapper/index.tsx
+++ b/BasicForm/src/components/PageHeaderWrapper/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader } from 'antd';
+import { PageHeader, Typography } from 'antd';
 import styles from './index.less';
 
 interface IPageHeaderWrapperProps {
@@ -10,13 +10,27 @@ interface IPageHeaderWrapperProps {
 
 const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
   children,
+  title,
   content,
   ...restProps
 }) => (
   <RouteContext.Consumer>
     {value => (
       <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader {...restProps} {...value}>
+        <PageHeader
+          title={
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+              }}
+            >
+              {title}
+            </Typography.Title>
+          }
+          {...restProps}
+          {...value}
+        >
           {content}
         </PageHeader>
         {children ? <div className={styles.content}>{children}</div> : null}
diff --git a/BasicList/src/_mock.ts b/BasicList/src/_mock.ts
index 70894bc7..d74d31be 100644
--- a/BasicList/src/_mock.ts
+++ b/BasicList/src/_mock.ts
@@ -57,7 +57,11 @@ function fakeList(count: number): BasicListItemDataType[] {
       title: titles[i % 8],
       avatar: avatars[i % 8],
       cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
-      status: ['active', 'exception', 'normal'][i % 3],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
       percent: Math.ceil(Math.random() * 50) + 50,
       logo: avatars[i % 8],
       href: 'https://ant.design',
diff --git a/BasicProfile/src/components/PageHeaderWrapper/index.tsx b/BasicProfile/src/components/PageHeaderWrapper/index.tsx
index 065efffc..d92c875e 100644
--- a/BasicProfile/src/components/PageHeaderWrapper/index.tsx
+++ b/BasicProfile/src/components/PageHeaderWrapper/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { RouteContext } from '@ant-design/pro-layout';
-import { PageHeader } from 'antd';
+import { PageHeader, Typography } from 'antd';
 import styles from './index.less';
 
 interface IPageHeaderWrapperProps {
@@ -8,15 +8,23 @@ interface IPageHeaderWrapperProps {
   title: React.ReactNode;
 }
 
-const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
-  children,
-  content,
-  ...restProps
-}) => (
+const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({ children, content, title }) => (
   <RouteContext.Consumer>
     {value => (
       <div style={{ margin: '-24px -24px 0' }}>
-        <PageHeader {...restProps} {...value}>
+        <PageHeader
+          title={
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+              }}
+            >
+              {title}
+            </Typography.Title>
+          }
+          {...value}
+        >
           {content}
         </PageHeader>
         {children ? <div className={styles.content}>{children}</div> : null}
diff --git a/CardList/src/_mock.js b/CardList/src/_mock.ts
similarity index 88%
rename from CardList/src/_mock.js
rename to CardList/src/_mock.ts
index c6903658..a07146e0 100644
--- a/CardList/src/_mock.js
+++ b/CardList/src/_mock.ts
@@ -1,3 +1,5 @@
+import { CardListItemDataType } from './data';
+
 const titles = [
   'Alipay',
   'Angular',
@@ -32,6 +34,7 @@ const desc = [
   '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
   '那时候我只会想自己想要什么，从不想自己拥有什么',
 ];
+
 const user = [
   '付小小',
   '曲丽丽',
@@ -45,7 +48,7 @@ const user = [
   '仲尼',
 ];
 
-function fakeList(count) {
+function fakeList(count: number): CardListItemDataType[] {
   const list = [];
   for (let i = 0; i < count; i += 1) {
     list.push({
@@ -53,13 +56,17 @@ function fakeList(count) {
       owner: user[i % 10],
       title: titles[i % 8],
       avatar: avatars[i % 8],
-      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
-      status: ['active', 'exception', 'normal'][i % 3],
+      cover: parseInt(i / 4 + '', 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      status: ['active', 'exception', 'normal'][i % 3] as
+        | 'normal'
+        | 'exception'
+        | 'active'
+        | 'success',
       percent: Math.ceil(Math.random() * 50) + 50,
       logo: avatars[i % 8],
       href: 'https://ant.design',
-      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),
-      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),
+      updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+      createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
       subDescription: desc[i % 5],
       description:
         '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
@@ -93,7 +100,7 @@ function fakeList(count) {
   return list;
 }
 
-function getFakeList(req, res) {
+function getFakeList(req: { query: any }, res: { json: (arg0: CardListItemDataType[]) => void }) {
   const params = req.query;
 
   const count = params.count * 1 || 20;
diff --git a/CardList/src/components/PageHeaderWrapper/index.js b/CardList/src/components/PageHeaderWrapper/index.js
deleted file mode 100644
index 1a40e25d..00000000
--- a/CardList/src/components/PageHeaderWrapper/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'umi-plugin-react/locale';
-import Link from 'umi/link';
-import { PageHeader } from 'ant-design-pro';
-import styles from './index.less';
-
-const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
-  <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
-    <PageHeader
-      home={<FormattedMessage id="BLOCK_NAME.menu.home" defaultMessage="Home" />}
-      key="pageheader"
-      {...restProps}
-      linkElement={Link}
-      itemRender={item => {
-        if (item.locale) {
-          return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
-        }
-        return item.title;
-      }}
-    />
-    {children ? <div className={styles.content}>{children}</div> : null}
-  </div>
-);
-
-export default PageHeaderWrapper;
diff --git a/CardList/src/components/PageHeaderWrapper/index.less b/CardList/src/components/PageHeaderWrapper/index.less
index 39a44965..908db575 100644
--- a/CardList/src/components/PageHeaderWrapper/index.less
+++ b/CardList/src/components/PageHeaderWrapper/index.less
@@ -1,11 +1,86 @@
 @import '~antd/lib/style/themes/default.less';
 
-.content {
+.children-content {
   margin: 24px 24px 0;
 }
 
-@media screen and (max-width: @screen-sm) {
+.main {
+  .detail {
+    display: flex;
+  }
+
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .title-content {
+    margin-bottom: 16px;
+  }
+
+  @media screen and (max-width: @screen-sm) {
+    .content {
+      margin: 24px 0 0;
+    }
+  }
+
+  .title,
   .content {
-    margin: 24px 0 0;
+    flex: auto;
+  }
+
+  .extraContent,
+  .main {
+    flex: 0 1 auto;
+  }
+
+  .main {
+    width: 100%;
+  }
+
+  .title {
+    margin-bottom: 16px;
+  }
+
+  .logo,
+  .content,
+  .extraContent {
+    margin-bottom: 16px;
+  }
+
+  .extraContent {
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .extraContent {
+    margin-left: 44px;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .extraContent {
+    margin-left: 20px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .row {
+    display: block;
+  }
+
+  .action,
+  .extraContent {
+    margin-left: 0;
+    text-align: left;
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .detail {
+    display: block;
   }
 }
diff --git a/CardList/src/components/PageHeaderWrapper/index.tsx b/CardList/src/components/PageHeaderWrapper/index.tsx
new file mode 100644
index 00000000..fe1a33b8
--- /dev/null
+++ b/CardList/src/components/PageHeaderWrapper/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { RouteContext } from '@ant-design/pro-layout';
+import { PageHeader, Typography } from 'antd';
+import styles from './index.less';
+import { GridContent } from '@ant-design/pro-layout';
+
+interface IPageHeaderWrapperProps {
+  content?: React.ReactNode;
+  title: React.ReactNode;
+  extraContent?: React.ReactNode;
+}
+
+const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
+  children,
+  title,
+  content,
+  extraContent,
+  ...restProps
+}) => (
+  <RouteContext.Consumer>
+    {value => (
+      <div style={{ margin: '-24px -24px 0' }}>
+        <PageHeader
+          title={
+            <Typography.Title
+              level={4}
+              style={{
+                margin: 0,
+              }}
+            >
+              {title}
+            </Typography.Title>
+          }
+          {...restProps}
+          {...value}
+        >
+          <div className={styles.detail}>
+            <div className={styles.main}>
+              <div className={styles.row}>
+                {content && <div className={styles.content}>{content}</div>}
+                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+              </div>
+            </div>
+          </div>
+        </PageHeader>
+        {children ? (
+          <GridContent>
+            <div className={styles['children-content']}>{children}</div>
+          </GridContent>
+        ) : null}
+      </div>
+    )}
+  </RouteContext.Consumer>
+);
+
+export default PageHeaderWrapper;
diff --git a/CardList/src/data.d.ts b/CardList/src/data.d.ts
new file mode 100644
index 00000000..35fbca30
--- /dev/null
+++ b/CardList/src/data.d.ts
@@ -0,0 +1,29 @@
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface CardListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
diff --git a/CardList/src/index.js b/CardList/src/index.tsx
similarity index 71%
rename from CardList/src/index.js
rename to CardList/src/index.tsx
index 0904e512..73e0f04a 100644
--- a/CardList/src/index.js
+++ b/CardList/src/index.tsx
@@ -1,17 +1,44 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'dva';
-import { Card, Button, Icon, List } from 'antd';
-
-import { Ellipsis } from 'ant-design-pro';
+import { Dispatch } from 'redux';
+import { IStateType } from './model';
+import { CardListItemDataType } from './data';
+import { Card, Button, Typography, Icon, List } from 'antd';
 import PageHeaderWrapper from './components/PageHeaderWrapper';
 
+const { Paragraph } = Typography;
+
 import styles from './style.less';
 
-@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
-  BLOCK_NAME_CAMEL_CASE,
-  loading: loading.models.list,
-}))
-class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
+interface PAGE_NAME_UPPER_CAMEL_CASEProps {
+  BLOCK_NAME_CAMEL_CASE: IStateType;
+  dispatch: Dispatch;
+  loading: boolean;
+}
+interface PAGE_NAME_UPPER_CAMEL_CASEState {
+  visible: boolean;
+  done: boolean;
+  current?: Partial<CardListItemDataType>;
+}
+
+@connect(
+  ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading,
+  }: {
+    BLOCK_NAME_CAMEL_CASE: IStateType;
+    loading: {
+      models: { [key: string]: boolean };
+    };
+  }) => ({
+    BLOCK_NAME_CAMEL_CASE,
+    loading: loading.models.list,
+  })
+)
+class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
+  PAGE_NAME_UPPER_CAMEL_CASEProps,
+  PAGE_NAME_UPPER_CAMEL_CASEState
+> {
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -59,7 +86,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
         />
       </div>
     );
-
+    const nullData = {} as CardListItemDataType;
     return (
       <PageHeaderWrapper title="卡片列表" content={content} extraContent={extraContent}>
         <div className={styles.cardList}>
@@ -67,7 +94,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
             rowKey="id"
             loading={loading}
             grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
-            dataSource={['', ...list]}
+            dataSource={[nullData, ...list]}
             renderItem={item =>
               item ? (
                 <List.Item key={item.id}>
@@ -76,9 +103,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
                       avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                       title={<a>{item.title}</a>}
                       description={
-                        <Ellipsis className={styles.item} lines={3}>
+                        <Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
                           {item.description}
-                        </Ellipsis>
+                        </Paragraph>
                       }
                     />
                   </Card>
diff --git a/CardList/src/model.js b/CardList/src/model.js
deleted file mode 100644
index ead65a8d..00000000
--- a/CardList/src/model.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { queryFakeList } from './service';
-
-export default {
-  namespace: 'BLOCK_NAME_CAMEL_CASE',
-
-  state: {
-    list: [],
-  },
-
-  effects: {
-    *fetch({ payload }, { call, put }) {
-      const response = yield call(queryFakeList, payload);
-      yield put({
-        type: 'queryList',
-        payload: Array.isArray(response) ? response : [],
-      });
-    },
-  },
-
-  reducers: {
-    queryList(state, action) {
-      return {
-        ...state,
-        list: action.payload,
-      };
-    },
-  },
-};
diff --git a/CardList/src/model.ts b/CardList/src/model.ts
new file mode 100644
index 00000000..141e36c0
--- /dev/null
+++ b/CardList/src/model.ts
@@ -0,0 +1,54 @@
+import { queryFakeList } from './service';
+import { CardListItemDataType } from './data';
+import { Reducer } from 'redux';
+import { EffectsCommandMap } from 'dva';
+import { AnyAction } from 'redux';
+
+export interface IStateType {
+  list: CardListItemDataType[];
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+) => void;
+
+export interface ModelType {
+  namespace: string;
+  state: IStateType;
+  effects: {
+    fetch: Effect;
+  };
+  reducers: {
+    queryList: Reducer<IStateType>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'BLOCK_NAME_CAMEL_CASE',
+
+  state: {
+    list: [],
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryFakeList, payload);
+      yield put({
+        type: 'queryList',
+        payload: Array.isArray(response) ? response : [],
+      });
+    },
+  },
+
+  reducers: {
+    queryList(state, action) {
+      return {
+        ...state,
+        list: action.payload,
+      };
+    },
+  },
+};
+
+export default Model;
diff --git a/CardList/src/service.js b/CardList/src/service.ts
similarity index 61%
rename from CardList/src/service.js
rename to CardList/src/service.ts
index f6d5bc70..cd095a09 100644
--- a/CardList/src/service.js
+++ b/CardList/src/service.ts
@@ -1,6 +1,6 @@
 import request from 'umi-request';
 
-export async function queryFakeList(params) {
+export async function queryFakeList(params: { count: number }) {
   return request(`/api/BLOCK_NAME/fake_list`, {
     params,
   });
diff --git a/CardList/src/style.less b/CardList/src/style.less
index 0094c229..5b8af3c9 100644
--- a/CardList/src/style.less
+++ b/CardList/src/style.less
@@ -36,9 +36,9 @@
 }
 
 .extraImg {
-  margin-top: -60px;
+  margin-top: -20px;
   text-align: center;
-  width: 195px;
+  width: 155px;
   img {
     width: 100%;
   }
diff --git a/package.json b/package.json
index f1297438..74ad06bc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='BasicProfile/src' umi dev",
+    "dev": "cross-env PAGES_PATH='CardList/src' umi dev",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
-- 
GitLab