初始化 antd-pro

admin-web/src/components/Result/demo/classic.md

@@ -0,0 +1,80 @@
+---
+order: 1
+title: Classic
+---
+
+典型结果页面。
+
+````jsx
+import Result from 'ant-design-pro/lib/Result';
+import { Button, Row, Col, Icon, Steps } from 'antd';
+
+const { Step } = Steps;
+
+const desc1 = (
+  <div style={{ fontSize: 14, position: 'relative', left: 38 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
+      曲丽丽
+      <Icon type="dingding" style={{ marginLeft: 8 }} />
+    </div>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>2016-12-12 12:32</div>
+  </div>
+);
+
+const desc2 = (
+  <div style={{ fontSize: 14, position: 'relative', left: 38 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
+      周毛毛
+      <Icon type="dingding" style={{ color: '#00A0E9', marginLeft: 8 }} />
+    </div>
+    <div style={{ marginTop: 8, marginBottom: 4 }}><a href="">催一下</a></div>
+  </div>
+);
+
+const extra = (
+  <div>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500, marginBottom: 20 }}>
+      项目名称
+    </div>
+    <Row style={{ marginBottom: 16 }}>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>项目 ID：</span>
+        23421
+      </Col>
+      <Col xs={24} sm={12} md={12} lg={12} xl={6}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>负责人：</span>
+        曲丽丽
+      </Col>
+      <Col xs={24} sm={24} md={24} lg={24} xl={12}>
+        <span style={{ color: 'rgba(0, 0, 0, 0.85)' }}>生效时间：</span>
+        2016-12-12 ~ 2017-12-12
+      </Col>
+    </Row>
+    <Steps progressDot current={1}>
+      <Step title="创建项目" description={desc1} />
+      <Step title="部门初审" description={desc2} />
+      <Step title="财务复核" />
+      <Step title="完成" />
+    </Steps>
+  </div>
+);
+
+const actions = (
+  <div>
+    <Button type="primary">返回列表</Button>
+    <Button>查看项目</Button>
+    <Button>打 印</Button>
+  </div>
+);
+
+ReactDOM.render(
+  <Result
+    type="success"
+    title="提交成功"
+    description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明，如果有类似展示“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
+    extra={extra}
+    actions={actions}
+    style={{ width: '100%' }}
+  />
+, mountNode);
+````

admin-web/src/components/Result/demo/error.md

@@ -0,0 +1,39 @@
+---
+order: 2
+title: Failed
+---
+
+提交失败。
+
+````jsx
+import Result from 'ant-design-pro/lib/Result';
+import { Button, Icon } from 'antd';
+
+const extra = (
+  <div>
+    <div style={{ fontSize: 16, color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500, marginBottom: 16 }}>
+      您提交的内容有如下错误：
+    </div>
+    <div style={{ marginBottom: 16 }}>
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户已被冻结
+      <a style={{ marginLeft: 16 }}>立即解冻 <Icon type="right" /></a>
+    </div>
+    <div>
+      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle" />您的账户还不具备申请资格
+      <a style={{ marginLeft: 16 }}>立即升级 <Icon type="right" /></a>
+    </div>
+  </div>
+);
+
+const actions = <Button type="primary">返回修改</Button>;
+
+ReactDOM.render(
+  <Result
+    type="error"
+    title="提交失败"
+    description="请核对并修改以下信息后，再重新提交。"
+    extra={extra}
+    actions={actions}
+  />
+, mountNode);
+````

admin-web/src/components/Result/demo/structure.md

@@ -0,0 +1,20 @@
+---
+order: 0
+title: Structure
+---
+
+结构包含 `处理结果`，`补充信息` 以及 `操作建议` 三个部分，其中 `处理结果` 由 `提示图标`，`标题` 和 `结果描述` 组成。
+
+````jsx
+import Result from 'ant-design-pro/lib/Result';
+
+ReactDOM.render(
+  <Result
+    type="success"
+    title={<div style={{ background: '#7dbcea', color: '#fff' }}>标题</div>}
+    description={<div style={{ background: 'rgba(16, 142, 233, 1)', color: '#fff' }}>结果描述</div>}
+    extra="其他补充信息，自带灰底效果"
+    actions={<div style={{ background: '#3ba0e9', color: '#fff' }}>操作建议，一般放置按钮组</div>}
+  />
+, mountNode);
+````

admin-web/src/components/Result/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface IResultProps {
+  type: 'success' | 'error';
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  actions?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export default class Result extends React.Component<IResultProps, any> {}

admin-web/src/components/Result/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from 'antd';
+import styles from './index.less';
+
+export default function Result({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+}

admin-web/src/components/Result/index.less

@@ -0,0 +1,58 @@
+@import '~antd/lib/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #fafafa;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}

admin-web/src/components/Result/index.md

@@ -0,0 +1,18 @@
+---
+title: Result
+subtitle: 处理结果
+cols: 1
+order: 12
+---
+
+结果页用于对用户进行的一系列任务处理结果进行反馈。
+
+## API
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - |
+| title       | 标题     | ReactNode  | -    |
+| description | 结果描述    | ReactNode  | -    |
+| extra       | 补充信息，有默认的灰色背景     | ReactNode  | -    |
+| actions     | 操作建议，推荐放置跳转链接，按钮组等    | ReactNode  | -    |