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

* feat: generate color by tvision-color * chore: remove built-in theme
Tencent · Jan 17, 2023 · eddfd4e · eddfd4e
1 parent 895dd08
commit eddfd4e
Show file tree

Hide file tree

Showing 22 changed files with 49 additions and 264 deletions.
diff --git a/package.json b/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": [

diff --git a/src/components/Board/index.tsx b/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({

diff --git a/src/configs/color.ts b/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)',

diff --git a/src/main.tsx b/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';

diff --git a/src/modules/global/index.ts b/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) => {

diff --git a/src/pages/Dashboard/Base/components/MiddleChart.tsx b/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>

diff --git a/src/pages/Dashboard/Base/components/RankList.tsx b/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>

diff --git a/src/pages/Dashboard/Detail/components/MonthPurchase.tsx b/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}>

diff --git a/src/pages/Dashboard/Detail/components/PurchaseTrend.tsx b/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}

diff --git a/src/pages/Dashboard/Detail/components/Satisfaction.tsx b/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：图表配置项

diff --git a/src/pages/Detail/Advanced/components/Base.tsx b/src/pages/Detail/Advanced/components/Base.tsx
@@ -5,7 +5,7 @@ import { dataInfo } from '../consts';
 import Style from './Base.module.less';
 
 const Base = () => (
-  <Card title='基本信息'>
+  <Card title='基本信息' bordered={false}>
     <div className={Style.infoBox}>
       {dataInfo.map((item) => (
         <div key={item.id} className={Style.infoBoxItem}>

diff --git a/src/pages/Detail/Advanced/components/Detail.tsx b/src/pages/Detail/Advanced/components/Detail.tsx
@@ -4,7 +4,7 @@ import { dataBuyList, total } from '../consts';
 import Style from '../index.module.less';
 
 const Detail = () => (
-  <Card title='产品采购明细' className={Style.cardBox}>
+  <Card title='产品采购明细' className={Style.cardBox} bordered={false}>
     <Table
       data={dataBuyList}
       columns={[

diff --git a/src/pages/Detail/Advanced/components/Product.tsx b/src/pages/Detail/Advanced/components/Product.tsx
@@ -4,7 +4,7 @@ import ProductCard from './ProductCard';
 import Style from '../index.module.less';
 
 const Product = () => (
-  <Card title='产品目录' className={Style.cardBox}>
+  <Card title='产品目录' className={Style.cardBox} bordered={false}>
     <div>
       <Row gutter={[16, 16]}>
         <Col xs={12} xl={4}>

diff --git a/src/pages/Detail/Advanced/components/Progress.tsx b/src/pages/Detail/Advanced/components/Progress.tsx
@@ -6,7 +6,7 @@ import Style from '../index.module.less';
 const { StepItem } = Steps;
 
 const Progress = () => (
-  <Card title='发票进度' className={Style.cardBox}>
+  <Card title='发票进度' className={Style.cardBox} bordered={false}>
     <Steps current={stepCurrent}>
       {dataStep.map((item) => (
         <StepItem key={item.id} title={item.name} content={item.detail} />

diff --git a/src/pages/Detail/Base/index.tsx b/src/pages/Detail/Base/index.tsx
@@ -8,7 +8,7 @@ const { StepItem } = Steps;
 
 export default memo(() => (
   <div>
-    <Card title='基本信息'>
+    <Card title='基本信息' bordered={false}>
       <div className={classnames(Style.infoBox)}>
         {dataInfo.map((item) => (
           <div key={item.id} className={classnames(Style.infoBoxItem)}>
@@ -26,7 +26,7 @@ export default memo(() => (
         ))}
       </div>
     </Card>
-    <Card title='变更记录' className={Style.logBox}>
+    <Card title='变更记录' className={Style.logBox} bordered={false}>
       <div>
         <Steps layout='vertical' theme='dot' current={1}>
           {dataStep.map((item) => (

diff --git a/src/pages/Detail/Deploy/components/BottomTable.tsx b/src/pages/Detail/Deploy/components/BottomTable.tsx
@@ -54,7 +54,7 @@ const BottomTable = () => {
 
   return (
     <>
-      <Card title='项目列表'>
+      <Card title='项目列表' bordered={false}>
         <Table
           columns={getTableColumns(TABLE_COLUMNS)}
           rowKey='index'

diff --git a/src/pages/Detail/Deploy/components/TopChart.tsx b/src/pages/Detail/Deploy/components/TopChart.tsx
@@ -19,7 +19,7 @@ const TopChart = () => {
   return (
     <Row gutter={16} className={Style.panel}>
       <Col span={6}>
-        <Card title='部署趋势'>
+        <Card title='部署趋势' bordered={false}>
           <div className={Style.deployPanelLeft}>
             <DynamicLineChart />
           </div>
@@ -34,12 +34,13 @@ const TopChart = () => {
               <Radio.Button value='month'>本月</Radio.Button>
             </Radio.Group>
           }
+          bordered={false}
         >
           <ReactEcharts
             option={dynamicBarChartOptions} // option：图表配置项
             notMerge={true}
             lazyUpdate={true}
-            style={{ height: 265 }}
+            style={{ height: 255 }}
           />
         </Card>
       </Col>

diff --git a/src/pages/List/Base/index.tsx b/src/pages/List/Base/index.tsx
@@ -1,27 +1,18 @@
 import React, { useState, memo, useEffect } from 'react';
 import { Table, Tag, Row, Col, Button, Input } from 'tdesign-react';
-import { ChevronUpCircleIcon, SearchIcon, ChevronDownCircleIcon } from 'tdesign-icons-react';
+import { SearchIcon } from 'tdesign-icons-react';
 import classnames from 'classnames';
 import { useAppDispatch, useAppSelector } from 'modules/store';
 import { selectListBase, getList, clearPageState } from 'modules/list/base';
 import CommonStyle from 'styles/common.module.less';
 import style from './index.module.less';
+import { TrendIcon, ETrend } from 'components/Board';
 
 export const PaymentTypeMap: {
   [key: number]: React.ReactElement;
 } = {
-  0: (
-    <>
-      付款
-      <ChevronUpCircleIcon style={{ color: 'red', marginLeft: 4 }} />
-    </>
-  ),
-  1: (
-    <>
-      收款
-      <ChevronDownCircleIcon style={{ color: 'green', marginLeft: 4 }} />
-    </>
-  ),
+  0: <TrendIcon trend={ETrend.down} trendNum='付款' />,
+  1: <TrendIcon trend={ETrend.up} trendNum='收款' />,
 };
 
 export const StatusMap: {

diff --git a/src/pages/List/Card/components/ProductCard.tsx b/src/pages/List/Card/components/ProductCard.tsx
@@ -18,6 +18,7 @@ const ProductCard = ({ product }: { product: IProduct }) => {
   return (
     <Card
       className={Style.panel}
+      bordered={false}
       actions={
         disabled ? (
           <Tag theme='default' disabled={true}>

diff --git a/src/pages/User/index.tsx b/src/pages/User/index.tsx
@@ -23,7 +23,7 @@ const User: React.FC<BrowserRouterProps> = () => {
     <div>
       <Row gutter={[16, 16]}>
         <Col xs={12} lg={12} xl={9}>
-          <Card className={styles.welcome}>
+          <Card className={styles.welcome} bordered={false}>
             <Row justify='space-between'>
               <Col className={styles.name}>
                 Hi，Image <span className={styles.regular}>下午好，今天是你加入鹅厂的第 100 天～</span>
@@ -36,6 +36,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           <Card
             className={styles.userinfo}
             title='个人信息'
+            bordered={false}
             actions={
               <Button shape='square' theme='default' variant='text'>
                 <IconFont name='edit' />
@@ -86,7 +87,7 @@ const User: React.FC<BrowserRouterProps> = () => {
               </Col>
             </Row>
           </Card>
-          <Card className={styles.statistics} title='主页访问数据' subtitle='（次）'>
+          <Card className={styles.statistics} title='主页访问数据' subtitle='（次）' bordered={false}>
             <ReactEcharts option={chartData} notMerge={true} lazyUpdate={true} style={{ height: 360, marginTop: 16 }} />
           </Card>
         </Col>
@@ -100,6 +101,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           </Card>
           <Card
             className={styles.teams}
+            bordered={false}
             title='团队成员'
             actions={
               <Button shape='square' theme='default' variant='text'>
@@ -118,6 +120,7 @@ const User: React.FC<BrowserRouterProps> = () => {
           <Card
             title='服务产品'
             className={styles.product}
+            bordered={false}
             actions={
               <Button shape='square' theme='default' variant='text'>
                 <IconFont name='edit' />