10 |
11 | 在发布一个 Issue 前，请确保：
12 | - 在 [常见问题](https://tdesign.tencent.com/about/faq)、[更新日志](https://tdesign.tencent.com/about/release) 和 [旧Issue列表](https://github.com/Tencent/tdesign-react-starter/issues?q=is%3Aissue) 中搜索过你的问题。（你的问题可能已有人提出，也可能已在最新版本中被修正）
13 | - 如果你发现一个已经关闭的旧 Issue 在最新版本中仍然存在，不要在旧 Issue 下面留言，请建一个新的 issue。
14 |
15 | - type: input
16 | id: version
17 | attributes:
18 | label: tdesign-react-starter 版本
19 | description: 请检查在最新项目版本中能否重现此 issue。
20 | placeholder: 请填写
21 | validations:
22 | required: true
23 |
24 | - type: input
25 | id: reproduce
26 | attributes:
27 | label: 重现链接
28 | description: 请提供尽可能精简的 CodePen、CodeSandbox 或 GitHub 仓库的链接。请不要填无关链接，否则你的 Issue 将被关闭。
29 | placeholder: 请填写
30 |
31 | - type: textarea
32 | id: reproduceSteps
33 | attributes:
34 | label: 重现步骤
35 | description: 请清晰的描述重现该 Issue 的步骤，这能帮助我们快速定位问题。没有清晰重现步骤将不会被修复，标有 'need reproduction' 的 Issue 在 7 天内不提供相关步骤，将被关闭。
36 | placeholder: 请填写
37 |
38 | - type: textarea
39 | id: expect
40 | attributes:
41 | label: 期望结果
42 | placeholder: 请填写
43 |
44 | - type: textarea
45 | id: actual
46 | attributes:
47 | label: 实际结果
48 | placeholder: 请填写
49 |
50 | - type: input
51 | id: frameworkVersion
52 | attributes:
53 | label: 框架版本
54 | placeholder: Vue(3.2.0)
55 |
56 | - type: input
57 | id: browsersVersion
58 | attributes:
59 | label: 浏览器版本
60 | placeholder: Chrome(8.213.231.123)
61 |
62 | - type: input
63 | id: systemVersion
64 | attributes:
65 | label: 系统版本
66 | placeholder: MacOS(11.2.3)
67 |
68 | - type: input
69 | id: nodeVersion
70 | attributes:
71 | label: Node版本
72 | placeholder: 请填写
73 |
74 | - type: textarea
75 | id: remarks
76 | attributes:
77 | label: 补充说明
78 | description: 可以是遇到这个 bug 的业务场景、上下文等信息。
79 | placeholder: 请填写
80 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: true
2 | contact_links:
3 | - name: 使用 issue-helper 新建
4 | url: https://Tencent.github.io/tdesign/issue-helper/?lang=zh-CN&repo=Tencent/tdesign
5 | about: 使用 https://Tencent.github.io/tdesign/issue-helper/ 创建 issue，其中包含 bug 和 feature，表单提交更加严格。
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml:
--------------------------------------------------------------------------------
1 | name: 反馈新功能
2 | description: 通过 github 模板进行新功能反馈。
3 | title: "[组件名称] 描述问题的标题"
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: |
8 | # 欢迎你的参与
9 | tdesign-react-starter 的 Issue 列表接受 bug 报告或是新功能请求。也可加入官方社区：
30 |
50 | );
51 |
52 | const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border = false }: IBoardProps) => (
53 |
36 | {trend === ETrend.up ? (
37 |
41 | ) : (
42 |
46 | )}
47 |
48 | {trendNum}
49 |
62 |
68 | }
69 | >
70 |
63 | {desc}
64 |
66 |
71 |
74 | {count}
72 | {Icon}
73 |
43 | {info?.icon}
44 |
48 | );
49 | };
50 |
51 | export default memo(ErrorPage);
52 |
--------------------------------------------------------------------------------
/src/configs/color.ts:
--------------------------------------------------------------------------------
1 | import { ETheme } from 'types/index.d';
2 |
3 | export const defaultColor = ['#0052d9', '#0594fa', '#00a870', '#ebb105', '#ed7b2f', '#e34d59', '#ed49b4', '#834ec2'];
4 |
5 | export const darkColor = ['#4582e6', '#29a4fb', '#03a56f', '#ca8d03', '#ed7b2f', '#ea7b84', '#f172c5', '#ab87d5'];
6 |
7 | export const CHART_COLORS = {
8 | [ETheme.light]: {
9 | textColor: 'rgba(0, 0, 0, 0.9)',
10 | placeholderColor: 'rgba(0, 0, 0, 0.35)',
11 | borderColor: '#dcdcdc',
12 | containerColor: '#fff',
13 | },
14 | [ETheme.dark]: {
15 | textColor: 'rgba(255, 255, 255, 0.9)',
16 | placeholderColor: 'rgba(255, 255, 255, 0.35)',
17 | borderColor: '#5e5e5e',
18 | containerColor: '#242424',
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/src/configs/host.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | mock: {
3 | // 本地mock数据
4 | API: '',
5 | },
6 | development: {
7 | // 开发环境接口请求
8 | API: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
9 | },
10 | test: {
11 | // 测试环境接口地址
12 | API: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
13 | },
14 | release: {
15 | // 正式环境接口地址
16 | API: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
17 | },
18 | site: {
19 | // TDesign部署特殊需要 与release功能一致
20 | API: 'https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com',
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.avif' {
2 | export default src as string;
3 | }
4 |
5 | declare module '*.bmp' {
6 | export default src as string;
7 | }
8 |
9 | declare module '*.gif' {
10 | export default src as string;
11 | }
12 |
13 | declare module '*.jpg' {
14 | export default src as string;
15 | }
16 |
17 | declare module '*.jpeg' {
18 | export default src as string;
19 | }
20 |
21 | declare module '*.png' {
22 | export default src as string;
23 | }
24 |
25 | declare module '*.webp' {
26 | export default src as string;
27 | }
28 |
29 | declare module '*.svg' {
30 | export default src as string;
31 | }
32 | declare module '*.svg?component' {
33 | export default src as string;
34 | }
35 | declare module '*.module.css' {
36 | export default classes as { readonly [key: string]: string };
37 | }
38 |
39 | declare module '*.module.less' {
40 | export default classes as { readonly [key: string]: string };
41 | }
42 |
43 | declare module '*.less' {
44 | export default classes as { readonly [key: string]: string };
45 | }
46 |
47 | declare module 'tvision-color';
48 |
49 | declare interface ImportMeta {
50 | env: {
51 | MODE: 'development' | 'test' | 'release' | 'mock' | 'site';
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/hooks/useDynamicChart.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { useAppSelector } from 'modules/store';
3 | import { selectGlobal } from 'modules/global';
4 | import { getChartColor } from 'utils/color';
5 | import { CHART_COLORS } from 'configs/color';
6 | import lodashSet from 'lodash/set';
7 | import lodashMap from 'lodash/map';
8 | import { ETheme } from '../types';
9 |
10 | export type TChartColorKey = keyof (typeof CHART_COLORS)[ETheme.light];
11 | /**
12 | * 根据当前主题色返回动态的图表颜色列表
13 | * @param options 图表的固定配置
14 | * @param configs 需要动态变换颜色的字段
15 | * @returns string[]
16 | */
17 | export default function useDynamicChart(
18 | options: Record{info?.title}
45 | {info?.desc}
46 |
47 |
76 |
79 |
82 |
85 |
25 |
27 | );
28 | } else {
29 | HeaderLeft = (
30 |
20 | {props.collapsed ?
22 | );
23 | });
24 |
--------------------------------------------------------------------------------
/src/layouts/components/Page.module.less:
--------------------------------------------------------------------------------
1 | .panel {
2 | margin: 24px;
3 | padding: 0;
4 | overflow: auto;
5 | }
6 |
7 | .breadcrumb {
8 | margin-bottom: 8px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/layouts/components/Page.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useAppDispatch, useAppSelector } from '../../modules/store';
3 | import { selectGlobal, switchFullPage } from '../../modules/global';
4 | import { Layout, Breadcrumb } from 'tdesign-react';
5 | import Style from './Page.module.less';
6 |
7 | const { Content } = Layout;
8 | const { BreadcrumbItem } = Breadcrumb;
9 |
10 | const Page = ({
11 | children,
12 | isFullPage,
13 | breadcrumbs,
14 | }: React.PropsWithChildren<{ isFullPage?: boolean; breadcrumbs?: string[] }>) => {
15 | const globalState = useAppSelector(selectGlobal);
16 | const dispatch = useAppDispatch();
17 | useEffect(() => {
18 | dispatch(switchFullPage(isFullPage));
19 | }, [isFullPage]);
20 |
21 | if (isFullPage) {
22 | return <>{children};
23 | }
24 |
25 | return (
26 |
16 | {defaultColor.map((color, index) => (
17 | onPopupVisibleChange(v)}
33 | overlayInnerStyle={{ padding: 0 }}
34 | content={
35 | props?.onChange(v)}
37 | colorModes={['monochrome']}
38 | format='HEX'
39 | swatchColors={[]}
40 | defaultValue={props.defaultValue as string}
41 | />
42 | }
43 | >
44 |
63 |
64 | );
65 | };
66 |
67 | export default React.memo(RadioColor);
68 |
--------------------------------------------------------------------------------
/src/layouts/components/Setting/RadioRect.module.less:
--------------------------------------------------------------------------------
1 | .radioRectPanel {
2 | display: flex;
3 | justify-content: space-between;
4 | }
5 |
6 | .rectItem {
7 | border: 2px solid #e3e6eb;
8 | padding: 8px;
9 | border-radius: 3px;
10 | cursor: pointer;
11 | }
12 |
13 | .rectItemSelected {
14 | border-color: var(--td-brand-color);
15 | }
16 |
17 | .rectText {
18 | text-align: center;
19 | font-size: 14px;
20 | margin-top: 8px;
21 | line-height: 21px;
22 | }
23 |
24 | .rectImg {
25 | width: 88px;
26 | height: 48px;
27 | background-size: 100% 100%;
28 | }
29 |
--------------------------------------------------------------------------------
/src/layouts/components/Setting/RadioRect.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useState } from 'react';
2 | import classname from 'classnames';
3 | import Style from './RadioRect.module.less';
4 |
5 | interface IOption {
6 | value?: any;
7 | image: JSX.Element | string;
8 | name?: string;
9 | }
10 |
11 | interface IProps {
12 | defaultValue?: number | string;
13 | onChange: (value?: any) => void;
14 | options: IOption[];
15 | }
16 |
17 | export default memo((props: IProps) => {
18 | const [selectValue, setSelectValue] = useState(props.defaultValue);
19 |
20 | const handleClick = (option: IOption) => {
21 | setSelectValue(option.value);
22 | props?.onChange(option.value);
23 | };
24 |
25 | return (
26 | props?.onChange(color)}
20 | className={Style.box}
21 | style={{ borderColor: props.defaultValue === color && !isColoPickerDisplay ? color : 'transparent' }}
22 | >
23 |
24 |
25 | ))}
26 |
27 |
54 |
61 |
62 |
27 | {props.options.map((item, index) => {
28 | let ImageItem = item.image;
29 | if (typeof item.image === 'string') {
30 | ImageItem = ;
31 | }
32 |
33 | return (
34 |
46 | );
47 | });
48 |
--------------------------------------------------------------------------------
/src/layouts/components/Setting/index.module.less:
--------------------------------------------------------------------------------
1 | .settingTitle {
2 | margin: 32px 0 24px 0;
3 | color: var(--td-text-color-primary);
4 | font-size: 14px;
5 | line-height: 22px;
6 | font-weight: 500;
7 | }
8 |
9 | .settingSubTitle {
10 | font-size: 14px;
11 | line-height: 21px;
12 | margin-bottom: 24px;
13 | }
14 |
--------------------------------------------------------------------------------
/src/layouts/index.module.less:
--------------------------------------------------------------------------------
1 | .panel {
2 | height: 100%;
3 |
4 | :global {
5 | .t-menu--scroll::-webkit-scrollbar {
6 | width: 8px;
7 | background: transparent;
8 | }
9 | .t-menu--scroll::-webkit-scrollbar-thumb {
10 | border-radius: 6px;
11 | border: 2px solid transparent;
12 | background-clip: content-box;
13 | background-color: #eeeeee;
14 | }
15 |
16 | .t-default-menu.t-menu--dark {
17 | background: var(--td-gray-color-13);
18 | }
19 | .t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
20 | background-color: var(--td-brand-color-1);
21 | color: var(--td-brand-color);
22 | .t-icon {
23 | color: var(--td-brand-color);
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/layouts/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useEffect } from 'react';
2 | import { Drawer, Layout } from 'tdesign-react';
3 | import throttle from 'lodash/throttle';
4 | import { useAppSelector, useAppDispatch } from 'modules/store';
5 | import { selectGlobal, toggleSetting, toggleMenu, ELayout, switchTheme } from 'modules/global';
6 | import Setting from './components/Setting';
7 | import AppLayout from './components/AppLayout';
8 | import Style from './index.module.less';
9 |
10 | export default memo(() => {
11 | const globalState = useAppSelector(selectGlobal);
12 | const dispatch = useAppDispatch();
13 |
14 | const AppContainer = AppLayout[globalState.isFullPage ? ELayout.fullPage : globalState.layout];
15 |
16 | useEffect(() => {
17 | dispatch(switchTheme(globalState.theme));
18 | const handleResize = throttle(() => {
19 | if (window.innerWidth < 900) {
20 | dispatch(toggleMenu(true));
21 | } else if (window.innerWidth > 1000) {
22 | dispatch(toggleMenu(false));
23 | }
24 | }, 100);
25 | window.addEventListener('resize', handleResize);
26 | return () => {
27 | window.removeEventListener('resize', handleResize);
28 | };
29 | }, []);
30 |
31 | return (
32 |
35 |
43 | );
44 | })}
45 | handleClick(item)}
38 | >
39 | {ImageItem}
40 |
41 | {item.name && {item.name}
}
42 |
25 |
26 |
28 |
35 |
36 | 导出数据} bordered={false}>
38 |
39 |
62 |
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default React.memo(Overview);
70 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Base/components/RankList.module.less:
--------------------------------------------------------------------------------
1 | .rankListPanel {
2 | margin-top: 16px;
3 | }
4 |
5 | .rankIndex {
6 | display: inline-flex;
7 | width: 24px;
8 | height: 24px;
9 | border-radius: 50%;
10 | color: #fff;
11 | font-size: 14px;
12 | background-color: var(--td-gray-color-5);
13 | align-items: center;
14 | justify-content: center;
15 | font-weight: 700;
16 | }
17 | .rankIndexTop {
18 | background: var(--td-brand-color);
19 | }
20 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Base/components/TopPanel.module.less:
--------------------------------------------------------------------------------
1 | .iconWrap {
2 | display: inline-flex;
3 | align-items: center;
4 | justify-content: center;
5 | width: 56px;
6 | height: 56px;
7 | background: var(--td-brand-color-1);
8 | border-radius: 50%;
9 | position: absolute;
10 | top: 32px;
11 | right: 32px;
12 | }
13 |
14 | .svgIcon {
15 | font-size: 24px;
16 | color: var(--td-brand-color);
17 | }
18 |
19 | .paneLineChart {
20 | width: 103px;
21 | height: 56px;
22 | overflow: hidden;
23 | position: absolute;
24 | top: 55px;
25 | right: 32px;
26 | }
27 | .paneBarChart {
28 | width: 103px;
29 | height: 36px;
30 | -webkit-tap-highlight-color: transparent;
31 | user-select: none;
32 | position: absolute;
33 | top: 55px;
34 | right: 32px;
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Base/components/TopPanel.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { Col, Row } from 'tdesign-react';
3 | import { UsergroupIcon, FileIcon } from 'tdesign-icons-react';
4 | import ReactEcharts from 'echarts-for-react';
5 | import Board, { ETrend, IBoardProps } from 'components/Board';
6 | import useDynamicChart from 'hooks/useDynamicChart';
7 | import { MICRO_CHART_OPTIONS_BAR, MICRO_CHART_OPTIONS_LINE } from '../chart';
8 | import Style from './TopPanel.module.less';
9 |
10 | const BarChartIcon = memo(() => {
11 | const dynamicChartOption = useDynamicChart(MICRO_CHART_OPTIONS_BAR);
12 | return (
13 |
14 |
21 | );
22 | });
23 |
24 | const PieChartIcon = memo(() => (
25 |
26 |
33 | ));
34 |
35 | const PANE_LIST: Array
57 |
59 | ),
60 | },
61 | {
62 | title: '产生订单（个）',
63 | count: '527',
64 | trend: ETrend.down,
65 | trendNum: '20.5%',
66 | Icon: (
67 |
68 |
70 | ),
71 | },
72 | ];
73 |
74 | const TopPanel = () => (
75 |
9 |
14 | );
15 |
16 | export default memo(DashBoard);
17 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Detail/components/MonthPurchase.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Col, Row, Card } from 'tdesign-react';
3 | import Board from 'components/Board';
4 | import { PANE_LIST } from '../constant';
5 |
6 | const MonthPurchase = () => (
7 |
21 |
22 | {isSetup ? '已启用' : '已停用'}
26 |
27 |
28 |
31 |
32 | {type}
33 |
35 | {},
42 | },
43 | {
44 | content: '删除',
45 | value: 'delete',
46 | onClick: () => {},
47 | },
48 | ]}
49 | >
50 |
52 |
53 |
54 | );
55 |
56 | const options = getLineChartOptions();
57 |
58 | const PurchaseTrend = () => {
59 | const [customOptions, setCustomOptions] = useState(options);
60 |
61 | const onTimeChange = (value: Array
23 |
25 | {name}
29 |{description}
30 |
23 |
27 | {LastWeekDatePicker(onTimeChange)}
28 |
29 |
30 | }
31 | bordered={false}
32 | >
33 |
8 |
12 | ));
13 |
--------------------------------------------------------------------------------
/src/pages/Detail/Advanced/components/Base.module.less:
--------------------------------------------------------------------------------
1 | .infoBox {
2 | column-count: 2;
3 | .infoBoxItem {
4 | padding: 12px 0;
5 | display: flex;
6 | color: var(--td-text-color-primary);
7 | h1 {
8 | font-weight: 400;
9 | font-size: 14px;
10 | color: var(--td-text-color-secondary);
11 | text-align: left;
12 | line-height: 22px;
13 | margin: 0;
14 | }
15 | span {
16 | margin-left: 24px;
17 | font-size: 14px;
18 | line-height: 1.5;
19 | overflow: hidden;
20 | white-space: nowrap;
21 | text-overflow: ellipsis;
22 | }
23 | i {
24 | display: inline-block;
25 | width: 8px;
26 | height: 8px;
27 | border-radius: 50%;
28 | background: var(--td-success-color-5);
29 | margin-right: 5px;
30 | }
31 | .inProgress {
32 | color: var(--td-success-color-5);
33 | }
34 | .pdf {
35 | color: var(--td-brand-color);
36 | &:hover {
37 | cursor: pointer;
38 | }
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/Detail/Advanced/components/Base.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Card } from 'tdesign-react';
3 | import classnames from 'classnames';
4 | import { dataInfo } from '../consts';
5 | import Style from './Base.module.less';
6 |
7 | const Base = () => (
8 |
10 | {dataInfo.map((item) => (
11 |
25 |
12 |
23 | ))}
24 | 
20 | 
24 |