feat: generate color by tvision-color (#144)

* feat: generate color by tvision-color

* chore: remove built-in theme

Author: uyarn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-react-starter",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev:mock": "vite --open --mode mock",
@@ -59,7 +59,7 @@
     "react-router-dom": "^6.3.0",
     "tdesign-icons-react": "^0.1.6",
     "tdesign-react": "^0.45.1",
-    "tvision-color": "^1.4.0"
+    "tvision-color": "^1.5.0"
   },
   "browserslist": {
     "production": [

src/components/Board/index.tsx

@@ -49,7 +49,7 @@ export const TrendIcon = ({ trend, trendNum }: { trend?: ETrend; trendNum?: stri
   </div>
 );
 
-const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border }: IBoardProps) => (
+const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border = false }: IBoardProps) => (
   <Card
     title={<span className={Style.boardTitle}>{title}</span>}
     className={classnames({

src/configs/color.ts

@@ -4,27 +4,6 @@ export const defaultColor = ['#0052d9', '#0594fa', '#00a870', '#ebb105', '#ed7b2
 
 export const darkColor = ['#4582e6', '#29a4fb', '#03a56f', '#ca8d03', '#ed7b2f', '#ea7b84', '#f172c5', '#ab87d5'];
 
-export const colorMap: {
-  [key: string]: string;
-} = {
-  '#0052d9': '',
-  '#0594fa': 'cyan',
-  '#00a870': 'green',
-  '#ebb105': 'yellow',
-  '#ed7b2f': 'orange',
-  '#e34d59': 'red',
-  '#ed49b4': 'pink',
-  '#834ec2': 'purple',
-
-  '#4582e6': '',
-  '#29a4fb': 'cyan',
-  '#03a56f': 'green',
-  '#ca8d03': 'yellow',
-  '#ea7b84': 'red',
-  '#f172c5': 'pink',
-  '#ab87d5': 'purple',
-};
-
 export const CHART_COLORS = {
   [ETheme.light]: {
     textColor: 'rgba(0, 0, 0, 0.9)',

src/main.tsx

@@ -7,7 +7,6 @@ import App from 'layouts/index';
 
 import 'tdesign-react/es/style/index.css';
 
-import './styles/theme.less';
 import './styles/index.less';
 
 const env = import.meta.env.MODE || 'development';

src/modules/global/index.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ETheme } from 'types/index.d';
 import { Color } from 'tvision-color';
-import { CHART_COLORS, defaultColor, colorMap } from 'configs/color';
+import { CHART_COLORS, defaultColor } from 'configs/color';
 import { generateColorMap, insertThemeStylesheet } from 'utils/color';
 import { RootState } from '../store';
 import { version } from '../../../package.json';
@@ -108,18 +108,17 @@ const globalSlice = createSlice({
         state.color = action?.payload;
         const mode = state.theme;
 
-        let colorType = colorMap?.[action?.payload];
-        if (!colorType) {
-          colorType = action?.payload;
-          const newPalette = Color.getPaletteByGradation({
-            colors: [colorType],
-            step: 10,
-          })[0];
-          const newColorMap = generateColorMap(colorType, newPalette, mode);
-          insertThemeStylesheet(colorType, newColorMap, mode);
-        }
+        const hex = action?.payload;
 
-        document.documentElement.setAttribute('theme-color', colorType || '');
+        const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
+          colors: [hex],
+          step: 10,
+          remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+        })[0];
+        const newColorMap = generateColorMap(hex, newPalette, mode, brandColorIndex);
+        insertThemeStylesheet(hex, newColorMap, mode);
+
+        document.documentElement.setAttribute('theme-color', hex || '');
       }
     },
     switchLayout: (state, action) => {

src/pages/Dashboard/Base/components/MiddleChart.tsx

@@ -31,12 +31,12 @@ const MiddleChart = () => {
   return (
     <Row gutter={[16, 16]} className={Style.middleChartPanel}>
       <Col xs={12} xl={9}>
-        <Card title='统计数据' subtitle='(万元)' actions={LastWeekDatePicker(onTimeChange)}>
+        <Card title='统计数据' subtitle='(万元)' actions={LastWeekDatePicker(onTimeChange)} bordered={false}>
           <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
         </Card>
       </Col>
       <Col xs={12} xl={3}>
-        <Card title='销售渠道' subtitle='2021-12'>
+        <Card title='销售渠道' subtitle='2021-12' bordered={false}>
           <ReactEcharts option={dynamicPieChartOption} notMerge={true} lazyUpdate={true} />
         </Card>
       </Col>

src/pages/Dashboard/Base/components/RankList.tsx

@@ -118,12 +118,12 @@ const PURCHASE_COLUMNS: TdPrimaryTableProps['columns'] = [
 const RankList = () => (
   <Row gutter={[16, 16]} className={Style.rankListPanel}>
     <Col xs={12} xl={6} span={12}>
-      <Card title='销售订单排名' actions={DateRadioGroup}>
+      <Card title='销售订单排名' actions={DateRadioGroup} bordered={false}>
         <Table columns={SALE_COLUMNS} rowKey='productName' size='medium' data={SALE_TREND_LIST} />
       </Card>
     </Col>
     <Col xs={12} xl={6} span={12}>
-      <Card title='采购订单排名' actions={DateRadioGroup}>
+      <Card title='采购订单排名' actions={DateRadioGroup} bordered={false}>
         <Table columns={PURCHASE_COLUMNS} rowKey='productName' size='medium' data={PURCHASE_TREND_LIST} />
       </Card>
     </Col>

src/pages/Dashboard/Detail/components/MonthPurchase.tsx

@@ -4,7 +4,7 @@ import Board from 'components/Board';
 import { PANE_LIST } from '../constant';
 
 const MonthPurchase = () => (
-  <Card title='本月采购申请情况'>
+  <Card title='本月采购申请情况' bordered={false}>
     <Row gutter={[16, 16]}>
       {PANE_LIST.map((item) => (
         <Col key={item.title} xs={6} xl={3} span={12}>

src/pages/Dashboard/Detail/components/PurchaseTrend.tsx

@@ -70,7 +70,7 @@ const PurchaseTrend = () => {
   return (
     <Row className={Style.purchaseTrendPanel} gutter={[16, 16]}>
       <Col xs={12} xl={9}>
-        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)}>
+        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)} bordered={false}>
           <ReactEcharts
             option={dynamicChartOptions} // option：图表配置项
             notMerge={true}

src/pages/Dashboard/Detail/components/Satisfaction.tsx

@@ -28,6 +28,7 @@ const Satisfaction = () => {
             <Button className={Style.exportBtn}>导出数据</Button>
           </div>
         }
+        bordered={false}
       >
         <ReactEcharts
           option={dynamicChartOption} // option：图表配置项