feat: upgrade color and add custom color panel (#129)

* feat: upgrade tdesign and add dynamic color panel

* feat: upgrade tdesign and add dynamic color panel

.gitignore

@@ -17,7 +17,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-
+# lock
+yarn.lock
+package-lock.json
 
 # code editor setting
 /.vscode

package.json

@@ -57,7 +57,7 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^6.3.0",
     "tdesign-icons-react": "^0.1.6",
-    "tdesign-react": "^0.42.4",
+    "tdesign-react": "^0.43.1",
     "tvision-color": "^1.4.0"
   },
   "browserslist": {

src/components/Board/index.module.less

@@ -1,14 +1,26 @@
 .boardPanelDark {
-  background: var(--td-brand-color)!important;
-  .boardTitle, .boardItemLeft, .boardItemDesc, .trendColorUp, .trendColorDown, .boardItemBottom {
+  background: var(--td-brand-color) !important;
+  .boardTitle,
+  .boardItemLeft,
+  .boardItemDesc,
+  .trendColorUp,
+  .trendColorDown,
+  .boardItemBottom {
     color: var(--td-text-color-anti);
   }
-  .trendIconUp, .trendIconDown {
+  .trendIconUp,
+  .trendIconDown {
     background: var(--td-brand-color-5);
   }
 }
-
-.boardTitle{
+.boardPanel {
+  :global {
+    .t-card__body {
+      padding-top: 0;
+    }
+  }
+}
+.boardTitle {
   line-height: 22px;
   font-size: 14px;
   color: var(--td-text-color-secondary);

src/components/Board/index.tsx

@@ -51,10 +51,10 @@ export const TrendIcon = ({ trend, trendNum }: { trend?: ETrend; trendNum?: stri
 
 const Board = ({ title, count, desc, trend, trendNum, Icon, dark, border }: IBoardProps) => (
   <Card
-    title={<div className={Style.boardTitle}>{title}</div>}
-    header
+    title={<span className={Style.boardTitle}>{title}</span>}
     className={classnames({
       [Style.boardPanelDark]: dark,
+      [Style.boardPanel]: true,
     })}
     bordered={border}
     footer={

src/configs/color.ts

@@ -4,7 +4,6 @@ export const defaultColor = ['#0052d9', '#0594fa', '#00a870', '#ebb105', '#ed7b2
 
 export const darkColor = ['#4582e6', '#29a4fb', '#03a56f', '#ca8d03', '#ed7b2f', '#ea7b84', '#f172c5', '#ab87d5'];
 
-// todo 写法可优化
 export const colorMap: {
   [key: string]: string;
 } = {

src/global.d.ts

@@ -44,7 +44,7 @@ declare module '*.less' {
   export default classes as { readonly [key: string]: string };
 }
 
-declare module 'hex-to-hsl';
+declare module 'tvision-color';
 
 declare interface ImportMeta {
   env: {

src/layouts/components/AppLayout.tsx

@@ -4,12 +4,13 @@ import { ELayout } from 'modules/global';
 import Header from './Header';
 import Footer from './Footer';
 import Menu from './Menu';
+import classnames from 'classnames';
 import Content from './AppRouter';
 
 import Style from './AppLayout.module.less';
 
 const SideLayout = React.memo(() => (
-  <Layout className={Style.sidePanel}>
+  <Layout className={classnames(Style.sidePanel, 'narrow-scrollbar')}>
     <Menu showLogo showOperation />
     <Layout className={Style.sideContainer}>
       <Header />

src/layouts/components/Header/HeaderIcon.module.less

@@ -7,13 +7,13 @@
   :global {
     .t-badge--circle {
       top: 5px;
-      right: 12px;
+      right: 6px;
     }
   }
 }
 .menuIcon {
-  width: 30px!important;
-  height: 30px!important;
+  width: 30px !important;
+  height: 30px !important;
 }
 .dropItem {
   display: flex;
@@ -32,7 +32,7 @@
   }
   :global {
     .t-button--variant-text {
-     padding-left: 9px;
+      padding-left: 9px;
       padding-right: 9px;
     }
     .t-button__text {
@@ -52,4 +52,3 @@
     }
   }
 }
-

src/layouts/components/Menu.tsx

@@ -102,6 +102,7 @@ export default memo((props: IMenuProps) => {
     <Menu
       width='232px'
       style={{ flexShrink: 0, height: '100%' }}
+      className={Style.menuPanel2}
       value={location.pathname}
       theme={globalState.theme}
       collapsed={globalState.collapsed}

src/layouts/components/Setting/RadioColor.tsx

@@ -1,25 +1,67 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultColor } from 'configs/color';
+import { Popup, ColorPickerPanel } from 'tdesign-react';
 import Style from './RadioColor.module.less';
 
 interface IProps {
   defaultValue?: number | string;
   onChange: (color: string) => void;
 }
 
-const RadioColor = (props: IProps) => (
-  <div className={Style.panel}>
-    {defaultColor.map((color, index) => (
-      <div
-        key={index}
-        onClick={() => props?.onChange(color)}
-        className={Style.box}
-        style={{ borderColor: props.defaultValue === color ? color : 'transparent' }}
+const RadioColor = (props: IProps) => {
+  const [isColoPickerDisplay, onPopupVisibleChange] = useState(false);
+
+  return (
+    <div className={Style.panel}>
+      {defaultColor.map((color, index) => (
+        <div
+          key={index}
+          onClick={() => props?.onChange(color)}
+          className={Style.box}
+          style={{ borderColor: props.defaultValue === color && !isColoPickerDisplay ? color : 'transparent' }}
+        >
+          <div className={Style.item} style={{ backgroundColor: color }} />
+        </div>
+      ))}
+
+      <Popup
+        trigger='click'
+        placement='bottom-right'
+        expandAnimation
+        visible={isColoPickerDisplay}
+        onVisibleChange={(v) => onPopupVisibleChange(v)}
+        overlayInnerStyle={{ padding: 0 }}
+        content={
+          <ColorPickerPanel
+            onChange={(v) => props?.onChange(v)}
+            colorModes={['monochrome']}
+            format='HEX'
+            swatchColors={[]}
+            defaultValue={props.defaultValue as string}
+          />
+        }
       >
-        <div className={Style.item} style={{ backgroundColor: color }} />
-      </div>
-    ))}
-  </div>
-);
+        <div
+          key='dynamic'
+          className={Style.box}
+          style={{
+            borderColor:
+              isColoPickerDisplay || defaultColor.indexOf(props.defaultValue as string) === -1
+                ? (props.defaultValue as string)
+                : 'transparent',
+          }}
+        >
+          <div
+            className={Style.item}
+            style={{
+              background:
+                'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)',
+            }}
+          />
+        </div>
+      </Popup>
+    </div>
+  );
+};
 
 export default React.memo(RadioColor);

src/layouts/components/Setting/index.tsx

@@ -68,6 +68,7 @@ export default memo(() => {
       dispatch(openSystemTheme());
     } else {
       dispatch(switchTheme(value));
+      dispatch(switchColor(globalState.color));
     }
   };
 

src/layouts/index.module.less

@@ -1,5 +1,6 @@
 .panel {
   height: 100%;
+
   :global {
     .t-menu--scroll::-webkit-scrollbar {
       width: 8px;
@@ -9,11 +10,18 @@
       border-radius: 6px;
       border: 2px solid transparent;
       background-clip: content-box;
-      background-color: #EEEEEE;
+      background-color: #eeeeee;
     }
-    .t-card__title {
-      font-weight: 700;
-      font-size: 20px;
+
+    .t-default-menu.t-menu--dark {
+      background: var(--td-gray-color-13);
+    }
+    .t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
+      background-color: var(--td-brand-color-1);
+      color: var(--td-brand-color);
+      .t-icon {
+        color: var(--td-brand-color);
+      }
     }
   }
 }

src/modules/global/index.ts

@@ -1,6 +1,8 @@
 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 { generateColorMap, insertThemeStylesheet } from 'utils/color';
 import { RootState } from '../store';
 import { version } from '../../../package.json';
 
@@ -104,7 +106,19 @@ const globalSlice = createSlice({
     switchColor: (state, action) => {
       if (action?.payload) {
         state.color = action?.payload;
-        const colorType = colorMap?.[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);
+        }
+
         document.documentElement.setAttribute('theme-color', colorType || '');
       }
     },

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='(万元)' header actions={LastWeekDatePicker(onTimeChange)}>
+        <Card title='统计数据' subtitle='(万元)' actions={LastWeekDatePicker(onTimeChange)}>
           <ReactEcharts option={dynamicLineChartOption} notMerge={true} lazyUpdate={false} />
         </Card>
       </Col>
       <Col xs={12} xl={3}>
-        <Card title='销售渠道' header subtitle='2021-12'>
+        <Card title='销售渠道' subtitle='2021-12'>
           <ReactEcharts option={dynamicPieChartOption} notMerge={true} lazyUpdate={true} />
         </Card>
       </Col>

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

@@ -44,6 +44,7 @@ const Overview = (): React.ReactElement => {
                   trendNum='20.3%'
                   desc='自从上周以来'
                   border={false}
+                  style={{ height: '168px' }}
                 />
               </Col>
               <Col xl={12} xs={6} span={12}>
@@ -54,6 +55,7 @@ const Overview = (): React.ReactElement => {
                   trendNum='20.5%'
                   desc='自从上周以来'
                   border={false}
+                  style={{ height: '168px' }}
                 />
               </Col>
             </Row>

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} header>
+      <Card title='销售订单排名' actions={DateRadioGroup}>
         <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} header>
+      <Card title='采购订单排名' actions={DateRadioGroup}>
         <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='本月采购申请情况' header>
+  <Card title='本月采购申请情况'>
     <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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Col, Dropdown, Row, Tag, Card } from 'tdesign-react';
-import { Icon } from 'tdesign-icons-react';
+import { Col, Dropdown, Row, Tag, Card, Avatar } from 'tdesign-react';
+import { Icon, AddIcon } from 'tdesign-icons-react';
 import ReactEcharts from 'echarts-for-react';
 import LastWeekDatePicker from 'components/DatePicker';
 import useDynamicChart from 'hooks/useDynamicChart';
@@ -28,14 +28,10 @@ const ProductTrend = ({ type, isSetup, description, name, icon }: IProductTrendP
     <p className={Style.productName}>{name}</p>
     <p className={Style.productDesc}>{description}</p>
     <Row justify='space-between' align='middle'>
-      <div className={Style.iconWrap}>
-        <Button shape='circle' disabled={!isSetup}>
-          {type}
-        </Button>
-        <Button shape='circle' disabled={!isSetup} className={Style.lightBtn}>
-          <Icon name='add' />
-        </Button>
-      </div>
+      <Avatar.Group cascading='left-up' max={2}>
+        <Avatar>{type}</Avatar>
+        <Avatar icon={<AddIcon />}></Avatar>
+      </Avatar.Group>
       <Dropdown
         disabled={!isSetup}
         options={[
@@ -74,7 +70,7 @@ const PurchaseTrend = () => {
   return (
     <Row className={Style.purchaseTrendPanel} gutter={[16, 16]}>
       <Col xs={12} xl={9}>
-        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)} header>
+        <Card title='采购商品申请趋势' subtitle='(件)' actions={LastWeekDatePicker(onTimeChange)}>
           <ReactEcharts
             option={dynamicChartOptions} // option：图表配置项
             notMerge={true}

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

@@ -22,7 +22,6 @@ const Satisfaction = () => {
     <div className={Style.satisfactionPanel}>
       <Card
         title='采购商品满意度分布'
-        header
         actions={
           <div className={Style.operation}>
             {LastWeekDatePicker(onTimeChange)}

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='基本信息' header>
+  <Card title='基本信息'>
     <div className={Style.infoBox}>
       {dataInfo.map((item) => (
         <div key={item.id} className={Style.infoBoxItem}>