diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 59e2a03..25254a6 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -9,6 +9,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - name: Cache nodemodules
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-nodemodules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
       - uses: actions/setup-node@v2
         with:
           node-version: '16'
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
new file mode 100755
index 0000000..71fe5b3
--- /dev/null
+++ b/.husky/prepare-commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+exec < /dev/tty && npx git-cz --hook || true
\ No newline at end of file
diff --git a/package.json b/package.json
index da0ebe6..578021d 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,14 @@
   },
   "dependencies": {
     "dayjs": "^1.10.6",
-    "echarts": "~5.1.1",
+    "echarts": "~5.1.2",
+    "hex-to-hsl": "^1.0.2",
     "nprogress": "^0.2.0",
     "qrcode.vue": "^3.2.2",
     "tdesign-vue-next": "^0.5.0",
+    "tvision-color": "^1.3.1",
     "vue": "^3.1.5",
+    "vue-color-kit": "^1.0.5",
     "vue-router": "^4.0.11",
     "vue3-clipboard": "^1.0.0",
     "vuex": "^4.0.2"
diff --git a/src/assets/assets-product-1.svg b/src/assets/assets-product-1.svg
new file mode 100644
index 0000000..29e97f0
--- /dev/null
+++ b/src/assets/assets-product-1.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0052D9" stroke="none"/>
+    <path d="M23.9219 31H26.0859L22.0781 19.7266H19.8125L15.8125 31H17.8516L18.8203 28.1172H22.9688L23.9219 31ZM20.8359 21.875H20.9688L22.5 26.5234H19.2891L20.8359 21.875ZM30.6328 29.6172C29.7734 29.6172 29.1562 29.1875 29.1562 28.4688C29.1562 27.7734 29.6641 27.3828 30.75 27.3125L32.6797 27.1875V27.8672C32.6797 28.8594 31.8047 29.6172 30.6328 29.6172ZM30.0625 31.1406C31.1797 31.1406 32.1172 30.6562 32.5938 29.8281H32.7266V31H34.5938V25.1641C34.5938 23.3516 33.3594 22.2812 31.1641 22.2812C29.1328 22.2812 27.7188 23.2422 27.5625 24.75H29.3906C29.5703 24.1719 30.1797 23.8594 31.0703 23.8594C32.1172 23.8594 32.6797 24.3281 32.6797 25.1641V25.8828L30.4766 26.0156C28.3984 26.1406 27.2344 27.0312 27.2344 28.5781C27.2344 30.1406 28.4141 31.1406 30.0625 31.1406Z" fill="white"/>
+ </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-product-2.svg b/src/assets/assets-product-2.svg
new file mode 100644
index 0000000..827c8bf
--- /dev/null
+++ b/src/assets/assets-product-2.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0594FA" stroke="none"/>
+    <path d="M20.6641 31C23.0703 31 24.5391 29.7734 24.5391 27.7969C24.5391 26.3281 23.4922 25.2344 21.9766 25.0938V24.9531C23.1094 24.7734 23.9844 23.7266 23.9844 22.5391C23.9844 20.8047 22.6953 19.7266 20.5547 19.7266H15.8438V31H20.6641ZM17.8594 21.3281H20.0625C21.2812 21.3281 21.9922 21.9062 21.9922 22.8984C21.9922 23.9141 21.2344 24.4688 19.8047 24.4688H17.8594V21.3281ZM17.8594 29.3984V25.9219H20.125C21.6641 25.9219 22.4766 26.5156 22.4766 27.6406C22.4766 28.7891 21.6875 29.3984 20.2031 29.3984H17.8594ZM31.2812 31.1406C33.4375 31.1406 34.7891 29.4453 34.7891 26.7266C34.7891 23.9922 33.4453 22.3125 31.2812 22.3125C30.1094 22.3125 29.125 22.8828 28.6797 23.8125H28.5469V19.1484H26.6094V31H28.4766V29.6484H28.6094C29.0938 30.5859 30.0859 31.1406 31.2812 31.1406ZM30.6719 23.9609C31.9922 23.9609 32.7969 25.0078 32.7969 26.7266C32.7969 28.4453 32 29.4922 30.6719 29.4922C29.3438 29.4922 28.5156 28.4297 28.5156 26.7266C28.5156 25.0234 29.3516 23.9609 30.6719 23.9609Z" fill="white"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-product-3.svg b/src/assets/assets-product-3.svg
new file mode 100644
index 0000000..a3d461b
--- /dev/null
+++ b/src/assets/assets-product-3.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#7587DB" stroke="none"/>
+    <path d="M21.1172 31.2812C23.7188 31.2812 25.625 29.7266 25.8906 27.4219H23.9062C23.6328 28.6875 22.5469 29.4844 21.1172 29.4844C19.1953 29.4844 18 27.9062 18 25.3594C18 22.8203 19.1953 21.2422 21.1094 21.2422C22.5312 21.2422 23.6172 22.1172 23.8984 23.4688H25.8828C25.6484 21.1172 23.6719 19.4453 21.1094 19.4453C17.9141 19.4453 15.9375 21.7031 15.9375 25.3672C15.9375 29.0156 17.9219 31.2812 21.1172 31.2812ZM35.3125 25.3281C35.1094 23.5312 33.7812 22.2812 31.5859 22.2812C29.0156 22.2812 27.5078 23.9297 27.5078 26.7031C27.5078 29.5156 29.0234 31.1719 31.5938 31.1719C33.7578 31.1719 35.1016 29.9688 35.3125 28.1797H33.4688C33.2656 29.0703 32.5938 29.5469 31.5859 29.5469C30.2656 29.5469 29.4688 28.5 29.4688 26.7031C29.4688 24.9297 30.2578 23.9062 31.5859 23.9062C32.6484 23.9062 33.2891 24.5 33.4688 25.3281H35.3125Z" fill="white"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-product-4.svg b/src/assets/assets-product-4.svg
new file mode 100644
index 0000000..7ac1abc
--- /dev/null
+++ b/src/assets/assets-product-4.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#00A870" stroke="none"/>
+    <path d="M15.875 19.7266V31H20.1016C23.4766 31 25.4062 28.9297 25.4062 25.3125C25.4062 21.7734 23.4531 19.7266 20.1016 19.7266H15.875ZM17.8906 21.4688H19.8359C22.0469 21.4688 23.3516 22.8828 23.3516 25.3438C23.3516 27.8594 22.0781 29.2578 19.8359 29.2578H17.8906V21.4688ZM30.5938 31.1406C31.7812 31.1406 32.7656 30.5859 33.25 29.6484H33.3828V31H35.2578V19.1484H33.3203V23.8125H33.1875C32.7344 22.875 31.7656 22.3125 30.5938 22.3125C28.4375 22.3125 27.0781 24.0156 27.0781 26.7188C27.0781 29.4375 28.4297 31.1406 30.5938 31.1406ZM31.1953 23.9609C32.5234 23.9609 33.3438 25.0234 33.3438 26.7266C33.3438 28.4453 32.5312 29.4922 31.1953 29.4922C29.8672 29.4922 29.0625 28.4531 29.0625 26.7266C29.0625 25.0078 29.875 23.9609 31.1953 23.9609Z" fill="white"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-result-500.svg b/src/assets/assets-result-500.svg
index 343a25e..08784af 100644
--- a/src/assets/assets-result-500.svg
+++ b/src/assets/assets-result-500.svg
@@ -1,32 +1,52 @@
 <svg width="200" height="140" viewBox="0 0 200 140" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g mask="url(#mask0_17_619)">
-    <path d="M30 62H118V122H30V62Z" fill="#97A3B7" />
-    <g filter="url(#filter0_f_17_619)">
-      <rect x="12" y="84" width="80" height="60" fill="#E3E6EB" />
+  <g mask="url(#mask0_16559_24251)">
+    <path d="M68 48L106.105 70V114L68 136L29.8949 114V70L68 48Z" fill="#97A3B7" />
+    <g filter="url(#filter0_f_16559_24251)">
+      <rect x="46.3911" y="92" width="80" height="60" fill="#E3E6EB" />
     </g>
-    <g filter="url(#filter1_f_17_619)">
-      <rect x="80" y="54" width="80" height="60" fill="#E3E6EB" />
+    <g filter="url(#filter1_f_16559_24251)">
+      <rect y="23" width="80" height="60" fill="#E3E6EB" />
     </g>
-    <rect x="46" y="105" width="32" height="2" fill="white" />
-    <rect x="46" y="98" width="32" height="2" fill="white" />
-    <rect x="46" y="88" width="16" height="2" fill="white" />
   </g>
-  <path opacity="0.9" d="M63 20H151V30H63V20Z" fill="currentcolor" />
-  <mask id="mask1_17_619" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="63" y="30" width="88" height="50">
-    <path d="M63 30H151V80H63V30Z" fill="currentcolor" />
+  <mask id="mask1_16559_24251" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="80" y="9" width="78" height="88">
+    <path d="M119 9L157.105 31V75L119 97L80.8949 75V31L119 9Z" fill="currentcolor" />
   </mask>
-  <g mask="url(#mask1_17_619)">
-    <path d="M63 30H151V80H63V30Z" fill="currentcolor" />
-    <g opacity="0.3" filter="url(#filter2_f_17_619)">
-      <path d="M30 62H118V122H30V62Z" fill="#97A3B7" />
+  <g mask="url(#mask1_16559_24251)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M80.895 31V75L119 97L157.105 75V31L119 53L80.895 31Z"
+      fill="currentcolor" />
+    <path opacity="0.9" d="M119 -35L157.105 -13L157.105 31.5L119 53.5L80.8952 31.5L80.895 -13L119 -35Z"
+      fill="currentcolor" />
+    <g opacity="0.3" filter="url(#filter2_f_16559_24251)">
+      <path d="M68 48L106.105 70V114L68 136L29.8949 114V70L68 48Z" fill="#97A3B7" />
     </g>
   </g>
+  <path
+    d="M143 68.822L147.867 85.875L148 86.3405L148.469 86.2228L165.671 81.911L153.336 94.6522L152.999 95L153.336 95.3478L165.671 108.089L148.469 103.777L148 103.659L147.867 104.125L143 121.178L138.133 104.125L138 103.659L137.531 103.777L120.329 108.089L132.664 95.3478L133.001 95L132.664 94.6522L120.329 81.911L137.531 86.2228L138 86.3405L138.133 85.875L143 68.822Z"
+    fill="white" stroke="black" />
   <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M95.6863 40.8577L105.964 51.1345C106.295 51.0466 106.642 50.9998 107 50.9998C109.213 50.9998 111 52.7865 111 54.9998C111 55.3574 110.953 55.7038 110.866 56.0333L121.142 66.3135L118.314 69.1419L113.716 64.5448C111.653 65.423 109.384 65.9089 107 65.9089C99.7273 65.9089 93.5164 61.3853 91 54.9998C92.1785 52.0093 94.1673 49.4271 96.6961 47.5268L92.8579 43.6861L95.6863 40.8577ZM99 54.9998C99 59.4158 102.584 62.9998 107 62.9998C108.483 62.9998 109.872 62.5957 111.063 61.8917L108.034 58.8657C107.704 58.9532 107.358 58.9998 107 58.9998C104.787 58.9998 103 57.2131 103 54.9998C103 54.6423 103.047 54.2958 103.134 53.9663L100.107 50.9389C99.4037 52.1295 99 53.5178 99 54.9998ZM107 44.0907C114.273 44.0907 120.484 48.6143 123 54.9998C122.071 57.3574 120.638 59.4612 118.834 61.1773L114.729 57.0717C114.906 56.4108 115 55.7162 115 54.9998C115 50.5838 111.416 46.9998 107 46.9998C106.284 46.9998 105.589 47.0941 104.928 47.2711L102.378 44.7205C103.848 44.3101 105.398 44.0907 107 44.0907Z"
+    d="M123.243 35.0821L126.071 33.4493L123.243 31.8164L120.414 33.4493L123.243 35.0821ZM119 32.6329L121.828 31L114.757 26.9179L111.929 28.5507L119 32.6329ZM127.485 35.8986C122.806 38.6001 115.194 38.6001 110.515 35.8986C105.835 33.197 105.835 28.803 110.515 26.1014C115.194 23.3999 122.806 23.3999 127.485 26.1014C132.165 28.803 132.165 33.197 127.485 35.8986ZM107.686 24.4686C101.438 28.0756 101.438 33.9244 107.686 37.5314C113.934 41.1384 124.066 41.1384 130.314 37.5314C136.562 33.9244 136.562 28.0756 130.314 24.4686C124.066 20.8616 113.934 20.8616 107.686 24.4686Z"
     fill="white" />
-  <rect x="68" y="24" width="2" height="2" fill="white" />
-  <rect x="74" y="24" width="2" height="2" fill="white" />
-  <rect x="80" y="24" width="66" height="2" fill="white" />
-  <path d="M157 53.9998L181.249 95.9998H132.751L157 53.9998Z" fill="white" stroke="black" />
-  <path d="M157 88.9998L157 70.9998" stroke="black" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M41.8989 86.2863L44.7272 87.9193L44.7275 94.4512L41.8992 92.8181L41.8989 86.2863ZM53.9194 93.2269L56.7477 94.86L56.7479 101.392L53.9196 99.7587L53.9194 93.2269ZM44.7281 107.515L41.8999 105.882L41.9 109.148L44.7283 110.781L44.7282 107.515L53.92 112.822L53.9201 116.088L56.7484 117.721L56.7483 114.455L53.9201 112.822L53.92 109.556L44.728 104.249L44.7281 107.515Z"
+    fill="white" />
+  <defs>
+    <filter id="filter0_f_16559_24251" x="-3.60889" y="42" width="180" height="160" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_16559_24251" />
+    </filter>
+    <filter id="filter1_f_16559_24251" x="-50" y="-27" width="180" height="160" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_16559_24251" />
+    </filter>
+    <filter id="filter2_f_16559_24251" x="23.895" y="42" width="88.21" height="100" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+      <feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_16559_24251" />
+    </filter>
+  </defs>
 </svg>
\ No newline at end of file
diff --git a/src/assets/assets-setting-auto.svg b/src/assets/assets-setting-auto.svg
new file mode 100644
index 0000000..1aca31c
--- /dev/null
+++ b/src/assets/assets-setting-auto.svg
@@ -0,0 +1,13 @@
+<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H88V48H0V0Z" fill="none"/>
+    <path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--td-text-color-primary)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--td-text-color-primary)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--td-text-color-primary)"/>
+    <path d="M48.2077 18.3009L50.1225 16.3861L51.2715 17.5351L49.3567 19.4499L48.2077 18.3009Z" fill="var(--td-text-color-primary)"/>
+    <path d="M53.6057 23.1699H50.8974V24.7949H53.6057V23.1699Z" fill="var(--td-text-color-primary)"/>
+    <path d="M44.4877 31.2045V33.9129H42.8627V31.2045H44.4877Z" fill="var(--td-text-color-primary)"/>
+    <path d="M37.2279 31.5786L39.1427 29.6638L37.9936 28.5147L36.0788 30.4295L37.2279 31.5786Z" fill="var(--td-text-color-primary)"/>
+    <path d="M36.453 24.7949H33.7446V23.1699H36.453V24.7949Z" fill="var(--td-text-color-primary)"/>
+    <path d="M36.0788 17.5351L37.9936 19.4499L39.1427 18.3009L37.2279 16.3861L36.0788 17.5351Z" fill="var(--td-text-color-primary)"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-setting-dark.svg b/src/assets/assets-setting-dark.svg
new file mode 100644
index 0000000..0f15649
--- /dev/null
+++ b/src/assets/assets-setting-dark.svg
@@ -0,0 +1,5 @@
+<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H88V48H0V0Z" fill="#13161B"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M52.5327 26.8699C52.0346 26.9554 51.5225 26.9999 51 26.9999C46.0294 26.9999 42 22.9705 42 17.9999C42 16.9964 42.1642 16.0313 42.4673 15.1299C38.2268 15.8574 35 19.5518 35 23.9999C35 28.9705 39.0294 32.9999 44 32.9999C47.9671 32.9999 51.3346 30.4332 52.5327 26.8699Z" fill="#949EAA"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/assets/assets-setting-light.svg b/src/assets/assets-setting-light.svg
new file mode 100644
index 0000000..5ddb219
--- /dev/null
+++ b/src/assets/assets-setting-light.svg
@@ -0,0 +1,13 @@
+<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="88" height="48" fill="none"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--td-brand-color)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-brand-color)"/>
+    </svg>
+    
\ No newline at end of file
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
index 4f1ee25..44ea6a9 100644
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@@ -85,6 +85,14 @@ export default defineComponent({
 <style lang="less">
 @import '@/style/variables';
 
+.t-col-lg-6 + .t-col-lg-6 {
+  @media (max-width: @screen-md-max) {
+    .card-container {
+      margin-top: 16px;
+    }
+  }
+}
+
 .card {
   &-option {
     display: flex;
diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index bd2bec6..9445816 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -24,7 +24,7 @@ export default defineComponent({
       const { value } = props;
       const { colorList } = store.state.setting;
       return {
-        backgroundColor: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
+        background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
       };
     });
 
@@ -36,8 +36,8 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .color-container {
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   display: inline-block;
 }
diff --git a/src/config/color.ts b/src/config/color.ts
index 493c50e..d6dfab9 100644
--- a/src/config/color.ts
+++ b/src/config/color.ts
@@ -1,3 +1,5 @@
+import hexToHsl from 'hex-to-hsl';
+/* eslint-disable indent */
 export type ColorToken = Record<string, string>;
 export type ColorSeries = Record<string, ColorToken>;
 
@@ -162,6 +164,18 @@ export const COLOR_TOKEN: ColorSeries = {
   },
 };
 
+export const LIGHT_CHART_COLORS: ColorToken = {
+  textColor: 'rgba(0, 0, 0, 0.9)',
+  placeholderColor: 'rgba(0, 0, 0, 0.35)',
+  borderColor: '#dcdcdc',
+};
+
+export const DARK_CHART_COLORS: ColorToken = {
+  textColor: 'rgba(255, 255, 255, 0.9)',
+  placeholderColor: 'rgba(255, 255, 255, 0.35)',
+  borderColor: '#5e5e5e',
+};
+
 function toUnderline(name: string): string {
   return name.replace(/([A-Z])/g, '_$1').toUpperCase();
 }
@@ -182,12 +196,56 @@ export function getColorList(colorArray: Array<ColorToken>): Array<string> {
 
   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] = hexToHsl(color);
+      return hslToHex(h, s - 4, l);
+    });
+    brandColorIdx = 5;
+    colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
+  }
+
+  const colorMap = {
+    '@brand-color': colorPalette[brandColorIdx], // 主题色
+    '@brand-color-1': colorPalette[0], // light
+    '@brand-color-2': colorPalette[1], // focus
+    '@brand-color-3': colorPalette[2], // disabled
+    '@brand-color-4': colorPalette[3],
+    '@brand-color-5': colorPalette[4],
+    '@brand-color-6': colorPalette[5],
+    '@brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
+    '@brand-color-8': colorPalette[brandColorIdx], // 主题色
+    '@brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
+    '@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']`;
 
-export function insertThemeStylesheet(theme: string, colorMap: ColorToken) {
   const styleSheet = document.createElement('style');
   styleSheet.type = 'text/css';
-  styleSheet.innerText = `:root[theme-color='${theme}'],
-  :root[theme-color='${theme}'][theme-mode='dark']{
+  styleSheet.innerText = `${root}{
     --td-brand-color: ${colorMap['@brand-color']};
     --td-brand-color-1: ${colorMap['@brand-color-1']};
     --td-brand-color-2: ${colorMap['@brand-color-2']};
diff --git a/src/config/global.ts b/src/config/global.ts
index 18c2515..5ea972f 100644
--- a/src/config/global.ts
+++ b/src/config/global.ts
@@ -1,4 +1,2 @@
-export const PREFIX = 'tdesign-starter';
-export const THEME = 'light';
-export const AUTHENTICATION_METHOD = 'customize';
+export const prefix = 'tdesign-starter';
 export const TOKEN_NAME = 'tdesign-starter';
diff --git a/src/utils/hooks.ts b/src/hooks/index.ts
similarity index 100%
rename from src/utils/hooks.ts
rename to src/hooks/index.ts
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 1306300..cfd1c8c 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -1,16 +1,16 @@
 <template>
-  <div :class="PREFIX + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
+  <div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 
 export default defineComponent({
-  name: `${PREFIX}-footer`,
+  name: `${prefix}-footer`,
   setup() {
     return {
-      PREFIX,
+      prefix,
     };
   },
 });
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 1c1de18..e869eb8 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -18,6 +18,19 @@
           <!-- 搜索框 -->
           <search v-if="layout !== 'side'" :layout="layout" />
 
+          <!-- 全局通知 -->
+          <notice />
+
+          <t-tooltip placement="bottom" content="代码仓库">
+            <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
+              <t-icon name="logo-github" />
+            </t-button>
+          </t-tooltip>
+          <t-tooltip placement="bottom" content="帮助文档">
+            <t-button theme="default" shape="square" variant="text" @click="navToHelper">
+              <t-icon name="help-circle" />
+            </t-button>
+          </t-tooltip>
           <t-dropdown :min-column-width="135" trigger="click">
             <template #dropdown>
               <t-dropdown-menu>
@@ -39,20 +52,6 @@
               </div>
             </t-button>
           </t-dropdown>
-
-          <!-- 全局通知 -->
-          <notice />
-
-          <t-tooltip placement="bottom" content="代码仓库">
-            <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
-              <t-icon name="logo-github" />
-            </t-button>
-          </t-tooltip>
-          <t-tooltip placement="bottom" content="帮助文档">
-            <t-button theme="default" shape="square" variant="text" @click="navToHelper">
-              <t-icon name="help-circle" />
-            </t-button>
-          </t-tooltip>
           <t-tooltip placement="bottom" content="系统设置">
             <t-button theme="default" shape="square" variant="text">
               <t-icon name="setting" @click="toggleSettingPanel" />
@@ -69,7 +68,7 @@ import { defineComponent, PropType, computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 import tLogoFull from '@/assets/assets-logo-full.svg?component';
 import { MenuRoute } from '@/interface';
 
@@ -136,16 +135,16 @@ export default defineComponent({
 
     const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
 
-    const layoutCls = computed(() => [`${PREFIX}-header-layout`]);
+    const layoutCls = computed(() => [`${prefix}-header-layout`]);
 
     const menuCls = computed(() => {
       const { isFixed, layout, isCompact } = props;
       return [
         {
-          [`${PREFIX}-header-menu`]: !isFixed,
-          [`${PREFIX}-header-menu-fixed`]: isFixed,
-          [`${PREFIX}-header-menu-fixed-side`]: layout === 'side' && isFixed,
-          [`${PREFIX}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
+          [`${prefix}-header-menu`]: !isFixed,
+          [`${prefix}-header-menu-fixed`]: isFixed,
+          [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
+          [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
         },
       ];
     });
diff --git a/src/layouts/components/MenuContent.tsx b/src/layouts/components/MenuContent.tsx
index e041b6b..171f389 100644
--- a/src/layouts/components/MenuContent.tsx
+++ b/src/layouts/components/MenuContent.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, PropType, computed, h } from 'vue';
-import { PREFIX as prefix } from '@/config/global';
+import { prefix } from '@/config/global';
 import { MenuRoute } from '@/interface';
 
 const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
diff --git a/src/layouts/components/SideNav.tsx b/src/layouts/components/SideNav.tsx
index 3a08a38..1dd6266 100644
--- a/src/layouts/components/SideNav.tsx
+++ b/src/layouts/components/SideNav.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, PropType, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 import pgk from '../../../package.json';
 import MenuContent from './MenuContent';
 import tLogo from '@/assets/assets-t-logo.svg?component';
@@ -17,9 +17,9 @@ const useComputed = (props) => {
   const sideNavCls = computed(() => {
     const { isCompact } = props;
     return [
-      `${PREFIX}-sidebar-layout`,
+      `${prefix}-sidebar-layout`,
       {
-        [`${PREFIX}-sidebar-compact`]: isCompact,
+        [`${prefix}-sidebar-compact`]: isCompact,
       },
     ];
   });
@@ -27,18 +27,18 @@ const useComputed = (props) => {
   const menuCls = computed(() => {
     const { showLogo, isFixed, layout } = props;
     return [
-      `${PREFIX}-side-nav`,
+      `${prefix}-side-nav`,
       {
-        [`${PREFIX}-side-nav-no-logo`]: !showLogo,
-        [`${PREFIX}-side-nav-no-fixed`]: !isFixed,
-        [`${PREFIX}-side-nav-mix-fixed`]: layout === 'mix' && isFixed,
+        [`${prefix}-side-nav-no-logo`]: !showLogo,
+        [`${prefix}-side-nav-no-fixed`]: !isFixed,
+        [`${prefix}-side-nav-mix-fixed`]: layout === 'mix' && isFixed,
       },
     ];
   });
 
   const layoutCls = computed(() => {
     const { layout } = props;
-    return [`${PREFIX}-side-nav-${layout}`, `${PREFIX}-sidebar-layout`];
+    return [`${prefix}-side-nav-${layout}`, `${prefix}-sidebar-layout`];
   });
 
   return {
@@ -129,7 +129,7 @@ export default defineComponent({
     };
 
     return {
-      PREFIX,
+      prefix,
       ...useComputed(props),
       autoCollapsed,
       changeCollapsed,
@@ -150,11 +150,11 @@ export default defineComponent({
           v-slots={{
             logo: () =>
               this.showLogo && (
-                <span class={`${PREFIX}-side-nav-logo-wrapper`} onClick={this.goHome}>
+                <span class={`${prefix}-side-nav-logo-wrapper`} onClick={this.goHome}>
                   {this.collapsed ? (
-                    <tLogo class={`${PREFIX}-side-nav-logo-t-logo`} />
+                    <tLogo class={`${prefix}-side-nav-logo-t-logo`} />
                   ) : (
-                    <t-logo-full class={`${PREFIX}-side-nav-logo-tdesign-logo`} />
+                    <t-logo-full class={`${prefix}-side-nav-logo-tdesign-logo`} />
                   )}
                 </span>
               ),
@@ -167,7 +167,7 @@ export default defineComponent({
         >
           <menu-content navData={this.menu} />
         </t-menu>
-        <div class={`${PREFIX}-side-nav-placeholder${this.collapsed ? '-hidden' : ''}`}></div>
+        <div class={`${prefix}-side-nav-placeholder${this.collapsed ? '-hidden' : ''}`}></div>
       </div>
     );
   },
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 75c2e34..6da1321 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -6,12 +6,12 @@ import TdesignFooter from './components/Footer.vue';
 import TdesignSideNav from './components/SideNav';
 import TdesignContent from './components/Content.vue';
 
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 import TdesignSetting from './setting.vue';
 import { SettingType, ClassName } from '@/interface';
 import '@/style/layout.less';
 
-const name = `${PREFIX}-base-layout`;
+const name = `${prefix}-base-layout`;
 
 export default defineComponent({
   name,
@@ -103,8 +103,8 @@ export default defineComponent({
       const { showBreadcrumb } = this.setting;
       const { showFooter } = this;
       return (
-        <t-layout class={[`${PREFIX}-layout`]}>
-          <t-content class={`${PREFIX}-content-layout`}>
+        <t-layout class={[`${prefix}-layout`]}>
+          <t-content class={`${prefix}-content-layout`}>
             {showBreadcrumb && <tdesign-breadcrumb />}
             <TdesignContent />
           </t-content>
@@ -115,7 +115,7 @@ export default defineComponent({
 
     renderFooter() {
       return (
-        <t-footer class={`${PREFIX}-footer-layout`}>
+        <t-footer class={`${prefix}-footer-layout`}>
           <tdesign-footer />
         </t-footer>
       );
@@ -129,7 +129,7 @@ export default defineComponent({
     const content = this.renderContent();
 
     return (
-      <div class={`${PREFIX}-wrapper`}>
+      <div class={`${prefix}-wrapper`}>
         {layout === 'side' ? (
           <t-layout class={this.mainLayoutCls} key="side">
             <t-aside>{sidebar}</t-aside>
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 10283ee..53efac8 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -1,30 +1,59 @@
 <template>
   <t-drawer
     v-model:visible="showSettingPanel"
-    size="458px"
+    size="408px"
     :footer="false"
     value="medium"
     header="页面配置"
     :close-btn="true"
     class="setting-drawer-container"
+    @close-btn-click="handleCloseDrawer"
   >
     <div class="setting-container">
       <t-form ref="form" :data="formData" label-align="left">
         <div class="setting-group-title">主题模式</div>
-        <t-radio-group v-model="formData.mode" default-vaule="dark">
+        <t-radio-group v-model="formData.mode">
           <div v-for="(item, index) in MODE_OPTIONS" :key="index" class="setting-layout-drawer">
-            <t-radio-button :key="index" :value="item">
-              <thumbnail :src="getThumbnailUrl(item)" />
-            </t-radio-button>
+            <div>
+              <t-radio-button :key="index" :value="item.type"
+                ><component :is="getModeIcon(item.type)"
+              /></t-radio-button>
+              <p :style="{ textAlign: 'center', marginTop: '8px' }">{{ item.text }}</p>
+            </div>
           </div>
         </t-radio-group>
         <div class="setting-group-title">主题色</div>
         <t-radio-group v-model="formData.brandTheme" default-vaule="default">
-          <div v-for="(item, index) in COLOR_OPTIONS" :key="index" class="setting-layout-drawer">
+          <div
+            v-for="(item, index) in COLOR_OPTIONS.slice(0, COLOR_OPTIONS.length - 1)"
+            :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>
           </div>
+          <div class="setting-layout-drawer">
+            <t-popup
+              destroy-on-close
+              expand-animation
+              placement="bottom-right"
+              trigger="click"
+              :visible="isColoPickerDisplay"
+              :overlay-style="{ padding: 0 }"
+              @visible-change="onPopupVisibleChange"
+            >
+              <template #content>
+                <color-picker :theme="mode" @changeColor="changeColor" />
+              </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>
+            </t-popup>
+          </div>
         </t-radio-group>
 
         <div class="setting-group-title">导航布局</div>
@@ -69,24 +98,39 @@
   </t-drawer>
 </template>
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
-import { MessagePlugin } from 'tdesign-vue-next';
+import { ColorPicker } from 'vue-color-kit';
+import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
+import { Color } from 'tvision-color';
+import 'vue-color-kit/dist/vue-color-kit.css';
+
 import STYLE_CONFIG from '@/config/style';
+import { insertThemeStylesheet, generateColorMap } from '@/config/color';
 
 import Thumbnail from '@/components/thumbnail/index.vue';
 import ColorContainer from '@/components/color/index.vue';
 
+import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
+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', 'purple', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink'];
-const MODE_OPTIONS = ['light', 'dark', 'auto'];
+const COLOR_OPTIONS = ['default', 'purple', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'dynamic'];
+const MODE_OPTIONS = [
+  { type: 'light', text: '明亮' },
+  { type: 'dark', text: '暗黑' },
+  { type: 'auto', text: '跟随系统' },
+];
 
 export default defineComponent({
   name: 'DefaultLayoutSetting',
-  components: { Thumbnail, ColorContainer },
+  components: { Thumbnail, ColorContainer, ColorPicker },
   setup() {
     const formData = ref({ ...STYLE_CONFIG });
     const store = useStore();
+    const colors = ref();
+    const isColoPickerDisplay = ref(false);
 
     const showSettingPanel = computed({
       get() {
@@ -97,17 +141,92 @@ export default defineComponent({
       },
     });
 
+    const mode = computed(() => {
+      return store.getters['setting/mode'];
+    });
+
+    watch(
+      () => colors.value,
+      (newColor) => {
+        const { hex } = newColor;
+        const { setting } = store.state;
+
+        // hex 主题色
+        const newPalette = Color.getPaletteByGradation({
+          colors: [hex],
+          step: 10,
+        })[0];
+        const { mode } = store.state.setting;
+        const colorMap = generateColorMap(hex, newPalette, mode);
+
+        store.commit('setting/addColor', { [hex]: colorMap });
+
+        insertThemeStylesheet(hex, colorMap, mode);
+
+        store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
+      },
+    );
+    const changeColor = (val) => {
+      const { hex } = val;
+      const { setting } = store.state;
+
+      // hex 主题色
+      const newPalette = Color.getPaletteByGradation({
+        colors: [hex],
+        step: 10,
+      })[0];
+      const { mode } = store.state.setting;
+      const colorMap = generateColorMap(hex, newPalette, mode);
+
+      store.commit('setting/addColor', { [hex]: colorMap });
+
+      insertThemeStylesheet(hex, colorMap, mode);
+
+      store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
+    };
+
+    onMounted(() => {
+      document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
+        isColoPickerDisplay.value = true;
+      });
+    });
+
+    const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+      if (!visible && context.trigger === 'document') {
+        isColoPickerDisplay.value = visible;
+      }
+    };
+
     const handleCopy = () => {
       MessagePlugin.closeAll();
       MessagePlugin.success('复制成功');
     };
+    const getModeIcon = (mode: string) => {
+      if (mode === 'light') {
+        return SettingLightIcon;
+      }
+      if (mode === 'dark') {
+        return SettingDarkIcon;
+      }
+      return SettingAutoIcon;
+    };
+
+    const handleCloseDrawer = () => {
+      store.commit('setting/toggleSettingPanel', false);
+    };
     return {
+      mode,
+      changeColor,
+      isColoPickerDisplay,
+      onPopupVisibleChange,
       MODE_OPTIONS,
       LAYOUT_OPTION,
       COLOR_OPTIONS,
       formData,
       showSettingPanel,
       handleCopy,
+      getModeIcon,
+      handleCloseDrawer,
       getThumbnailUrl(name: string): string {
         return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
       },
@@ -125,7 +244,9 @@ export default defineComponent({
 </script>
 <style lang="less">
 @import '@/style/variables';
-
+.hu-color-picker {
+  width: 220px !important;
+}
 .tdesign-setting {
   z-index: 100;
   position: fixed;
@@ -157,14 +278,15 @@ export default defineComponent({
 
 .setting-layout-color-group {
   display: inline-flex;
-  width: 42px;
-  height: 42px;
+  width: 36px;
+  height: 36px;
   justify-content: center;
   align-items: center;
   border-radius: 50% !important;
+  padding: 6px !important;
   border: 2px solid transparent !important;
 
-  .t-radio-button__label {
+  > .t-radio-button__label {
     display: inline-flex;
   }
 }
@@ -226,7 +348,7 @@ export default defineComponent({
     .t-radio-button {
       display: inline-flex;
       max-height: 78px;
-      padding: 6px !important;
+      padding: 8px;
       border-radius: @border-radius;
       border: 2px solid #e3e6eb;
       > .t-radio-button__label {
diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index 359748e..004b1f4 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -1,8 +1,8 @@
 import dayjs from 'dayjs';
 import * as echarts from 'echarts/core';
-import { getBrandColor } from '@/config/color';
+import { Color } from 'tvision-color';
+import { getBrandColor, generateColorMap } from '@/config/color';
 import store from '@/store';
-import { CommonObjType } from '@/interface';
 
 const { state } = store;
 
@@ -15,27 +15,42 @@ const { state } = store;
  */
 export function getColorFromTheme(theme: string) {
   const { setting } = state as any;
-  const themeColor = getBrandColor(theme, setting.colorList);
+  const { colorList, mode } = setting;
+  let themeColor = getBrandColor(theme, colorList);
+
+  if (theme === 'dynamic' || (!/^#[A-F\d]{6}$/i.test(theme) && mode === 'dark')) {
+    theme = themeColor?.['@brand-color-1'] || '#0052D9';
+
+    const newPalette = Color.getPaletteByGradation({
+      colors: [theme],
+      step: 10,
+    })[0];
+
+    themeColor = generateColorMap(theme, newPalette, mode);
+  }
+  // theme = themeColor?.['@brand-color'];
   const themeColorList: Array<string> = [];
 
   // eslint-disable-next-line no-restricted-syntax
   for (const key in themeColor) {
     if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
-      const elementColor = themeColor[key];
+      const elementColor: string = themeColor[key];
 
       themeColorList.push(elementColor);
     }
   }
+  // console.log(themeColorList, 'themeColorList');
+  // console.log(theme, 'theme');
 
   return themeColorList;
 }
 
 /** 图表颜色 */
 function chartListColor(): Array<string> {
-  const colorList: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
   const { setting } = state as any;
+  const res = getColorFromTheme(setting.brandTheme);
 
-  return getColorFromTheme(setting.brandTheme) || colorList;
+  return res;
 }
 
 /**
@@ -165,7 +180,11 @@ export function constructInitDashboardDataset(type: string) {
 }
 
 /** 柱状图数据源 */
-export function constructInitDataset(dateTime: Array<string> = []) {
+export function constructInitDataset({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime: Array<string> } & Record<string, string>) {
   // const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
   const divideNum = 10;
   const timeArray = [];
@@ -201,7 +220,7 @@ export function constructInitDataset(dateTime: Array<string> = []) {
       type: 'category',
       data: timeArray,
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       axisLine: {
         lineStyle: {
@@ -213,7 +232,12 @@ export function constructInitDataset(dateTime: Array<string> = []) {
     yAxis: {
       type: 'value',
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
       },
     },
     grid: {
@@ -229,7 +253,7 @@ export function constructInitDataset(dateTime: Array<string> = []) {
       itemGap: 48,
       textStyle: {
         fontSize: 12,
-        color: 'rgba(0, 0, 0, 0.6)',
+        color: placeholderColor,
       },
       left: 'center',
       bottom: '0',
@@ -246,11 +270,6 @@ export function constructInitDataset(dateTime: Array<string> = []) {
         name: '上月',
         data: inArray,
         type: 'bar',
-        itemStyle: {
-          normal: {
-            color: chartListColor()[1],
-          },
-        },
       },
     ],
   };
@@ -259,11 +278,15 @@ export function constructInitDataset(dateTime: Array<string> = []) {
 }
 
 /** 平滑图数据 */
-export function getSmoothLineDataSet(dateTime = []) {
+export function getSmoothLineDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
   let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
   if (dateTime.length > 0) {
-    const devideNum = 7;
-    dateArray = getDateArray(dateTime, devideNum);
+    const divideNum = 7;
+    dateArray = getDateArray(dateTime, divideNum);
   }
 
   return {
@@ -283,11 +306,11 @@ export function getSmoothLineDataSet(dateTime = []) {
       data: dateArray,
       boundaryGap: false,
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       axisLine: {
         lineStyle: {
-          color: '#E3E6EB',
+          color: borderColor,
           width: 1,
         },
       },
@@ -295,7 +318,12 @@ export function getSmoothLineDataSet(dateTime = []) {
     yAxis: {
       type: 'value',
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
       },
     },
     legend: {
@@ -305,6 +333,10 @@ export function getSmoothLineDataSet(dateTime = []) {
       itemGap: 48,
       itemHeight: 8,
       itemWidth: 8,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
     },
     series: [
       {
@@ -326,7 +358,7 @@ export function getSmoothLineDataSet(dateTime = []) {
         symbolSize: 8,
         areaStyle: {
           normal: {
-            color: '#0053D92F',
+            opacity: 0.1,
           },
         },
       },
@@ -353,18 +385,21 @@ export function getSmoothLineDataSet(dateTime = []) {
 }
 
 /** 折线图数据 */
-export function getFolderLineDataSet(dateTime?: string[]) {
+export function getFolderLineDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
   let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
-  if (dateTime && dateTime.length > 0) {
+  if (dateTime.length > 0) {
     const divideNum = 7;
     dateArray = getDateArray(dateTime, divideNum);
   }
-
   return {
     color: chartListColor(),
     grid: {
       top: '5%',
-      right: '1px',
+      right: '10px',
       left: '30px',
       bottom: '60px',
     },
@@ -373,17 +408,21 @@ export function getFolderLineDataSet(dateTime?: string[]) {
       bottom: '0',
       orient: 'horizontal', // legend 横向布局。
       data: ['杯子', '茶叶', '蜂蜜', '面粉'],
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
     },
     xAxis: {
       type: 'category',
       data: dateArray,
       boundaryGap: false,
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       axisLine: {
         lineStyle: {
-          color: '#E3E6EB',
+          color: borderColor,
           width: 1,
         },
       },
@@ -391,7 +430,12 @@ export function getFolderLineDataSet(dateTime?: string[]) {
     yAxis: {
       type: 'value',
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
       },
     },
     tooltip: {
@@ -416,7 +460,7 @@ export function getFolderLineDataSet(dateTime?: string[]) {
         type: 'line',
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
+            borderColor,
             borderWidth: 1,
           },
         },
@@ -439,7 +483,7 @@ export function getFolderLineDataSet(dateTime?: string[]) {
         type: 'line',
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
+            borderColor,
             borderWidth: 1,
           },
         },
@@ -462,7 +506,7 @@ export function getFolderLineDataSet(dateTime?: string[]) {
         type: 'line',
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
+            borderColor,
             borderWidth: 1,
           },
         },
@@ -485,7 +529,7 @@ export function getFolderLineDataSet(dateTime?: string[]) {
         type: 'line',
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
+            borderColor,
             borderWidth: 1,
           },
         },
@@ -501,13 +545,16 @@ export function getFolderLineDataSet(dateTime?: string[]) {
  * @param {Array<string>} [dateTime=[]]
  * @returns {*}
  */
-export function getLineChartDataSet(dateTime: Array<string> = []) {
+export function getLineChartDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>) {
   const divideNum = 10;
   const timeArray = [];
   const inArray = [];
   const outArray = [];
   for (let i = 0; i < divideNum; i++) {
-    // const [timeArray, inArray, outArray] = dataset;
     if (dateTime.length > 0) {
       const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
       const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
@@ -524,6 +571,7 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
     inArray.push(getRandomArray().toString());
     outArray.push(getRandomArray().toString());
   }
+
   const dataSet = {
     color: chartListColor(),
     tooltip: {
@@ -543,7 +591,7 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
       data: ['本月', '上月'],
       textStyle: {
         fontSize: 12,
-        color: 'rgba(0, 0, 0, 0.6)',
+        color: placeholderColor,
       },
     },
     xAxis: {
@@ -551,11 +599,10 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
       data: timeArray,
       boundaryGap: false,
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       axisLine: {
         lineStyle: {
-          color: '#E3E6EB',
           width: 1,
         },
       },
@@ -563,7 +610,12 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
     yAxis: {
       type: 'value',
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
+      },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
       },
     },
     series: [
@@ -577,17 +629,13 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
         symbolSize: 8,
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
+            borderColor,
             borderWidth: 1,
           },
-          // hover color
-          // emphasis: {
-          //   color: '#000000'
-          // }
         },
         areaStyle: {
           normal: {
-            color: '#0053D92F',
+            opacity: 0.1,
           },
         },
       },
@@ -601,17 +649,9 @@ export function getLineChartDataSet(dateTime: Array<string> = []) {
         symbolSize: 8,
         itemStyle: {
           normal: {
-            borderColor: '#ffffff',
-            color: '#BCC4D0',
-            lineStyle: {
-              color: '#BCC4D0',
-            },
+            borderColor,
             borderWidth: 1,
           },
-          // hover color
-          // emphasis: {
-          //   color: '#000000'
-          // }
         },
       },
     ],
@@ -641,8 +681,12 @@ export function getSelftItemList(productName: string, devideNum: number): string
  * @export
  * @returns {}
  */
-export function getScatterDataSet(dateTime: Array<string> = []) {
-  const divideNum = 10;
+export function getScatterDataSet({
+  dateTime = [],
+  placeholderColor,
+  borderColor,
+}: { dateTime?: Array<string> } & Record<string, string>): any {
+  const divideNum = 40;
   const timeArray = [];
   const inArray = [];
   const outArray = [];
@@ -651,7 +695,6 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
     if (dateTime.length > 0) {
       const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
       const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
-      // console.log('dateAbsTime..', dateAbsTime, enhandTime);
       timeArray.push(dayjs(enhandTime).format('MM-DD'));
     } else {
       timeArray.push(
@@ -670,12 +713,12 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
     xAxis: {
       data: timeArray,
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       splitLine: { show: false },
       axisLine: {
         lineStyle: {
-          color: '#E3E6EB',
+          color: borderColor,
           width: 1,
         },
       },
@@ -684,7 +727,7 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
       type: 'value',
       // splitLine: { show: false},
       axisLabel: {
-        color: 'rgba(0, 0, 0, 0.4)',
+        color: placeholderColor,
       },
       nameTextStyle: {
         padding: [0, 0, 0, 60],
@@ -698,6 +741,11 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
       axisLine: {
         show: false,
       },
+      splitLine: {
+        lineStyle: {
+          color: borderColor,
+        },
+      },
     },
     tooltip: {
       trigger: 'item',
@@ -715,6 +763,10 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
       data: ['按摩仪', '咖啡机'],
       itemHeight: 8,
       itemWidth: 8,
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
     },
     series: [
       {
@@ -732,14 +784,13 @@ export function getScatterDataSet(dateTime: Array<string> = []) {
     ],
   };
 }
-
 /**
  * 获域图数据结构
  *
  * @export
  * @returns {}
  */
-export function getAreaChartDataSet() {
+export function getAreaChartDataSet(): any {
   const xAxisData = [];
   const data1 = [];
   const data2 = [];
@@ -926,7 +977,11 @@ export const lastYearList: Array<any> = [100, 120, 140, 160, 180, 200, 210];
  * @param {boolean} [isMonth=false]
  * @returns {*}
  */
-export function get2ColBarChartDataSet(isMonth = false) {
+export function get2ColBarChartDataSet({
+  isMonth = false,
+  placeholderColor,
+  borderColor,
+}: { isMonth?: boolean } & Record<string, string>) {
   let lastYearListCopy = lastYearList.concat([]);
   let thisYearListCopy = lastYearList.concat([]);
 
@@ -955,11 +1010,11 @@ export function get2ColBarChartDataSet(isMonth = false) {
           alignWithLabel: true,
         },
         axisLabel: {
-          color: 'rgba(0, 0, 0, 0.4)',
+          color: placeholderColor,
         },
         axisLine: {
           lineStyle: {
-            color: '#E3E6EB',
+            color: borderColor,
             width: 1,
           },
         },
@@ -969,7 +1024,12 @@ export function get2ColBarChartDataSet(isMonth = false) {
       {
         type: 'value',
         axisLabel: {
-          color: 'rgba(0, 0, 0, 0.4)',
+          color: placeholderColor,
+        },
+        splitLine: {
+          lineStyle: {
+            color: borderColor,
+          },
         },
       },
     ],
@@ -980,7 +1040,10 @@ export function get2ColBarChartDataSet(isMonth = false) {
       itemGap: 48,
       itemHeight: 4,
       itemWidth: 12,
-      itemStyle: {},
+      textStyle: {
+        fontSize: 12,
+        color: placeholderColor,
+      },
     },
     series: [
       {
@@ -998,18 +1061,17 @@ export function get2ColBarChartDataSet(isMonth = false) {
         barWidth: '30%',
         data: thisYearListCopy,
         itemStyle: {
-          color: (params: CommonObjType) => {
+          color: (params: { value: number }) => {
             if (params.value >= 200) {
-              return '#E34D59';
+              return chartListColor()[1];
             }
-            return '#0052D9';
+            return chartListColor()[0];
           },
         },
       },
     ],
   };
 }
-
 /**
  * 获取饼图数据
  *
@@ -1017,7 +1079,11 @@ export function get2ColBarChartDataSet(isMonth = false) {
  * @param {number} [radius=1]
  * @returns {*}
  */
-export function getPieChartDataSet(radius = 42) {
+export function getPieChartDataSet({
+  radius = 42,
+  textColor,
+  placeholderColor,
+}: { radius: number } & Record<string, string>) {
   return {
     color: chartListColor(),
     tooltip: {
@@ -1035,7 +1101,7 @@ export function getPieChartDataSet(radius = 42) {
       itemHeight: 4,
       textStyle: {
         fontSize: 12,
-        color: 'rgba(0, 0, 0, 0.6)',
+        color: placeholderColor,
       },
       left: 'center',
       bottom: '0',
@@ -1056,7 +1122,7 @@ export function getPieChartDataSet(radius = 42) {
           formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
           rich: {
             value: {
-              color: '#303133',
+              color: textColor,
               fontSize: 28,
               fontWeight: 'normal',
               lineHeight: 46,
@@ -1074,7 +1140,7 @@ export function getPieChartDataSet(radius = 42) {
             formatter: ['{value|{d}%}', '{name|{b}渠道占比}'].join('\n'),
             rich: {
               value: {
-                color: '#303133',
+                color: textColor,
                 fontSize: 28,
                 fontWeight: 'normal',
                 lineHeight: 46,
@@ -1091,7 +1157,10 @@ export function getPieChartDataSet(radius = 42) {
           show: false,
         },
         data: [
-          { value: 1048, name: '线上' },
+          {
+            value: 1048,
+            name: '线上',
+          },
           { value: radius * 7, name: '门店' },
         ],
       },
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 0a1631d..0dc185e 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -5,21 +5,21 @@
         <card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }" size="small">
           <div class="dashboard-item">
             <div class="dashboard-item-top">
-              <span>{{ item.number }}</span>
+              <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
             </div>
             <div class="dashboard-item-left">
               <div v-if="index === 0">
                 <div
                   id="moneyContainer"
                   class="dashboard-chart-container"
-                  style="width: 96px; height: 40px; margin-top: 36px"
+                  :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 66}px`, marginTop: '22px' }"
                 />
               </div>
               <div v-else-if="index === 1">
                 <div
                   id="refundContainer"
                   class="dashboard-chart-container"
-                  style="width: 120px; height: 42px; margin-top: 24px"
+                  :style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px`, marginTop: '24px' }"
                 />
               </div>
 
@@ -67,7 +67,7 @@
             id="monitorContainer"
             ref="monitorContainer"
             class="dashboard-chart-container"
-            style="width: 100%; height: 326px"
+            :style="{ width: '100%', height: `${resizeTime * 326}px` }"
           />
         </card>
       </t-col>
@@ -76,7 +76,7 @@
           <div
             id="countContainer"
             ref="countContainer"
-            style="width: 100%; height: 326px"
+            :style="{ width: `${resizeTime * 326}px`, height: `${resizeTime * 326}px`, margin: '0 auto' }"
             class="dashboard-chart-container"
           />
         </card>
@@ -89,8 +89,8 @@
         <card title="销售订单排名">
           <template #option>
             <t-radio-group default-value="dateVal">
-              <t-radio-button value="dateVal"> 月份 </t-radio-button>
-              <t-radio-button value="monthVal"> 季度 </t-radio-button>
+              <t-radio-button value="dateVal">本周</t-radio-button>
+              <t-radio-button value="monthVal">近三个月</t-radio-button>
             </t-radio-group>
           </template>
           <t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
@@ -105,7 +105,7 @@
               </span>
             </template>
             <template #operation="slotProps">
-              <a class="t-button-link" @click="rehandleClickOp(slotProps)">操作</a>
+              <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
             </template>
           </t-table>
         </card>
@@ -114,8 +114,8 @@
         <card title="采购订单排名">
           <template #option>
             <t-radio-group default-value="dateVal">
-              <t-radio-button value="dateVal"> 月份 </t-radio-button>
-              <t-radio-button value="monthVal"> 季度 </t-radio-button>
+              <t-radio-button value="dateVal">本周</t-radio-button>
+              <t-radio-button value="monthVal">近三个月</t-radio-button>
             </t-radio-group>
           </template>
           <t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
@@ -128,7 +128,7 @@
               <trend :type="row.growUp > 0 ? 'up' : 'down'" :describe="Math.abs(row.growUp)" />
             </template>
             <template #operation="slotProps">
-              <a class="t-button-link" @click="rehandleClickOp(slotProps)">操作</a>
+              <a class="t-button-link" @click="rehandleClickOp(slotProps)">详情</a>
             </template>
           </t-table>
         </card>
@@ -246,60 +246,90 @@ export default defineComponent({
     Trend,
   },
   setup() {
-    // refundCharts
-    let refundContainer: HTMLElement;
-    let refundChart: echarts.ECharts;
-    onMounted(() => {
-      refundContainer = document.getElementById('refundContainer');
-      refundChart = echarts.init(refundContainer);
-      refundChart.setOption(constructInitDashboardDataset('bar'));
-    });
+    const store = useStore();
+    const resizeTime = ref(1);
+
+    const { chartColors } = store.state.setting;
 
     // moneyCharts
     let moneyContainer: HTMLElement;
     let moneyChart: echarts.ECharts;
-    onMounted(() => {
-      moneyContainer = document.getElementById('moneyContainer');
+    const renderMoneyChart = () => {
+      if (!moneyContainer) {
+        moneyContainer = document.getElementById('moneyContainer');
+      }
       moneyChart = echarts.init(moneyContainer);
       moneyChart.setOption(constructInitDashboardDataset('line'));
-    });
+    };
+
+    // refundCharts
+    let refundContainer: HTMLElement;
+    let refundChart: echarts.ECharts;
+    const renderRefundChart = () => {
+      if (!refundContainer) {
+        refundContainer = document.getElementById('refundContainer');
+      }
+      refundChart = echarts.init(refundContainer);
+      refundChart.setOption(constructInitDashboardDataset('bar'));
+    };
 
     // stokeCharts
     let stokeContainer: HTMLElement;
     let stokeChart: echarts.ECharts;
-    onMounted(() => {
-      stokeContainer = document.getElementById('stokeContainer');
+    const renderStokeChart = () => {
+      if (!stokeContainer) {
+        stokeContainer = document.getElementById('stokeContainer');
+      }
       stokeChart = echarts.init(stokeContainer);
-      stokeChart.setOption(constructInitDataset(LAST_7_DAYS));
-    });
+      stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors }));
+    };
 
     // monitorChart
     let monitorContainer: HTMLElement;
     let monitorChart: echarts.ECharts;
-    onMounted(() => {
-      monitorContainer = document.getElementById('monitorContainer');
+    const renderMonitorChart = () => {
+      if (!monitorContainer) {
+        monitorContainer = document.getElementById('monitorContainer');
+      }
       monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getLineChartDataSet());
-    });
+      monitorChart.setOption(getLineChartDataSet({ ...chartColors }));
+    };
 
     // monitorChart
     let countContainer: HTMLElement;
     let countChart: echarts.ECharts;
-    onMounted(() => {
-      countContainer = document.getElementById('countContainer');
+    const renderCountChart = () => {
+      if (!countContainer) {
+        countContainer = document.getElementById('countContainer');
+      }
       countChart = echarts.init(countContainer);
-      countChart.setOption(getPieChartDataSet());
-    });
+      countChart.setOption(getPieChartDataSet(chartColors));
+    };
+
+    const renderCharts = () => {
+      renderMoneyChart();
+      renderRefundChart();
+      renderStokeChart();
+      renderMonitorChart();
+      renderCountChart();
+    };
 
     // chartSize update
     const updateContainer = () => {
-      refundChart.resize({
-        width: refundContainer.clientWidth,
-        height: refundContainer.clientHeight,
-      });
+      if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+        resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
+      } else if (document.documentElement.clientWidth < 1080) {
+        resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
+      } else {
+        resizeTime.value = 1;
+      }
       moneyChart.resize({
-        width: moneyContainer.clientWidth,
-        height: moneyContainer.clientHeight,
+        width: resizeTime.value * 120,
+        height: resizeTime.value * 66,
+      });
+      refundChart.resize({
+        width: resizeTime.value * 120,
+        height: resizeTime.value * 66,
       });
       stokeChart.resize({
         width: stokeContainer.clientWidth,
@@ -307,15 +337,17 @@ export default defineComponent({
       });
       monitorChart.resize({
         width: monitorContainer.clientWidth,
-        height: monitorContainer.clientHeight,
+        height: resizeTime.value * 326,
       });
       countChart.resize({
-        width: countContainer.clientWidth,
-        height: countContainer.clientHeight,
+        width: resizeTime.value * 326,
+        height: resizeTime.value * 326,
       });
     };
 
     onMounted(() => {
+      renderCharts();
+      updateContainer();
       window.addEventListener('resize', updateContainer, false);
     });
 
@@ -325,15 +357,26 @@ export default defineComponent({
 
     const currentMonth = ref(getThisMonth());
 
-    const store = useStore();
     watch(
       () => store.state.setting.brandTheme,
       () => {
-        changeChartsTheme([refundChart, moneyChart, stokeChart, monitorChart, countChart]);
+        changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
+      },
+    );
+
+    watch(
+      () => store.state.setting.mode,
+      () => {
+        [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
+          item.dispose();
+        });
+
+        renderCharts();
       },
     );
 
     return {
+      resizeTime,
       currentMonth,
       LAST_7_DAYS,
       PANE_LIST,
@@ -343,10 +386,10 @@ export default defineComponent({
       BUY_COLUMNS,
       onCurrencyChange(checkedValues: string[]) {
         currentMonth.value = getThisMonth(checkedValues);
-        monitorChart.setOption(getLineChartDataSet(checkedValues));
+        monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors }));
       },
       onStokeDataChange(checkedValues: string[]) {
-        stokeChart.setOption(constructInitDataset(checkedValues));
+        stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors }));
       },
       rehandleClickOp(val: MouseEvent) {
         console.log(val);
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index ee788bf..6a027a3 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -84,36 +84,45 @@ export default defineComponent({
     ProductCard,
   },
   setup() {
+    const store = useStore();
+    const { chartColors } = store.state.setting;
     // lineChart logic
     let lineContainer: HTMLElement;
     let lineChart: echarts.ECharts;
-    onMounted(() => {
+    const renderLineChart = () => {
       lineContainer = document.getElementById('lineContainer');
       lineChart = echarts.init(lineContainer);
-      lineChart.setOption(getFolderLineDataSet());
-    });
+      lineChart.setOption(getFolderLineDataSet({ ...chartColors }));
+    };
 
     // scatterChart logic
     let scatterContainer: HTMLElement;
     let scatterChart: echarts.ECharts;
-    onMounted(() => {
+    const renderScatterChart = () => {
       scatterContainer = document.getElementById('scatterContainer');
       scatterChart = echarts.init(scatterContainer);
-      scatterChart.setOption(getScatterDataSet());
-    });
+      scatterChart.setOption(getScatterDataSet({ ...chartColors }));
+    };
 
     // chartSize update
     const updateContainer = () => {
-      lineChart.resize({
+      lineChart?.resize({
         width: lineContainer.clientWidth,
         height: lineContainer.clientHeight,
       });
-      scatterChart.resize({
+      scatterChart?.resize({
         width: scatterContainer.clientWidth,
         height: scatterContainer.clientHeight,
       });
     };
+
+    const renderCharts = () => {
+      renderScatterChart();
+      renderLineChart();
+    };
+
     onMounted(() => {
+      renderCharts();
       window.addEventListener('resize', updateContainer, false);
     });
 
@@ -121,7 +130,13 @@ export default defineComponent({
       window.removeEventListener('resize', updateContainer);
     });
 
-    const store = useStore();
+    watch(
+      () => store.state.setting.mode,
+      () => {
+        renderCharts();
+      },
+    );
+
     watch(
       () => store.state.setting.brandTheme,
       () => {
@@ -134,10 +149,11 @@ export default defineComponent({
       PRODUCT_LIST,
       PANE_LIST_DATA,
       onSatisfyChange() {
-        scatterChart.setOption(getScatterDataSet());
+        scatterChart.setOption(getScatterDataSet({ ...chartColors }));
       },
       onMaterialChange(value: string[]) {
-        lineChart.setOption(getFolderLineDataSet(value));
+        const { chartColors } = store.state.setting;
+        lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors }));
       },
     };
   },
diff --git a/src/pages/detail/advanced/components/Product.vue b/src/pages/detail/advanced/components/Product.vue
index a5a9c9b..02518d9 100644
--- a/src/pages/detail/advanced/components/Product.vue
+++ b/src/pages/detail/advanced/components/Product.vue
@@ -62,7 +62,7 @@ export default defineComponent({
 .operater-block {
   position: relative;
   background-color: @bg-color-container;
-  border: 1px solid #e3e6eb;
+  border: 1px solid @component-border;
   border-radius: 3px;
 
   .operater-content {
@@ -70,7 +70,7 @@ export default defineComponent({
     height: 256px;
 
     .operater-title-icon {
-      background: #ecf2fe;
+      background: @brand-color-1;
       color: @brand-color;
       font-size: 56px;
       padding: 14px;
diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less
index 63965cb..61924f7 100644
--- a/src/pages/detail/advanced/index.less
+++ b/src/pages/detail/advanced/index.less
@@ -1,47 +1,56 @@
-@import '@/style/variables.less';
-@import '../base//index.less';
+@import '../base/index.less';
 
-.product-add {
-  width: 100%;
-  height: 256px;
-  display: flex;
-  align-items: center;
-  justify-items: center;
-  padding: 20px 10px 24px 20px;
-  border: dashed 1px #dedede;
-  border-radius: 3px;
-
-  .product-sub-icon {
-    background: #ecf2fe;
-    color: @brand-color;
-    font-size: 33px;
-    padding: 8px;
-    border-radius: 100%;
-  }
-
-  .product-sub {
-    font-size: 14px;
-    color: @text-color-secondary;
-    margin: 0 auto;
-    text-align: center;
-    line-height: 22px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-
-    svg {
-      rect {
-        fill: @brand-color-1;
-      }
-
-      path {
-        fill: @brand-color;
+.product-block-container {
+  .t-col-xl-4 + .t-col-xl-4 {
+    @media (max-width: @screen-lg-max) {
+      .operater-gap {
+        margin: 16px 0 0 0;
       }
     }
   }
 
-  span {
-    padding-top: 12px;
+  .product-add {
+    width: 100%;
+    height: 256px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    padding: 20px 10px 24px 20px;
+    border: dashed 1px @component-border;
+    border-radius: 3px;
+
+    .product-sub-icon {
+      background: @brand-color-1;
+      color: @brand-color;
+      font-size: 33px;
+      padding: 8px;
+      border-radius: 100%;
+    }
+
+    .product-sub {
+      font-size: 14px;
+      color: @text-color-secondary;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 22px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      svg {
+        rect {
+          fill: @brand-color-1;
+        }
+
+        path {
+          fill: @brand-color;
+        }
+      }
+    }
+
+    span {
+      padding-top: 12px;
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index 4e60135..06a194f 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -37,8 +37,8 @@
           <t-radio-button value="monthVal"> 月份 </t-radio-button>
         </t-radio-group>
       </template>
-      <t-row class="product-block-container">
-        <t-col :flex="1">
+      <t-row :gutter="16" class="product-block-container">
+        <t-col :xl="4">
           <div class="product-add">
             <div class="product-sub">
               <t-icon name="add" class="product-sub-icon" />
@@ -46,7 +46,7 @@
             </div>
           </div>
         </t-col>
-        <t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :flex="1">
+        <t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :xl="4">
           <product :data="item" />
         </t-col>
       </t-row>
@@ -79,8 +79,8 @@
         </template>
 
         <template #op="slotProps">
-          <a :class="PREFIX + '-link'" @click="listClick()">管理</a>
-          <a :class="PREFIX + '-link'" @click="deleteClickOp(slotProps)">删除</a>
+          <a :class="prefix + '-link'" @click="listClick()">管理</a>
+          <a :class="prefix + '-link'" @click="deleteClickOp(slotProps)">删除</a>
         </template>
 
         <template #op-column>
@@ -111,7 +111,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue';
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 import { BASE_INFO_DATA, TABLE_COLUMNS_DATA, PRODUCT_LIST } from './constants';
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
@@ -169,7 +169,7 @@ export default defineComponent({
 
     return {
       BASE_INFO_DATA,
-      PREFIX,
+      prefix,
       PRODUCT_LIST,
       columns: TABLE_COLUMNS_DATA,
       data,
diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less
index 60e41c3..abfdaed 100644
--- a/src/pages/detail/base/index.less
+++ b/src/pages/detail/base/index.less
@@ -12,27 +12,27 @@
     display: flex;
     color: @text-color-primary;
 
-    @media (max-width: @screen-sm-max) {
-      h1 {
-        width: 80px;
-      }
-    }
-
-    @media (min-width: @screen-md-min) {
-      h1 {
-        width: 200px;
-      }
-    }
-
     h1 {
+      width: 200px;
       font-weight: normal;
       font-size: @font-size-base;
       color: @text-color-secondary;
       text-align: left;
       line-height: 22px;
+
+      @media (max-width: @screen-sm-max) {
+        width: 100px;
+      }
+
+      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+        width: 120px;
+      }
     }
 
     span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       margin-left: 24px;
     }
 
@@ -59,6 +59,7 @@
 }
 
 .dialog-info-block {
+
   .info-item {
     padding: 12px 0;
     display: flex;
diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue
index 1356034..87e58a2 100644
--- a/src/pages/detail/deploy/index.vue
+++ b/src/pages/detail/deploy/index.vue
@@ -39,8 +39,8 @@
           </span>
         </template>
         <template #op="slotProps">
-          <a :class="PREFIX + '-link'" @click="listClick()">管理</a>
-          <a :class="PREFIX + '-link'" @click="deleteClickOp(slotProps)">删除</a>
+          <a :class="prefix + '-link'" @click="listClick()">管理</a>
+          <a :class="prefix + '-link'" @click="deleteClickOp(slotProps)">删除</a>
         </template>
         <template #op-column>
           <t-icon name="descending-order" />
@@ -80,7 +80,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
 import { BASE_INFO_DATA, TABLE_COLUMNS } from './constants';
 
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 import Card from '@/components/card/index.vue';
 import { ResDataType } from '@/interface';
 import request from '@/utils/request';
@@ -100,6 +100,9 @@ export default defineComponent({
   name: 'DetailDeploy',
   components: { Card },
   setup() {
+    const store = useStore();
+
+    const { chartColors } = store.state.setting;
     const data = ref([]);
     const pagination = ref({
       defaultPageSize: 10,
@@ -130,9 +133,9 @@ export default defineComponent({
     onMounted(() => {
       monitorContainer = document.getElementById('monitorContainer');
       monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getSmoothLineDataSet());
+      monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
       setInterval(() => {
-        monitorChart.setOption(getSmoothLineDataSet());
+        monitorChart.setOption(getSmoothLineDataSet({ ...chartColors }));
       }, 3000);
     });
 
@@ -142,7 +145,7 @@ export default defineComponent({
     onMounted(() => {
       dataContainer = document.getElementById('dataContainer');
       dataChart = echarts.init(dataContainer);
-      dataChart.setOption(get2ColBarChartDataSet());
+      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
     });
 
     const intervalTimer = null;
@@ -165,14 +168,14 @@ export default defineComponent({
     });
 
     const onAlertChange = () => {
-      dataChart.setOption(get2ColBarChartDataSet());
+      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors }));
     };
 
     onMounted(() => {
       fetchData();
       window.addEventListener('resize', updateContainer, false);
     });
-    const store = useStore();
+
     watch(
       () => store.state.setting.brandTheme,
       () => {
@@ -180,7 +183,7 @@ export default defineComponent({
       },
     );
     return {
-      PREFIX,
+      prefix,
       BASE_INFO_DATA,
       columns: TABLE_COLUMNS,
       data,
diff --git a/src/pages/detail/secondary/index.vue b/src/pages/detail/secondary/index.vue
index 2901161..a517e32 100644
--- a/src/pages/detail/secondary/index.vue
+++ b/src/pages/detail/secondary/index.vue
@@ -102,7 +102,7 @@ export default defineComponent({
       const changeMsg = msgData;
       changeMsg.forEach((e: NotificationItem) => {
         if (e.id === item.id) {
-          e.status = !e.status;
+          if (e.status) e.status = false;
         }
       });
       store.commit('notification/setMsgData', changeMsg);
diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less
index 6d12b8d..534eb46 100644
--- a/src/pages/form/base/index.less
+++ b/src/pages/form/base/index.less
@@ -5,7 +5,16 @@
   align-items: center;
   justify-content: center;
   background-color: @bg-color-container;
-  padding-bottom: 134px;
+  padding: 0 32px 134px;
+
+
+  @media (max-width: @screen-sm-max) {
+    padding: 0 32px 67px;
+
+    .form-basic-container-title {
+      margin: 32px 0 32px;
+    }
+  }
 
   .form-basic-item {
     width: 676px;
diff --git a/src/pages/list/base/constants.ts b/src/pages/list/base/constants.ts
index 9a89ce8..9da597c 100644
--- a/src/pages/list/base/constants.ts
+++ b/src/pages/list/base/constants.ts
@@ -3,9 +3,9 @@ export const COLUMNS = [
   {
     title: '合同名称',
     align: 'left',
-    ellipsis: true,
     width: 300,
     colKey: 'name',
+    fixed: 'left',
   },
   { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
   {
diff --git a/src/pages/list/card/components/Card.vue b/src/pages/list/card/components/Card.vue
index 0ed3671..74dc06d 100644
--- a/src/pages/list/card/components/Card.vue
+++ b/src/pages/list/card/components/Card.vue
@@ -159,18 +159,19 @@ export default defineComponent({
       color: @brand-color;
 
       &__disabled {
-        color: @text-color-disabled;
+        color: @brand-color-3;
       }
     }
 
     &--name {
       margin: 24px 0 8px 0;
       font-size: 16px;
-      font-weight: bold;
+      font-weight: 400;
+      color: @text-color-primary;
     }
 
     &--desc {
-      font-size: 14px;
+      font-size: 12px;
       line-height: 20px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -194,24 +195,23 @@ export default defineComponent({
         }
       }
 
-      &__disabled {
-        > div:first-child {
-          > button:first-child {
-            background-color: @gray-color-6;
-            color: @text-color-anti;
-          }
-
-          > button:last-child {
-            background-color: @gray-color-2;
-            color: @text-color-disabled;
-          }
-        }
+      .t-icon-more {
+        font-size: 24px;
+        color: @text-color-primary;
       }
     }
   }
 
   &__disabled {
     color: @text-color-disabled;
+
+    .list-card-item_detail--name {
+      color: @text-color-disabled;
+    }
+
+    .t-icon-more {
+      color: @text-color-disabled;
+    }
   }
 }
 </style>
diff --git a/src/pages/list/card/index.less b/src/pages/list/card/index.less
deleted file mode 100644
index 44ad880..0000000
--- a/src/pages/list/card/index.less
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '@/style/variables.less';
-
-.list-card {
-  height: 100%;
-
-  &-operation {
-    display: flex;
-    justify-content: space-between;
-
-    .search-input {
-      width: 360px;
-    }
-  }
-
-  &-items {
-    margin-top: 14px;
-    margin-bottom: 24px;
-  }
-
-  &-pagination {
-    padding: 16px;
-  }
-
-  &-loading {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue
index c64d8bc..f63637f 100644
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@@ -160,5 +160,35 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
-@import url('./index.less');
+@import '@/style/variables.less';
+
+.list-card {
+  height: 100%;
+
+  &-operation {
+    display: flex;
+    justify-content: space-between;
+
+    .search-input {
+      width: 360px;
+    }
+  }
+
+  &-items {
+    margin-top: 14px;
+    margin-bottom: 24px;
+  }
+
+  &-pagination {
+    padding: 16px;
+  }
+
+  &-loading {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 </style>
diff --git a/src/pages/list/filter/index.vue b/src/pages/list/filter/index.vue
index b6f5883..ccc915f 100644
--- a/src/pages/list/filter/index.vue
+++ b/src/pages/list/filter/index.vue
@@ -12,24 +12,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="less" scoped>
-@import '@/style/variables';
-
-.@{prefix} {
-  &-panel {
-    background-color: @bg-color-container;
-    padding: @spacer-3;
-    border-radius: @border-radius;
-  }
-
-  &-operater-row {
-    margin-bottom: 16px;
-  }
-
-  &-form-item-content {
-    width: 240px;
-    display: inline-block;
-    margin-right: 40px;
-  }
-}
-</style>
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index f59ee15..28ac1fd 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -18,7 +18,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
-import { PREFIX } from '@/config/global';
+import { prefix } from '@/config/global';
 
 import { TREE_DATA } from './constants';
 import CommonTable from '../components/CommonTable.vue';
@@ -33,7 +33,7 @@ export default defineComponent({
     const filterByText = ref();
     const filterText = ref();
     return {
-      PREFIX,
+      prefix,
       TREE_DATA,
       expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
       filterText,
diff --git a/src/pages/login/components/Login.vue b/src/pages/login/components/Login.vue
index bc30beb..760e803 100644
--- a/src/pages/login/components/Login.vue
+++ b/src/pages/login/components/Login.vue
@@ -9,7 +9,7 @@
   >
     <template v-if="type == 'password'">
       <t-form-item name="account">
-        <t-input v-model="formData.account" size="large" placeholder="请输入您的账号">
+        <t-input v-model="formData.account" size="large" placeholder="请输入账号：admin">
           <template #prefix-icon>
             <t-icon name="user" />
           </template>
@@ -22,7 +22,7 @@
           size="large"
           :type="showPsw ? 'text' : 'password'"
           clearable
-          placeholder="请输入登录密码"
+          placeholder="请输入登录密码：admin"
         >
           <template #prefix-icon>
             <t-icon name="lock-on" />
@@ -76,22 +76,19 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import QrcodeVue from 'qrcode.vue';
 import { MessagePlugin } from 'tdesign-vue-next';
-import { useCounter } from '@/utils/hooks';
+import { useCounter } from '@/hooks';
 
 const INITIAL_DATA = {
   phone: '',
-  account: '',
-  password: '',
+  account: 'admin',
+  password: 'admin',
   verifyCode: '',
   checked: false,
 };
 
 const FORM_RULES = {
+  phone: [{ required: true, message: '手机号必填', type: 'error' }],
   account: [{ required: true, message: '账号必填', type: 'error' }],
-  phone: [
-    { required: true, message: '手机号必填', type: 'error' },
-    { telnumber: true, message: '请输入正确的手机号', type: 'warning' },
-  ],
   password: [{ required: true, message: '密码必填', type: 'error' }],
   verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
 };
diff --git a/src/pages/login/components/Register.vue b/src/pages/login/components/Register.vue
index 35e31ea..e0ebc0f 100644
--- a/src/pages/login/components/Register.vue
+++ b/src/pages/login/components/Register.vue
@@ -73,7 +73,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
-import { useCounter } from '@/utils/hooks';
+import { useCounter } from '@/hooks';
 
 const INITIAL_DATA = {
   phone: '',
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index 8d20557..3e24260 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -187,3 +187,17 @@
     color: @brand-color-8;
   }
 }
+
+.copyright {
+  font-size: 14px;
+  position:absolute;
+  left: 5%;
+  bottom: 64px;
+  color: @text-color-secondary;
+}
+
+@media screen and (max-height: 700px) {
+  .copyright {
+    display:none
+  }
+}
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 2cd620f..5dfb980 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -18,6 +18,8 @@
       <register v-else @register-success="switchType('login')" />
       <tdesign-setting />
     </div>
+
+    <footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
   </div>
 </template>
 <script lang="ts">
@@ -28,7 +30,6 @@ import Register from './components/Register.vue';
 import LoginHeader from './components/Header.vue';
 import TdesignSetting from '@/layouts/setting.vue';
 
-/** 高级详情 */
 export default defineComponent({
   name: 'LoginIndex',
   components: {
diff --git a/src/pages/user/constants.ts b/src/pages/user/constants.ts
index b55737a..5818854 100644
--- a/src/pages/user/constants.ts
+++ b/src/pages/user/constants.ts
@@ -61,14 +61,4 @@ export const TEAM_MEMBERS = [
   },
 ];
 
-export const PRODUCT_LIST = [
-  {
-    logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon1.png',
-  },
-  {
-    logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon2.png',
-  },
-  {
-    logo: 'https://tdesign.gtimg.com/pro-template/tdesign-icon3.png',
-  },
-];
+export const PRODUCT_LIST = ['a', 'b', 'c', 'd'];
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index 4d72b99..6619b7f 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -1,4 +1,4 @@
-@import '@/style/variables.less';
+@import '@/style/variables';
 
 .card-padding-no {
   padding-left: 0;
@@ -47,7 +47,7 @@
       line-height: 24px;
       margin: 20px 0 6px;
       font-size: 14px;
-      color: rgb(0 0 0 / 40%);
+      color: @text-color-placeholder;
     }
 
     &-detail {
@@ -56,7 +56,7 @@
       overflow: hidden;
       line-height: 40px;
       font-size: 14px;
-      color: rgb(0 0 0 / 90%);
+      color: @text-color-secondary;
     }
   }
 
@@ -112,7 +112,7 @@
   border-radius: @border-radius;
 
   .content {
-    width: 70%;
+    width: 100%;
     margin: 24px 0 12px;
   }
 
@@ -124,7 +124,7 @@
 .content-container {
   margin-top: 16px;
   padding: 28px 32px;
-  background: #fff;
+  background: @bg-color-container;
   border-radius: @border-radius;
 }
 
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index b862676..118d253 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-row :gutter="16">
+  <t-row :gutter="[24, 24]">
     <t-col :flex="3">
       <div class="user-left-greeting">
         <div>
@@ -81,8 +81,8 @@
           </t-button>
         </template>
         <t-row class="content" :getters="16">
-          <t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :span="4">
-            <img :src="item.logo" class="logo" />
+          <t-col v-for="(item, index) in PRODUCT_LIST" :key="index" :span="3">
+            <component :is="getIcon(item)"></component>
           </t-col>
         </t-row>
       </card>
@@ -91,7 +91,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, onUnmounted } from 'vue';
-
+import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { LineChart } from 'echarts/charts';
@@ -100,6 +100,11 @@ import { CanvasRenderer } from 'echarts/renderers';
 import { LAST_7_DAYS } from '@/utils/date';
 import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants';
 import { getFolderLineDataSet } from '@/pages/dashboard/base/index';
+import ProductAIcon from '@/assets/assets-product-1.svg';
+import ProductBIcon from '@/assets/assets-product-2.svg';
+import ProductCIcon from '@/assets/assets-product-3.svg';
+import ProductDIcon from '@/assets/assets-product-4.svg';
+
 import Card from '@/components/card/index.vue';
 
 echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
@@ -111,6 +116,8 @@ export default defineComponent({
   setup() {
     let lineContainer: HTMLElement;
     let lineChart: echarts.ECharts;
+    const store = useStore();
+    const { chartColors } = store.state.setting;
 
     const onLineChange = (value) => {
       lineChart.setOption(getFolderLineDataSet(value));
@@ -126,12 +133,12 @@ export default defineComponent({
           x2: 10, // 默认80px
           y2: 30, // 默认60px
         },
-        ...getFolderLineDataSet(),
+        ...getFolderLineDataSet({ ...chartColors }),
       });
     };
 
     const updateContainer = () => {
-      lineChart.resize({
+      lineChart?.resize({
         width: lineContainer.clientWidth,
         height: lineContainer.clientHeight,
       });
@@ -148,12 +155,28 @@ export default defineComponent({
       window.removeEventListener('resize', updateContainer);
     });
 
+    const getIcon = (type) => {
+      switch (type) {
+        case 'a':
+          return ProductAIcon;
+        case 'b':
+          return ProductBIcon;
+        case 'c':
+          return ProductCIcon;
+        case 'd':
+          return ProductDIcon;
+        default:
+          return ProductAIcon;
+      }
+    };
+
     return {
       LAST_7_DAYS,
       USER_INFO_LIST,
       TEAM_MEMBERS,
       PRODUCT_LIST,
       onLineChange,
+      getIcon,
     };
   },
 });
diff --git a/src/router/modules/others.ts b/src/router/modules/others.ts
index 539a03a..3e17447 100644
--- a/src/router/modules/others.ts
+++ b/src/router/modules/others.ts
@@ -27,7 +27,7 @@ export default [
         path: 'index',
         redirect: '/login',
         component: () => import('@/layouts/blank.vue'),
-        meta: { title: '登陆页' },
+        meta: { title: '登录中心' },
       },
     ],
   },
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index bd9eae2..c1f0bd9 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,11 +1,12 @@
 import STYLE_CONFIG from '@/config/style';
-import { COLOR_TOKEN, ColorSeries } from '@/config/color';
+import { COLOR_TOKEN, ColorSeries, ColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
 
 // 定义的state初始值
 const state = {
   ...STYLE_CONFIG,
   showSettingPanel: false,
   colorList: COLOR_TOKEN,
+  chartColors: LIGHT_CHART_COLORS,
 };
 
 type IInitStateType = typeof state;
@@ -42,16 +43,18 @@ const mutations = {
   addColor(state: IStateType, payload: ColorSeries) {
     state.colorList = { ...state.colorList, ...payload };
   },
+  changeChartColor(state: IStateType, payload: ColorToken) {
+    state.chartColors = { ...payload };
+  },
 };
 
 const getters = {
-  showHeader: (state) => state.showHeader,
-  showSidebar: (state) => state.layout !== 'top',
-  showSidebarLogo: (state) => state.layout === 'side',
-  showHeaderLogo: (state) => state.layout !== 'side',
-  showFooter: (state) => state.showFooter,
-  showSettingBtn: (state) => !state.showHeader,
-  mode: (state) => {
+  showHeader: (state: IStateType) => state.showHeader,
+  showSidebar: (state: IStateType) => state.layout !== 'top',
+  showSidebarLogo: (state: IStateType) => state.layout === 'side',
+  showHeaderLogo: (state: IStateType) => state.layout !== 'side',
+  showFooter: (state: IStateType) => state.showFooter,
+  mode: (state: IStateType) => {
     if (state.mode === 'auto') {
       const media = window.matchMedia('(prefers-color-scheme:dark)');
       if (media.matches) {
@@ -69,8 +72,9 @@ const actions = {
     dispatch('changeBrandTheme', payload);
     commit('update', payload);
   },
-  changeMode({ state }, payload) {
+  async changeMode({ commit, state }, payload: IStateType) {
     let theme = payload.mode;
+    const isDarkMode = theme === 'dark';
     if (payload.mode === 'auto') {
       const media = window.matchMedia('(prefers-color-scheme:dark)');
       if (media.matches) {
@@ -80,12 +84,17 @@ const actions = {
       }
     }
     if (theme !== state.mode) {
-      document.documentElement.setAttribute('theme-mode', theme === 'dark' ? 'dark' : '');
+      document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
     }
+    commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
   },
-  changeBrandTheme({ state }, payload) {
-    if (payload.brand !== state.brandTheme) {
-      document.documentElement.setAttribute('theme-color', payload.brandTheme);
+  changeBrandTheme({ state }: { state: IStateType }, payload: IStateType) {
+    const { brandTheme, mode } = payload;
+    if (brandTheme !== state.brandTheme) {
+      document.documentElement.setAttribute(
+        'theme-color',
+        /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/.test(brandTheme) && mode === 'dark' ? `${brandTheme}` : brandTheme,
+      );
     }
   },
 };
diff --git a/src/style/layout.less b/src/style/layout.less
index d396bff..9df86e5 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -152,7 +152,6 @@
   }
 }
 
-
 .logo-container {
   cursor: pointer;
   display: inline-flex;
@@ -164,4 +163,3 @@
   color: @text-color-primary;
   opacity: 0.4;
 }
-
diff --git a/src/style/theme/cyan.less b/src/style/theme/cyan.less
index e64609f..0770d37 100644
--- a/src/style/theme/cyan.less
+++ b/src/style/theme/cyan.less
@@ -1,14 +1,27 @@
-:root[theme-color='cyan'],
-:root[theme-color='cyan'][theme-mode='dark'] {
+:root[theme-color='cyan'] {
   --td-brand-color: #0594fa;
-  --td-brand-color-1: #d6f7ff;
-  --td-brand-color-2: #b2ecff;
-  --td-brand-color-3: #85daff;
-  --td-brand-color-4: #5cc5fc;
-  --td-brand-color-5: #31adfb;
+  --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: #007edf;
-  --td-brand-color-8: #0068c0;
-  --td-brand-color-9: #00549e;
-  --td-brand-color-10: #00417d;
+  --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/dark.less b/src/style/theme/dark.less
index 9c8107d..3d5a13b 100644
--- a/src/style/theme/dark.less
+++ b/src/style/theme/dark.less
@@ -1,164 +1,163 @@
 :root[theme-mode='dark'] {
-  --td-brand-color-1: #1B2F51;
+  --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;
-  
-  --td-warning-color-1: #4F2A1D;
-  --td-warning-color-2: #582F21;
-  --td-warning-color-3: #733C23;
-  --td-warning-color-4: #A75D2B;
-  --td-warning-color-5: #CF6E2D;
-  --td-warning-color-6: #DC7633;
-  --td-warning-color-7: #E8935C;
-  --td-warning-color-8: #ECBF91;
-  --td-warning-color-9: #EED7BF;
-  --td-warning-color-10: #F3E9DC;
-  
+  --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;
+
+  --td-warning-color-1: #4f2a1d;
+  --td-warning-color-2: #582f21;
+  --td-warning-color-3: #733c23;
+  --td-warning-color-4: #a75d2b;
+  --td-warning-color-5: #cf6e2d;
+  --td-warning-color-6: #dc7633;
+  --td-warning-color-7: #e8935c;
+  --td-warning-color-8: #ecbf91;
+  --td-warning-color-9: #eed7bf;
+  --td-warning-color-10: #f3e9dc;
+
   --td-error-color-1: #472324;
-  --td-error-color-2: #5E2A2D;
+  --td-error-color-2: #5e2a2d;
   --td-error-color-3: #703439;
-  --td-error-color-4: #83383E;
-  --td-error-color-5: #A03F46;
-  --td-error-color-6: #C64751;
-  --td-error-color-7: #DE6670;
-  --td-error-color-8: #EC888E;
-  --td-error-color-9: #EDB1B6;
-  --td-error-color-10: #EECED0;
-  
-  --td-success-color-1: #193A2A;
-  --td-success-color-2: #1A4230;
-  --td-success-color-3: #17533D;
-  --td-success-color-4: #0D7A55;
+  --td-error-color-4: #83383e;
+  --td-error-color-5: #a03f46;
+  --td-error-color-6: #c64751;
+  --td-error-color-7: #de6670;
+  --td-error-color-8: #ec888e;
+  --td-error-color-9: #edb1b6;
+  --td-error-color-10: #eeced0;
+
+  --td-success-color-1: #193a2a;
+  --td-success-color-2: #1a4230;
+  --td-success-color-3: #17533d;
+  --td-success-color-4: #0d7a55;
   --td-success-color-5: #059465;
-  --td-success-color-6: #43AF8A;
-  --td-success-color-7: #46BF96;
-  --td-success-color-8: #80D2B6;
-  --td-success-color-9: #B4E1D3;
-  --td-success-color-10: #DEEDE8;
-  
-  --td-gray-color-1: #f1f2f5;
-  --td-gray-color-2: #ebedf1;
-  --td-gray-color-3: #e3e6eb;
-  --td-gray-color-4: #d6dbe3;
-  --td-gray-color-5: #bcc4d0;
-  --td-gray-color-6: #97a3b7;
-  --td-gray-color-7: #7787a2;
-  --td-gray-color-8: #5f7292;
-  --td-gray-color-9: #4b5b76;
-  --td-gray-color-10: #3c485c;
-  --td-gray-color-11: #2c3645;
-  --td-gray-color-12: #232a35;
-  --td-gray-color-13: #1c222b;
-  --td-gray-color-14: #13161b;
-  
+  --td-success-color-6: #43af8a;
+  --td-success-color-7: #46bf96;
+  --td-success-color-8: #80d2b6;
+  --td-success-color-9: #b4e1d3;
+  --td-success-color-10: #deede8;
+
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eeeeee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
+  --td-gray-color-11: #383838;
+  --td-gray-color-12: #2c2c2c;
+  --td-gray-color-13: #242424;
+  --td-gray-color-14: #181818;
+
   // 文字 & 图标 颜色
-  --td-font-white-1: rgba(255, 255, 255, .9);
-  --td-font-white-2: rgba(255, 255, 255, .55);
-  --td-font-white-3: rgba(255, 255, 255, .35);
-  --td-font-white-4: rgba(255, 255, 255, .22);
-  
-  --td-font-gray-1: rgba(0, 0, 0, .9);
-  --td-font-gray-2: rgba(0, 0, 0, .6);
-  --td-font-gray-3: rgba(0, 0, 0, .4);
-  --td-font-gray-4: rgba(0, 0, 0, .26);
-  
+  --td-font-white-1: rgba(255, 255, 255, 0.9);
+  --td-font-white-2: rgba(255, 255, 255, 0.55);
+  --td-font-white-3: rgba(255, 255, 255, 0.35);
+  --td-font-white-4: rgba(255, 255, 255, 0.22);
+
+  --td-font-gray-1: rgba(0, 0, 0, 0.9);
+  --td-font-gray-2: rgba(0, 0, 0, 0.6);
+  --td-font-gray-3: rgba(0, 0, 0, 0.4);
+  --td-font-gray-4: rgba(0, 0, 0, 0.26);
+
   // 基础颜色
-  --td-brand-color: var(--td-brand-color-8);     // 色彩-品牌-可操作
+  --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
   --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
-  --td-error-color: var(--td-error-color-6);     // 色彩-功能-失败
+  --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
   --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
-  
-  
+
   // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-7);     // hover态
-  --td-brand-color-focus: var(--td-brand-color-2);     // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-9);    // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3);  // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1);     // 浅色的选中态
-  
+  --td-brand-color-hover: var(--td-brand-color-7); // hover态
+  --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
+  --td-brand-color-active: var(--td-brand-color-9); // 点击态
+  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
+  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
+
   // 警告色扩展
   --td-warning-color-hover: var(--td-warning-color-4);
   --td-warning-color-focus: var(--td-warning-color-2);
   --td-warning-color-active: var(--td-warning-color-6);
   --td-warning-color-disabled: var(--td-warning-color-3);
   --td-warning-color-light: var(--td-warning-color-1);
-  
+
   // 失败/错误色扩展
   --td-error-color-hover: var(--td-error-color-5);
   --td-error-color-focus: var(--td-error-color-2);
   --td-error-color-active: var(--td-error-color-7);
   --td-error-color-disabled: var(--td-error-color-3);
   --td-error-color-light: var(--td-error-color-1);
-  
+
   // 成功色扩展
   --td-success-color-hover: var(--td-success-color-4);
   --td-success-color-focus: var(--td-success-color-2);
   --td-success-color-active: var(--td-success-color-6);
   --td-success-color-disabled: var(--td-success-color-3);
   --td-success-color-light: var(--td-success-color-1);
-  
+
   // 遮罩
-  --td-mask-active: rgba(0, 0, 0, .4); // 遮罩-弹出
-  --td-mask-disabled: rgba(0, 0, 0, .6); // 遮罩-禁用
-  
+  --td-mask-active: rgba(0, 0, 0, 0.4); // 遮罩-弹出
+  --td-mask-disabled: rgba(0, 0, 0, 0.6); // 遮罩-禁用
+
   // 背景色
-  --td-bg-color-page: var(--td-gray-color-14);                        // 色彩 - page
-  --td-bg-color-container: var(--td-gray-color-13);                   // 色彩 - 容器             
-  --td-bg-color-container-hover: var(--td-gray-color-12);             // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(--td-gray-color-10);            // 色彩 - 容器 - active
-  --td-bg-color-container-select: var(--td-gray-color-9);             // 色彩 - 容器 - select
-  
-  --td-bg-color-secondarycontainer: var(--td-gray-color-12);          // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);    // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9);   // 色彩 - 次级容器 - active
-  
-  --td-bg-color-component: var(--td-gray-color-11);                   // 色彩  - 组件
-  --td-bg-color-component-hover: var(--td-gray-color-10);             // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(--td-gray-color-9);             // 色彩 - 组件 - active
-  --td-bg-color-component-disabled: var(--td-gray-color-12);          // 色彩 - 组件 - disabled
-  
+  --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
+  --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
+  --td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
+  --td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
+  --td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
+
+  --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
+
+  --td-bg-color-component: var(--td-gray-color-11); // 色彩  - 组件
+  --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
+  --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
+
   // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: transparent;   
-  
+  --td-bg-color-specialcomponent: transparent;
+
   // 文本颜色
-  --td-text-color-primary: var(--td-font-white-1);      // 色彩-文字-主要
-  --td-text-color-secondary: var(--td-font-white-2);    // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-white-3);  // 色彩-文字-占位符/说明
-  --td-text-color-disabled: var(--td-font-white-4);    // 色彩-文字-禁用
-  --td-text-color-anti: #fff;                      // 色彩-文字-反色
-  --td-text-color-brand: var(--td-brand-color-8);           // 色彩-文字-品牌
-  --td-text-color-link: var(--td-brand-color-8);            // 色彩-文字-链接
-  
+  --td-text-color-primary: var(--td-font-white-1); // 色彩-文字-主要
+  --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
+  --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
+  --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
+  --td-text-color-anti: #fff; // 色彩-文字-反色
+  --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
+  --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
+
   // 分割线
   --td-border-level-1-color: var(--td-gray-color-11);
   --td-component-stroke: var(--td-gray-color-11);
   // 边框
   --td-border-level-2-color: var(--td-gray-color-9);
   --td-component-border: var(--td-gray-color-9);
-  
+
   // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1: 0px 4px 6px rgba(0, 0, 0, .06), 0px 1px 10px rgba(0, 0, 0, .08), 0px 2px 4px rgba(0, 0, 0, .12);
+  --td-shadow-1: 0px 4px 6px rgba(0, 0, 0, 0.06), 0px 1px 10px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.12);
   // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2: 0px 8px 10px rgba(0, 0, 0, .12), 0px 3px 14px rgba(0, 0, 0, .1), 0px 5px 5px rgba(0, 0, 0, .16);
+  --td-shadow-2: 0px 8px 10px rgba(0, 0, 0, 0.12), 0px 3px 14px rgba(0, 0, 0, 0.1), 0px 5px 5px rgba(0, 0, 0, 0.16);
   // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3: 0px 16px 24px rgba(0, 0, 0, .14), 0px 6px 30px rgba(0, 0, 0, .12), 0px 8px 10px rgba(0, 0, 0, .2);
+  --td-shadow-3: 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2);
   // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
-    
-  --td-shadow-inset-top: inset 0px .5px 0px #5E5E5E;
-  --td-shadow-inset-right: inset .5px 0px 0px #5E5E5E;
-  --td-shadow-inset-bottom: inset 0px -.5px 0px #5E5E5E;
-  --td-shadow-inset-left: inset -.5px 0px 0px #5E5E5E;
-  
+
+  --td-shadow-inset-top: inset 0px 0.5px 0px #5e5e5e;
+  --td-shadow-inset-right: inset 0.5px 0px 0px #5e5e5e;
+  --td-shadow-inset-bottom: inset 0px -0.5px 0px #5e5e5e;
+  --td-shadow-inset-left: inset -0.5px 0px 0px #5e5e5e;
+
   // table 特定阴影
-  --td-table-shadow-color: rgba(0, 0, 0, .55);
-  
+  --td-table-shadow-color: rgba(0, 0, 0, 0.55);
+
   // 滚动条颜色
-  --td-scrollbar-color: rgba(255, 255, 255, .1);
-}
\ No newline at end of file
+  --td-scrollbar-color: rgba(255, 255, 255, 0.1);
+}
diff --git a/src/style/theme/green.less b/src/style/theme/green.less
index c2323e5..b23183e 100644
--- a/src/style/theme/green.less
+++ b/src/style/theme/green.less
@@ -1,14 +1,27 @@
-:root[theme-color='green'],
-:root[theme-color='green'][theme-mode='dark'] {
+:root[theme-color='green'] {
   --td-brand-color: #00a870;
-  --td-brand-color-1: #dff7ed;
-  --td-brand-color-2: #a9e8cd;
-  --td-brand-color-3: #69d5ab;
-  --td-brand-color-4: #30bf8b;
+  --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: #00935d;
-  --td-brand-color-7: #007e4a;
-  --td-brand-color-8: #006937;
-  --td-brand-color-9: #005426;
-  --td-brand-color-10: #004114;
+  --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;
+}
+
+: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/light.less b/src/style/theme/light.less
index 97f22e8..e33dfea 100644
--- a/src/style/theme/light.less
+++ b/src/style/theme/light.less
@@ -1,89 +1,87 @@
 :root,
 :root[theme-mode='light'] {
-  --td-brand-color-8: #0052D9;
-  --td-brand-color-1: #ECF2FE;
-  --td-brand-color-2: #D4E3FC;
-  --td-brand-color-3: #BBD3FB;
-  --td-brand-color-4: #96BBF8;
-  --td-brand-color-5: #699EF5;
-  --td-brand-color-6: #4787F0;
-  --td-brand-color-7: #266FE8;
-  --td-brand-color-8: #0052D9;
-  --td-brand-color-9: #0034B5;
-  --td-brand-color-10: #001F97;
+  --td-brand-color-1: #e0ebff;
+  --td-brand-color-2: #c0d8ff;
+  --td-brand-color-3: #a1c4ff;
+  --td-brand-color-4: #81b1ff;
+  --td-brand-color-5: #5f9bff;
+  --td-brand-color-6: #3d87ff;
+  --td-brand-color-7: #176eff;
+  --td-brand-color-8: #0052d9;
+  --td-brand-color-9: #0048cd;
+  --td-brand-color-10: #0035b5;
 
-  --td-warning-color-1: #FEF3E6;
-  --td-warning-color-2: #F9E0C7;
-  --td-warning-color-3: #F7C797;
-  --td-warning-color-4: #F2995F;
-  --td-warning-color-5: #ED7B2F;
-  --td-warning-color-6: #D35A21;
-  --td-warning-color-7: #BA431B;
-  --td-warning-color-8: #9E3610;
-  --td-warning-color-9: #842B0B;
-  --td-warning-color-10: #5A1907;
+  --td-warning-color-1: #fef3e6;
+  --td-warning-color-2: #f9e0c7;
+  --td-warning-color-3: #f7c797;
+  --td-warning-color-4: #f2995f;
+  --td-warning-color-5: #ed7b2f;
+  --td-warning-color-6: #d35a21;
+  --td-warning-color-7: #ba431b;
+  --td-warning-color-8: #9e3610;
+  --td-warning-color-9: #842b0b;
+  --td-warning-color-10: #5a1907;
 
-  --td-error-color-1: #FDECEE;
-  --td-error-color-2: #F9D7D9;
-  --td-error-color-3: #F8B9BE;
-  --td-error-color-4: #F78D94;
-  --td-error-color-5: #F36D78;
-  --td-error-color-6: #E34D59;
-  --td-error-color-7: #C9353F;
-  --td-error-color-8: #B11F26;
+  --td-error-color-1: #fdecee;
+  --td-error-color-2: #f9d7d9;
+  --td-error-color-3: #f8b9be;
+  --td-error-color-4: #f78d94;
+  --td-error-color-5: #f36d78;
+  --td-error-color-6: #e34d59;
+  --td-error-color-7: #c9353f;
+  --td-error-color-8: #b11f26;
   --td-error-color-9: #951114;
   --td-error-color-10: #680506;
 
-  --td-success-color-1: #E8F8F2;
-  --td-success-color-2: #BCEBDC;
-  --td-success-color-3: #85DBBE;
-  --td-success-color-4: #48C79C;
-  --td-success-color-5: #00A870;
-  --td-success-color-6: #078D5C;
+  --td-success-color-1: #e8f8f2;
+  --td-success-color-2: #bcebdc;
+  --td-success-color-3: #85dbbe;
+  --td-success-color-4: #48c79c;
+  --td-success-color-5: #00a870;
+  --td-success-color-6: #078d5c;
   --td-success-color-7: #067945;
   --td-success-color-8: #056334;
-  --td-success-color-9: #044F2A;
+  --td-success-color-9: #044f2a;
   --td-success-color-10: #033017;
 
-  --td-gray-color-1: #f1f2f5;
-  --td-gray-color-2: #ebedf1;
-  --td-gray-color-3: #e3e6eb;
-  --td-gray-color-4: #d6dbe3;
-  --td-gray-color-5: #bcc4d0;
-  --td-gray-color-6: #97a3b7;
-  --td-gray-color-7: #7787a2;
-  --td-gray-color-8: #5f7292;
-  --td-gray-color-9: #4b5b76;
-  --td-gray-color-10: #3c485c;
-  --td-gray-color-11: #2c3645;
-  --td-gray-color-12: #232a35;
-  --td-gray-color-13: #1c222b;
-  --td-gray-color-14: #13161b;
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eeeeee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
+  --td-gray-color-11: #383838;
+  --td-gray-color-12: #2c2c2c;
+  --td-gray-color-13: #242424;
+  --td-gray-color-14: #181818;
 
   // 文字 & 图标 颜色
   --td-font-white-1: rgba(255, 255, 255, 1);
-  --td-font-white-2: rgba(255, 255, 255, .55);
-  --td-font-white-3: rgba(255, 255, 255, .35);
-  --td-font-white-4: rgba(255, 255, 255, .22);
+  --td-font-white-2: rgba(255, 255, 255, 0.55);
+  --td-font-white-3: rgba(255, 255, 255, 0.35);
+  --td-font-white-4: rgba(255, 255, 255, 0.22);
 
-  --td-font-gray-1: rgba(0, 0, 0, .9);
-  --td-font-gray-2: rgba(0, 0, 0, .6);
-  --td-font-gray-3: rgba(0, 0, 0, .4);
-  --td-font-gray-4: rgba(0, 0, 0, .26);
+  --td-font-gray-1: rgba(0, 0, 0, 0.9);
+  --td-font-gray-2: rgba(0, 0, 0, 0.6);
+  --td-font-gray-3: rgba(0, 0, 0, 0.4);
+  --td-font-gray-4: rgba(0, 0, 0, 0.26);
 
   // 基础颜色
-  --td-brand-color: var(--td-brand-color-8);     // 色彩-品牌-可操作
+  --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作
   --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告
-  --td-error-color: var(--td-error-color-6);     // 色彩-功能-失败
+  --td-error-color: var(--td-error-color-6); // 色彩-功能-失败
   --td-success-color: var(--td-success-color-5); // 色彩-功能-成功
 
-
   // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-7);     // hover态
-  --td-brand-color-focus: var(--td-brand-color-2);     // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-9);    // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3);  // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1);     // 浅色的选中态
+  --td-brand-color-hover: var(--td-brand-color-7); // hover态
+  --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
+  --td-brand-color-active: var(--td-brand-color-9); // 点击态
+  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
+  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
 
   // 警告色扩展
   --td-warning-color-hover: var(--td-warning-color-4);
@@ -107,39 +105,39 @@
   --td-success-color-light: var(--td-success-color-1);
 
   // 遮罩
-  --td-mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出
-  --td-mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用
+  --td-mask-active: rgba(0, 0, 0, 0.6); // 遮罩-弹出
+  --td-mask-disabled: rgba(255, 255, 255, 0.6); // 遮罩-禁用
 
   // 背景色
-  --td-bg-color-page: var(--td-gray-color-2);                        // 色彩 - page
-  --td-bg-color-container: #fff;                                // 色彩 - 容器                       
-  --td-bg-color-container-hover: var(--td-gray-color-1);             // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(--td-gray-color-3);            // 色彩 - 容器 - active
-  --td-bg-color-container-select: #fff;                         // 色彩 - 容器 - select
+  --td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
+  --td-bg-color-container: #fff; // 色彩 - 容器
+  --td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
+  --td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
+  --td-bg-color-container-select: #fff; // 色彩 - 容器 - select
 
-  --td-bg-color-secondarycontainer: var(--td-gray-color-1);          // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);    // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);   // 色彩 - 次级容器 - active
+  --td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
 
-  --td-bg-color-component: var(--td-gray-color-3);                   // 色彩 - 组件
-  --td-bg-color-component-hover: var(--td-gray-color-4);             // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(--td-gray-color-6);            // 色彩 - 组件 - active
-  --td-bg-color-component-disabled: var(--td-gray-color-2);          // 色彩 - 组件 - disabled
+  --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
+  --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
+  --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
 
   // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: #fff;        
+  --td-bg-color-specialcomponent: #fff;
 
   // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
-  --td-bg-color-specialcomponent: #fff;        
+  --td-bg-color-specialcomponent: #fff;
 
   // 文本颜色
-  --td-text-color-primary: var(--td-font-gray-1);      // 色彩-文字-主要
-  --td-text-color-secondary: var(--td-font-gray-2);    // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-gray-3);  // 色彩-文字-占位符/说明
-  --td-text-color-disabled: var(--td-font-gray-4);    // 色彩-文字-禁用
-  --td-text-color-anti: #fff;                      // 色彩-文字-反色
-  --td-text-color-brand: var(--td-brand-color-8);           // 色彩-文字-品牌
-  --td-text-color-link: var(--td-brand-color-8);            // 色彩-文字-链接
+  --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要
+  --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
+  --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明
+  --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
+  --td-text-color-anti: #fff; // 色彩-文字-反色
+  --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌
+  --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接
 
   // 分割线
   --td-border-level-1-color: var(--td-gray-color-3);
@@ -149,21 +147,23 @@
   --td-component-border: var(--td-gray-color-4);
 
   // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1: 0px 1px 10px rgba(0, 0, 0, .05), 0px 4px 5px rgba(0, 0, 0, .08), 0px 2px 4px -1px rgba(0, 0, 0, .12);
+  --td-shadow-1: 0px 1px 10px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
   // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, .05), 0px 8px 10px 1px rgba(0, 0, 0, .06), 0px 5px 5px -3px rgba(0, 0, 0, .1);
+  --td-shadow-2: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
+    0px 5px 5px -3px rgba(0, 0, 0, 0.1);
   // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, .05), 0px 16px 24px 2px rgba(0, 0, 0, .04), 0px 8px 10px -5px rgba(0, 0, 0, .08);
+  --td-shadow-3: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04),
+    0px 8px 10px -5px rgba(0, 0, 0, 0.08);
 
   // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
-  --td-shadow-inset-top: inset 0px .5px 0px #DCDCDC;
-  --td-shadow-inset-right: inset .5px 0px 0px #DCDCDC;
-  --td-shadow-inset-bottom: inset 0px -.5px 0px #DCDCDC;
-  --td-shadow-inset-left: inset -.5px 0px 0px #DCDCDC;
-  
+  --td-shadow-inset-top: inset 0px 0.5px 0px #dcdcdc;
+  --td-shadow-inset-right: inset 0.5px 0px 0px #dcdcdc;
+  --td-shadow-inset-bottom: inset 0px -0.5px 0px #dcdcdc;
+  --td-shadow-inset-left: inset -0.5px 0px 0px #dcdcdc;
+
   // table 特定阴影
-  --td-table-shadow-color: rgba(0, 0, 0, .08);
+  --td-table-shadow-color: rgba(0, 0, 0, 0.08);
 
   // 滚动条颜色
-  --td-scrollbar-color: rgba(0, 0, 0, .1);
+  --td-scrollbar-color: rgba(0, 0, 0, 0.1);
 }
diff --git a/src/style/theme/orange.less b/src/style/theme/orange.less
index 314030d..2c1e4a0 100644
--- a/src/style/theme/orange.less
+++ b/src/style/theme/orange.less
@@ -1,14 +1,28 @@
-:root[theme-color='orange'],
-:root[theme-color='orange'][theme-mode='dark'] {
-  --td-brand-color-1: #ffefdb;
-  --td-brand-color-2: #ffd3a3;
-  --td-brand-color-3: #ffb473;
-  --td-brand-color-4: #ff9247;
+: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: #d6621c;
-  --td-brand-color-7: #c24c08;
-  --td-brand-color-8: #a23c00;
-  --td-brand-color-9: #872d00;
-  --td-brand-color-10: #691f00;
-  --td-brand-color: #c24c08;
+  --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: #7f0a02;
+  --td-brand-color-2: #9b1804;
+  --td-brand-color-3: #b62a07;
+  --td-brand-color-4: #d03e0b;
+  --td-brand-color-5: #e75510;
+  --td-brand-color-6: #ed7b2f;
+  --td-brand-color-7: #d03e0b;
+  --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
index c603d6b..b2e5674 100644
--- a/src/style/theme/pink.less
+++ b/src/style/theme/pink.less
@@ -1,14 +1,27 @@
-:root[theme-color='pink'],
-:root[theme-color='pink'][theme-mode='dark'] {
+:root[theme-color='pink'] {
   --td-brand-color: #ed49b4;
-  --td-brand-color-1: #ffe9ff;
-  --td-brand-color-2: #ffd1fc;
-  --td-brand-color-3: #ffb2f2;
-  --td-brand-color-4: #ff8fe1;
-  --td-brand-color-5: #f6c;
+  --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: #d42c9d;
-  --td-brand-color-8: #bc0088;
-  --td-brand-color-9: #9b006b;
-  --td-brand-color-10: #7b0052;
+  --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: #f172c5;
+  --td-brand-color-1: #8f025e;
+  --td-brand-color-2: #ac0572;
+  --td-brand-color-3: #ca0987;
+  --td-brand-color-4: #e80f9d;
+  --td-brand-color-5: #ed49b4;
+  --td-brand-color-6: #f172c5;
+  --td-brand-color-7: #ed49b4;
+  --td-brand-color-8: #f172c5;
+  --td-brand-color-9: #f491d2;
+  --td-brand-color-10: #fce5f4;
 }
diff --git a/src/style/theme/purple.less b/src/style/theme/purple.less
index e876ad9..7b44a18 100644
--- a/src/style/theme/purple.less
+++ b/src/style/theme/purple.less
@@ -1,14 +1,27 @@
-:root[theme-color='purple'],
-:root[theme-color='purple'][theme-mode='dark'] {
+:root[theme-color='purple'] {
   --td-brand-color: #834ec2;
-  --td-brand-color-1: #f3e0ff;
-  --td-brand-color-2: #e6c4ff;
-  --td-brand-color-3: #d8abff;
-  --td-brand-color-4: #c68cff;
-  --td-brand-color-5: #ae78f0;
-  --td-brand-color-6: #9963d8;
-  --td-brand-color-7: #834ec2;
-  --td-brand-color-8: #6d3bac;
-  --td-brand-color-9: #572796;
-  --td-brand-color-10: #421381;
+  --td-brand-color-1: #eee6f7;
+  --td-brand-color-2: #ddceee;
+  --td-brand-color-3: #ccb6e6;
+  --td-brand-color-4: #bb9ede;
+  --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
index 75152e4..a786c5c 100644
--- a/src/style/theme/red.less
+++ b/src/style/theme/red.less
@@ -1,14 +1,27 @@
-:root[theme-color='red'],
-:root[theme-color='red'][theme-mode='dark'] {
-  --td-brand-color: #e34d59;
-  --td-brand-color-1: #ffe9e9;
-  --td-brand-color-2: #ffccce;
-  --td-brand-color-3: #ffacaf;
-  --td-brand-color-4: #ff888c;
-  --td-brand-color-5: #fb646d;
+: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: #c93043;
-  --td-brand-color-8: #b01531;
-  --td-brand-color-9: #960022;
-  --td-brand-color-10: #730021;
+  --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: #ea7b84;
+  --td-brand-color-1: #8d0309;
+  --td-brand-color-2: #ac0911;
+  --td-brand-color-3: #cc111c;
+  --td-brand-color-4: #e42c3a;
+  --td-brand-color-5: #e34d59;
+  --td-brand-color-6: #ea7b84;
+  --td-brand-color-7: #e34d59;
+  --td-brand-color-8: #ea7b84;
+  --td-brand-color-9: #ef989f;
+  --td-brand-color-10: #fbe5e7;
 }
diff --git a/src/style/theme/yellow.less b/src/style/theme/yellow.less
index 8beb943..b929a9c 100644
--- a/src/style/theme/yellow.less
+++ b/src/style/theme/yellow.less
@@ -1,14 +1,27 @@
-:root[theme-color='yellow'],
-:root[theme-color='yellow'][theme-mode='dark'] {
+:root[theme-color='yellow'] {
   --td-brand-color: #ebb105;
-  --td-brand-color-1: #fff8b8;
-  --td-brand-color-2: #ffe478;
-  --td-brand-color-3: #fbca25;
-  --td-brand-color-4: #ebb105;
-  --td-brand-color-5: #d29c00;
-  --td-brand-color-6: #ba8700;
-  --td-brand-color-7: #a37200;
-  --td-brand-color-8: #8c5f00;
-  --td-brand-color-9: #754c00;
-  --td-brand-color-10: #5e3a00;
+  --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/style/variables.less b/src/style/variables.less
index 21c1a07..a78c537 100644
--- a/src/style/variables.less
+++ b/src/style/variables.less
@@ -223,13 +223,16 @@
 @screen-sm: 768px;
 @screen-md: 992px;
 @screen-lg: 1200px;
+@screen-xl: 1400px;
 
 @screen-sm-min: @screen-sm;
 @screen-md-min: @screen-md;
 @screen-lg-min: @screen-lg;
+@screen-xl-min: @screen-xl;
 
 @screen-sm-max: (@screen-md-min - 1px);
 @screen-md-max: (@screen-lg-min - 1px);
+@screen-lg-max: (@screen-xl-min - 1px);
 
 
 // 动画