feat(dashboard): 部分UI

mock/dashboard.ts

@@ -0,0 +1,27 @@
+import moment from 'moment';
+import { Request, Response } from 'express';
+import { packResult } from './utils';
+
+// mock data
+const visitData: { date: string; value: number }[] = [];
+const beginDay = new Date().getTime();
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
+for (let i = 0; i < fakeY.length; i += 1) {
+  visitData.push({
+    date: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    value: fakeY[i],
+  });
+}
+
+const getFakeChartData = {
+  visitData
+};
+
+const fetchChartData = (_: Request, res: Response) => {
+  return res.json(packResult(getFakeChartData));
+}
+
+export default {
+  'GET  /api/dashboard/chartData': fetchChartData,
+};

src/pages/dashboard/components/introduce-row/index.less

@@ -0,0 +1,19 @@
+@import '~antd/es/style/themes/default.less';
+
+.content {
+  position: relative;
+  width: 100%;
+  height: 80px;
+}
+
+.contentFixed {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.trendText {
+  margin-left: 8px;
+  color: @heading-color;
+}

src/pages/dashboard/components/introduce-row/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import Card from '@ant-design/pro-card';
+import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+import { Tooltip, Statistic } from 'antd';
+import { TinyArea, TinyColumn, Progress } from '@ant-design/charts';
+import Trend from '../trend';
+import styles from './index.less';
+
+interface IntroduceRowProps {
+  data?: { time: string; value: number }[];
+  loading?: boolean;
+}
+
+const IntroduceRow: React.FC<IntroduceRowProps> = ({
+  loading,
+  data = []
+}) => {
+  return (
+    <Card gutter={8} ghost>
+      <Card
+        title="总销售额"
+        extra={
+          <Tooltip
+            title="指标说明"
+          >
+            <InfoCircleOutlined />
+          </Tooltip>
+        }
+        colSpan={6}
+        loading={loading}
+      >
+        <div className={styles.content}>
+          <Statistic value={126560} prefix="¥" />
+          <div className={styles.contentFixed}>
+            <Trend flag="up" style={{ marginRight: 16 }}>
+              周同比
+              <span className={styles.trendText}>12%</span>
+            </Trend>
+            <Trend flag="down">
+              日同比
+              <span className={styles.trendText}>11%</span>
+            </Trend>
+          </div>
+        </div>
+      </Card>
+      <Card
+        title="访问量"
+        extra={
+          <Tooltip
+            title="指标说明"
+          >
+            <InfoCircleOutlined />
+          </Tooltip>
+        }
+        colSpan={6}
+        loading={loading}
+      >
+        <div className={styles.content}>
+          <Statistic value={8846} />
+          <div className={styles.contentFixed}>
+            <TinyArea
+              color="#975FE4"
+              xField="date"
+              height={46}
+              forceFit
+              yField="value"
+              smooth
+              data={data}
+            />
+          </div>
+        </div>
+      </Card>
+      <Card
+        title="支付笔数"
+        extra={
+          <Tooltip
+            title="指标说明"
+          >
+            <InfoCircleOutlined />
+          </Tooltip>
+        }
+        colSpan={6}
+        loading={loading}
+      >
+        <div className={styles.content}>
+          <Statistic value={6560} />
+          <div className={styles.contentFixed}>
+            <TinyColumn
+              xField="date"
+              height={46}
+              forceFit
+              yField="value"
+              data={data}
+            />
+          </div>
+        </div>
+      </Card>
+      <Card
+        title="运营活动效果"
+        extra={
+          <Tooltip
+            title="指标说明"
+          >
+            <InfoCircleOutlined />
+          </Tooltip>
+        }
+        colSpan={6}
+        loading={loading}
+      >
+        <div className={styles.content}>
+          <Statistic value={78} suffix="%" />
+          <div className={styles.contentFixed}>
+            <Progress
+              height={46}
+              percent={0.78}
+              color="#13C2C2"
+              forceFit
+              size={8}
+              marker={[
+                {
+                  value: 0.8,
+                  style: {
+                    stroke: '#13C2C2',
+                  },
+                }
+              ]}
+            />
+          </div>
+        </div>
+      </Card>
+    </Card>
+  )
+}
+
+export default IntroduceRow;

src/pages/dashboard/components/sales-card/index.less

@@ -0,0 +1,45 @@
+@import '~antd/es/style/themes/default.less';
+
+.salesExtra {
+  display: inline-block;
+  margin-right: 24px;
+}
+
+.salesCard {
+  .salesBar {
+    padding: 0 0 32px 32px;
+  }
+  .salesRank {
+    padding: 0 32px 32px 72px;
+  }
+  :global {
+    .ant-tabs-bar {
+      padding-left: 16px;
+      .ant-tabs-nav .ant-tabs-tab {
+        padding-top: 16px;
+        padding-bottom: 14px;
+        line-height: 24px;
+      }
+    }
+    .ant-tabs-extra-content {
+      padding-right: 24px;
+      line-height: 55px;
+    }
+    .ant-card-head {
+      position: relative;
+    }
+    .ant-card-head-title {
+      align-items: normal;
+    }
+  }
+}
+
+.salesCardExtra {
+  height: inherit;
+}
+
+.salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}

src/pages/dashboard/components/sales-card/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Card from '@ant-design/pro-card';
+import { DaysRange } from '@alitajs/antd-plus';
+import styles from './index.less';
+
+const SalesCard: React.FC = () => {
+  return (
+    <Card
+      bordered={false}
+      tabs={{
+        type: 'line',
+        tabBarExtraContent: (
+          <DaysRange.Fast
+            className={styles.salesExtra}
+            buttonStyle="outline"
+            marks={['day', 'week', 'month', 'year']}
+          />
+        )
+      }}
+    >
+      <Card.TabPane key="sales" tab="销售额">
+        内容一
+      </Card.TabPane>
+      <Card.TabPane key="views" tab="访问量">
+        内容二
+      </Card.TabPane>
+    </Card>
+  )
+}
+
+export default SalesCard;

src/pages/dashboard/components/trend/index.less

@@ -0,0 +1,37 @@
+@import '~antd/es/style/themes/default.less';
+
+.trendItem {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    position: relative;
+    top: 1px;
+    margin-left: 4px;
+    span {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+  .up {
+    color: @red-6;
+  }
+  .down {
+    top: -1px;
+    color: @green-6;
+  }
+
+  &.trendItemGrey .up,
+  &.trendItemGrey .down {
+    color: @text-color;
+  }
+
+  &.reverseColor .up {
+    color: @green-6;
+  }
+  &.reverseColor .down {
+    color: @red-6;
+  }
+}

src/pages/dashboard/components/trend/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import classNames from 'classnames';
+import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
+import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
+import styles from './index.less';
+
+export interface TrendProps {
+  className?: string;
+  style?: React.CSSProperties;
+  flag: 'up' | 'down';
+  colorful?: boolean;
+  reverseColor?: boolean;
+}
+
+const Trend: React.FC<TrendProps> = ({
+  className,
+  style,
+  flag,
+  colorful,
+  reverseColor,
+  children
+}) => {
+  const cls = classNames(
+    styles.trendItem,
+    {
+      [styles.trendItemGrey]: !colorful,
+      [styles.reverseColor]: reverseColor && colorful,
+    },
+    className,
+  );
+
+  return (
+    <div className={cls} style={style}>
+      <span>{children}</span>
+      {flag && (
+        <span className={styles[flag]}>
+          {flag === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />}
+        </span>
+      )}
+    </div>
+  )
+}
+
+Trend.defaultProps = {
+  colorful: true,
+  reverseColor: false
+}
+
+export default Trend;