feat: 代码优化 (#22)

* feat: 代码优化

* fix: fix card title

* fix: fix color

src/components/Board/index.module.less

@@ -0,0 +1,100 @@
+//.boardPanel {
+//  padding: 24px 32px;
+//  background: var(--td-bg-color-container);
+//  border-radius: 3px;
+//  width: 100%;
+//  display: flex;
+//  flex-direction: column;
+//  height: 168px;
+//  position: relative;
+//}
+
+.boardPanelDark {
+  background: var(--td-brand-color);
+  .boardTitle, .boardItemLeft, .boardItemDesc, .trendColorUp, .trendColorDown, .boardItemBottom {
+    color: var(--td-text-color-anti);
+  }
+  .trendIconUp, .trendIconDown {
+    background: var(--td-brand-color-5);
+  }
+}
+
+.boardTitle {}
+
+//.boardTitle {
+//  display: flex;
+//  justify-content: space-between;
+//  font-size: 14px;
+//  line-height: 22px;
+//  color: var(--td-text-color-secondary);
+//  margin-bottom: 8px;
+//}
+//
+//.boardContainer {
+//  flex: 1;
+//  display: flex;
+//  flex-direction: column;
+//  justify-content: space-between;
+//}
+
+.boardItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.boardItemLeft {
+  display: inline-block;
+  color: var(--td-text-color-primary);
+  font-size: 27px;
+  line-height: 44px;
+}
+
+.boardItemRight {
+}
+
+.boardItemBottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.boardItemIcon {
+  opacity: 0.6;
+}
+
+.boardItemDesc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 22px;
+  color: var(--td-text-color-placeholder);
+}
+
+.trendIcon {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.trendIconUp {
+  background: var(--td-error-color-2);
+}
+
+.trendIconDown {
+  background: var(--td-success-color-2);
+}
+
+.trendColorUp {
+  color: #e34d59;
+  display: flex;
+  align-items: center;
+}
+
+.trendColorDown {
+  color: #00a870;
+  display: flex;
+  align-items: center;
+}

src/components/Board/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ChevronRightIcon } from 'tdesign-icons-react';
+import Card from 'components/Card';
+import classnames from 'classnames';
+import Style from './index.module.less';
+
+type TTrend = 'up' | 'down';
+
+export interface IBoardProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  count?: string;
+  Icon?: React.ReactElement;
+  desc?: string;
+  trend?: TTrend;
+  trendNum?: string;
+  dark?: boolean;
+  border?: boolean;
+}
+
+export const TrendIcon = ({ trend, trendNum }: { trend?: TTrend; trendNum?: string | number }) => (
+  <div
+    className={classnames({
+      [Style.trendColorUp]: trend === 'up',
+      [Style.trendColorDown]: trend === 'down',
+    })}
+  >
+    <div
+      className={classnames(Style.trendIcon, {
+        [Style.trendIconUp]: trend === 'up',
+        [Style.trendIconDown]: trend === 'down',
+      })}
+    >
+      {trend === 'up' ? (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+          <path d='M4.5 8L8 4.5L11.5 8' stroke='currentColor' strokeWidth='1.5' />
+          <path d='M8 5V12' stroke='currentColor' strokeWidth='1.5' />
+        </svg>
+      ) : (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+          <path d='M11.5 8L8 11.5L4.5 8' stroke='currentColor' strokeWidth='1.5' />
+          <path d='M8 11L8 4' stroke='currentColor' strokeWidth='1.5' />
+        </svg>
+      )}
+    </div>
+    {trendNum}
+  </div>
+);
+
+const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border }: IBoardProps) => (
+  <Card
+    title={<div className={Style.boardTitle}>{title}</div>}
+    style={{ height: 160 }}
+    className={classnames({
+      [Style.boardPanelDark]: dark,
+    })}
+    border={border}
+    size='small'
+  >
+    <div className={Style.boardItem}>
+      <div className={Style.boardItemLeft}>{count}</div>
+      <div className={Style.boardItemRight}>{Icon}</div>
+    </div>
+    <div className={Style.boardItemBottom}>
+      <div className={Style.boardItemDesc}>
+        {desc}
+        <TrendIcon trend={trend} trendNum={trendNum} />
+      </div>
+      <ChevronRightIcon className={Style.boardItemIcon} />
+    </div>
+  </Card>
+);
+
+export default React.memo(Board);