From cb945dbc09269934ec16ed8324bd88806289f537 Mon Sep 17 00:00:00 2001
From: yuyang <uyarnchen@gmail.com>
Date: Tue, 10 Jan 2023 16:24:10 +0800
Subject: [PATCH] feat(color): remove built-in theme and get palette from
 tvision color (#218)

* feat(color): remove built-in theme and get palette from tvision color

* feat: card with default nobordered
---
 src/components/color/index.vue                |   6 +-
 src/components/product-card/index.vue         |   2 +-
 src/config/color.ts                           | 232 ++----------------
 src/config/style.ts                           |   3 +-
 src/layouts/setting.vue                       |  36 +--
 .../dashboard/base/components/MiddleChart.vue |   4 +-
 .../base/components/OutputOverview.vue        |   2 +-
 .../dashboard/base/components/RankList.vue    |   4 +-
 .../dashboard/base/components/TopPanel.vue    |   1 +
 src/pages/dashboard/detail/index.vue          |   6 +-
 src/pages/detail/advanced/index.vue           |   8 +-
 src/pages/detail/base/index.vue               |   4 +-
 src/pages/detail/deploy/index.vue             |   6 +-
 src/pages/form/base/index.vue                 |   2 +-
 src/pages/form/step/index.vue                 |   2 +-
 src/pages/list/base/index.vue                 |   2 +-
 src/pages/list/filter/index.vue               |   2 +-
 src/pages/list/tree/index.vue                 |   2 +-
 src/pages/user/index.vue                      |  10 +-
 src/store/modules/setting.ts                  |  20 +-
 src/style/index.less                          |   3 +-
 src/style/theme/cyan.less                     |  27 --
 src/style/theme/default.less                  |  26 --
 src/style/theme/green.less                    |  26 --
 src/style/theme/index.less                    |  15 --
 src/style/theme/orange.less                   |  28 ---
 src/style/theme/pink.less                     |  27 --
 src/style/theme/purple.less                   |  27 --
 src/style/theme/red.less                      |  27 --
 src/style/theme/yellow.less                   |  27 --
 src/utils/color.ts                            | 108 +++++---
 31 files changed, 162 insertions(+), 533 deletions(-)
 delete mode 100644 src/style/theme/cyan.less
 delete mode 100644 src/style/theme/default.less
 delete mode 100644 src/style/theme/green.less
 delete mode 100644 src/style/theme/index.less
 delete mode 100644 src/style/theme/orange.less
 delete mode 100644 src/style/theme/pink.less
 delete mode 100644 src/style/theme/purple.less
 delete mode 100644 src/style/theme/red.less
 delete mode 100644 src/style/theme/yellow.less

diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index d83e34e..cbc41d3 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -2,7 +2,7 @@
   <div :style="style" class="color-container" />
 </template>
 <script lang="ts">
-import { getBrandColor } from '@/config/color';
+import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 
 const panelColor =
   '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)';
@@ -17,9 +17,9 @@ export default {
   },
   computed: {
     style() {
-      const { colorList } = this.$store.state.setting;
+      const { value } = this;
       return {
-        background: this.value !== 'dynamic' ? getBrandColor(this.value, colorList)['--td-brand-color'] : panelColor,
+        background: DEFAULT_COLOR_OPTIONS.indexOf(value) > -1 ? value : panelColor,
       };
     },
   },
diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue
index 7e7fac5..fb97173 100644
--- a/src/components/product-card/index.vue
+++ b/src/components/product-card/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card theme="poster2">
+  <t-card theme="poster2" :bordered="false">
     <template #avatar>
       <t-avatar size="56px">
         <template #icon>
diff --git a/src/config/color.ts b/src/config/color.ts
index bc2c31c..300ac1d 100644
--- a/src/config/color.ts
+++ b/src/config/color.ts
@@ -1,228 +1,30 @@
-import { Color } from 'tvision-color';
-/* eslint-disable indent */
-export type ColorToken = Record<string, string>;
-export type ColorSeries = Record<string, ColorToken>;
+export type TColorToken = Record<string, string>;
+export type TColorSeries = Record<string, TColorToken>;
 
-export const defaultLightColor = [
-  '#0052d9',
-  '#0594fa',
-  '#00a870',
-  '#ebb105',
-  '#ed7b2f',
-  '#e34d59',
-  '#ed49b4',
-  '#834ec2',
-];
-export const defaultDarkColor = [
-  '#4582e6',
-  '#29a4fb',
-  '#03a56f',
-  '#ca8d03',
-  '#ed7b2f',
-  '#ea7b84',
-  '#f172c5',
-  '#ab87d5',
-];
-
-export const COLOR_TOKEN: ColorSeries = {
-  DEFAULT: {
-    '--td-brand-color': '#0052d9',
-    '--td-brand-color-1': '#f2f3ff',
-    '--td-brand-color-2': '#d9e1ff',
-    '--td-brand-color-3': '#b5c7ff',
-    '--td-brand-color-4': '#8eabff',
-    '--td-brand-color-5': '#618dff',
-    '--td-brand-color-6': '#366ef4',
-    '--td-brand-color-7': '#0052d9',
-    '--td-brand-color-8': '#003cab',
-    '--td-brand-color-9': '#002a7c',
-    '--td-brand-color-10': '#001a57',
-  },
-
-  CYAN: {
-    '--td-brand-color': '#0594FA',
-    '--td-brand-color-1': '#d7eefe',
-    '--td-brand-color-2': '#aeddfd',
-    '--td-brand-color-3': '#84cafd',
-    '--td-brand-color-4': '#58b8fc',
-    '--td-brand-color-5': '#29a4fb',
-    '--td-brand-color-6': '#0594FA',
-    '--td-brand-color-7': '#29a4fb',
-    '--td-brand-color-8': '#0594FA',
-    '--td-brand-color-9': '#0378df',
-    '--td-brand-color-10': '#01409b',
-  },
-  GREEN: {
-    '--td-brand-color': '#00A870',
-    '--td-brand-color-1': '#8dffd9',
-    '--td-brand-color-2': '#00f2a2',
-    '--td-brand-color-3': '#00dc92',
-    '--td-brand-color-4': '#00c583',
-    '--td-brand-color-5': '#00A870',
-    '--td-brand-color-6': '#009a5d',
-    '--td-brand-color-7': '#00c583',
-    '--td-brand-color-8': '#00A870',
-    '--td-brand-color-9': '#009a5d',
-    '--td-brand-color-10': '#004a14',
-  },
-  ORANGE: {
-    '--td-brand-color': '#ED7B2F',
-    '--td-brand-color-1': '#fce5d7',
-    '--td-brand-color-2': '#f8cdaf',
-    '--td-brand-color-3': '#f4b285',
-    '--td-brand-color-4': '#f19659',
-    '--td-brand-color-5': '#ED7B2F',
-    '--td-brand-color-6': '#e75510',
-    '--td-brand-color-7': '#f19659',
-    '--td-brand-color-8': '#ED7B2F',
-    '--td-brand-color-9': '#e75510',
-    '--td-brand-color-10': '#7f0a02',
-  },
-  RED: {
-    '--td-brand-color': '#E34D59',
-    '--td-brand-color-1': '#fbe5e7',
-    '--td-brand-color-2': '#f7ccd0',
-    '--td-brand-color-3': '#f3b2b8',
-    '--td-brand-color-4': '#ef989f',
-    '--td-brand-color-5': '#ea7b84',
-    '--td-brand-color-6': '#E34D59',
-    '--td-brand-color-7': '#ea7b84',
-    '--td-brand-color-8': '#E34D59',
-    '--td-brand-color-9': '#e42c3a',
-    '--td-brand-color-10': '#8d0309',
-  },
-  PINK: {
-    '--td-brand-color': '#ED49B4',
-    '--td-brand-color-1': '#fce5f4',
-    '--td-brand-color-2': '#facae9',
-    '--td-brand-color-3': '#f7aede',
-    '--td-brand-color-4': '#f491d2',
-    '--td-brand-color-5': '#f172c5',
-    '--td-brand-color-6': '#ED49B4',
-    '--td-brand-color-7': '#f172c5',
-    '--td-brand-color-8': '#ED49B4',
-    '--td-brand-color-9': '#e80f9d',
-    '--td-brand-color-10': '#8f025e',
-  },
-  PURPLE: {
-    '--td-brand-color': '#834EC2',
-    '--td-brand-color-1': '#eee6f7',
-    '--td-brand-color-2': '#ddceee',
-    '--td-brand-color-3': '#ccb6e6',
-    '--td-brand-color-4': '#bb9edc',
-    '--td-brand-color-5': '#ab87d5',
-    '--td-brand-color-6': '#9a6fce',
-    '--td-brand-color-7': '#9a6fce',
-    '--td-brand-color-8': '#834EC2',
-    '--td-brand-color-9': '#783ac3',
-    '--td-brand-color-10': '#4c1397',
-  },
-  YELLOW: {
-    '--td-brand-color': '#EBB105',
-    '--td-brand-color-1': '#fde9ab',
-    '--td-brand-color-2': '#fbd152',
-    '--td-brand-color-3': '#EBB105',
-    '--td-brand-color-4': '#dda204',
-    '--td-brand-color-5': '#ca8d03',
-    '--td-brand-color-6': '#b67803',
-    '--td-brand-color-7': '#fbd152',
-    '--td-brand-color-8': '#EBB105',
-    '--td-brand-color-9': '#dda204',
-    '--td-brand-color-10': '#603100',
-  },
-};
-
-export const LIGHT_CHART_COLORS: ColorToken = {
+// TODO: 中性色暂时固定 待tvision-color生成带色彩倾向的中性色
+export const LIGHT_CHART_COLORS = {
   textColor: 'rgba(0, 0, 0, 0.9)',
   placeholderColor: 'rgba(0, 0, 0, 0.35)',
   borderColor: '#dcdcdc',
   containerColor: '#fff',
 };
 
-export const DARK_CHART_COLORS: ColorToken = {
+export const DARK_CHART_COLORS = {
   textColor: 'rgba(255, 255, 255, 0.9)',
   placeholderColor: 'rgba(255, 255, 255, 0.35)',
   borderColor: '#5e5e5e',
   containerColor: '#242424',
 };
 
-function toUnderline(name: string): string {
-  return name.replace(/([A-Z])/g, '_$1').toUpperCase();
-}
-
-export function getBrandColor(type: string, colorList: ColorSeries): ColorToken {
-  const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type);
-  return colorList[name || 'DEFAULT'];
-}
-
-export function getColorList(colorArray: Array<ColorToken>): Array<string> {
-  const pureColorList = [];
-  colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
-
-  return pureColorList;
-}
-// inspired by https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex
-export function hslToHex(h: number, s: number, l: number) {
-  l /= 100;
-  const a = (s * Math.min(l, 1 - l)) / 100;
-  const f = (n: number) => {
-    const k = (n + h / 30) % 12;
-    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    return Math.round(255 * color)
-      .toString(16)
-      .padStart(2, '0');
-  };
-  return `#${f(0)}${f(8)}${f(4)}`;
-}
-
-export function generateColorMap(theme: string, colorPalette: Array<string>, mode: 'light' | 'dark') {
-  const isDarkMode = mode === 'dark';
-  let brandColorIdx = colorPalette.indexOf(theme);
-
-  if (isDarkMode) {
-    // eslint-disable-next-line no-use-before-define
-    colorPalette.reverse().map((color) => {
-      const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
-      return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
-    });
-    brandColorIdx = 5;
-    colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
-  }
-
-  const colorMap = {
-    '--td-brand-color': colorPalette[brandColorIdx], // 主题色
-    '--td-brand-color-1': colorPalette[0], // light
-    '--td-brand-color-2': colorPalette[1], // focus
-    '--td-brand-color-3': colorPalette[2], // disabled
-    '--td-brand-color-4': colorPalette[3],
-    '--td-brand-color-5': colorPalette[4],
-    '--td-brand-color-6': colorPalette[5],
-    '--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
-    '--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
-    '--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
-    '--td-brand-color-10': colorPalette[9],
-  };
-  return colorMap;
-}
-export function insertThemeStylesheet(theme: string, colorMap: ColorToken, mode: 'light' | 'dark') {
-  const isDarkMode = mode === 'dark';
-  const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
-
-  const styleSheet = document.createElement('style');
-  styleSheet.type = 'text/css';
-  styleSheet.innerText = `${root}{
-    --td-brand-color: ${colorMap['--td-brand-color']};
-    --td-brand-color-1: ${colorMap['--td-brand-color-1']};
-    --td-brand-color-2: ${colorMap['--td-brand-color-2']};
-    --td-brand-color-3: ${colorMap['--td-brand-color-3']};
-    --td-brand-color-4: ${colorMap['--td-brand-color-4']};
-    --td-brand-color-5: ${colorMap['--td-brand-color-5']};
-    --td-brand-color-6: ${colorMap['--td-brand-color-6']};
-    --td-brand-color-7: ${colorMap['--td-brand-color-7']};
-    --td-brand-color-8: ${colorMap['--td-brand-color-8']};
-    --td-brand-color-9: ${colorMap['--td-brand-color-9']};
-    --td-brand-color-10: ${colorMap['--td-brand-color-10']};
-  }`;
-
-  document.head.appendChild(styleSheet);
-}
+export type TChartColor = typeof LIGHT_CHART_COLORS;
+
+export const DEFAULT_COLOR_OPTIONS = [
+  '#0052D9',
+  '#0594FA',
+  '#00A870',
+  '#EBB105',
+  '#ED7B2F',
+  '#E34D59',
+  '#ED49B4',
+  '#834EC2',
+];
diff --git a/src/config/style.ts b/src/config/style.ts
index 3de08f3..b652f5a 100644
--- a/src/config/style.ts
+++ b/src/config/style.ts
@@ -10,6 +10,5 @@ export default {
   isHeaderFixed: true,
   isUseTabsRouter: false,
   showHeader: true,
-  backgroundTheme: 'blueGrey',
-  brandTheme: 'default',
+  brandTheme: '#0052D9',
 };
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 6abce26..ff71218 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -24,11 +24,7 @@
           </t-radio-group>
           <div class="setting-group-title">主题色</div>
           <t-radio-group v-model="formData.brandTheme">
-            <div
-              v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
-              :key="index"
-              class="setting-layout-drawer"
-            >
+            <div v-for="(item, index) in DEFAULT_COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
               <t-radio-button :key="index" :value="item" class="setting-layout-color-group">
                 <color-container :value="item" />
               </t-radio-button>
@@ -50,11 +46,8 @@
                     format="HEX"
                     :swatch-colors="[]"
                 /></template>
-                <t-radio-button
-                  :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]"
-                  class="setting-layout-color-group dynamic-color-btn"
-                >
-                  <color-container :value="COLOR_OPTIONS[COLOR_OPTIONS.length - 1]" />
+                <t-radio-button :value="dynamicColor" :class="['setting-layout-color-group', 'dynamic-color-btn']">
+                  <color-container :value="dynamicColor" />
                 </t-radio-button>
               </t-popup>
             </div>
@@ -113,7 +106,8 @@ import { Color } from 'tvision-color';
 import { PopupVisibleChangeContext } from 'tdesign-vue';
 
 import STYLE_CONFIG from '@/config/style';
-import { insertThemeStylesheet, generateColorMap } from '@/config/color';
+import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
+import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 
 import Thumbnail from '@/components/thumbnail/index.vue';
 import ColorContainer from '@/components/color/index.vue';
@@ -123,7 +117,7 @@ import SettingLightIcon from '@/assets/assets-setting-light.svg';
 import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
 
 const LAYOUT_OPTION = ['side', 'top', 'mix'];
-const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic'];
+
 const MODE_OPTIONS = [
   { type: 'light', text: '明亮' },
   { type: 'dark', text: '暗黑' },
@@ -140,7 +134,7 @@ export default {
       },
       MODE_OPTIONS,
       LAYOUT_OPTION,
-      COLOR_OPTIONS,
+      DEFAULT_COLOR_OPTIONS,
       visible: false,
       formData: { ...STYLE_CONFIG },
       isColoPickerDisplay: false,
@@ -162,10 +156,15 @@ export default {
     showOthers() {
       return (this.formData.showFooter && !this.formData.isSidebarFixed) || !this.formData.splitMenu;
     },
+    dynamicColor() {
+      const isDynamic = DEFAULT_COLOR_OPTIONS.indexOf(this.formData.brandTheme) === -1;
+      return isDynamic ? this.formData.brandTheme : '';
+    },
   },
   watch: {
     formData: {
       handler(newVal) {
+        if (!newVal.brandTheme) return;
         // 没有在formData中 需要从store中同步过来
         const { isSidebarCompact } = this.$store.state.setting;
         this.$store.dispatch('setting/changeTheme', { ...newVal, isSidebarCompact });
@@ -224,19 +223,20 @@ export default {
     changeColor(hex: string) {
       const { setting } = this.$store.state;
 
-      // hex 主题色
-      const newPalette = Color.getPaletteByGradation({
+      const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
         colors: [hex],
         step: 10,
+        remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
       })[0];
+
       const { mode } = this.$store.state.setting;
-      const colorMap = generateColorMap(hex, newPalette, mode);
+      const colorMap = generateColorMap(hex, newPalette, mode, brandColorIndex);
+      this.formData.brandTheme = hex;
 
       this.$store.commit('setting/addColor', { [hex]: colorMap });
+      this.$store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
 
       insertThemeStylesheet(hex, colorMap, mode);
-
-      this.$store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
     },
   },
 };
diff --git a/src/pages/dashboard/base/components/MiddleChart.vue b/src/pages/dashboard/base/components/MiddleChart.vue
index 299f6df..b1f5a35 100644
--- a/src/pages/dashboard/base/components/MiddleChart.vue
+++ b/src/pages/dashboard/base/components/MiddleChart.vue
@@ -1,7 +1,7 @@
 <template>
   <t-row :gutter="[16, 16]">
     <t-col :xs="12" :xl="9">
-      <t-card title="统计数据" subtitle="(万元)" class="dashboard-chart-card">
+      <t-card title="统计数据" subtitle="(万元)" class="dashboard-chart-card" :bordered="false">
         <template #actions>
           <div class="dashboard-chart-title-container">
             <t-date-range-picker
@@ -21,7 +21,7 @@
       </t-card>
     </t-col>
     <t-col :xs="12" :xl="3">
-      <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card">
+      <t-card title="销售渠道" :subtitle="currentMonth" class="dashboard-chart-card" :bordered="false">
         <div
           id="countContainer"
           ref="countContainer"
diff --git a/src/pages/dashboard/base/components/OutputOverview.vue b/src/pages/dashboard/base/components/OutputOverview.vue
index 5cc9c62..befb99c 100644
--- a/src/pages/dashboard/base/components/OutputOverview.vue
+++ b/src/pages/dashboard/base/components/OutputOverview.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card>
+  <t-card :bordered="false">
     <t-row>
       <t-col :xs="12" :xl="9">
         <t-card
diff --git a/src/pages/dashboard/base/components/RankList.vue b/src/pages/dashboard/base/components/RankList.vue
index 6d49a5e..e8a4020 100644
--- a/src/pages/dashboard/base/components/RankList.vue
+++ b/src/pages/dashboard/base/components/RankList.vue
@@ -1,7 +1,7 @@
 <template>
   <t-row :gutter="[16, 16]">
     <t-col :xs="12" :xl="6">
-      <t-card title="销售订单排名" class="dashboard-rank-card">
+      <t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
         <template #actions>
           <t-radio-group default-value="dateVal">
             <t-radio-button value="dateVal">本周</t-radio-button>
@@ -24,7 +24,7 @@
       </t-card>
     </t-col>
     <t-col :xs="12" :xl="6">
-      <t-card title="采购订单排名" class="dashboard-rank-card">
+      <t-card title="采购订单排名" class="dashboard-rank-card" :bordered="false">
         <template #actions>
           <t-radio-group default-value="dateVal">
             <t-radio-button value="dateVal">本周</t-radio-button>
diff --git a/src/pages/dashboard/base/components/TopPanel.vue b/src/pages/dashboard/base/components/TopPanel.vue
index 2c87b42..53482af 100644
--- a/src/pages/dashboard/base/components/TopPanel.vue
+++ b/src/pages/dashboard/base/components/TopPanel.vue
@@ -2,6 +2,7 @@
   <t-row :gutter="[16, 16]">
     <t-col :xs="6" :xl="3" v-for="(item, index) in panelList" :key="item.title">
       <t-card
+        :bordered="false"
         :title="item.title"
         :style="{ height: '168px' }"
         :class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }"
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index 4784b09..8719a1b 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard-detail">
-    <t-card title="本月采购申请情况" class="dashboard-detail-card">
+    <t-card title="本月采购申请情况" class="dashboard-detail-card" :bordered="false">
       <t-row :gutter="[16, 16]">
         <t-col v-for="(item, index) in PANE_LIST_DATA" :key="index" :xs="6" :xl="3">
           <t-card :class="['dashboard-list-card']" :description="item.title">
@@ -18,7 +18,7 @@
     </t-card>
     <t-row :gutter="[16, 16]" class="row-margin">
       <t-col :xs="12" :xl="9">
-        <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品申请趋势" subtitle="(件)">
+        <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品申请趋势" subtitle="(件)" :bordered="false">
           <template #actions>
             <t-date-range-picker
               style="width: 250px"
@@ -40,7 +40,7 @@
         />
       </t-col>
     </t-row>
-    <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品满意度分布" class="row-margin">
+    <t-card :class="{ 'dashboard-detail-card': true }" title="采购商品满意度分布" class="row-margin" :bordered="false">
       <template #actions>
         <t-date-range-picker
           style="display: inline-block; margin-right: 8px; width: 250px"
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index 39e883c..f3834d2 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="detail-advanced">
-    <t-card title="基本信息" class="advanced-card">
+    <t-card title="基本信息" class="advanced-card" :bordered="false">
       <div class="info-block">
         <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -18,7 +18,7 @@
     </t-card>
 
     <!-- 发票进度 -->
-    <t-card title="发票进度" class="container-base-margin-top">
+    <t-card title="发票进度" class="container-base-margin-top" :bordered="false">
       <t-row :class="prefix + '-operator-row row-padding'" justify="space-between">
         <template>
           <t-steps :current="updateCurrent">
@@ -32,7 +32,7 @@
     </t-card>
 
     <!-- 产品目录 -->
-    <t-card title="产品目录" class="container-base-margin-top">
+    <t-card title="产品目录" class="container-base-margin-top" :bordered="false">
       <template slot="option">
         <t-radio-group default-value="dateVal" @change="onAlertChange">
           <t-radio-button value="dateVal">季度</t-radio-button>
@@ -56,7 +56,7 @@
     </t-card>
 
     <!-- 产品采购明细 -->
-    <t-card title="产品采购明细" class="container-base-margin-top">
+    <t-card title="产品采购明细" class="container-base-margin-top" :bordered="false">
       <t-table
         :columns="columns"
         :data="data"
diff --git a/src/pages/detail/base/index.vue b/src/pages/detail/base/index.vue
index 947b7bc..72c4261 100644
--- a/src/pages/detail/base/index.vue
+++ b/src/pages/detail/base/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="detail-base">
-    <t-card title="基本信息">
+    <t-card title="基本信息" :bordered="false">
       <div class="info-block">
         <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
           <h1>{{ item.name }}</h1>
@@ -17,7 +17,7 @@
       </div>
     </t-card>
 
-    <t-card title="变更记录" class="container-base-margin-top">
+    <t-card title="变更记录" class="container-base-margin-top" :bordered="false">
       <t-steps class="detail-base-info-steps" layout="vertical" theme="dot" :current="1">
         <t-step-item title="上传合同附件" content="这里是提示文字" />
         <t-step-item title="修改合同金额" content="这里是提示文字" />
diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue
index 50b65bf..3cfcaab 100644
--- a/src/pages/detail/deploy/index.vue
+++ b/src/pages/detail/deploy/index.vue
@@ -2,14 +2,14 @@
   <div class="detail-deploy">
     <t-row :gutter="12">
       <t-col :lg="6" :xs="12">
-        <t-card title="部署趋势">
+        <t-card title="部署趋势" :bordered="false">
           <div class="deploy-panel-left">
             <div id="monitorContainer" style="width: 100%; height: 265px" />
           </div>
         </t-card>
       </t-col>
       <t-col :lg="6" :xs="12">
-        <t-card title="告警情况">
+        <t-card title="告警情况" :bordered="false">
           <template #option>
             <t-radio-group default-value="dateVal" @change="onAlertChange">
               <t-radio-button value="dateVal"> 本周 </t-radio-button>
@@ -22,7 +22,7 @@
     </t-row>
 
     <!-- 项目列表 -->
-    <t-card title="项目列表" class="container-base-margin-top">
+    <t-card title="项目列表" class="container-base-margin-top" :bordered="false">
       <t-table
         :columns="columns"
         :data="data"
diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue
index 201b352..9006a73 100644
--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card>
+  <t-card :bordered="false">
     <t-form
       ref="form"
       :data="formData"
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index 56081b1..65ef18f 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card>
+  <t-card :bordered="false">
     <div class="form-step-container">
       <!-- 简单步骤条 -->
       <t-card :bordered="false">
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index f25d128..4802c7d 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <t-card class="list-card-container">
+    <t-card class="list-card-container" :bordered="false">
       <t-row justify="space-between">
         <div class="left-operation-container">
           <t-button @click="handleSetupContract"> 新建合同 </t-button>
diff --git a/src/pages/list/filter/index.vue b/src/pages/list/filter/index.vue
index 83f9ed6..098dd48 100644
--- a/src/pages/list/filter/index.vue
+++ b/src/pages/list/filter/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card>
+  <t-card :bordered="false">
     <common-table />
   </t-card>
 </template>
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index 622c278..50707ee 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-card>
+  <t-card :bordered="false">
     <div class="table-tree-container">
       <div class="list-tree-wrapper">
         <div class="list-tree-operator">
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 82fd11e..d912532 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -9,7 +9,7 @@
         <img src="@/assets/assets-tencent-logo.png" class="logo" />
       </div>
 
-      <t-card class="user-info-list" title="个人信息">
+      <t-card class="user-info-list" title="个人信息" :bordered="false">
         <template #option>
           <t-button theme="default" shape="square" variant="text">
             <edit-icon size="18" />
@@ -27,7 +27,7 @@
         </t-row>
       </t-card>
 
-      <t-card class="content-container">
+      <t-card class="content-container" :bordered="false">
         <t-tabs value="second">
           <t-tab-panel value="first" label="内容列表">
             <p>内容列表</p>
@@ -54,13 +54,13 @@
     </t-col>
 
     <t-col :flex="1">
-      <t-card class="user-intro">
+      <t-card class="user-intro" :bordered="false">
         <t-avatar size="90px">T</t-avatar>
         <div class="name">My Account</div>
         <div class="position">XXG 港澳业务拓展组员工 直客销售</div>
       </t-card>
 
-      <t-card title="团队成员" class="user-team">
+      <t-card title="团队成员" class="user-team" :bordered="false">
         <template #option>
           <t-button theme="default" shape="square" variant="text">
             <edit-icon size="18" />
@@ -73,7 +73,7 @@
         </t-list>
       </t-card>
 
-      <t-card title="服务产品" class="product-container">
+      <t-card title="服务产品" class="product-container" :bordered="false">
         <template #option>
           <t-button theme="default" shape="square" variant="text">
             <edit-icon size="18" />
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 89019e8..5f6e2e9 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,12 +1,14 @@
 /* eslint-disable no-param-reassign */
+import { Color } from 'tvision-color';
 import STYLE_CONFIG from '@/config/style';
-import { COLOR_TOKEN, ColorSeries, ColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
+import { TColorSeries, TColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
+import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
 
 // 定义的state初始值
 const state = {
   ...STYLE_CONFIG,
   showSettingPanel: false,
-  colorList: COLOR_TOKEN,
+  colorList: {},
   chartColors: LIGHT_CHART_COLORS,
 };
 
@@ -47,10 +49,10 @@ const mutations = {
   toggleSettingPanel(state: IStateType, payload: boolean) {
     state.showSettingPanel = payload;
   },
-  addColor(state: IStateType, payload: ColorSeries) {
+  addColor(state: IStateType, payload: TColorSeries) {
     state.colorList = { ...state.colorList, ...payload };
   },
-  changeChartColor(state: IStateType, payload: ColorToken) {
+  changeChartColor(state: IStateType, payload: TColorToken) {
     state.chartColors = { ...payload };
   },
 };
@@ -97,7 +99,15 @@ const actions = {
     commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
   },
   changeBrandTheme(_: { state: IStateType }, payload: IStateType) {
-    const { brandTheme } = payload;
+    const { brandTheme, mode } = payload;
+    const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
+      colors: [brandTheme],
+      step: 10,
+      remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+    })[0];
+    const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+
+    insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
 
     document.documentElement.setAttribute('theme-color', brandTheme);
   },
diff --git a/src/style/index.less b/src/style/index.less
index 1529aa6..7717225 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -1,4 +1,5 @@
 @import './variables.less';
+
 @import './font-family.less';
-@import './theme/index.less';
+
 @import './reset.less';
diff --git a/src/style/theme/cyan.less b/src/style/theme/cyan.less
deleted file mode 100644
index 0770d37..0000000
--- a/src/style/theme/cyan.less
+++ /dev/null
@@ -1,27 +0,0 @@
-:root[theme-color='cyan'] {
-  --td-brand-color: #0594fa;
-  --td-brand-color-1: #d7eefe;
-  --td-brand-color-2: #aeddfd;
-  --td-brand-color-3: #84cafd;
-  --td-brand-color-4: #58b8fc;
-  --td-brand-color-5: #29a4fb;
-  --td-brand-color-6: #0594fa;
-  --td-brand-color-7: #29a4fb;
-  --td-brand-color-8: #0594fa;
-  --td-brand-color-9: #0378df;
-  --td-brand-color-10: #01409b;
-}
-
-:root[theme-color='cyan'][theme-mode='dark'] {
-  --td-brand-color: #29a4fb;
-  --td-brand-color-1: #01409b;
-  --td-brand-color-2: #0152b3;
-  --td-brand-color-3: #0264ca;
-  --td-brand-color-4: #0378df;
-  --td-brand-color-5: #0594fa;
-  --td-brand-color-6: #29a4fb;
-  --td-brand-color-7: #0594fa;
-  --td-brand-color-8: #29a4fb;
-  --td-brand-color-9: #58b8fc;
-  --td-brand-color-10: #d7eefe;
-}
diff --git a/src/style/theme/default.less b/src/style/theme/default.less
deleted file mode 100644
index 62b18d5..0000000
--- a/src/style/theme/default.less
+++ /dev/null
@@ -1,26 +0,0 @@
-:root,
-:root[theme-mode='light'] {
-  --td-brand-color-1: #f2f3ff;
-  --td-brand-color-2: #d9e1ff;
-  --td-brand-color-3: #b5c7ff;
-  --td-brand-color-4: #8eabff;
-  --td-brand-color-5: #618dff;
-  --td-brand-color-6: #366ef4;
-  --td-brand-color-7: #0052d9;
-  --td-brand-color-8: #003cab;
-  --td-brand-color-9: #002a7c;
-  --td-brand-color-10: #001a57;
-}
-
-:root[theme-mode='dark'] {
-  --td-brand-color-1: #1b2f51;
-  --td-brand-color-2: #173463;
-  --td-brand-color-3: #143975;
-  --td-brand-color-4: #103d88;
-  --td-brand-color-5: #0d429a;
-  --td-brand-color-6: #054bbe;
-  --td-brand-color-7: #2667d4;
-  --td-brand-color-8: #4582e6;
-  --td-brand-color-9: #699ef5;
-  --td-brand-color-10: #96bbf8;
-}
diff --git a/src/style/theme/green.less b/src/style/theme/green.less
deleted file mode 100644
index 3252a31..0000000
--- a/src/style/theme/green.less
+++ /dev/null
@@ -1,26 +0,0 @@
-:root[theme-color='green'] {
-  --td-brand-color-1: #e8f8f2;
-  --td-brand-color-2: #bcebdc;
-  --td-brand-color-3: #85dbbe;
-  --td-brand-color-4: #48c79c;
-  --td-brand-color-5: #00a870;
-  --td-brand-color-6: #078d5c;
-  --td-brand-color-7: #067945;
-  --td-brand-color-8: #00a870;
-  --td-brand-color-9: #044f2a;
-  --td-brand-color-10: #033017;
-}
-
-:root[theme-color='green'][theme-mode='dark'] {
-  --td-brand-color: #03a56f;
-  --td-brand-color-1: #024b15;
-  --td-brand-color-2: #03965c;
-  --td-brand-color-3: #03a56f;
-  --td-brand-color-4: #04c383;
-  --td-brand-color-5: #03965c;
-  --td-brand-color-6: #03a56f;
-  --td-brand-color-7: #04c383;
-  --td-brand-color-8: #03a56f;
-  --td-brand-color-9: #05eb9f;
-  --td-brand-color-10: #91fdd9;
-}
diff --git a/src/style/theme/index.less b/src/style/theme/index.less
deleted file mode 100644
index eabdd7a..0000000
--- a/src/style/theme/index.less
+++ /dev/null
@@ -1,15 +0,0 @@
-@import './default.less';
-
-@import './cyan.less';
-
-@import './green.less';
-
-@import './orange.less';
-
-@import './pink.less';
-
-@import './purple.less';
-
-@import './red.less';
-
-@import './yellow.less';
diff --git a/src/style/theme/orange.less b/src/style/theme/orange.less
deleted file mode 100644
index 600bd77..0000000
--- a/src/style/theme/orange.less
+++ /dev/null
@@ -1,28 +0,0 @@
-:root[theme-color='orange'] {
-  --td-brand-color: #ed7b2f;
-  --td-brand-color-1: #fce5d7;
-  --td-brand-color-2: #f8cdaf;
-  --td-brand-color-3: #f4b285;
-  --td-brand-color-4: #f19659;
-  --td-brand-color-5: #ed7b2f;
-  --td-brand-color-6: #e75510;
-  --td-brand-color-7: #f19659;
-  --td-brand-color-8: #ed7b2f;
-  --td-brand-color-9: #e75510;
-  --td-brand-color-10: #7f0a02;
-  --td-brand-color: #ed7b2f;
-}
-
-:root[theme-color='orange'][theme-mode='dark'] {
-  --td-brand-color: #ed7b2f;
-  --td-brand-color-1: #692204;
-  --td-brand-color-2: #873105;
-  --td-brand-color-3: #a24006;
-  --td-brand-color-4: #c25110;
-  --td-brand-color-5: #d66724;
-  --td-brand-color-6: #ed8139;
-  --td-brand-color-7: #ff9852;
-  --td-brand-color-8: #ed7b2f;
-  --td-brand-color-9: #ed7b2f;
-  --td-brand-color-10: #fce5d7;
-}
diff --git a/src/style/theme/pink.less b/src/style/theme/pink.less
deleted file mode 100644
index 2755c5a..0000000
--- a/src/style/theme/pink.less
+++ /dev/null
@@ -1,27 +0,0 @@
-:root[theme-color='pink'] {
-  --td-brand-color: #ed49b4;
-  --td-brand-color-1: #fce5f4;
-  --td-brand-color-2: #facae9;
-  --td-brand-color-3: #f7aede;
-  --td-brand-color-4: #f491d2;
-  --td-brand-color-5: #f172c5;
-  --td-brand-color-6: #ed49b4;
-  --td-brand-color-7: #f172c5;
-  --td-brand-color-8: #ed49b4;
-  --td-brand-color-9: #e80f9d;
-  --td-brand-color-10: #8f025e;
-}
-
-:root[theme-color='pink'][theme-mode='dark'] {
-  --td-brand-color: #ff70cf;
-  --td-brand-color-1: #5b374f;
-  --td-brand-color-2: #9b066d;
-  --td-brand-color-3: #bc088a;
-  --td-brand-color-4: #d435a0;
-  --td-brand-color-5: #ed53b7;
-  --td-brand-color-6: #ff70cf;
-  --td-brand-color-7: #ff99e4;
-  --td-brand-color-8: #ff70cf;
-  --td-brand-color-9: #ffdbfd;
-  --td-brand-color-10: #fff2ff;
-}
diff --git a/src/style/theme/purple.less b/src/style/theme/purple.less
deleted file mode 100644
index 28c2aaf..0000000
--- a/src/style/theme/purple.less
+++ /dev/null
@@ -1,27 +0,0 @@
-:root[theme-color='purple'] {
-  --td-brand-color: #834ec2;
-  --td-brand-color-1: #eee6f7;
-  --td-brand-color-2: #ddceee;
-  --td-brand-color-3: #ccb6e6;
-  --td-brand-color-4: #bb9edc;
-  --td-brand-color-5: #ab87d5;
-  --td-brand-color-6: #9a6fce;
-  --td-brand-color-7: #9a6fce;
-  --td-brand-color-8: #834ec2;
-  --td-brand-color-9: #783ac3;
-  --td-brand-color-10: #4c1397;
-}
-
-:root[theme-color='purple'][theme-mode='dark'] {
-  --td-brand-color: #ab87d5;
-  --td-brand-color-1: #4c1397;
-  --td-brand-color-2: #6325b0;
-  --td-brand-color-3: #783ac3;
-  --td-brand-color-4: #834ec2;
-  --td-brand-color-5: #9a6fce;
-  --td-brand-color-6: #ab87d5;
-  --td-brand-color-7: #ab87d5;
-  --td-brand-color-8: #ab87d5;
-  --td-brand-color-9: #ccb6e6;
-  --td-brand-color-10: #eee6f7;
-}
diff --git a/src/style/theme/red.less b/src/style/theme/red.less
deleted file mode 100644
index 3a9635f..0000000
--- a/src/style/theme/red.less
+++ /dev/null
@@ -1,27 +0,0 @@
-:root[theme-color='red'] {
-  ---td-brand-color: #e34d59;
-  --td-brand-color-1: #fbe5e7;
-  --td-brand-color-2: #f7ccd0;
-  --td-brand-color-3: #f3b2b8;
-  --td-brand-color-4: #ef989f;
-  --td-brand-color-5: #ea7b84;
-  --td-brand-color-6: #e34d59;
-  --td-brand-color-7: #ea7b84;
-  --td-brand-color-8: #e34d59;
-  --td-brand-color-9: #e42c3a;
-  --td-brand-color-10: #8d0309;
-}
-
-:root[theme-color='red'][theme-mode='dark'] {
-  --td-brand-color: #fb6e77;
-  --td-brand-color-1: #4f3335;
-  --td-brand-color-2: #960627;
-  --td-brand-color-3: #b01c37;
-  --td-brand-color-4: #c9384a;
-  --td-brand-color-5: #e35661;
-  --td-brand-color-6: #fb6e77;
-  --td-brand-color-7: #ff9195;
-  --td-brand-color-8: #fb6e77;
-  --td-brand-color-9: #ffd6d8;
-  --td-brand-color-10: #fff2f2;
-}
diff --git a/src/style/theme/yellow.less b/src/style/theme/yellow.less
deleted file mode 100644
index b929a9c..0000000
--- a/src/style/theme/yellow.less
+++ /dev/null
@@ -1,27 +0,0 @@
-:root[theme-color='yellow'] {
-  --td-brand-color: #ebb105;
-  --td-brand-color-1: #fde9ab;
-  --td-brand-color-2: #fbd152;
-  --td-brand-color-3: #ebb105;
-  --td-brand-color-4: #dda204;
-  --td-brand-color-5: #ca8d03;
-  --td-brand-color-6: #b67803;
-  --td-brand-color-7: #fbd152;
-  --td-brand-color-8: #ebb105;
-  --td-brand-color-9: #dda204;
-  --td-brand-color-10: #603100;
-}
-
-:root[theme-color='yellow'][theme-mode='dark'] {
-  --td-brand-color: #ca8d03;
-  --td-brand-color-1: #603100;
-  --td-brand-color-2: #764101;
-  --td-brand-color-3: #8c5201;
-  --td-brand-color-4: #a16502;
-  --td-brand-color-5: #b67803;
-  --td-brand-color-6: #ca8d03;
-  --td-brand-color-7: #764101;
-  --td-brand-color-8: #ca8d03;
-  --td-brand-color-9: #a16502;
-  --td-brand-color-10: #fde9ab;
-}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index e6ff1ae..92d5beb 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,47 +1,29 @@
-import * as echarts from 'echarts/core';
 import { Color } from 'tvision-color';
-
-import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
-import store from '@/store';
-
-const { state } = store;
+import * as echarts from 'echarts/core';
+import trim from 'lodash/trim';
+import { TColorToken } from '@/config/color';
 
 /**
  * 依据主题类型获取颜色
  *
  * @export
  * @param {string} theme
- * @returns {string[]}
+ * @returns {}
  */
-export function getColorFromTheme(theme: string): Array<string> {
-  const { setting } = state;
-  const { colorList, mode } = setting;
-  const isDarkMode = mode === 'dark';
-  let themeColorList = [];
-  const themeColor = getBrandColor(theme, colorList);
-  if (!/^#[A-F\d]{6}$/i.test(theme)) {
-    theme = themeColor?.['--td-brand-color'] || '#0052D9';
-    const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
-    const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
-
-    const spliceThemeList = defaultGradients.slice(0, themIdx);
-    themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
-  } else {
-    theme = themeColor?.['--td-brand-color'];
-    themeColorList = Color.getRandomPalette({
-      color: theme,
-      colorGamut: 'bright',
-      number: 8,
-    });
-  }
+export function getColorFromTheme(): Array<string> {
+  const theme = trim(getComputedStyle(document.documentElement).getPropertyValue('--td-brand-color'));
+  const themeColorList = Color.getRandomPalette({
+    color: theme,
+    colorGamut: 'bright',
+    number: 8,
+  });
 
   return themeColorList;
 }
 
 /** 图表颜色 */
 export function getChartListColor(): Array<string> {
-  const { setting } = state;
-  const res = getColorFromTheme(setting.brandTheme);
+  const res = getColorFromTheme();
 
   return res;
 }
@@ -50,7 +32,7 @@ export function getChartListColor(): Array<string> {
  * 更改图表主题颜色
  *
  * @export
- * @param {Array<any>} chartsList
+ * @param {Array<string>} chartsList
  * @param {string} theme
  */
 export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
@@ -65,8 +47,72 @@ export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
 
         // 更改主题颜色
         optionVal.color = chartChangeColor;
+
         elementChart.setOption(optionVal, true);
       }
     }
   }
 }
+
+/**
+ * 根据当前主题色、模式等情景 计算最后生成的色阶
+ */
+export function generateColorMap(
+  theme: string,
+  colorPalette: Array<string>,
+  mode: 'light' | 'dark',
+  brandColorIdx: number,
+) {
+  const isDarkMode = mode === 'dark';
+
+  if (isDarkMode) {
+    // eslint-disable-next-line no-use-before-define
+    colorPalette.reverse().map((color) => {
+      const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
+      return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
+    });
+    brandColorIdx = 5;
+    colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
+  }
+
+  const colorMap = {
+    '--td-brand-color': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-1': colorPalette[0], // light
+    '--td-brand-color-2': colorPalette[1], // focus
+    '--td-brand-color-3': colorPalette[2], // disabled
+    '--td-brand-color-4': colorPalette[3],
+    '--td-brand-color-5': colorPalette[4],
+    '--td-brand-color-6': colorPalette[5],
+    '--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
+    '--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
+    '--td-brand-color-10': colorPalette[9],
+  };
+  return colorMap;
+}
+
+/**
+ * 将生成的样式嵌入头部
+ */
+export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
+  const isDarkMode = mode === 'dark';
+  const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
+
+  const styleSheet = document.createElement('style');
+  styleSheet.type = 'text/css';
+  styleSheet.innerText = `${root}{
+    --td-brand-color: ${colorMap['--td-brand-color']};
+    --td-brand-color-1: ${colorMap['--td-brand-color-1']};
+    --td-brand-color-2: ${colorMap['--td-brand-color-2']};
+    --td-brand-color-3: ${colorMap['--td-brand-color-3']};
+    --td-brand-color-4: ${colorMap['--td-brand-color-4']};
+    --td-brand-color-5: ${colorMap['--td-brand-color-5']};
+    --td-brand-color-6: ${colorMap['--td-brand-color-6']};
+    --td-brand-color-7: ${colorMap['--td-brand-color-7']};
+    --td-brand-color-8: ${colorMap['--td-brand-color-8']};
+    --td-brand-color-9: ${colorMap['--td-brand-color-9']};
+    --td-brand-color-10: ${colorMap['--td-brand-color-10']};
+  }`;
+
+  document.head.appendChild(styleSheet);
+}