feat: 合并1.1.1

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-unused-vars': 'off',
+    'vue/no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
     'vue/no-mutating-props': 'off'

index.css

@@ -82,25 +82,4 @@
   to {
     opacity: 1;
   }
-}
-
-/* 小屏处理 0~1000*/
-.mobile-terminal {
-  display: none;
-}
-@media (max-width: 1000px) {
-  #app {
-    display: none;
-  }
-  .mobile-terminal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100vw;
-    height: 100vh;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 200;
-    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
-  }
 }

index.html

@@ -24,9 +24,6 @@
         </div>
       </div>
     </div>
-    <div class="mobile-terminal">
-      <p>请使用 Web 端进行查看</p>
-    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -26,7 +26,7 @@
     "html2canvas": "^1.4.1",
     "keymaster": "^1.6.2",
     "monaco-editor": "^0.33.0",
-    "naive-ui": "2.30.3",
+    "naive-ui": "2.33.3",
     "pinia": "^2.0.13",
     "screenfull": "^6.0.1",
     "vue": "^3.2.31",

pnpm-lock.yaml

@@ -38,7 +38,7 @@ specifiers:
   lodash: ~4.17.21
   mockjs: ^1.1.0
   monaco-editor: ^0.33.0
-  naive-ui: 2.30.3
+  naive-ui: 2.33.3
   pinia: ^2.0.13
   plop: ^3.0.5
   prettier: ^2.6.2
@@ -77,7 +77,7 @@ dependencies:
   html2canvas: 1.4.1
   keymaster: 1.6.2
   monaco-editor: 0.33.0
-  naive-ui: 2.30.3_vue@3.2.37
+  naive-ui: registry.npmmirror.com/naive-ui/2.33.3_vue@3.2.37
   pinia: 2.0.14_ub5l46u3nefphax5x2tezui4oq
   screenfull: 6.0.1
   vue: 3.2.37
@@ -458,7 +458,7 @@ packages:
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/types': 17.0.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
     dev: true
 
   /@commitlint/execute-rule/17.0.0:
@@ -500,11 +500,11 @@ packages:
       '@commitlint/execute-rule': 17.0.0
       '@commitlint/resolve-extends': 17.0.0
       '@commitlint/types': 17.0.0
-      '@types/node': 17.0.43
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
       chalk: 4.1.2
       cosmiconfig: 7.0.1
       cosmiconfig-typescript-loader: 2.0.1_sg2ukyc6p547g74ru6fclbyzsu
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       resolve-from: 5.0.0
       typescript: 4.7.3
     transitivePeerDependencies:
@@ -543,7 +543,7 @@ packages:
       '@commitlint/config-validator': 17.0.0
       '@commitlint/types': 17.0.0
       import-fresh: 3.3.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       resolve-from: 5.0.0
       resolve-global: 1.0.0
     dev: true
@@ -585,22 +585,6 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@css-render/plugin-bem/0.15.10_css-render@0.15.10:
-    resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==}
-    peerDependencies:
-      css-render: ~0.15.10
-    dependencies:
-      css-render: 0.15.10
-    dev: false
-
-  /@css-render/vue3-ssr/0.15.10_vue@3.2.37:
-    resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      vue: 3.2.37
-    dev: false
-
   /@emmetio/abbreviation/2.2.3:
     resolution: {integrity: sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA==}
     dependencies:
@@ -617,10 +601,6 @@ packages:
     resolution: {integrity: sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==}
     dev: true
 
-  /@emotion/hash/0.8.0:
-    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
-    dev: false
-
   /@eslint/eslintrc/1.3.0:
     resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -754,10 +734,6 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.13
     dev: true
 
-  /@juggle/resize-observer/3.3.1:
-    resolution: {integrity: sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==}
-    dev: false
-
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -863,13 +839,6 @@ packages:
       rxjs: 7.5.5
     dev: true
 
-  /@types/jest/27.5.2:
-    resolution: {integrity: sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==}
-    dependencies:
-      jest-matcher-utils: 27.5.1
-      pretty-format: 27.5.1
-    dev: false
-
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -886,15 +855,9 @@ packages:
     resolution: {integrity: sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==}
     dependencies:
       '@types/fined': 1.1.3
-      '@types/node': 16.11.40
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
     dev: true
 
-  /@types/lodash-es/4.17.6:
-    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
-    dependencies:
-      '@types/lodash': 4.14.185
-    dev: false
-
   /@types/lodash/4.14.185:
     resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==}
     dev: false
@@ -911,9 +874,6 @@ packages:
     resolution: {integrity: sha512-7bOWglXUO6f21NG3YDI7hIpeMX3M59GG+DzZuzX2EkFKYUnRoxq3EOg4R0KNv2hxryY9M3UUqG5akwwsifrukw==}
     dev: true
 
-  /@types/node/17.0.43:
-    resolution: {integrity: sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA==}
-
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -925,13 +885,13 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 17.0.43
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
     dev: true
 
   /@types/through/0.0.30:
     resolution: {integrity: sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==}
     dependencies:
-      '@types/node': 17.0.43
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
     dev: true
 
   /@typescript-eslint/eslint-plugin/5.28.0_evi7yu7wunhzwb24olrfvzynny:
@@ -1223,7 +1183,7 @@ packages:
     dependencies:
       '@vue/runtime-core': 3.2.37
       '@vue/shared': 3.2.37
-      csstype: 2.6.20
+      csstype: registry.npmmirror.com/csstype/2.6.20
 
   /@vue/server-renderer/3.2.37_vue@3.2.37:
     resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@@ -1332,6 +1292,7 @@ packages:
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
+    dev: true
 
   /ansi-regex/6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
@@ -1350,11 +1311,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-
-  /ansi-styles/5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-    dev: false
+    dev: true
 
   /anymatch/3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
@@ -1425,10 +1382,6 @@ packages:
     resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
     dev: true
 
-  /async-validator/4.1.1:
-    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
-    dev: false
-
   /asynckit/0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
@@ -1603,6 +1556,7 @@ packages:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
+    dev: true
 
   /chalk/5.0.1:
     resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
@@ -1802,7 +1756,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       compare-func: 2.0.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       q: 1.5.1
     dev: true
 
@@ -1813,7 +1767,7 @@ packages:
     dependencies:
       JSONStream: 1.3.5
       is-text-path: 1.0.1
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       meow: 8.1.2
       split2: 3.2.2
       through2: 4.0.2
@@ -1832,7 +1786,7 @@ packages:
       '@types/node': '*'
       typescript: '>=3'
     dependencies:
-      '@types/node': 17.0.43
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
       cosmiconfig: 7.0.1
       ts-node: 10.8.1_sg2ukyc6p547g74ru6fclbyzsu
       typescript: 4.7.3
@@ -1875,45 +1829,17 @@ packages:
       utrie: 1.0.2
     dev: false
 
-  /css-render/0.15.10:
-    resolution: {integrity: sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==}
-    dependencies:
-      '@emotion/hash': 0.8.0
-      '@types/node': 17.0.43
-      csstype: 3.0.11
-    dev: false
-
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
     dev: true
 
-  /csstype/2.6.20:
-    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
-
-  /csstype/3.0.11:
-    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
-    dev: false
-
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
     dev: true
 
-  /date-fns-tz/1.3.4_date-fns@2.28.0:
-    resolution: {integrity: sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==}
-    peerDependencies:
-      date-fns: '>=2.0.0'
-    dependencies:
-      date-fns: 2.28.0
-    dev: false
-
-  /date-fns/2.28.0:
-    resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==}
-    engines: {node: '>=0.11'}
-    dev: false
-
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -2012,11 +1938,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /diff-sequences/27.5.1:
-    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dev: false
-
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -2476,10 +2397,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /evtd/0.2.3:
-    resolution: {integrity: sha512-tmiT1YUVqFjTY+BSBOAskL83xNx41iUfpvKP6Gcd/xMHjg3mnER98jXGXJyKnxCG19uPc6EhZiUC+MUyvoqCtw==}
-    dev: false
-
   /execa/5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -2748,7 +2665,7 @@ packages:
     hasBin: true
     dependencies:
       dargs: 7.0.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       meow: 8.1.2
       split2: 3.2.2
       through2: 4.0.2
@@ -2875,6 +2792,7 @@ packages:
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
+    dev: true
 
   /has-property-descriptors/1.0.0:
     resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
@@ -3031,7 +2949,7 @@ packages:
       cli-width: 3.0.0
       external-editor: 3.1.0
       figures: 3.2.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       mute-stream: 0.0.8
       ora: 5.4.1
       run-async: 2.4.1
@@ -3291,31 +3209,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /jest-diff/27.5.1:
-    resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      chalk: 4.1.2
-      diff-sequences: 27.5.1
-      jest-get-type: 27.5.1
-      pretty-format: 27.5.1
-    dev: false
-
-  /jest-get-type/27.5.1:
-    resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dev: false
-
-  /jest-matcher-utils/27.5.1:
-    resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      chalk: 4.1.2
-      jest-diff: 27.5.1
-      jest-get-type: 27.5.1
-      pretty-format: 27.5.1
-    dev: false
-
   /js-stringify/1.0.2:
     resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
     dev: true
@@ -3452,10 +3345,6 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash-es/4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-    dev: false
-
   /lodash.get/4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: true
@@ -3466,6 +3355,7 @@ packages:
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
 
   /log-symbols/4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
@@ -3634,31 +3524,6 @@ packages:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
 
-  /naive-ui/2.30.3_vue@3.2.37:
-    resolution: {integrity: sha512-s6iphodOfLklhgAGtzhzoE0oPi6eY72UufUDRySBbfV+r+64vw9omYUOqk3Z1M/t/Mh8KwqW6z+ex8bYftFKPA==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      '@css-render/plugin-bem': 0.15.10_css-render@0.15.10
-      '@css-render/vue3-ssr': 0.15.10_vue@3.2.37
-      '@types/lodash': 4.14.185
-      '@types/lodash-es': 4.17.6
-      async-validator: 4.1.1
-      css-render: 0.15.10
-      date-fns: 2.28.0
-      date-fns-tz: 1.3.4_date-fns@2.28.0
-      evtd: 0.2.3
-      highlight.js: 11.5.1
-      lodash: 4.17.21
-      lodash-es: 4.17.21
-      seemly: 0.3.4
-      treemate: 0.3.11
-      vdirs: 0.1.8_vue@3.2.37
-      vooks: 0.2.12_vue@3.2.37
-      vue: 3.2.37
-      vueuc: 0.4.44_vue@3.2.37
-    dev: false
-
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -4100,15 +3965,6 @@ packages:
     hasBin: true
     dev: true
 
-  /pretty-format/27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-    dev: false
-
   /promise/7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
     dependencies:
@@ -4225,10 +4081,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /react-is/17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-    dev: false
-
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -4444,12 +4296,6 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: false
 
-  /seemly/0.3.4:
-    resolution: {integrity: sha512-/crL+UfbtYd6NdLdnf58xaABfeSRt5uKE4N1SFQAW7nIznOrJQchAaslJHxV8/iAfV0LWInrmxJBFdDb0c2/sw==}
-    dependencies:
-      '@types/jest': 27.5.2
-    dev: false
-
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
@@ -4650,6 +4496,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
+    dev: true
 
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -4713,10 +4560,6 @@ packages:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
     dev: true
 
-  /treemate/0.3.11:
-    resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
-    dev: false
-
   /trim-newlines/3.0.1:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
@@ -4741,7 +4584,7 @@ packages:
       '@tsconfig/node12': 1.0.10
       '@tsconfig/node14': 1.0.2
       '@tsconfig/node16': 1.0.3
-      '@types/node': 17.0.43
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
       acorn: 8.7.1
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -4908,15 +4751,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vdirs/0.1.8_vue@3.2.37:
-    resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      evtd: 0.2.3
-      vue: 3.2.37
-    dev: false
-
   /vite-plugin-compression/0.5.1_vite@2.9.9:
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
@@ -5001,15 +4835,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /vooks/0.2.12_vue@3.2.37:
-    resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      evtd: 0.2.3
-      vue: 3.2.37
-    dev: false
-
   /vscode-css-languageservice/5.4.2:
     resolution: {integrity: sha512-DT7+7vfdT2HDNjDoXWtYJ0lVDdeDEdbMNdK4PKqUl2MS8g7PWt7J5G9B6k9lYox8nOfhCEjLnoNC3UKHHCR1lg==}
     dependencies:
@@ -5183,7 +5008,7 @@ packages:
       eslint-visitor-keys: 3.3.0
       espree: 9.3.2
       esquery: 1.4.0
-      lodash: 4.17.21
+      lodash: registry.npmmirror.com/lodash/4.17.21
       semver: 7.3.7
     transitivePeerDependencies:
       - supports-color
@@ -5266,21 +5091,6 @@ packages:
       vue: 3.2.37
     dev: false
 
-  /vueuc/0.4.44_vue@3.2.37:
-    resolution: {integrity: sha512-2sLWo1Ow3DRKTDvGVlaWlf0KL+LOqeO6zlvb6nUxWxqj4VjUpg7sMtH+xtvBK+oOXH4goGt1RyLMaBVgPFpqHw==}
-    peerDependencies:
-      vue: ^3.0.11
-    dependencies:
-      '@css-render/vue3-ssr': 0.15.10_vue@3.2.37
-      '@juggle/resize-observer': 3.3.1
-      css-render: 0.15.10
-      evtd: 0.2.3
-      seemly: 0.3.4
-      vdirs: 0.1.8_vue@3.2.37
-      vooks: 0.2.12_vue@3.2.37
-      vue: 3.2.37
-    dev: false
-
   /wcwidth/1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies:
@@ -5396,6 +5206,104 @@ packages:
     dependencies:
       tslib: 2.3.0
 
+  registry.npmmirror.com/@css-render/plugin-bem/0.15.10_css-render@0.15.10:
+    resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz}
+    id: registry.npmmirror.com/@css-render/plugin-bem/0.15.10
+    name: '@css-render/plugin-bem'
+    version: 0.15.10
+    peerDependencies:
+      css-render: ~0.15.10
+    dependencies:
+      css-render: registry.npmmirror.com/css-render/0.15.10
+    dev: false
+
+  registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37:
+    resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz}
+    id: registry.npmmirror.com/@css-render/vue3-ssr/0.15.10
+    name: '@css-render/vue3-ssr'
+    version: 0.15.10
+    peerDependencies:
+      vue: ^3.0.11
+    dependencies:
+      vue: 3.2.37
+    dev: false
+
+  registry.npmmirror.com/@emotion/hash/0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz}
+    name: '@emotion/hash'
+    version: 0.8.0
+    dev: false
+
+  registry.npmmirror.com/@juggle/resize-observer/3.3.1:
+    resolution: {integrity: sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz}
+    name: '@juggle/resize-observer'
+    version: 3.3.1
+    dev: false
+
+  registry.npmmirror.com/@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz}
+    name: '@types/lodash-es'
+    version: 4.17.6
+    dependencies:
+      '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.185
+    dev: false
+
+  registry.npmmirror.com/@types/lodash/4.14.185:
+    resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.185.tgz}
+    name: '@types/lodash'
+    version: 4.14.185
+    dev: false
+
+  registry.npmmirror.com/@types/node/17.0.43:
+    resolution: {integrity: sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-17.0.43.tgz}
+    name: '@types/node'
+    version: 17.0.43
+
+  registry.npmmirror.com/async-validator/4.1.1:
+    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.1.1.tgz}
+    name: async-validator
+    version: 4.1.1
+    dev: false
+
+  registry.npmmirror.com/css-render/0.15.10:
+    resolution: {integrity: sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-render/-/css-render-0.15.10.tgz}
+    name: css-render
+    version: 0.15.10
+    dependencies:
+      '@emotion/hash': registry.npmmirror.com/@emotion/hash/0.8.0
+      '@types/node': registry.npmmirror.com/@types/node/17.0.43
+      csstype: registry.npmmirror.com/csstype/3.0.11
+    dev: false
+
+  registry.npmmirror.com/csstype/2.6.20:
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz}
+    name: csstype
+    version: 2.6.20
+
+  registry.npmmirror.com/csstype/3.0.11:
+    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz}
+    name: csstype
+    version: 3.0.11
+    dev: false
+
+  registry.npmmirror.com/date-fns-tz/1.3.4_date-fns@2.28.0:
+    resolution: {integrity: sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.4.tgz}
+    id: registry.npmmirror.com/date-fns-tz/1.3.4
+    name: date-fns-tz
+    version: 1.3.4
+    peerDependencies:
+      date-fns: '>=2.0.0'
+    dependencies:
+      date-fns: registry.npmmirror.com/date-fns/2.28.0
+    dev: false
+
+  registry.npmmirror.com/date-fns/2.28.0:
+    resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz}
+    name: date-fns
+    version: 2.28.0
+    engines: {node: '>=0.11'}
+    dev: false
+
   registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3:
     resolution: {integrity: sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz}
     id: registry.npmmirror.com/echarts-wordcloud/2.0.0
@@ -5627,6 +5535,12 @@ packages:
     dev: true
     optional: true
 
+  registry.npmmirror.com/evtd/0.2.4:
+    resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz}
+    name: evtd
+    version: 0.2.4
+    dev: false
+
   registry.npmmirror.com/fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz}
     name: fsevents
@@ -5645,6 +5559,64 @@ packages:
     dev: true
     optional: true
 
+  registry.npmmirror.com/highlight.js/11.5.1:
+    resolution: {integrity: sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/highlight.js/-/highlight.js-11.5.1.tgz}
+    name: highlight.js
+    version: 11.5.1
+    engines: {node: '>=12.0.0'}
+    dev: false
+
+  registry.npmmirror.com/lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz}
+    name: lodash-es
+    version: 4.17.21
+    dev: false
+
+  registry.npmmirror.com/lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
+    name: lodash
+    version: 4.17.21
+
+  registry.npmmirror.com/naive-ui/2.33.3_vue@3.2.37:
+    resolution: {integrity: sha512-yz2aKdghMVadtvCSBXyjU2bAuGmwLEUcbzmXdUhSdtcbI6mT+mT8vRy43FnbJangPQ87v080q453vtnydNcnhA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/naive-ui/-/naive-ui-2.33.3.tgz}
+    id: registry.npmmirror.com/naive-ui/2.33.3
+    name: naive-ui
+    version: 2.33.3
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@css-render/plugin-bem': registry.npmmirror.com/@css-render/plugin-bem/0.15.10_css-render@0.15.10
+      '@css-render/vue3-ssr': registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37
+      '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.185
+      '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.6
+      async-validator: registry.npmmirror.com/async-validator/4.1.1
+      css-render: registry.npmmirror.com/css-render/0.15.10
+      date-fns: registry.npmmirror.com/date-fns/2.28.0
+      date-fns-tz: registry.npmmirror.com/date-fns-tz/1.3.4_date-fns@2.28.0
+      evtd: registry.npmmirror.com/evtd/0.2.4
+      highlight.js: registry.npmmirror.com/highlight.js/11.5.1
+      lodash: registry.npmmirror.com/lodash/4.17.21
+      lodash-es: registry.npmmirror.com/lodash-es/4.17.21
+      seemly: registry.npmmirror.com/seemly/0.3.6
+      treemate: registry.npmmirror.com/treemate/0.3.11
+      vdirs: registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37
+      vooks: registry.npmmirror.com/vooks/0.2.12_vue@3.2.37
+      vue: 3.2.37
+      vueuc: registry.npmmirror.com/vueuc/0.4.49_vue@3.2.37
+    dev: false
+
+  registry.npmmirror.com/seemly/0.3.6:
+    resolution: {integrity: sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz}
+    name: seemly
+    version: 0.3.6
+    dev: false
+
+  registry.npmmirror.com/treemate/0.3.11:
+    resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz}
+    name: treemate
+    version: 0.3.11
+    dev: false
+
   registry.npmmirror.com/uglify-js/3.16.0:
     resolution: {integrity: sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/uglify-js/-/uglify-js-3.16.0.tgz}
     name: uglify-js
@@ -5654,3 +5626,45 @@ packages:
     requiresBuild: true
     dev: true
     optional: true
+
+  registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37:
+    resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz}
+    id: registry.npmmirror.com/vdirs/0.1.8
+    name: vdirs
+    version: 0.1.8
+    peerDependencies:
+      vue: ^3.0.11
+    dependencies:
+      evtd: registry.npmmirror.com/evtd/0.2.4
+      vue: 3.2.37
+    dev: false
+
+  registry.npmmirror.com/vooks/0.2.12_vue@3.2.37:
+    resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz}
+    id: registry.npmmirror.com/vooks/0.2.12
+    name: vooks
+    version: 0.2.12
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      evtd: registry.npmmirror.com/evtd/0.2.4
+      vue: 3.2.37
+    dev: false
+
+  registry.npmmirror.com/vueuc/0.4.49_vue@3.2.37:
+    resolution: {integrity: sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vueuc/-/vueuc-0.4.49.tgz}
+    id: registry.npmmirror.com/vueuc/0.4.49
+    name: vueuc
+    version: 0.4.49
+    peerDependencies:
+      vue: ^3.0.11
+    dependencies:
+      '@css-render/vue3-ssr': registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37
+      '@juggle/resize-observer': registry.npmmirror.com/@juggle/resize-observer/3.3.1
+      css-render: registry.npmmirror.com/css-render/0.15.10
+      evtd: registry.npmmirror.com/evtd/0.2.4
+      seemly: registry.npmmirror.com/seemly/0.3.6
+      vdirs: registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37
+      vooks: registry.npmmirror.com/vooks/0.2.12_vue@3.2.37
+      vue: 3.2.37
+    dev: false

src/api/axios.ts

@@ -64,7 +64,6 @@ axiosInstance.interceptors.response.use(
     return Promise.resolve(res.data)
   },
   (err: AxiosResponse) => {
-    httpErrorHandle()
     Promise.reject(err)
   }
 )

src/components/Flipper/index.ts

@@ -0,0 +1,4 @@
+import Flipper from './index.vue'
+type FlipType = 'up' | 'down'
+
+export { Flipper, FlipType }

src/components/Flipper/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
+    <div class="digital front" :data-front="frontTextFromData"></div>
+    <div class="digital back" :data-back="backTextFromData"></div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Flipper'
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, PropType, watch } from 'vue'
+import { FlipType } from '.'
+
+const props = defineProps({
+  flipType: {
+    type: String as PropType<FlipType>,
+    default: () => {
+      return 'down'
+    }
+  },
+  count: {
+    type: [Number, String],
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 600
+  },
+  width: {
+    type: Number,
+    default: 60
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  radius: {
+    type: Number,
+    default: 10
+  },
+  frontColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  backColor: {
+    type: String,
+    default: '#000000'
+  }
+})
+
+const isFlipping = ref(false)
+const frontTextFromData = ref(props.count || 0)
+const backTextFromData = ref(props.count || 0)
+
+// 翻牌
+const flip = (front: string | number, back: string | number) => {
+  // 如果处于翻转中，则不执行
+  if (isFlipping.value) return
+  // 设置翻盘前后数据
+  backTextFromData.value = back
+  frontTextFromData.value = front
+
+  // 设置翻转状态为true
+  isFlipping.value = true
+
+  // 翻牌结束的行为
+  setTimeout(() => {
+    isFlipping.value = false // 设置翻转状态为false
+    frontTextFromData.value = back
+  }, props.duration)
+}
+
+watch(
+  () => props.count,
+  (newVal, oldVal) => {
+    flip(oldVal as string | number, newVal as string | number)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+$frontColor: v-bind('props.frontColor');
+$backColor: v-bind('props.backColor');
+$radius: v-bind('`${props.radius}px`');
+$width: v-bind('`${props.width}px`');
+$height: v-bind('`${props.height}px`');
+$perspective: v-bind('`${props.height * 2}px`');
+$speed: v-bind('`${props.duration / 1000}s`');
+$shadowColor: #000000;
+$lineColor: #4a9ef8;
+
+// #region 动画效果
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+}
+@keyframes backFlipDown {
+  0% {
+    transform: perspective($perspective) rotateX(180deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+}
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(180deg);
+  }
+}
+@keyframes backFlipUp {
+  0% {
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+}
+// #endregion
+
+.M-Flipper {
+  display: inline-block;
+  position: relative;
+  width: $width;
+  height: $height;
+  line-height: $height;
+  border: solid 1px $backColor;
+  border-radius: $radius;
+  background: $frontColor;
+  font-size: $width;
+  color: $frontColor;
+  box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
+  text-align: center;
+  // font-family: 'Helvetica Neue';
+
+  .digital:before,
+  .digital:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: $backColor;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .digital.front:before,
+  .digital.front:after {
+    content: attr(data-front) !important;
+  }
+  .digital.back:before,
+  .digital.back:after {
+    content: attr(data-back) !important;
+  }
+  .digital:before {
+    top: 0;
+    bottom: 50%;
+    border-radius: $radius $radius 0 0;
+    border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.3); // 中间线颜色
+  }
+  .digital:after {
+    top: 50%;
+    bottom: 0;
+    border-radius: 0 0 $radius $radius;
+    line-height: 0;
+  }
+  /*向下翻*/
+  &.down .front:before {
+    z-index: 3;
+  }
+  &.down .back:after {
+    z-index: 2;
+    transform-origin: 50% 0%;
+    transform: perspective($perspective) rotateX(180deg);
+  }
+  &.down .front:after,
+  &.down .back:before {
+    z-index: 1;
+  }
+  &.down.go .front:before {
+    transform-origin: 50% 100%;
+    animation: frontFlipDown $speed ease-in-out both;
+    box-shadow: 0 -2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    backface-visibility: hidden;
+  }
+  &.down.go .back:after {
+    animation: backFlipDown $speed ease-in-out both;
+  }
+  /*向上翻*/
+  &.up .front:after {
+    z-index: 3;
+  }
+  &.up .back:before {
+    z-index: 2;
+    transform-origin: 50% 100%;
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+  &.up .front:before,
+  &.up .back:after {
+    z-index: 1;
+  }
+  &.up.go .front:after {
+    transform-origin: 50% 0;
+    animation: frontFlipUp $speed ease-in-out both;
+    box-shadow: 0 2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    backface-visibility: hidden;
+  }
+  &.up.go .back:before {
+    animation: backFlipUp $speed ease-in-out both;
+  }
+}
+</style>

src/components/GoSystemSet/index.vue

@@ -190,11 +190,14 @@ const handleChange = (e: MouseEvent, item: ListType) => {
     width: 100px;
   }
   .select-min-width {
-    width: 110px;
+    width: 115px;
   }
   @include deep() {
-    .n-list-item:not(:last-child) {
-      border-bottom: 0;
+    .n-list-item {
+      border-bottom: 0!important;
+    }
+    .n-list-item__divider {
+      display: none!important;
     }
   }
 }

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="isGroup">
     <n-divider n-divider style="margin: 10px 0"></n-divider>
-    <n-tag type="warning"> 解散分组「  {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
+    <n-tag type="warning"> 解散分组「 {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
   </div>
 
   <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
@@ -69,6 +69,24 @@
       </setting-item>
     </setting-item-box>
 
+    <!-- 混合模式 -->
+    <setting-item-box v-if="!isCanvas" :alone="true">
+      <template #name>
+        <n-text>混合</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>视频组件需要底色透明一般选中滤色</n-text>
+        </n-tooltip>
+      </template>
+      <setting-item>
+        <n-select v-model:value="chartStyles.blendMode" size="small" filterable :options="BlendModeEnumList"></n-select>
+      </setting-item>
+    </setting-item-box>
+
     <!-- 变换 -->
     <setting-item-box v-if="!isCanvas" name="旋转°">
       <setting-item name="Z轴(平面) - 旋转">
@@ -132,8 +150,9 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { PickCreateComponentType } from '@/packages/index.d'
+import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
 import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
 
 const props = defineProps({
   isGroup: {
@@ -150,14 +169,14 @@ const props = defineProps({
   }
 })
 
-// 百分比格式化persen
+const { HelpOutlineIcon } = icon.ionicons5
+
+// 百分比格式化 person
 const sliderFormatTooltip = (v: string) => {
-  // @ts-ignore
   return `${(parseFloat(v) * 100).toFixed(0)}%`
 }
 // 角度格式化
 const degFormatTooltip = (v: string) => {
-  // @ts-ignore
   return `${v}deg`
 }
 </script>

src/enums/editPageEnum.ts

@@ -1,7 +1,7 @@
 // 鼠标点击左右键
 export enum MouseEventButton {
   LEFT = 1,
-  RIGHT = 2,
+  RIGHT = 2
 }
 
 // 页面拖拽键名
@@ -41,7 +41,16 @@ export enum MenuEnum {
   // 后退
   BACK = 'back',
   FORWORD = 'forward',
-  SAVE = 'save'
+  // 保存
+  SAVE = 'save',
+  // 锁定
+  LOCK = 'lock',
+  // 解除锁定
+  UNLOCK = 'unLock',
+  // 隐藏
+  HIDE = 'hide',
+  // 显示
+  SHOW = 'show'
 }
 
 // Win 键盘枚举
@@ -49,9 +58,9 @@ export enum WinKeyboard {
   CTRL = 'ctrl',
   SHIFT = 'shift',
   ALT = ' alt',
-  CTRL_SOURCE_KEY = "control",
-  SHIFT_SOURCE_KEY = "shift",
-  ALT_SOURCE_KEY = "alt"
+  CTRL_SOURCE_KEY = 'control',
+  SHIFT_SOURCE_KEY = 'shift',
+  ALT_SOURCE_KEY = 'alt'
 }
 
 // Mac 键盘枚举
@@ -60,9 +69,9 @@ export enum MacKeyboard {
   CTRL = '⌘',
   SHIFT = '⇧',
   ALT = '⌥',
-  CTRL_SOURCE_KEY = "⌘",
-  SHIFT_SOURCE_KEY = "⇧",
-  ALT_SOURCE_KEY = "⌥"
+  CTRL_SOURCE_KEY = '⌘',
+  SHIFT_SOURCE_KEY = '⇧',
+  ALT_SOURCE_KEY = '⌥'
 }
 
 // 同步状态枚举

src/enums/httpEnum.ts

@@ -12,7 +12,7 @@ export enum ResultEnum {
   SERVER_FORBIDDEN = 403,
   NOT_FOUND = 404,
   TOKEN_OVERDUE = 886,
-  TIMEOUT = 10042,
+  TIMEOUT = 60000,
 }
 
 // 数据相关

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -24,6 +24,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
 
 const props = defineProps({
   themeSetting: {
@@ -51,8 +52,9 @@ const option = computed(() => {
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
-  (newData, oldData) => {
-    if (newData.dimensions.length !== oldData.dimensions.length) {
+  (newData: { dimensions: any }, oldData) => {
+    if (!isObject(newData) || !('dimensions' in newData)) return
+    if (newData?.dimensions.length !== oldData?.dimensions.length) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {
         seriesArr.push(seriesItem)

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -23,6 +23,7 @@ import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
 
 const props = defineProps({
   themeSetting: {
@@ -50,7 +51,8 @@ const option = computed(() => {
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
-  (newData, oldData) => {
+  (newData: { dimensions: any }, oldData) => {
+    if (!isObject(newData) || !('dimensions' in newData)) return
     if (newData?.dimensions.length !== oldData?.dimensions.length) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -24,6 +24,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
 
 const props = defineProps({
   themeSetting: {
@@ -51,7 +52,8 @@ const option = computed(() => {
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
-  (newData, oldData) => {
+  (newData: { dimensions: any }, oldData) => {
+    if (!isObject(newData) || !('dimensions' in newData)) return
     if (newData?.dimensions.length !== oldData?.dimensions.length) {
       const seriesArr = []
       for (let i = 0; i < newData.dimensions.length - 1; i++) {

src/packages/components/Charts/Maps/MapBase/config.ts

@@ -73,7 +73,7 @@ export const option = {
         textShadowColor: '#000',
         textShadowBlur: 10,
         textBorderWidth: 0,
-        color: '#FFF',
+        color: '#FFFFFF',
         show: true
       },
       itemStyle: {
@@ -95,19 +95,23 @@ export const option = {
       geoIndex: 1,
       tooltip: {
         show: true,
-        backgroundColor: 'rgba(0,0,0,.6)',
-        borderColor: 'rgba(147, 235, 248, .8)',
+        backgroundColor: '#00000060',
+        borderColor: 'rgba(147, 235, 248, 0.8)',
         textStyle: {
-          color: '#FFF'
+          color: '#FFFFFF',
+          fontSize: 12,
         }
       },
       label: {
-        show: false
+        show: false,
+        color: '#FFFFFF',
+        fontSize: 12,
       },
       emphasis: {
         disabled: false,
         label: {
-          color: '#fffFFF'
+          color: '#FFFFFF',
+          fontSize: 12,
         },
         itemStyle: {
           areaColor: '#389BB7',
@@ -126,11 +130,11 @@ export const option = {
           colorStops: [
             {
               offset: 0,
-              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+              color: '#93ebf800' // 0% 处的颜色
             },
             {
               offset: 1,
-              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+              color: '#93ebf820' // 100% 处的颜色
             }
           ],
           globalCoord: false

src/packages/components/Charts/Maps/MapBase/config.vue

@@ -14,7 +14,7 @@
       </SettingItem>
     </SettingItemBox>
 
-    <SettingItemBox name="区域颜色" :alone="true">
+    <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker
           size="small"
@@ -61,12 +61,36 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="聚焦 （预览可见）">
-      <setting-item name="禁用">
+
+    <SettingItemBox name="地理信息名称">
+      <SettingItem name="显示">
+        <n-space>
+          <n-switch v-model:value="seriesList[1].label.show" size="small"></n-switch>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].label.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].label.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="悬浮 （预览可见）">
+      <SettingItem name="禁用">
         <n-space>
           <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
         </n-space>
-      </setting-item>
+      </SettingItem>
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -74,6 +98,14 @@
           v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
         ></n-color-picker>
       </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].emphasis.label.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
       <SettingItem name="阴影">
         <n-color-picker
           size="small"
@@ -97,7 +129,37 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="边框">
+    
+    <SettingItemBox name="悬浮弹窗">
+      <SettingItem name="显示">
+        <n-space>
+          <n-switch v-model:value="seriesList[1].tooltip.show" size="small"></n-switch>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number
+          v-model:value="seriesList[1].tooltip.textStyle.fontSize"
+          :min="1"
+          size="small"
+          placeholder="请输入字体大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="字体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].tooltip.textStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].tooltip.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="区域边框">
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -105,7 +167,7 @@
           v-model:value="seriesList[1].itemStyle.borderColor"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="大小">
+      <SettingItem name="宽度大小">
         <n-input-number
           v-model:value="seriesList[1].itemStyle.borderWidth"
           :min="1"
@@ -129,6 +191,20 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
+      
+    <SettingItemBox name="文本">
+      <SettingItem name="显示">
+        <n-space>
+          <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
+        </n-space>
+      </SettingItem>
+      <SettingItem name="字体大小">
+        <n-input-number v-model:value="seriesList[0].label.fontSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+      <SettingItem name="字体颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
 
     <SettingItemBox name="涟漪">
       <SettingItem name="涟漪大小">

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -61,10 +61,14 @@ const getGeojson = (regionId: string) => {
 //异步时先注册空的 保证初始化不报错
 registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
 
-// 进行更换初始化地图
+// 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  if (props.chartConfig.option.mapRegion.adcode!="china") {
+    await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  }else{
+    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
+  }
   vEchartsSetOption()
 }
 registerMapInitAsync()
@@ -85,7 +89,14 @@ const dataSetHandle = async (dataset: any) => {
 
   isPreview() && vEchartsSetOption()
 }
-
+// 处理海南群岛
+const hainanLandsHandle=async(newData:boolean)=>{
+  if (newData) {
+      await getGeojson('china')
+    } else {
+      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+    }
+}
 //监听 dataset 数据发生变化
 watch(
   () => props.chartConfig.option.dataset,
@@ -102,11 +113,7 @@ watch(
 watch(
   () => props.chartConfig.option.mapRegion.showHainanIsLands,
   async newData => {
-    if (newData) {
-      await getGeojson('china')
-    } else {
-      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-    }
+    await hainanLandsHandle(newData)
     vEchartsSetOption()
   },
   {

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -14,7 +14,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import { isPreview, isArray } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -49,6 +49,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
+    if(!isArray(newData)) return
     dataSetHandle(newData)
   },
   {

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -10,7 +10,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
 import config from './config'
-import { isPreview, isString } from '@/utils'
+import { isPreview, isString, isNumber } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -75,6 +75,7 @@ const dataHandle = (newData: number | string) => {
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
+    if(!isString(newData) && !isNumber(newData)) return
     props.chartConfig.option.series[0].data = [dataHandle(newData)]
     option.value = props.chartConfig.option
   },

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -12,7 +12,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -29,7 +29,7 @@ const props = defineProps({
   }
 })
 
-use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({
   value: {}

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -50,7 +50,7 @@ watch(
       props.chartConfig.option.series[0].roseType = true
     }
   },
-  { deep: true, immediate: true }
+  { deep: false, immediate: true }
 )
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)

src/packages/components/Charts/Scatters/ScatterCommon/index.vue

@@ -20,7 +20,7 @@ import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, isArray } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -69,6 +69,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.dataset,
   (newData, oldData) => {
+    if (!isArray(newData)) return
     if (newData?.length !== oldData?.length) {
       replaceMergeArr.value = ['series']
       // eslint-disable-next-line vue/no-mutating-props

src/packages/components/Decorates/Mores/CountDown/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { CountDownConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FlipType } from '@/components/Flipper'
+
+type STYLE = '时分秒' | '冒号'
+
+export interface OptionType {
+  dataset: number
+  useEndDate: boolean
+  endDate: number
+  style: STYLE
+  showDay: boolean
+  flipperBgColor: string
+  flipperTextColor: string
+  flipperWidth: number
+  flipperHeight: number
+  flipperRadius: number
+  flipperGap: number
+  flipperType: FlipType
+  flipperSpeed: number
+}
+
+export const option: OptionType = {
+  dataset: 10 * 60, // 10分钟
+  useEndDate: false,
+  endDate: new Date().getTime(), // 当前时间
+  style: '时分秒',
+  showDay: false,
+  flipperBgColor: '#16293E',
+  flipperTextColor: '#4A9EF8FF',
+  flipperWidth: 30,
+  flipperHeight: 50,
+  flipperRadius: 5,
+  flipperGap: 10,
+  flipperType: 'down',
+  flipperSpeed: 450
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CountDownConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 100, zIndex: -1 }
+  public chartConfig = cloneDeep(CountDownConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/CountDown/config.vue

@@ -0,0 +1,98 @@
+<template>
+  <collapse-item name="倒计时" expanded>
+    <setting-item-box name="内容" alone>
+      <setting-item name="计时(秒)">
+        <n-input-number
+          v-model:value="optionData.dataset"
+          size="small"
+          :min="0"
+          :disabled="optionData.useEndDate"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="结束日期">
+        <n-date-picker v-model:value="optionData.endDate" type="datetime" :disabled="!optionData.useEndDate" />
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.useEndDate" size="small">使用固定结束日期</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="样式">
+      <setting-item name="风格">
+        <n-select
+          v-model:value="optionData.style"
+          size="small"
+          :options="[
+            { label: '时分秒', value: '时分秒' },
+            { label: '冒号', value: '冒号' }
+          ]"
+        ></n-select>
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.showDay" size="small">显示天</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="翻牌" expanded>
+    <setting-item-box name="样式">
+      <setting-item name="宽度">
+        <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="高度">
+        <n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="间隔">
+        <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="背景色">
+        <n-color-picker
+          size="small"
+          :show-alpha="false"
+          :modes="['hex']"
+          v-model:value="optionData.flipperBgColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="字体色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="行为">
+      <setting-item name="动画">
+        <n-select
+          v-model:value="optionData.flipperType"
+          size="small"
+          :options="[
+            { label: '下翻', value: 'down' },
+            { label: '上翻', value: 'up' }
+          ]"
+        ></n-select>
+      </setting-item>
+      <setting-item name="翻牌速度(毫秒)">
+        <n-input-number
+          v-model:value="optionData.flipperSpeed"
+          size="small"
+          :min="100"
+          :max="900"
+          :step="100"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { OptionType } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<OptionType>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/Mores/CountDown/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/countdown.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const CountDownConfig: ConfigType = {
+  key: 'CountDown',
+  chartKey: 'VCountDown',
+  conKey: 'VCCountDown',
+  title: '倒计时',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Mores/CountDown/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <n-countdown
+      ref="countdownRef"
+      :duration="totalDuration"
+      :render="renderCountdown"
+      :active="countdownActive"
+      v-show="false"
+    />
+    <n-space class="go-decorates-more-countdown" :size="flipperGap" align="center" justify="center">
+      <template v-if="showDay">
+        <flipper
+          :count="item"
+          :width="flipperWidth"
+          :height="flipperHeight"
+          :front-color="flipperTextColor"
+          :back-color="flipperBgColor"
+          :radius="flipperRadius"
+          :flip-type="flipperType"
+          :duration="flipperSpeed"
+          v-for="(item, index) in daysFlipperData"
+          :key="index"
+          class="go-d-block"
+        />
+        <div v-if="style === '时分秒'">天</div>
+        <div v-else>:</div>
+      </template>
+      <flipper
+        :count="item"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :flip-type="flipperType"
+        :duration="flipperSpeed"
+        v-for="(item, index) in hoursFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">时</div>
+      <div v-else>:</div>
+      <flipper
+        :count="item"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :flip-type="flipperType"
+        :duration="flipperSpeed"
+        v-for="(item, index) in minutesFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">分</div>
+      <div v-else>:</div>
+      <flipper
+        :count="item"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :flip-type="flipperType"
+        :duration="flipperSpeed"
+        v-for="(item, index) in secondsFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">秒</div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, ref, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { Flipper } from '@/components/Flipper'
+import { OptionType } from './config'
+import { CountdownInst, CountdownProps } from 'naive-ui/es/countdown/src/Countdown'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  dataset,
+  useEndDate,
+  endDate,
+  style,
+  showDay,
+  flipperBgColor,
+  flipperTextColor,
+  flipperWidth,
+  flipperHeight,
+  flipperRadius,
+  flipperGap,
+  flipperType,
+  flipperSpeed
+} = toRefs(props.chartConfig.option as OptionType)
+
+const countdownRef = ref<CountdownInst | null>()
+const countdownActive = ref(false)
+
+const totalDuration = ref(dataset.value * 1000)
+const daysFlipperData = ref<string[] | number[]>([])
+const hoursFlipperData = ref<string[] | number[]>([])
+const minutesFlipperData = ref<string[] | number[]>([])
+const secondsFlipperData = ref<string[] | number[]>([])
+const getFlipperData = (val: string | number) => {
+  const len = Math.max(val.toString().length, 2)
+  return val
+    .toString()
+    .padStart(len, '0') // 左侧填充|右对齐
+    .split('') // 转数组
+}
+const updateDatasetHandler = (hours: number, minutes: number, seconds: number) => {
+  const days = Math.floor(hours / 24)
+  daysFlipperData.value = getFlipperData(days)
+  hoursFlipperData.value = getFlipperData(showDay.value ? hours % 24 : hours)
+  minutesFlipperData.value = getFlipperData(minutes)
+  secondsFlipperData.value = getFlipperData(seconds)
+}
+
+const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds }) => {
+  updateDatasetHandler(hours, minutes, seconds)
+}
+
+const updateTotalDuration = () => {
+  countdownActive.value = false
+  totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
+  countdownRef.value?.reset && countdownRef.value?.reset()
+  countdownActive.value = true
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.chartConfig.option.endDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.chartConfig.option.useEndDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  updateTotalDuration()
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('decorates-more-countdown') {
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+  font-size: v-bind('`${flipperWidth}px`');
+  line-height: v-bind('`${flipperHeight}px`');
+  color: v-bind('flipperTextColor');
+  user-select: none;
+}
+</style>

src/packages/components/Decorates/Mores/FlipperNumber/config.ts

@@ -0,0 +1,39 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlipperNumberConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FlipType } from '@/components/Flipper'
+
+export interface OptionType {
+  dataset: number | string
+  flipperLength: number
+  flipperBgColor: string
+  flipperTextColor: string
+  flipperWidth: number
+  flipperHeight: number
+  flipperRadius: number
+  flipperGap: number
+  flipperType: FlipType
+  flipperSpeed: number
+}
+
+export const option: OptionType = {
+  dataset: 3234,
+  flipperLength: 6,
+  flipperBgColor: '#16293E',
+  flipperTextColor: '#4A9EF8FF',
+  flipperWidth: 30,
+  flipperHeight: 50,
+  flipperRadius: 5,
+  flipperGap: 10,
+  flipperType: 'down',
+  flipperSpeed: 450
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlipperNumberConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 100, zIndex: -1 }
+  public chartConfig = cloneDeep(FlipperNumberConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Mores/FlipperNumber/config.vue

@@ -0,0 +1,72 @@
+<template>
+  <collapse-item name="翻牌" :expanded="true">
+    <setting-item-box name="内容">
+      <setting-item name="初始值">
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="翻牌个数">
+        <n-input-number v-model:value="optionData.flipperLength" size="small" :min="1"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="样式">
+      <setting-item name="宽度">
+        <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="高度">
+        <n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="间隔">
+        <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="背景色">
+        <n-color-picker
+          size="small"
+          :show-alpha="false"
+          :modes="['hex']"
+          v-model:value="optionData.flipperBgColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="字体色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="行为">
+      <setting-item name="动画">
+        <n-select
+          v-model:value="optionData.flipperType"
+          size="small"
+          :options="[
+            { label: '下翻', value: 'down' },
+            { label: '上翻', value: 'up' }
+          ]"
+        ></n-select>
+      </setting-item>
+      <setting-item name="翻牌速度(毫秒)">
+        <n-input-number
+          v-model:value="optionData.flipperSpeed"
+          size="small"
+          :min="100"
+          :max="900"
+          :step="100"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { OptionType } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<OptionType>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/flipper-number.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FlipperNumberConfig: ConfigType = {
+  key: 'FlipperNumber',
+  chartKey: 'VFlipperNumber',
+  conKey: 'VCFlipperNumber',
+  title: '数字翻牌',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Mores/FlipperNumber/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center">
+    <flipper
+      :count="item"
+      :width="flipperWidth"
+      :height="flipperHeight"
+      :front-color="flipperTextColor"
+      :back-color="flipperBgColor"
+      :radius="flipperRadius"
+      :flip-type="flipperType"
+      :duration="flipperSpeed"
+      v-for="(item, index) in flipperData"
+      :key="index"
+      class="go-d-block"
+    />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { Flipper } from '@/components/Flipper'
+import { OptionType } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  flipperLength,
+  flipperBgColor,
+  flipperTextColor,
+  flipperWidth,
+  flipperHeight,
+  flipperRadius,
+  flipperGap,
+  flipperType,
+  flipperSpeed
+} = toRefs(props.chartConfig.option as OptionType)
+
+const flipperData = ref<string[] | number[]>([])
+const getFlipperData = (val: string | number) => {
+  return val
+    .toString()
+    .padStart(flipperLength.value, '0') // 左侧填充|右对齐
+    .split('') // 转数组
+    .slice(flipperLength.value * -1) // 从后面取指定长度
+}
+const updateDatasetHandler = (newVal: string | number) => {
+  flipperData.value = getFlipperData(newVal)
+}
+
+watch(
+  () => props.chartConfig.option,
+  newVal => {
+    updateDatasetHandler((newVal as OptionType).dataset)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
+  updateDatasetHandler(newVal)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('decorates-flipper-number') {
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+}
+</style>

src/packages/components/Decorates/Mores/Number/index.ts

@@ -1,12 +1,12 @@
 import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
   key: 'Number',
   chartKey: 'VNumber',
   conKey: 'VCNumber',
-  title: '数字翻牌',
+  title: '数字计数',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,

src/packages/components/Decorates/Mores/index.ts

@@ -1,5 +1,7 @@
 import { NumberConfig } from './Number/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
+import { CountDownConfig } from './CountDown/index'
+import { FlipperNumberConfig } from './FlipperNumber'
 
-export default [TimeCommonConfig, NumberConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]

src/packages/components/Tables/Tables/TableScrollBoard/config.vue

@@ -28,57 +28,29 @@
       <SettingItem name="显示行号">
         <n-switch size="small" v-model:value="optionData.index" />
       </SettingItem>
-      
     </SettingItemBox>
 
     <SettingItemBox name="配置" :alone="true">
       <SettingItem name="表头数据">
-        <n-input
-          v-model:value="header"
-          :min="1"
-          size="small"
-          placeholder="表头数据(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
       </SettingItem>
       <SettingItem name="列对齐方式">
-        <n-input
-          v-model:value="align"
-          :min="1"
-          size="small"
-          placeholder="对齐方式(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
       </SettingItem>
       <SettingItem name="列宽度">
-        <n-input
-          v-model:value="columnWidth"
-          :min="1"
-          size="small"
-          placeholder="列宽度(英文','分割)"
-        ></n-input>
+        <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
       </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">
       <SettingItem name="表头背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.headerBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
       </SettingItem>
       <SettingItem name="奇数行背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.oddRowBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
       </SettingItem>
       <SettingItem name="偶数行背景色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.evenRowBGC"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
@@ -86,36 +58,43 @@
 
 <script setup lang="ts">
 import { PropType, ref, watch } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
-    required: true,
-  },
+    required: true
+  }
 })
 
-const header = ref(props.optionData.header.toString())
-const align = ref(props.optionData.align.toString())
-const columnWidth = ref(props.optionData.columnWidth.toString())
+const header = ref()
+const align = ref()
+const columnWidth = ref()
+
+watch(
+  () => props.optionData,
+  newData => {
+    header.value = props.optionData.header.toString()
+    align.value = props.optionData.align.toString()
+    columnWidth.value = props.optionData.columnWidth.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
 
-watch([header, align, columnWidth],([headerNew,alignNew,columnWidthNew],[headerOld,alignOld,columnWidthOld])=>{
-  if(headerNew !== headerOld){
+watch([header, align, columnWidth], ([headerNew, alignNew, columnWidthNew], [headerOld, alignOld, columnWidthOld]) => {
+  if (headerNew !== headerOld) {
     props.optionData.header = headerNew.split(',')
   }
-  if(alignNew !== alignOld){
+  if (alignNew !== alignOld) {
     props.optionData.align = alignNew.split(',')
   }
-  if(columnWidthNew !== columnWidthOld){
+  if (columnWidthNew !== columnWidthOld) {
     // @ts-ignore
     props.optionData.columnWidth = columnWidthNew.split(',')
   }
 })
-
-
 </script>

src/packages/index.d.ts

@@ -36,6 +36,12 @@ interface EchartsDataType {
   source: any[]
 }
 
+// 组件状态
+export interface StatusType {
+  lock: boolean
+  hide: boolean
+}
+
 // 滤镜/变换枚举
 export enum FilterEnum {
   // 是否启用
@@ -59,14 +65,36 @@ export enum FilterEnum {
 
   // 倾斜
   SKEW_X = 'skewX',
-  SKEW_Y = 'skewY'
+  SKEW_Y = 'skewY',
+
+  // 混合模式
+  BLEND_MODE = 'blendMode'
 }
 
+export const BlendModeEnumList = [
+  { label: '正常', value: 'normal' },
+  { label: '正片叠底', value: 'multiply' },
+  { label: '叠加', value: 'overlay' },
+  { label: '滤色', value: 'screen' },
+  { label: '变暗', value: 'darken' },
+  { label: '变亮', value: 'lighten' },
+  { label: '颜色减淡', value: 'color-dodge' },
+  { label: '颜色加深', value: 'color-burn;' },
+  { label: '强光', value: 'hard-light' },
+  { label: '柔光', value: 'soft-light' },
+  { label: '差值', value: 'difference' },
+  { label: '排除', value: 'exclusion' },
+  { label: '色相', value: 'hue' },
+  { label: '饱和度', value: 'saturation' },
+  { label: '颜色', value: 'color' },
+  { label: '亮度', value: 'luminosity' }
+]
+
 // 组件实例类
 export interface PublicConfigType {
   id: string
   isGroup: boolean
-  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
+  attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number }
   styles: {
     [FilterEnum.FILTERS_SHOW]: boolean
     [FilterEnum.OPACITY]: number
@@ -81,14 +109,12 @@ export interface PublicConfigType {
 
     [FilterEnum.SKEW_X]: number
     [FilterEnum.SKEW_Y]: number
+    [FilterEnum.BLEND_MODE]: string
     // 动画
     animations: string[]
-  },
-  status: {
-    lock: boolean,
-    hide: boolean,
-  },
+  }
   filter?: string
+  status: StatusType
   setPosition: Function
 }
 

src/packages/public/publicConfig.ts

@@ -66,6 +66,9 @@ export class PublicConfigClass implements PublicConfigType {
     skewX: 0,
     skewY: 0,
 
+    // 混合模式
+    blendMode: 'normal',
+
     // 动画
     animations: []
   }

src/plugins/icon.ts

@@ -58,7 +58,12 @@ import {
   ChevronDownOutline as ChevronDownOutlineIcon,
   Pulse as PulseIcon,
   Folder as FolderIcon,
-  FolderOpen as FolderOpenIcon
+  FolderOpen as FolderOpenIcon,
+  Image as ImageIcon,
+  Images as ImagesIcon,
+  List as ListIcon,
+  EyeOutline as EyeOutlineIcon,
+  EyeOffOutline as EyeOffOutlineIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -215,7 +220,16 @@ const ionicons5 = {
   // 文件夹
   FolderIcon,
   // 文件夹打开
-  FolderOpenIcon
+  FolderOpenIcon,
+  // 图片
+  ImageIcon,
+  // 多个图片
+  ImagesIcon,
+  // 列表
+  ListIcon,
+  // 眼睛
+  EyeOutlineIcon,
+  EyeOffOutlineIcon
 }
 
 const carbon = {

src/plugins/naive.ts

@@ -1,4 +1,4 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import {
   create,
   NA,
@@ -8,6 +8,7 @@ import {
   NH3,
   NH4,
   NCode,
+  NCountdown,
   NText,
   NTime,
   NEllipsis,
@@ -98,7 +99,7 @@ import {
   NWatermark,
   NEmpty,
   NCollapseTransition
-} from 'naive-ui';
+} from 'naive-ui'
 
 const naive = create({
   components: [
@@ -109,6 +110,7 @@ const naive = create({
     NH3,
     NH4,
     NCode,
+    NCountdown,
     NText,
     NTime,
     NEllipsis,
@@ -199,9 +201,9 @@ const naive = create({
     NWatermark,
     NEmpty,
     NCollapseTransition
-  ],
-});
+  ]
+})
 
 export function setupNaive(app: App<Element>) {
-  app.use(naive);
+  app.use(naive)
 }

src/settings/designColor.json

@@ -1,8402 +1,3677 @@
 [
   {
-    "CMYK": [
-      4,
-      5,
-      18,
-      0
-    ],
-    "RGB": [
-      249,
-      244,
-      220
-    ],
+    "CMYK": [4, 5, 18, 0],
+    "RGB": [249, 244, 220],
     "hex": "#f9f4dc",
     "name": "乳白",
     "pinyin": "rubai"
   },
   {
-    "CMYK": [
-      3,
-      8,
-      30,
-      0
-    ],
-    "RGB": [
-      249,
-      236,
-      195
-    ],
+    "CMYK": [3, 8, 30, 0],
+    "RGB": [249, 236, 195],
     "hex": "#f7e8aa",
     "name": "杏仁黄",
     "pinyin": "xingrenhuang"
   },
   {
-    "CMYK": [
-      4,
-      13,
-      67,
-      0
-    ],
-    "RGB": [
-      248,
-      223,
-      114
-    ],
+    "CMYK": [4, 13, 67, 0],
+    "RGB": [248, 223, 114],
     "hex": "#f8df72",
     "name": "茉莉黄",
     "pinyin": "molihuang"
   },
   {
-    "CMYK": [
-      5,
-      14,
-      68,
-      1
-    ],
-    "RGB": [
-      248,
-      223,
-      112
-    ],
+    "CMYK": [5, 14, 68, 1],
+    "RGB": [248, 223, 112],
     "hex": "#f8df70",
     "name": "麦秆黄",
     "pinyin": "maiganhuang"
   },
   {
-    "CMYK": [
-      2,
-      16,
-      84,
-      0
-    ],
-    "RGB": [
-      251,
-      218,
-      65
-    ],
+    "CMYK": [2, 16, 84, 0],
+    "RGB": [251, 218, 65],
     "hex": "#fbda41",
     "name": "油菜花黄",
     "pinyin": "youcaihuahuang"
   },
   {
-    "CMYK": [
-      1,
-      18,
-      94,
-      0
-    ],
-    "RGB": [
-      254,
-      215,
-      26
-    ],
+    "CMYK": [1, 18, 94, 0],
+    "RGB": [254, 215, 26],
     "hex": "#fed71a",
     "name": "佛手黄",
     "pinyin": "foshouhuang"
   },
   {
-    "CMYK": [
-      3,
-      16,
-      50,
-      0
-    ],
-    "RGB": [
-      247,
-      222,
-      152
-    ],
+    "CMYK": [3, 16, 50, 0],
+    "RGB": [247, 222, 152],
     "hex": "#f7de98",
     "name": "篾黄",
     "pinyin": "miehuang"
   },
   {
-    "CMYK": [
-      3,
-      17,
-      69,
-      0
-    ],
-    "RGB": [
-      248,
-      216,
-      106
-    ],
+    "CMYK": [3, 17, 69, 0],
+    "RGB": [248, 216, 106],
     "hex": "#f8d86a",
     "name": "葵扇黄",
     "pinyin": "kuishanhuang"
   },
   {
-    "CMYK": [
-      0,
-      20,
-      87,
-      0
-    ],
-    "RGB": [
-      252,
-      211,
-      55
-    ],
+    "CMYK": [0, 20, 87, 0],
+    "RGB": [252, 211, 55],
     "hex": "#fcd337",
     "name": "柠檬黄",
     "pinyin": "ningmenghuang"
   },
   {
-    "CMYK": [
-      0,
-      20,
-      95,
-      0
-    ],
-    "RGB": [
-      252,
-      210,
-      23
-    ],
+    "CMYK": [0, 20, 95, 0],
+    "RGB": [252, 210, 23],
     "hex": "#fcd217",
     "name": "金瓜黄",
     "pinyin": "jinguahuang"
   },
   {
-    "CMYK": [
-      0,
-      21,
-      94,
-      0
-    ],
-    "RGB": [
-      254,
-      209,
-      16
-    ],
+    "CMYK": [0, 21, 94, 0],
+    "RGB": [254, 209, 16],
     "hex": "#ffd111",
     "name": "藤黄",
     "pinyin": "tenghuang"
   },
   {
-    "CMYK": [
-      2,
-      16,
-      39,
-      0
-    ],
-    "RGB": [
-      246,
-      222,
-      173
-    ],
+    "CMYK": [2, 16, 39, 0],
+    "RGB": [246, 222, 173],
     "hex": "#f6dead",
     "name": "酪黄",
     "pinyin": "laohuang"
   },
   {
-    "CMYK": [
-      1,
-      21,
-      70,
-      0
-    ],
-    "RGB": [
-      249,
-      211,
-      103
-    ],
+    "CMYK": [1, 21, 70, 0],
+    "RGB": [249, 211, 103],
     "hex": "#f9d367",
     "name": "淡密黄",
     "pinyin": "danmihuang"
   },
   {
-    "CMYK": [
-      0,
-      23,
-      88,
-      0
-    ],
-    "RGB": [
-      251,
-      205,
-      49
-    ],
+    "CMYK": [0, 23, 88, 0],
+    "RGB": [251, 205, 49],
     "hex": "#fbcd31",
     "name": "大豆黄",
     "pinyin": "dadouhuang"
   },
   {
-    "CMYK": [
-      0,
-      24,
-      94,
-      0
-    ],
-    "RGB": [
-      252,
-      203,
-      22
-    ],
+    "CMYK": [0, 24, 94, 0],
+    "RGB": [252, 203, 22],
     "hex": "#fccb16",
     "name": "素馨黄",
     "pinyin": "suxinhuang"
   },
   {
-    "CMYK": [
-      0,
-      24,
-      94,
-      0
-    ],
-    "RGB": [
-      254,
-      204,
-      17
-    ],
+    "CMYK": [0, 24, 94, 0],
+    "RGB": [254, 204, 17],
     "hex": "#fecc11",
     "name": "向日葵黄",
     "pinyin": "xiangrikuihuang"
   },
   {
-    "CMYK": [
-      0,
-      27,
-      88,
-      0
-    ],
-    "RGB": [
-      251,
-      200,
-      47
-    ],
+    "CMYK": [0, 27, 88, 0],
+    "RGB": [251, 200, 47],
     "hex": "#fbc82f",
     "name": "雅梨黄",
     "pinyin": "yalihuang"
   },
   {
-    "CMYK": [
-      0,
-      28,
-      94,
-      0
-    ],
-    "RGB": [
-      252,
-      197,
-      21
-    ],
+    "CMYK": [0, 28, 94, 0],
+    "RGB": [252, 197, 21],
     "hex": "#fcc515",
     "name": "黄连黄",
     "pinyin": "huanglianhuang"
   },
   {
-    "CMYK": [
-      0,
-      29,
-      95,
-      0
-    ],
-    "RGB": [
-      252,
-      195,
-      7
-    ],
+    "CMYK": [0, 29, 95, 0],
+    "RGB": [252, 195, 7],
     "hex": "#fcc307",
     "name": "金盏黄",
     "pinyin": "jinzhanhuang"
   },
   {
-    "CMYK": [
-      0,
-      32,
-      52,
-      0
-    ],
-    "RGB": [
-      248,
-      195,
-      135
-    ],
+    "CMYK": [0, 32, 52, 0],
+    "RGB": [248, 195, 135],
     "hex": "#f8c387",
     "name": "蛋壳黄",
     "pinyin": "dankehuang"
   },
   {
-    "CMYK": [
-      0,
-      32,
-      52,
-      0
-    ],
-    "RGB": [
-      247,
-      193,
-      115
-    ],
+    "CMYK": [0, 32, 52, 0],
+    "RGB": [247, 193, 115],
     "hex": "#f7c173",
     "name": "肉色",
     "pinyin": "rouse"
   },
   {
-    "CMYK": [
-      0,
-      35,
-      89,
-      0
-    ],
-    "RGB": [
-      251,
-      185,
-      41
-    ],
+    "CMYK": [0, 35, 89, 0],
+    "RGB": [251, 185, 41],
     "hex": "#fbb929",
     "name": "鹅掌黄",
     "pinyin": "ezhanghuang"
   },
   {
-    "CMYK": [
-      0,
-      36,
-      93,
-      0
-    ],
-    "RGB": [
-      251,
-      182,
-      18
-    ],
+    "CMYK": [0, 36, 93, 0],
+    "RGB": [251, 182, 18],
     "hex": "#fbb612",
     "name": "鸡蛋黄",
     "pinyin": "jidanhuang"
   },
   {
-    "CMYK": [
-      0,
-      35,
-      94,
-      0
-    ],
-    "RGB": [
-      252,
-      183,
-      10
-    ],
+    "CMYK": [0, 35, 94, 0],
+    "RGB": [252, 183, 10],
     "hex": "#fcb70a",
     "name": "鼬黄",
     "pinyin": "youhuang"
   },
   {
-    "CMYK": [
-      0,
-      44,
-      84,
-      0
-    ],
-    "RGB": [
-      249,
-      166,
-      51
-    ],
+    "CMYK": [0, 44, 84, 0],
+    "RGB": [249, 166, 51],
     "hex": "#f9a633",
     "name": "榴萼黄",
     "pinyin": "liuehuang"
   },
   {
-    "CMYK": [
-      0,
-      45,
-      92,
-      0
-    ],
-    "RGB": [
-      251,
-      164,
-      20
-    ],
+    "CMYK": [0, 45, 92, 0],
+    "RGB": [251, 164, 20],
     "hex": "#fba414",
     "name": "淡橘橙",
     "pinyin": "danjucheng"
   },
   {
-    "CMYK": [
-      0,
-      47,
-      92,
-      0
-    ],
-    "RGB": [
-      252,
-      161,
-      6
-    ],
+    "CMYK": [0, 47, 92, 0],
+    "RGB": [252, 161, 6],
     "hex": "#fca106",
     "name": "枇杷黄",
     "pinyin": "pipahuang"
   },
   {
-    "CMYK": [
-      0,
-      47,
-      92,
-      0
-    ],
-    "RGB": [
-      252,
-      161,
-      4
-    ],
+    "CMYK": [0, 47, 92, 0],
+    "RGB": [252, 161, 4],
     "hex": "#fca104",
     "name": "橙皮黄",
     "pinyin": "chengpihuang"
   },
   {
-    "CMYK": [
-      0,
-      56,
-      87,
-      0
-    ],
-    "RGB": [
-      252,
-      140,
-      35
-    ],
+    "CMYK": [0, 56, 87, 0],
+    "RGB": [252, 140, 35],
     "hex": "#fc8c23",
     "name": "北瓜黄",
     "pinyin": "beiguahuang"
   },
   {
-    "CMYK": [
-      0,
-      54,
-      92,
-      0
-    ],
-    "RGB": [
-      250,
-      142,
-      22
-    ],
+    "CMYK": [0, 54, 92, 0],
+    "RGB": [250, 142, 22],
     "hex": "#f28e16",
     "name": "杏黄",
     "pinyin": "xinghuang"
   },
   {
-    "CMYK": [
-      0,
-      51,
-      91,
-      0
-    ],
-    "RGB": [
-      255,
-      153,
-      0
-    ],
+    "CMYK": [0, 51, 91, 0],
+    "RGB": [255, 153, 0],
     "hex": "#ff9900",
     "name": "雄黄",
     "pinyin": "xionghuang"
   },
   {
-    "CMYK": [
-      0,
-      56,
-      91,
-      0
-    ],
-    "RGB": [
-      251,
-      139,
-      5
-    ],
+    "CMYK": [0, 56, 91, 0],
+    "RGB": [251, 139, 5],
     "hex": "#fb8b05",
     "name": "万寿菊黄",
     "pinyin": "wanshoujuhuang"
   },
   {
-    "CMYK": [
-      10,
-      13,
-      35,
-      1
-    ],
-    "RGB": [
-      233,
-      221,
-      182
-    ],
+    "CMYK": [10, 13, 35, 1],
+    "RGB": [233, 221, 182],
     "hex": "#e9ddb6",
     "name": "菊蕾白",
     "pinyin": "juleibai"
   },
   {
-    "CMYK": [
-      8,
-      19,
-      84,
-      1
-    ],
-    "RGB": [
-      238,
-      208,
-      69
-    ],
+    "CMYK": [8, 19, 84, 1],
+    "RGB": [238, 208, 69],
     "hex": "#eed045",
     "name": "秋葵黄",
     "pinyin": "qiukuihuang"
   },
   {
-    "CMYK": [
-      6,
-      20,
-      92,
-      1
-    ],
-    "RGB": [
-      242,
-      206,
-      43
-    ],
+    "CMYK": [6, 20, 92, 1],
+    "RGB": [242, 206, 43],
     "hex": "#f2ce2b",
     "name": "硫华黄",
     "pinyin": "liuhuahuang"
   },
   {
-    "CMYK": [
-      6,
-      22,
-      92,
-      0
-    ],
-    "RGB": [
-      241,
-      202,
-      23
-    ],
+    "CMYK": [6, 22, 92, 0],
+    "RGB": [241, 202, 23],
     "hex": "#f1ca17",
     "name": "柚黄",
     "pinyin": "youhuang"
   },
   {
-    "CMYK": [
-      15,
-      20,
-      66,
-      2
-    ],
-    "RGB": [
-      221,
-      200,
-      113
-    ],
+    "CMYK": [15, 20, 66, 2],
+    "RGB": [221, 200, 113],
     "hex": "#ddc871",
     "name": "芒果黄",
     "pinyin": "mangguohuang"
   },
   {
-    "CMYK": [
-      14,
-      22,
-      85,
-      2
-    ],
-    "RGB": [
-      223,
-      194,
-      67
-    ],
+    "CMYK": [14, 22, 85, 2],
+    "RGB": [223, 194, 67],
     "hex": "#dfc243",
     "name": "蒿黄",
     "pinyin": "haohuang"
   },
   {
-    "CMYK": [
-      12,
-      24,
-      95,
-      2
-    ],
-    "RGB": [
-      226,
-      192,
-      39
-    ],
+    "CMYK": [12, 24, 95, 2],
+    "RGB": [226, 192, 39],
     "hex": "#e2c027",
     "name": "姜黄",
     "pinyin": "jianghuang"
   },
   {
-    "CMYK": [
-      11,
-      25,
-      99,
-      1
-    ],
-    "RGB": [
-      228,
-      191,
-      17
-    ],
+    "CMYK": [11, 25, 99, 1],
+    "RGB": [228, 191, 17],
     "hex": "#e4bf11",
     "name": "香蕉黄",
     "pinyin": "xiangjiaohuang"
   },
   {
-    "CMYK": [
-      17,
-      27,
-      94,
-      4
-    ],
-    "RGB": [
-      210,
-      180,
-      44
-    ],
+    "CMYK": [17, 27, 94, 4],
+    "RGB": [210, 180, 44],
     "hex": "#d2b42c",
     "name": "草黄",
     "pinyin": "caohuang"
   },
   {
-    "CMYK": [
-      17,
-      29,
-      100,
-      4
-    ],
-    "RGB": [
-      210,
-      177,
-      22
-    ],
+    "CMYK": [17, 29, 100, 4],
+    "RGB": [210, 177, 22],
     "hex": "#d2b116",
     "name": "新禾绿",
     "pinyin": "xinhelv"
   },
   {
-    "CMYK": [
-      28,
-      26,
-      45,
-      7
-    ],
-    "RGB": [
-      183,
-      174,
-      143
-    ],
+    "CMYK": [28, 26, 45, 7],
+    "RGB": [183, 174, 143],
     "hex": "#b7ae8f",
     "name": "月灰",
     "pinyin": "yuehui"
   },
   {
-    "CMYK": [
-      30,
-      30,
-      70,
-      12
-    ],
-    "RGB": [
-      173,
-      158,
-      85
-    ],
+    "CMYK": [30, 30, 70, 12],
+    "RGB": [173, 158, 85],
     "hex": "#ad9e5f",
     "name": "淡灰绿",
     "pinyin": "danhuilv"
   },
   {
-    "CMYK": [
-      38,
-      38,
-      76,
-      24
-    ],
-    "RGB": [
-      142,
-      128,
-      75
-    ],
+    "CMYK": [38, 38, 76, 24],
+    "RGB": [142, 128, 75],
     "hex": "#8e804b",
     "name": "草灰绿",
     "pinyin": "caohuilv"
   },
   {
-    "CMYK": [
-      36,
-      42,
-      100,
-      29
-    ],
-    "RGB": [
-      136,
-      115,
-      34
-    ],
+    "CMYK": [36, 42, 100, 29],
+    "RGB": [136, 115, 34],
     "hex": "#887322",
     "name": "苔绿",
     "pinyin": "tailv"
   },
   {
-    "CMYK": [
-      36,
-      42,
-      100,
-      30
-    ],
-    "RGB": [
-      134,
-      112,
-      24
-    ],
+    "CMYK": [36, 42, 100, 30],
+    "RGB": [134, 112, 24],
     "hex": "#867018",
     "name": "碧螺春绿",
     "pinyin": "biluochunlv"
   },
   {
-    "CMYK": [
-      47,
-      47,
-      65,
-      42
-    ],
-    "RGB": [
-      104,
-      94,
-      72
-    ],
+    "CMYK": [47, 47, 65, 42],
+    "RGB": [104, 94, 72],
     "hex": "#685e48",
     "name": "燕羽灰",
     "pinyin": "yanyuhui"
   },
   {
-    "CMYK": [
-      46,
-      47,
-      69,
-      42
-    ],
-    "RGB": [
-      105,
-      94,
-      69
-    ],
+    "CMYK": [46, 47, 69, 42],
+    "RGB": [105, 94, 69],
     "hex": "#695e45",
     "name": "蟹壳灰",
     "pinyin": "xiekehui"
   },
   {
-    "CMYK": [
-      48,
-      48,
-      100,
-      45
-    ],
-    "RGB": [
-      100,
-      88,
-      34
-    ],
+    "CMYK": [48, 48, 100, 45],
+    "RGB": [100, 88, 34],
     "hex": "#645822",
     "name": "潭水绿",
     "pinyin": "tanshuilv"
   },
   {
-    "CMYK": [
-      50,
-      50,
-      10,
-      48
-    ],
-    "RGB": [
-      94,
-      83,
-      20
-    ],
+    "CMYK": [50, 50, 10, 48],
+    "RGB": [94, 83, 20],
     "hex": "#5e5314",
     "name": "橄榄绿",
     "pinyin": "ganlanlv"
   },
   {
-    "CMYK": [
-      2,
-      6,
-      18,
-      0
-    ],
-    "RGB": [
-      249,
-      241,
-      219
-    ],
+    "CMYK": [2, 6, 18, 0],
+    "RGB": [249, 241, 219],
     "hex": "#f9f1db",
     "name": "蚌肉白",
     "pinyin": "bangroubai"
   },
   {
-    "CMYK": [
-      3,
-      10,
-      31,
-      0
-    ],
-    "RGB": [
-      248,
-      232,
-      193
-    ],
+    "CMYK": [3, 10, 31, 0],
+    "RGB": [248, 232, 193],
     "hex": "#f8e8c1",
     "name": "豆汁黄",
     "pinyin": "douzhihuang"
   },
   {
-    "CMYK": [
-      1,
-      19,
-      66,
-      0
-    ],
-    "RGB": [
-      249,
-      215,
-      112
-    ],
+    "CMYK": [1, 19, 66, 0],
+    "RGB": [249, 215, 112],
     "hex": "#f9d770",
     "name": "淡茧黄",
     "pinyin": "danjianhuang"
   },
   {
-    "CMYK": [
-      0,
-      26,
-      94,
-      0
-    ],
-    "RGB": [
-      255,
-      201,
-      12
-    ],
+    "CMYK": [0, 26, 94, 0],
+    "RGB": [255, 201, 12],
     "hex": "#ffc90c",
     "name": "乳鸭黄",
     "pinyin": "ruyahuang"
   },
   {
-    "CMYK": [
-      5,
-      11,
-      22,
-      0
-    ],
-    "RGB": [
-      242,
-      230,
-      206
-    ],
+    "CMYK": [5, 11, 22, 0],
+    "RGB": [242, 230, 206],
     "hex": "#f2e6ce",
     "name": "荔肉白",
     "pinyin": "liroubai"
   },
   {
-    "CMYK": [
-      5,
-      19,
-      50,
-      0
-    ],
-    "RGB": [
-      240,
-      214,
-      149
-    ],
+    "CMYK": [5, 19, 50, 0],
+    "RGB": [240, 214, 149],
     "hex": "#f0d695",
     "name": "象牙黄",
     "pinyin": "xiangyahuang"
   },
   {
-    "CMYK": [
-      3,
-      23,
-      69,
-      0
-    ],
-    "RGB": [
-      244,
-      206,
-      105
-    ],
+    "CMYK": [3, 23, 69, 0],
+    "RGB": [244, 206, 105],
     "hex": "#f4ce69",
     "name": "炒米黄",
     "pinyin": "chaomihuang"
   },
   {
-    "CMYK": [
-      1,
-      28,
-      89,
-      0
-    ],
-    "RGB": [
-      246,
-      196,
-      48
-    ],
+    "CMYK": [1, 28, 89, 0],
+    "RGB": [246, 196, 48],
     "hex": "#f6c430",
     "name": "鹦鹉冠黄",
     "pinyin": "yingwuguanhuang"
   },
   {
-    "CMYK": [
-      0,
-      30,
-      95,
-      0
-    ],
-    "RGB": [
-      249,
-      193,
-      22
-    ],
+    "CMYK": [0, 30, 95, 0],
+    "RGB": [249, 193, 22],
     "hex": "#f9c116",
     "name": "木瓜黄",
     "pinyin": "muguahuang"
   },
   {
-    "CMYK": [
-      0,
-      32,
-      95,
-      0
-    ],
-    "RGB": [
-      249,
-      189,
-      16
-    ],
+    "CMYK": [0, 32, 95, 0],
+    "RGB": [249, 189, 16],
     "hex": "#f9bd10",
     "name": "浅烙黄",
     "pinyin": "qianlaohuang"
   },
   {
-    "CMYK": [
-      11,
-      18,
-      39,
-      1
-    ],
-    "RGB": [
-      229,
-      211,
-      170
-    ],
+    "CMYK": [11, 18, 39, 1],
+    "RGB": [229, 211, 170],
     "hex": "#e5d3aa",
     "name": "莲子白",
     "pinyin": "lianzibai"
   },
   {
-    "CMYK": [
-      5,
-      35,
-      99,
-      0
-    ],
-    "RGB": [
-      232,
-      176,
-      4
-    ],
+    "CMYK": [5, 35, 99, 0],
+    "RGB": [232, 176, 4],
     "hex": "#e8b004",
     "name": "谷黄",
     "pinyin": "guhuang"
   },
   {
-    "CMYK": [
-      3,
-      36,
-      99,
-      0
-    ],
-    "RGB": [
-      235,
-      177,
-      13
-    ],
+    "CMYK": [3, 36, 99, 0],
+    "RGB": [235, 177, 13],
     "hex": "#ebb10d",
     "name": "栀子黄",
     "pinyin": "zhizihuang"
   },
   {
-    "CMYK": [
-      11,
-      39,
-      100,
-      2
-    ],
-    "RGB": [
-      217,
-      164,
-      14
-    ],
+    "CMYK": [11, 39, 100, 2],
+    "RGB": [217, 164, 14],
     "hex": "#d9a40e",
     "name": "芥黄",
     "pinyin": "jiehuang"
   },
   {
-    "CMYK": [
-      28,
-      27,
-      43,
-      8
-    ],
-    "RGB": [
-      181,
-      170,
-      144
-    ],
+    "CMYK": [28, 27, 43, 8],
+    "RGB": [181, 170, 144],
     "hex": "#b5aa90",
     "name": "银鼠灰",
     "pinyin": "yinshuhui"
   },
   {
-    "CMYK": [
-      26,
-      31,
-      57,
-      10
-    ],
-    "RGB": [
-      182,
-      164,
-      118
-    ],
+    "CMYK": [26, 31, 57, 10],
+    "RGB": [182, 164, 118],
     "hex": "#b6a476",
     "name": "尘灰",
     "pinyin": "chenhui"
   },
   {
-    "CMYK": [
-      21,
-      43,
-      100,
-      11
-    ],
-    "RGB": [
-      183,
-      141,
-      18
-    ],
+    "CMYK": [21, 43, 100, 11],
+    "RGB": [183, 141, 18],
     "hex": "#b78d12",
     "name": "枯绿",
     "pinyin": "kulv"
   },
   {
-    "CMYK": [
-      35,
-      44,
-      80,
-      30
-    ],
-    "RGB": [
-      135,
-      114,
-      62
-    ],
+    "CMYK": [35, 44, 80, 30],
+    "RGB": [135, 114, 62],
     "hex": "#87723e",
     "name": "鲛青",
     "pinyin": "jiaoqing"
   },
   {
-    "CMYK": [
-      32,
-      50,
-      100,
-      31
-    ],
-    "RGB": [
-      135,
-      104,
-      24
-    ],
+    "CMYK": [32, 50, 100, 31],
+    "RGB": [135, 104, 24],
     "hex": "#876818",
     "name": "粽叶绿",
     "pinyin": "zongyelv"
   },
   {
-    "CMYK": [
-      31,
-      51,
-      100,
-      30
-    ],
-    "RGB": [
-      138,
-      105,
-      19
-    ],
+    "CMYK": [31, 51, 100, 30],
+    "RGB": [138, 105, 19],
     "hex": "#8a6913",
     "name": "灰绿",
     "pinyin": "huilv"
   },
   {
-    "CMYK": [
-      52,
-      56,
-      64,
-      62
-    ],
-    "RGB": [
-      74,
-      64,
-      53
-    ],
+    "CMYK": [52, 56, 64, 62],
+    "RGB": [74, 64, 53],
     "hex": "#4a4035",
     "name": "鹤灰",
     "pinyin": "hehui"
   },
   {
-    "CMYK": [
-      48,
-      58,
-      70,
-      62
-    ],
-    "RGB": [
-      77,
-      64,
-      48
-    ],
+    "CMYK": [48, 58, 70, 62],
+    "RGB": [77, 64, 48],
     "hex": "#4d4030",
     "name": "淡松烟",
     "pinyin": "dansongyan"
   },
   {
-    "CMYK": [
-      45,
-      56,
-      100,
-      56
-    ],
-    "RGB": [
-      88,
-      71,
-      23
-    ],
+    "CMYK": [45, 56, 100, 56],
+    "RGB": [88, 71, 23],
     "hex": "#584717",
     "name": "暗海水绿",
     "pinyin": "anhaishuilv"
   },
   {
-    "CMYK": [
-      45,
-      55,
-      100,
-      54
-    ],
-    "RGB": [
-      91,
-      73,
-      19
-    ],
+    "CMYK": [45, 55, 100, 54],
+    "RGB": [91, 73, 19],
     "hex": "#5b4913",
     "name": "棕榈绿",
     "pinyin": "zonglvlv"
   },
   {
-    "CMYK": [
-      1,
-      11,
-      24,
-      0
-    ],
-    "RGB": [
-      249,
-      223,
-      205
-    ],
+    "CMYK": [1, 11, 24, 0],
+    "RGB": [249, 223, 205],
     "hex": "#f9e9cd",
     "name": "米色",
     "pinyin": "mise"
   },
   {
-    "CMYK": [
-      1,
-      15,
-      38,
-      0
-    ],
-    "RGB": [
-      248,
-      224,
-      176
-    ],
+    "CMYK": [1, 15, 38, 0],
+    "RGB": [248, 224, 176],
     "hex": "#f8e0b0",
     "name": "淡肉色",
     "pinyin": "danrouse"
   },
   {
-    "CMYK": [
-      0,
-      23,
-      59,
-      0
-    ],
-    "RGB": [
-      249,
-      210,
-      125
-    ],
+    "CMYK": [0, 23, 59, 0],
+    "RGB": [249, 210, 125],
     "hex": "#f9d27d",
     "name": "麦芽糖黄",
     "pinyin": "maiyatanghuang"
   },
   {
-    "CMYK": [
-      0,
-      34,
-      93,
-      0
-    ],
-    "RGB": [
-      254,
-      186,
-      7
-    ],
+    "CMYK": [0, 34, 93, 0],
+    "RGB": [254, 186, 7],
     "hex": "#feba07",
     "name": "琥珀黄",
     "pinyin": "hupohuang"
   },
   {
-    "CMYK": [
-      1,
-      31,
-      79,
-      0
-    ],
-    "RGB": [
-      243,
-      191,
-      76
-    ],
+    "CMYK": [1, 31, 79, 0],
+    "RGB": [243, 191, 76],
     "hex": "#f3bf4c",
     "name": "甘草黄",
     "pinyin": "gancaohuang"
   },
   {
-    "CMYK": [
-      0,
-      33,
-      83,
-      0
-    ],
-    "RGB": [
-      248,
-      188,
-      49
-    ],
+    "CMYK": [0, 33, 83, 0],
+    "RGB": [248, 188, 49],
     "hex": "#f8bc31",
     "name": "初熟杏黄",
     "pinyin": "chushuxinghuang"
   },
   {
-    "CMYK": [
-      10,
-      27,
-      59,
-      1
-    ],
-    "RGB": [
-      226,
-      193,
-      124
-    ],
+    "CMYK": [10, 27, 59, 1],
+    "RGB": [226, 193, 124],
     "hex": "#e2c17c",
     "name": "浅驼色",
     "pinyin": "qiantuose"
   },
   {
-    "CMYK": [
-      7,
-      32,
-      78,
-      1
-    ],
-    "RGB": [
-      229,
-      183,
-      81
-    ],
+    "CMYK": [7, 32, 78, 1],
+    "RGB": [229, 183, 81],
     "hex": "#e5b751",
     "name": "沙石黄",
     "pinyin": "shashihuang"
   },
   {
-    "CMYK": [
-      3,
-      38,
-      97,
-      0
-    ],
-    "RGB": [
-      234,
-      173,
-      26
-    ],
+    "CMYK": [3, 38, 97, 0],
+    "RGB": [234, 173, 26],
     "hex": "#eaad1a",
     "name": "虎皮黄",
     "pinyin": "hupihuang"
   },
   {
-    "CMYK": [
-      12,
-      41,
-      98,
-      2
-    ],
-    "RGB": [
-      214,
-      160,
-      29
-    ],
+    "CMYK": [12, 41, 98, 2],
+    "RGB": [214, 160, 29],
     "hex": "#d6a01d",
     "name": "土黄",
     "pinyin": "tuhuang"
   },
   {
-    "CMYK": [
-      28,
-      28,
-      41,
-      9
-    ],
-    "RGB": [
-      180,
-      169,
-      146
-    ],
+    "CMYK": [28, 28, 41, 9],
+    "RGB": [180, 169, 146],
     "hex": "#b4a992",
     "name": "百灵鸟灰",
     "pinyin": "bailingniaohui"
   },
   {
-    "CMYK": [
-      21,
-      44,
-      97,
-      11
-    ],
-    "RGB": [
-      183,
-      139,
-      38
-    ],
+    "CMYK": [21, 44, 97, 11],
+    "RGB": [183, 139, 38],
     "hex": "#b78b26",
     "name": "山鸡黄",
     "pinyin": "shanjihuang"
   },
   {
-    "CMYK": [
-      35,
-      47,
-      71,
-      33
-    ],
-    "RGB": [
-      130,
-      107,
-      72
-    ],
+    "CMYK": [35, 47, 71, 33],
+    "RGB": [130, 107, 72],
     "hex": "#826b48",
     "name": "龟背黄",
     "pinyin": "guibeihuang"
   },
   {
-    "CMYK": [
-      34,
-      52,
-      85,
-      35
-    ],
-    "RGB": [
-      128,
-      99,
-      50
-    ],
+    "CMYK": [34, 52, 85, 35],
+    "RGB": [128, 99, 50],
     "hex": "#806332",
     "name": "苍黄",
     "pinyin": "canghuang"
   },
   {
-    "CMYK": [
-      32,
-      56,
-      96,
-      34
-    ],
-    "RGB": [
-      129,
-      95,
-      37
-    ],
+    "CMYK": [32, 56, 96, 34],
+    "RGB": [129, 95, 37],
     "hex": "#815f25",
     "name": "莱阳梨黄",
     "pinyin": "laiyanglihuang"
   },
   {
-    "CMYK": [
-      31,
-      57,
-      100,
-      33
-    ],
-    "RGB": [
-      131,
-      94,
-      29
-    ],
+    "CMYK": [31, 57, 100, 33],
+    "RGB": [131, 94, 29],
     "hex": "#835e1d",
     "name": "蜴蜊绿",
     "pinyin": "yililv"
   },
   {
-    "CMYK": [
-      46,
-      59,
-      68,
-      61
-    ],
-    "RGB": [
-      79,
-      64,
-      50
-    ],
+    "CMYK": [46, 59, 68, 61],
+    "RGB": [79, 64, 50],
     "hex": "#4f4032",
     "name": "松鼠灰",
     "pinyin": "songshuhui"
   },
   {
-    "CMYK": [
-      44,
-      61,
-      76,
-      62
-    ],
-    "RGB": [
-      80,
-      62,
-      42
-    ],
+    "CMYK": [44, 61, 76, 62],
+    "RGB": [80, 62, 42],
     "hex": "#503e2a",
     "name": "橄榄灰",
     "pinyin": "ganlanhui"
   },
   {
-    "CMYK": [
-      43,
-      63,
-      88,
-      61
-    ],
-    "RGB": [
-      81,
-      60,
-      32
-    ],
+    "CMYK": [43, 63, 88, 61],
+    "RGB": [81, 60, 32],
     "hex": "#513c20",
     "name": "蟹壳绿",
     "pinyin": "xiekelv"
   },
   {
-    "CMYK": [
-      42,
-      64,
-      94,
-      60
-    ],
-    "RGB": [
-      83,
-      60,
-      27
-    ],
+    "CMYK": [42, 64, 94, 60],
+    "RGB": [83, 60, 27],
     "hex": "#533c1b",
     "name": "古铜绿",
     "pinyin": "gutonglv"
   },
   {
-    "CMYK": [
-      41,
-      66,
-      94,
-      60
-    ],
-    "RGB": [
-      85,
-      59,
-      24
-    ],
+    "CMYK": [41, 66, 94, 60],
+    "RGB": [85, 59, 24],
     "hex": "#553b18",
     "name": "焦茶绿",
     "pinyin": "jiaochalv"
   },
   {
-    "CMYK": [
-      1,
-      7,
-      13,
-      0
-    ],
-    "RGB": [
-      251,
-      242,
-      227
-    ],
+    "CMYK": [1, 7, 13, 0],
+    "RGB": [251, 242, 227],
     "hex": "#fbf2e3",
     "name": "粉白",
     "pinyin": "fenbai"
   },
   {
-    "CMYK": [
-      1,
-      12,
-      22,
-      0
-    ],
-    "RGB": [
-      249,
-      232,
-      208
-    ],
+    "CMYK": [1, 12, 22, 0],
+    "RGB": [249, 232, 208],
     "hex": "#f9e8d0",
     "name": "落英淡粉",
     "pinyin": "luoyingdanfen"
   },
   {
-    "CMYK": [
-      0,
-      27,
-      51,
-      0
-    ],
-    "RGB": [
-      249,
-      203,
-      139
-    ],
+    "CMYK": [0, 27, 51, 0],
+    "RGB": [249, 203, 139],
     "hex": "#f9cb8b",
     "name": "瓜瓤粉",
     "pinyin": "guarangfen"
   },
   {
-    "CMYK": [
-      0,
-      36,
-      72,
-      0
-    ],
-    "RGB": [
-      251,
-      185,
-      87
-    ],
+    "CMYK": [0, 36, 72, 0],
+    "RGB": [251, 185, 87],
     "hex": "#fbb957",
     "name": "蜜黄",
     "pinyin": "mihuang"
   },
   {
-    "CMYK": [
-      0,
-      44,
-      91,
-      0
-    ],
-    "RGB": [
-      255,
-      166,
-      15
-    ],
+    "CMYK": [0, 44, 91, 0],
+    "RGB": [255, 166, 15],
     "hex": "#ffa60f",
     "name": "金叶黄",
     "pinyin": "jinyehuang"
   },
   {
-    "CMYK": [
-      0,
-      43,
-      82,
-      0
-    ],
-    "RGB": [
-      244,
-      168,
-      58
-    ],
+    "CMYK": [0, 43, 82, 0],
+    "RGB": [244, 168, 58],
     "hex": "#f4a83a",
     "name": "金莺黄",
     "pinyin": "jinyinghuang"
   },
   {
-    "CMYK": [
-      8,
-      31,
-      50,
-      1
-    ],
-    "RGB": [
-      227,
-      189,
-      141
-    ],
+    "CMYK": [8, 31, 50, 1],
+    "RGB": [227, 189, 141],
     "hex": "#e3bd8d",
     "name": "鹿角棕",
     "pinyin": "lujiaozong"
   },
   {
-    "CMYK": [
-      2,
-      44,
-      83,
-      0
-    ],
-    "RGB": [
-      231,
-      162,
-      63
-    ],
+    "CMYK": [2, 44, 83, 0],
+    "RGB": [231, 162, 63],
     "hex": "#e7a23f",
     "name": "凋叶棕",
     "pinyin": "diaoyezong"
   },
   {
-    "CMYK": [
-      10,
-      41,
-      72,
-      1
-    ],
-    "RGB": [
-      218,
-      164,
-      90
-    ],
+    "CMYK": [10, 41, 72, 1],
+    "RGB": [218, 164, 90],
     "hex": "#daa45a",
     "name": "玳瑁黄",
     "pinyin": "daimaohuang"
   },
   {
-    "CMYK": [
-      7,
-      45,
-      82,
-      1
-    ],
-    "RGB": [
-      222,
-      158,
-      68
-    ],
+    "CMYK": [7, 45, 82, 1],
+    "RGB": [222, 158, 68],
     "hex": "#de9e44",
     "name": "软木黄",
     "pinyin": "ruanmuhuang"
   },
   {
-    "CMYK": [
-      6,
-      51,
-      95,
-      1
-    ],
-    "RGB": [
-      220,
-      145,
-      35
-    ],
+    "CMYK": [6, 51, 95, 1],
+    "RGB": [220, 145, 35],
     "hex": "#dc9123",
     "name": "风帆黄",
     "pinyin": "fengfanhuang"
   },
   {
-    "CMYK": [
-      19,
-      44,
-      75,
-      7
-    ],
-    "RGB": [
-      192,
-      147,
-      81
-    ],
+    "CMYK": [19, 44, 75, 7],
+    "RGB": [192, 147, 81],
     "hex": "#c09351",
     "name": "桂皮淡棕",
     "pinyin": "guipidanzong"
   },
   {
-    "CMYK": [
-      32,
-      40,
-      53,
-      22
-    ],
-    "RGB": [
-      151,
-      132,
-      108
-    ],
+    "CMYK": [32, 40, 53, 22],
+    "RGB": [151, 132, 108],
     "hex": "#97846c",
     "name": "猴毛灰",
     "pinyin": "houmaohui"
   },
   {
-    "CMYK": [
-      27,
-      60,
-      97,
-      21
-    ],
-    "RGB": [
-      152,
-      101,
-      36
-    ],
+    "CMYK": [27, 60, 97, 21],
+    "RGB": [152, 101, 36],
     "hex": "#986524",
     "name": "山鸡褐",
     "pinyin": "shanjihe"
   },
   {
-    "CMYK": [
-      37,
-      65,
-      84,
-      49
-    ],
-    "RGB": [
-      102,
-      70,
-      42
-    ],
+    "CMYK": [37, 65, 84, 49],
+    "RGB": [102, 70, 42],
     "hex": "#66462a",
     "name": "驼色",
     "pinyin": "tuose"
   },
   {
-    "CMYK": [
-      38,
-      69,
-      90,
-      54
-    ],
-    "RGB": [
-      93,
-      61,
-      33
-    ],
+    "CMYK": [38, 69, 90, 54],
+    "RGB": [93, 61, 33],
     "hex": "#5d3d21",
     "name": "茶褐",
     "pinyin": "chahe"
   },
   {
-    "CMYK": [
-      37,
-      74,
-      96,
-      55
-    ],
-    "RGB": [
-      92,
-      55,
-      25
-    ],
+    "CMYK": [37, 74, 96, 55],
+    "RGB": [92, 55, 25],
     "hex": "#5c3719",
     "name": "古铜褐",
     "pinyin": "gutonghe"
   },
   {
-    "CMYK": [
-      0,
-      10,
-      14,
-      0
-    ],
-    "RGB": [
-      251,
-      236,
-      222
-    ],
+    "CMYK": [0, 10, 14, 0],
+    "RGB": [251, 236, 222],
     "hex": "#fbecde",
     "name": "荷花白",
     "pinyin": "hehuabai"
   },
   {
-    "CMYK": [
-      0,
-      40,
-      52,
-      0
-    ],
-    "RGB": [
-      248,
-      179,
-      127
-    ],
+    "CMYK": [0, 40, 52, 0],
+    "RGB": [248, 179, 127],
     "hex": "#f8b37f",
     "name": "玫瑰粉",
     "pinyin": "meiguifen"
   },
   {
-    "CMYK": [
-      0,
-      62,
-      88,
-      0
-    ],
-    "RGB": [
-      249,
-      125,
-      28
-    ],
+    "CMYK": [0, 62, 88, 0],
+    "RGB": [249, 125, 28],
     "hex": "#f97d1c",
     "name": "橘橙",
     "pinyin": "jucheng"
   },
   {
-    "CMYK": [
-      0,
-      62,
-      85,
-      0
-    ],
-    "RGB": [
-      250,
-      126,
-      35
-    ],
+    "CMYK": [0, 62, 85, 0],
+    "RGB": [250, 126, 35],
     "hex": "#fa7e23",
     "name": "美人焦橙",
     "pinyin": "meirenjiaocheng"
   },
   {
-    "CMYK": [
-      0,
-      28,
-      25,
-      0
-    ],
-    "RGB": [
-      247,
-      205,
-      188
-    ],
+    "CMYK": [0, 28, 25, 0],
+    "RGB": [247, 205, 188],
     "hex": "#f7cdbc",
     "name": "润红",
     "pinyin": "runhong"
   },
   {
-    "CMYK": [
-      0,
-      28,
-      22,
-      0
-    ],
-    "RGB": [
-      246,
-      206,
-      193
-    ],
+    "CMYK": [0, 28, 22, 0],
+    "RGB": [246, 206, 193],
     "hex": "#f6cec1",
     "name": "淡桃红",
     "pinyin": "dantaohong"
   },
   {
-    "CMYK": [
-      0,
-      53,
-      65,
-      0
-    ],
-    "RGB": [
-      240,
-      148,
-      93
-    ],
+    "CMYK": [0, 53, 65, 0],
+    "RGB": [240, 148, 93],
     "hex": "#f0945d",
     "name": "海螺橙",
     "pinyin": "hailuocheng"
   },
   {
-    "CMYK": [
-      0,
-      44,
-      32,
-      0
-    ],
-    "RGB": [
-      240,
-      173,
-      160
-    ],
+    "CMYK": [0, 44, 32, 0],
+    "RGB": [240, 173, 160],
     "hex": "#f0ada0",
     "name": "桃红",
     "pinyin": "taohong"
   },
   {
-    "CMYK": [
-      0,
-      45,
-      34,
-      0
-    ],
-    "RGB": [
-      238,
-      170,
-      156
-    ],
+    "CMYK": [0, 45, 34, 0],
+    "RGB": [238, 170, 156],
     "hex": "#eeaa9c",
     "name": "颊红",
     "pinyin": "jiahong"
   },
   {
-    "CMYK": [
-      0,
-      49,
-      41,
-      0
-    ],
-    "RGB": [
-      238,
-      160,
-      140
-    ],
+    "CMYK": [0, 49, 41, 0],
+    "RGB": [238, 160, 140],
     "hex": "#eea08c",
     "name": "淡罂粟红",
     "pinyin": "danyingsuhong"
   },
   {
-    "CMYK": [
-      0,
-      58,
-      67,
-      0
-    ],
-    "RGB": [
-      234,
-      137,
-      88
-    ],
+    "CMYK": [0, 58, 67, 0],
+    "RGB": [234, 137, 88],
     "hex": "#ea8958",
     "name": "晨曦红",
     "pinyin": "chenxihong"
   },
   {
-    "CMYK": [
-      0,
-      65,
-      80,
-      0
-    ],
-    "RGB": [
-      242,
-      118,
-      53
-    ],
+    "CMYK": [0, 65, 80, 0],
+    "RGB": [242, 118, 53],
     "hex": "#f27635",
     "name": "蟹壳红",
     "pinyin": "xiekehong"
   },
   {
-    "CMYK": [
-      0,
-      69,
-      86,
-      0
-    ],
-    "RGB": [
-      248,
-      107,
-      29
-    ],
+    "CMYK": [0, 69, 86, 0],
+    "RGB": [248, 107, 29],
     "hex": "#f86b1d",
     "name": "金莲花橙",
     "pinyin": "jinlianhuacheng"
   },
   {
-    "CMYK": [
-      0,
-      69,
-      70,
-      0
-    ],
-    "RGB": [
-      239,
-      111,
-      72
-    ],
+    "CMYK": [0, 69, 70, 0],
+    "RGB": [239, 111, 72],
     "hex": "#ef6f48",
     "name": "草莓红",
     "pinyin": "caomeihong"
   },
   {
-    "CMYK": [
-      0,
-      72,
-      82,
-      0
-    ],
-    "RGB": [
-      239,
-      99,
-      43
-    ],
+    "CMYK": [0, 72, 82, 0],
+    "RGB": [239, 99, 43],
     "hex": "#ef632b",
     "name": "龙睛鱼红",
     "pinyin": "longjingyuhong"
   },
   {
-    "CMYK": [
-      0,
-      81,
-      84,
-      0
-    ],
-    "RGB": [
-      241,
-      68,
-      29
-    ],
+    "CMYK": [0, 81, 84, 0],
+    "RGB": [241, 68, 29],
     "hex": "#f1441d",
     "name": "蜻蜓红",
     "pinyin": "qingtinghong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      83,
-      0
-    ],
-    "RGB": [
-      240,
-      75,
-      34
-    ],
+    "CMYK": [0, 80, 83, 0],
+    "RGB": [240, 75, 34],
     "hex": "#f04b22",
     "name": "大红",
     "pinyin": "dahong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      85,
-      0
-    ],
-    "RGB": [
-      242,
-      72,
-      27
-    ],
+    "CMYK": [0, 80, 85, 0],
+    "RGB": [242, 72, 27],
     "hex": "#f2481b",
     "name": "柿红",
     "pinyin": "shihong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      85,
-      0
-    ],
-    "RGB": [
-      243,
-      71,
-      24
-    ],
+    "CMYK": [0, 80, 85, 0],
+    "RGB": [243, 71, 24],
     "hex": "#f34718",
     "name": "榴花红",
     "pinyin": "liuhuahong"
   },
   {
-    "CMYK": [
-      0,
-      83,
-      87,
-      0
-    ],
-    "RGB": [
-      244,
-      62,
-      6
-    ],
+    "CMYK": [0, 83, 87, 0],
+    "RGB": [244, 62, 6],
     "hex": "#f43e06",
     "name": "银朱",
     "pinyin": "yinzhu"
   },
   {
-    "CMYK": [
-      0,
-      78,
-      83,
-      0
-    ],
-    "RGB": [
-      237,
-      81,
-      38
-    ],
+    "CMYK": [0, 78, 83, 0],
+    "RGB": [237, 81, 38],
     "hex": "#ed5126",
     "name": "朱红",
     "pinyin": "zhuhong"
   },
   {
-    "CMYK": [
-      0,
-      50,
-      68,
-      0
-    ],
-    "RGB": [
-      240,
-      156,
-      90
-    ],
+    "CMYK": [0, 50, 68, 0],
+    "RGB": [240, 156, 90],
     "hex": "#f09c5a",
     "name": "鲑鱼红",
     "pinyin": "guiyuhong"
   },
   {
-    "CMYK": [
-      5,
-      69,
-      87,
-      0
-    ],
-    "RGB": [
-      242,
-      123,
-      31
-    ],
+    "CMYK": [5, 69, 87, 0],
+    "RGB": [242, 123, 31],
     "hex": "#f26b1f",
     "name": "金黄",
     "pinyin": "jinhuang"
   },
   {
-    "CMYK": [
-      7,
-      52,
-      71,
-      1
-    ],
-    "RGB": [
-      217,
-      145,
-      86
-    ],
+    "CMYK": [7, 52, 71, 1],
+    "RGB": [217, 145, 86],
     "hex": "#d99156",
     "name": "鹿皮褐",
     "pinyin": "lupihe"
   },
   {
-    "CMYK": [
-      4,
-      57,
-      82,
-      1
-    ],
-    "RGB": [
-      219,
-      133,
-      64
-    ],
+    "CMYK": [4, 57, 82, 1],
+    "RGB": [219, 133, 64],
     "hex": "#db8540",
     "name": "醉瓜肉",
     "pinyin": "zuiguarou"
   },
   {
-    "CMYK": [
-      0,
-      64,
-      93,
-      0
-    ],
-    "RGB": [
-      222,
-      118,
-      34
-    ],
+    "CMYK": [0, 64, 93, 0],
+    "RGB": [222, 118, 34],
     "hex": "#de7622",
     "name": "麂棕",
     "pinyin": "jizong"
   },
   {
-    "CMYK": [
-      22,
-      28,
-      34,
-      6
-    ],
-    "RGB": [
-      193,
-      178,
-      163
-    ],
+    "CMYK": [22, 28, 34, 6],
+    "RGB": [193, 178, 163],
     "hex": "#c1b2a3",
     "name": "淡银灰",
     "pinyin": "danyinhui"
   },
   {
-    "CMYK": [
-      18,
-      57,
-      76,
-      6
-    ],
-    "RGB": [
-      190,
-      126,
-      74
-    ],
+    "CMYK": [18, 57, 76, 6],
+    "RGB": [190, 126, 74],
     "hex": "#be7e4a",
     "name": "淡赭",
     "pinyin": "danzhe"
   },
   {
-    "CMYK": [
-      14,
-      69,
-      100,
-      4
-    ],
-    "RGB": [
-      193,
-      101,
-      26
-    ],
+    "CMYK": [14, 69, 100, 4],
+    "RGB": [193, 101, 26],
     "hex": "#c1651a",
     "name": "槟榔综",
     "pinyin": "binglangzong"
   },
   {
-    "CMYK": [
-      34,
-      42,
-      46,
-      23
-    ],
-    "RGB": [
-      145,
-      128,
-      114
-    ],
+    "CMYK": [34, 42, 46, 23],
+    "RGB": [145, 128, 114],
     "hex": "#918072",
     "name": "银灰",
     "pinyin": "yinhui"
   },
   {
-    "CMYK": [
-      42,
-      40,
-      46,
-      20
-    ],
-    "RGB": [
-      154,
-      136,
-      120
-    ],
+    "CMYK": [42, 40, 46, 20],
+    "RGB": [154, 136, 120],
     "hex": "#9a8878",
     "name": "海鸥灰",
     "pinyin": "haiouhui"
   },
   {
-    "CMYK": [
-      27,
-      69,
-      85,
-      22
-    ],
-    "RGB": [
-      148,
-      88,
-      51
-    ],
+    "CMYK": [27, 69, 85, 22],
+    "RGB": [148, 88, 51],
     "hex": "#945833",
     "name": "淡咖啡",
     "pinyin": "dankafei"
   },
   {
-    "CMYK": [
-      26,
-      76,
-      97,
-      20
-    ],
-    "RGB": [
-      150,
-      77,
-      34
-    ],
+    "CMYK": [26, 76, 97, 20],
+    "RGB": [150, 77, 34],
     "hex": "#964d22",
     "name": "岩石棕",
     "pinyin": "yanshizong"
   },
   {
-    "CMYK": [
-      25,
-      80,
-      100,
-      20
-    ],
-    "RGB": [
-      149,
-      68,
-      22
-    ],
+    "CMYK": [25, 80, 100, 20],
+    "RGB": [149, 68, 22],
     "hex": "#954416",
     "name": "芒果棕",
     "pinyin": "mangguozong"
   },
   {
-    "CMYK": [
-      39,
-      60,
-      58,
-      51
-    ],
-    "RGB": [
-      98,
-      73,
-      65
-    ],
+    "CMYK": [39, 60, 58, 51],
+    "RGB": [98, 73, 65],
     "hex": "#624941",
     "name": "石板灰",
     "pinyin": "shibanhui"
   },
   {
-    "CMYK": [
-      38,
-      63,
-      63,
-      50
-    ],
-    "RGB": [
-      100,
-      72,
-      61
-    ],
+    "CMYK": [38, 63, 63, 50],
+    "RGB": [100, 72, 61],
     "hex": "#64483d",
     "name": "珠母灰",
     "pinyin": "zhumuhui"
   },
   {
-    "CMYK": [
-      32,
-      83,
-      96,
-      41
-    ],
-    "RGB": [
-      113,
-      54,
-      29
-    ],
+    "CMYK": [32, 83, 96, 41],
+    "RGB": [113, 54, 29],
     "hex": "#71361d",
     "name": "丁香棕",
     "pinyin": "dingxiangzong"
   },
   {
-    "CMYK": [
-      30,
-      87,
-      100,
-      38
-    ],
-    "RGB": [
-      117,
-      49,
-      23
-    ],
+    "CMYK": [30, 87, 100, 38],
+    "RGB": [117, 49, 23],
     "hex": "#753117",
     "name": "咖啡",
     "pinyin": "kafei"
   },
   {
-    "CMYK": [
-      30,
-      89,
-      100,
-      39
-    ],
-    "RGB": [
-      115,
-      46,
-      18
-    ],
+    "CMYK": [30, 89, 100, 39],
+    "RGB": [115, 46, 18],
     "hex": "#732e12",
     "name": "筍皮棕",
     "pinyin": "sunpizong"
   },
   {
-    "CMYK": [
-      0,
-      72,
-      86,
-      0
-    ],
-    "RGB": [
-      252,
-      99,
-      21
-    ],
+    "CMYK": [0, 72, 86, 0],
+    "RGB": [252, 99, 21],
     "hex": "#fc6315",
     "name": "燕颔红",
     "pinyin": "yanhanhong"
   },
   {
-    "CMYK": [
-      3,
-      38,
-      39,
-      0
-    ],
-    "RGB": [
-      232,
-      180,
-      154
-    ],
+    "CMYK": [3, 38, 39, 0],
+    "RGB": [232, 180, 154],
     "hex": "#e8b49a",
     "name": "玉粉红",
     "pinyin": "yufenhong"
   },
   {
-    "CMYK": [
-      0,
-      70,
-      87,
-      0
-    ],
-    "RGB": [
-      228,
-      104,
-      40
-    ],
+    "CMYK": [0, 70, 87, 0],
+    "RGB": [228, 104, 40],
     "hex": "#e46828",
     "name": "金驼",
     "pinyin": "jintuo"
   },
   {
-    "CMYK": [
-      0,
-      76,
-      97,
-      0
-    ],
-    "RGB": [
-      216,
-      89,
-      22
-    ],
+    "CMYK": [0, 76, 97, 0],
+    "RGB": [216, 89, 22],
     "hex": "#d85916",
     "name": "铁棕",
     "pinyin": "tiezong"
   },
   {
-    "CMYK": [
-      23,
-      35,
-      38,
-      10
-    ],
-    "RGB": [
-      183,
-      160,
-      145
-    ],
+    "CMYK": [23, 35, 38, 10],
+    "RGB": [183, 160, 145],
     "hex": "#b7a091",
     "name": "蛛网灰",
     "pinyin": "zhuwanghui"
   },
   {
-    "CMYK": [
-      16,
-      77,
-      100,
-      6
-    ],
-    "RGB": [
-      183,
-      81,
-      29
-    ],
+    "CMYK": [16, 77, 100, 6],
+    "RGB": [183, 81, 29],
     "hex": "#b7511d",
     "name": "淡可可棕",
     "pinyin": "dankekezong"
   },
   {
-    "CMYK": [
-      31,
-      63,
-      66,
-      31
-    ],
-    "RGB": [
-      139,
-      97,
-      77
-    ],
+    "CMYK": [31, 63, 66, 31],
+    "RGB": [139, 97, 77],
     "hex": "#8b614d",
     "name": "中红灰",
     "pinyin": "zhonghonghui"
   },
   {
-    "CMYK": [
-      28,
-      76,
-      82,
-      26
-    ],
-    "RGB": [
-      140,
-      75,
-      49
-    ],
+    "CMYK": [28, 76, 82, 26],
+    "RGB": [140, 75, 49],
     "hex": "#8c4b31",
     "name": "淡土黄",
     "pinyin": "dantuhuang"
   },
   {
-    "CMYK": [
-      28,
-      83,
-      92,
-      28
-    ],
-    "RGB": [
-      135,
-      61,
-      36
-    ],
+    "CMYK": [28, 83, 92, 28],
+    "RGB": [135, 61, 36],
     "hex": "#873d24",
     "name": "淡豆沙",
     "pinyin": "dandousha"
   },
   {
-    "CMYK": [
-      27,
-      85,
-      98,
-      27
-    ],
-    "RGB": [
-      136,
-      58,
-      30
-    ],
+    "CMYK": [27, 85, 98, 27],
+    "RGB": [136, 58, 30],
     "hex": "#883a1e",
     "name": "椰壳棕",
     "pinyin": "yekezong"
   },
   {
-    "CMYK": [
-      40,
-      64,
-      61,
-      56
-    ],
-    "RGB": [
-      91,
-      66,
-      58
-    ],
+    "CMYK": [40, 64, 61, 56],
+    "RGB": [91, 66, 58],
     "hex": "#5b423a",
     "name": "淡铁灰",
     "pinyin": "dantiehui"
   },
   {
-    "CMYK": [
-      37,
-      72,
-      72,
-      52
-    ],
-    "RGB": [
-      96,
-      61,
-      48
-    ],
+    "CMYK": [37, 72, 72, 52],
+    "RGB": [96, 61, 48],
     "hex": "#603d30",
     "name": "中灰驼",
     "pinyin": "zhonghuituo"
   },
   {
-    "CMYK": [
-      34,
-      82,
-      85,
-      47
-    ],
-    "RGB": [
-      103,
-      52,
-      36
-    ],
+    "CMYK": [34, 82, 85, 47],
+    "RGB": [103, 52, 36],
     "hex": "#673424",
     "name": "淡栗棕",
     "pinyin": "danlizong"
   },
   {
-    "CMYK": [
-      33,
-      89,
-      92,
-      48
-    ],
-    "RGB": [
-      101,
-      43,
-      28
-    ],
+    "CMYK": [33, 89, 92, 48],
+    "RGB": [101, 43, 28],
     "hex": "#652b1c",
     "name": "可可棕",
     "pinyin": "kekezong"
   },
   {
-    "CMYK": [
-      32,
-      90,
-      95,
-      45
-    ],
-    "RGB": [
-      105,
-      42,
-      27
-    ],
+    "CMYK": [32, 90, 95, 45],
+    "RGB": [105, 42, 27],
     "hex": "#692a1b",
     "name": "柞叶棕",
     "pinyin": "zhayezong"
   },
   {
-    "CMYK": [
-      0,
-      53,
-      59,
-      0
-    ],
-    "RGB": [
-      251,
-      153,
-      104
-    ],
+    "CMYK": [0, 53, 59, 0],
+    "RGB": [251, 153, 104],
     "hex": "#fb9968",
     "name": "野蔷薇红",
     "pinyin": "yeqiangweihong"
   },
   {
-    "CMYK": [
-      0,
-      65,
-      79,
-      0
-    ],
-    "RGB": [
-      252,
-      121,
-      48
-    ],
+    "CMYK": [0, 65, 79, 0],
+    "RGB": [252, 121, 48],
     "hex": "#fc7930",
     "name": "菠萝红",
     "pinyin": "boluohong"
   },
   {
-    "CMYK": [
-      2,
-      31,
-      31,
-      0
-    ],
-    "RGB": [
-      237,
-      195,
-      174
-    ],
+    "CMYK": [2, 31, 31, 0],
+    "RGB": [237, 195, 174],
     "hex": "#edc3ae",
     "name": "藕荷",
     "pinyin": "ouhe"
   },
   {
-    "CMYK": [
-      0,
-      70,
-      91,
-      0
-    ],
-    "RGB": [
-      225,
-      103,
-      35
-    ],
+    "CMYK": [0, 70, 91, 0],
+    "RGB": [225, 103, 35],
     "hex": "#e16723",
     "name": "陶瓷红",
     "pinyin": "taocihong"
   },
   {
-    "CMYK": [
-      16,
-      23,
-      27,
-      2
-    ],
-    "RGB": [
-      212,
-      196,
-      183
-    ],
+    "CMYK": [16, 23, 27, 2],
+    "RGB": [212, 196, 183],
     "hex": "#d4c4b7",
     "name": "晓灰",
     "pinyin": "xiaohui"
   },
   {
-    "CMYK": [
-      9,
-      64,
-      78,
-      1
-    ],
-    "RGB": [
-      207,
-      117,
-      67
-    ],
+    "CMYK": [9, 64, 78, 1],
+    "RGB": [207, 117, 67],
     "hex": "#cf7543",
     "name": "余烬红",
     "pinyin": "yujinhong"
   },
   {
-    "CMYK": [
-      8,
-      72,
-      93,
-      1
-    ],
-    "RGB": [
-      205,
-      98,
-      39
-    ],
+    "CMYK": [8, 72, 93, 1],
+    "RGB": [205, 98, 39],
     "hex": "#cd6227",
     "name": "火砖红",
     "pinyin": "huozhuanhong"
   },
   {
-    "CMYK": [
-      22,
-      64,
-      71,
-      12
-    ],
-    "RGB": [
-      170,
-      106,
-      76
-    ],
+    "CMYK": [22, 64, 71, 12],
+    "RGB": [170, 106, 76],
     "hex": "#aa6a4c",
     "name": "火泥棕",
     "pinyin": "huonizong"
   },
   {
-    "CMYK": [
-      20,
-      76,
-      92,
-      9
-    ],
-    "RGB": [
-      166,
-      82,
-      44
-    ],
+    "CMYK": [20, 76, 92, 9],
+    "RGB": [166, 82, 44],
     "hex": "#a6522c",
     "name": "绀红",
     "pinyin": "ganhong"
   },
   {
-    "CMYK": [
-      31,
-      79,
-      77,
-      37
-    ],
-    "RGB": [
-      119,
-      61,
-      49
-    ],
+    "CMYK": [31, 79, 77, 37],
+    "RGB": [119, 61, 49],
     "hex": "#773d31",
     "name": "橡树棕",
     "pinyin": "xiangshuzong"
   },
   {
-    "CMYK": [
-      45,
-      68,
-      57,
-      66
-    ],
-    "RGB": [
-      72,
-      51,
-      50
-    ],
+    "CMYK": [45, 68, 57, 66],
+    "RGB": [72, 51, 50],
     "hex": "#483332",
     "name": "海报灰",
     "pinyin": "haibaohui"
   },
   {
-    "CMYK": [
-      41,
-      76,
-      64,
-      65
-    ],
-    "RGB": [
-      175,
-      46,
-      43
-    ],
+    "CMYK": [41, 76, 64, 65],
+    "RGB": [175, 46, 43],
     "hex": "#4b2e2b",
     "name": "玫瑰灰",
     "pinyin": "meiguihui"
   },
   {
-    "CMYK": [
-      41,
-      84,
-      71,
-      67
-    ],
-    "RGB": [
-      72,
-      37,
-      34
-    ],
+    "CMYK": [41, 84, 71, 67],
+    "RGB": [72, 37, 34],
     "hex": "#482522",
     "name": "火山棕",
     "pinyin": "huoshanzong"
   },
   {
-    "CMYK": [
-      40,
-      92,
-      78,
-      66
-    ],
-    "RGB": [
-      72,
-      30,
-      28
-    ],
+    "CMYK": [40, 92, 78, 66],
+    "RGB": [72, 30, 28],
     "hex": "#481e1c",
     "name": "豆沙",
     "pinyin": "dousha"
   },
   {
-    "CMYK": [
-      0,
-      9,
-      12,
-      0
-    ],
-    "RGB": [
-      251,
-      238,
-      226
-    ],
+    "CMYK": [0, 9, 12, 0],
+    "RGB": [251, 238, 226],
     "hex": "#fbeee2",
     "name": "淡米粉",
     "pinyin": "danmifen"
   },
   {
-    "CMYK": [
-      0,
-      19,
-      19,
-      0
-    ],
-    "RGB": [
-      246,
-      220,
-      206
-    ],
+    "CMYK": [0, 19, 19, 0],
+    "RGB": [246, 220, 206],
     "hex": "#f6dcce",
     "name": "初桃粉红",
     "pinyin": "chutaofenhong"
   },
   {
-    "CMYK": [
-      0,
-      27,
-      27,
-      0
-    ],
-    "RGB": [
-      247,
-      207,
-      186
-    ],
+    "CMYK": [0, 27, 27, 0],
+    "RGB": [247, 207, 186],
     "hex": "#f7cfba",
     "name": "介壳淡粉红",
     "pinyin": "jieqiaodanfenhong"
   },
   {
-    "CMYK": [
-      0,
-      43,
-      43,
-      0
-    ],
-    "RGB": [
-      246,
-      173,
-      143
-    ],
+    "CMYK": [0, 43, 43, 0],
+    "RGB": [246, 173, 143],
     "hex": "#f6ad8f",
     "name": "淡藏花红",
     "pinyin": "dancanghuahong"
   },
   {
-    "CMYK": [
-      0,
-      58,
-      61,
-      0
-    ],
-    "RGB": [
-      246,
-      140,
-      96
-    ],
+    "CMYK": [0, 58, 61, 0],
+    "RGB": [246, 140, 96],
     "hex": "#f68c60",
     "name": "瓜瓤红",
     "pinyin": "guaranghong"
   },
   {
-    "CMYK": [
-      0,
-      67,
-      74,
-      0
-    ],
-    "RGB": [
-      249,
-      114,
-      61
-    ],
+    "CMYK": [0, 67, 74, 0],
+    "RGB": [249, 114, 61],
     "hex": "#f9723d",
     "name": "芙蓉红",
     "pinyin": "furonghong"
   },
   {
-    "CMYK": [
-      0,
-      74,
-      85,
-      0
-    ],
-    "RGB": [
-      250,
-      93,
-      25
-    ],
+    "CMYK": [0, 74, 85, 0],
+    "RGB": [250, 93, 25],
     "hex": "#fa5d19",
     "name": "莓酱红",
     "pinyin": "meijianghong"
   },
   {
-    "CMYK": [
-      0,
-      62,
-      66,
-      0
-    ],
-    "RGB": [
-      238,
-      128,
-      85
-    ],
+    "CMYK": [0, 62, 66, 0],
+    "RGB": [238, 128, 85],
     "hex": "#ee8055",
     "name": "法螺红",
     "pinyin": "faluohong"
   },
   {
-    "CMYK": [
-      4,
-      82,
-      99,
-      0
-    ],
-    "RGB": [
-      207,
-      72,
-      19
-    ],
+    "CMYK": [4, 82, 99, 0],
+    "RGB": [207, 72, 19],
     "hex": "#cf4813",
     "name": "落霞红",
     "pinyin": "luoxiahong"
   },
   {
-    "CMYK": [
-      21,
-      43,
-      43,
-      9
-    ],
-    "RGB": [
-      184,
-      148,
-      133
-    ],
+    "CMYK": [21, 43, 43, 9],
+    "RGB": [184, 148, 133],
     "hex": "#b89485",
     "name": "淡玫瑰灰",
     "pinyin": "danmeiguihui"
   },
   {
-    "CMYK": [
-      18,
-      80,
-      92,
-      7
-    ],
-    "RGB": [
-      177,
-      75,
-      40
-    ],
+    "CMYK": [18, 80, 92, 7],
+    "RGB": [177, 75, 40],
     "hex": "#b14b28",
     "name": "蟹蝥红",
     "pinyin": "xiemaohong"
   },
   {
-    "CMYK": [
-      27,
-      91,
-      95,
-      28
-    ],
-    "RGB": [
-      134,
-      48,
-      32
-    ],
+    "CMYK": [27, 91, 95, 28],
+    "RGB": [134, 48, 32],
     "hex": "#863020",
     "name": "火岩棕",
     "pinyin": "huoyanzong"
   },
   {
-    "CMYK": [
-      27,
-      96,
-      100,
-      27
-    ],
-    "RGB": [
-      134,
-      38,
-      23
-    ],
+    "CMYK": [27, 96, 100, 27],
+    "RGB": [134, 38, 23],
     "hex": "#862617",
     "name": "赭石",
     "pinyin": "zheshi"
   },
   {
-    "CMYK": [
-      36,
-      90,
-      82,
-      56
-    ],
-    "RGB": [
-      89,
-      38,
-      32
-    ],
+    "CMYK": [36, 90, 82, 56],
+    "RGB": [89, 38, 32],
     "hex": "#592620",
     "name": "暗驼棕",
     "pinyin": "antuozong"
   },
   {
-    "CMYK": [
-      35,
-      96,
-      88,
-      55
-    ],
-    "RGB": [
-      90,
-      31,
-      27
-    ],
+    "CMYK": [35, 96, 88, 55],
+    "RGB": [90, 31, 27],
     "hex": "#5a1f1b",
     "name": "酱棕",
     "pinyin": "jiangzong"
   },
   {
-    "CMYK": [
-      34,
-      98,
-      91,
-      53
-    ],
-    "RGB": [
-      92,
-      30,
-      25
-    ],
+    "CMYK": [34, 98, 91, 53],
+    "RGB": [92, 30, 25],
     "hex": "#5c1e19",
     "name": "栗棕",
     "pinyin": "lizong"
   },
   {
-    "CMYK": [
-      0,
-      31,
-      24,
-      0
-    ],
-    "RGB": [
-      244,
-      199,
-      186
-    ],
+    "CMYK": [0, 31, 24, 0],
+    "RGB": [244, 199, 186],
     "hex": "#f4c7ba",
     "name": "洋水仙红",
     "pinyin": "yangshuixianhong"
   },
   {
-    "CMYK": [
-      0,
-      67,
-      55,
-      0
-    ],
-    "RGB": [
-      241,
-      118,
-      102
-    ],
+    "CMYK": [0, 67, 55, 0],
+    "RGB": [241, 118, 102],
     "hex": "#f17666",
     "name": "谷鞘红",
     "pinyin": "guqiaohong"
   },
   {
-    "CMYK": [
-      0,
-      77,
-      69,
-      0
-    ],
-    "RGB": [
-      241,
-      86,
-      66
-    ],
+    "CMYK": [0, 77, 69, 0],
+    "RGB": [241, 86, 66],
     "hex": "#f15642",
     "name": "苹果红",
     "pinyin": "pingguohong"
   },
   {
-    "CMYK": [
-      0,
-      84,
-      82,
-      0
-    ],
-    "RGB": [
-      245,
-      57,
-      28
-    ],
+    "CMYK": [0, 84, 82, 0],
+    "RGB": [245, 57, 28],
     "hex": "#f5391c",
     "name": "铁水红",
     "pinyin": "tieshuihong"
   },
   {
-    "CMYK": [
-      0,
-      76,
-      67,
-      0
-    ],
-    "RGB": [
-      242,
-      90,
-      71
-    ],
+    "CMYK": [0, 76, 67, 0],
+    "RGB": [242, 90, 71],
     "hex": "#f25a47",
     "name": "桂红",
     "pinyin": "guihong"
   },
   {
-    "CMYK": [
-      0,
-      84,
-      82,
-      0
-    ],
-    "RGB": [
-      243,
-      59,
-      31
-    ],
+    "CMYK": [0, 84, 82, 0],
+    "RGB": [243, 59, 31],
     "hex": "#f33b1f",
     "name": "极光红",
     "pinyin": "jiguanghong"
   },
   {
-    "CMYK": [
-      0,
-      38,
-      25,
-      0
-    ],
-    "RGB": [
-      242,
-      185,
-      178
-    ],
+    "CMYK": [0, 38, 25, 0],
+    "RGB": [242, 185, 178],
     "hex": "#f2b9b2",
     "name": "粉红",
     "pinyin": "fenhong"
   },
   {
-    "CMYK": [
-      0,
-      53,
-      36,
-      0
-    ],
-    "RGB": [
-      241,
-      151,
-      144
-    ],
+    "CMYK": [0, 53, 36, 0],
+    "RGB": [241, 151, 144],
     "hex": "#f19790",
     "name": "舌红",
     "pinyin": "shehong"
   },
   {
-    "CMYK": [
-      0,
-      76,
-      68,
-      0
-    ],
-    "RGB": [
-      240,
-      90,
-      70
-    ],
+    "CMYK": [0, 76, 68, 0],
+    "RGB": [240, 90, 70],
     "hex": "#f05a46",
     "name": "曲红",
     "pinyin": "quhong"
   },
   {
-    "CMYK": [
-      0,
-      83,
-      81,
-      0
-    ],
-    "RGB": [
-      242,
-      62,
-      35
-    ],
+    "CMYK": [0, 83, 81, 0],
+    "RGB": [242, 62, 35],
     "hex": "#f23e23",
     "name": "红汞红",
     "pinyin": "honggonghong"
   },
   {
-    "CMYK": [
-      0,
-      29,
-      16,
-      0
-    ],
-    "RGB": [
-      242,
-      202,
-      201
-    ],
+    "CMYK": [0, 29, 16, 0],
+    "RGB": [242, 202, 201],
     "hex": "#f2cac9",
     "name": "淡绯",
     "pinyin": "danfei"
   },
   {
-    "CMYK": [
-      0,
-      43,
-      24,
-      0
-    ],
-    "RGB": [
-      239,
-      175,
-      173
-    ],
+    "CMYK": [0, 43, 24, 0],
+    "RGB": [239, 175, 173],
     "hex": "#efafad",
     "name": "无花果红",
     "pinyin": "wuhuaguohong"
   },
   {
-    "CMYK": [
-      0,
-      57,
-      36,
-      0
-    ],
-    "RGB": [
-      241,
-      144,
-      140
-    ],
+    "CMYK": [0, 57, 36, 0],
+    "RGB": [241, 144, 140],
     "hex": "#f1908c",
     "name": "榴子红",
     "pinyin": "liuzihong"
   },
   {
-    "CMYK": [
-      0,
-      83,
-      81,
-      0
-    ],
-    "RGB": [
-      240,
-      63,
-      36
-    ],
+    "CMYK": [0, 83, 81, 0],
+    "RGB": [240, 63, 36],
     "hex": "#f03f24",
     "name": "胭脂红",
     "pinyin": "yanzhihong"
   },
   {
-    "CMYK": [
-      0,
-      50,
-      23,
-      0
-    ],
-    "RGB": [
-      240,
-      161,
-      168
-    ],
+    "CMYK": [0, 50, 23, 0],
+    "RGB": [240, 161, 168],
     "hex": "#f0a1a8",
     "name": "合欢红",
     "pinyin": "hehuanhong"
   },
   {
-    "CMYK": [
-      0,
-      56,
-      27,
-      0
-    ],
-    "RGB": [
-      241,
-      147,
-      156
-    ],
+    "CMYK": [0, 56, 27, 0],
+    "RGB": [241, 147, 156],
     "hex": "#f1939c",
     "name": "春梅红",
     "pinyin": "chunmeihong"
   },
   {
-    "CMYK": [
-      0,
-      65,
-      38,
-      0
-    ],
-    "RGB": [
-      240,
-      124,
-      130
-    ],
+    "CMYK": [0, 65, 38, 0],
+    "RGB": [240, 124, 130],
     "hex": "#f07c82",
     "name": "香叶红",
     "pinyin": "xiangyehong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      72,
-      0
-    ],
-    "RGB": [
-      240,
-      74,
-      58
-    ],
+    "CMYK": [0, 80, 72, 0],
+    "RGB": [240, 74, 58],
     "hex": "#f04a3a",
     "name": "珊瑚红",
     "pinyin": "shanhuhong"
   },
   {
-    "CMYK": [
-      0,
-      84,
-      82,
-      0
-    ],
-    "RGB": [
-      241,
-      60,
-      34
-    ],
+    "CMYK": [0, 84, 82, 0],
+    "RGB": [241, 60, 34],
     "hex": "#f13c22",
     "name": "萝卜红",
     "pinyin": "luobohong"
   },
   {
-    "CMYK": [
-      0,
-      65,
-      29,
-      0
-    ],
-    "RGB": [
-      231,
-      124,
-      142
-    ],
+    "CMYK": [0, 65, 29, 0],
+    "RGB": [231, 124, 142],
     "hex": "#e77c8e",
     "name": "淡茜红",
     "pinyin": "danqianhong"
   },
   {
-    "CMYK": [
-      0,
-      77,
-      49,
-      0
-    ],
-    "RGB": [
-      237,
-      90,
-      101
-    ],
+    "CMYK": [0, 77, 49, 0],
+    "RGB": [237, 90, 101],
     "hex": "#ed5a65",
     "name": "艳红",
     "pinyin": "yanhong"
   },
   {
-    "CMYK": [
-      0,
-      81,
-      66,
-      0
-    ],
-    "RGB": [
-      237,
-      72,
-      69
-    ],
+    "CMYK": [0, 81, 66, 0],
+    "RGB": [237, 72, 69],
     "hex": "#ed4845",
     "name": "淡菽红",
     "pinyin": "danshuhong"
   },
   {
-    "CMYK": [
-      0,
-      84,
-      76,
-      0
-    ],
-    "RGB": [
-      237,
-      59,
-      47
-    ],
+    "CMYK": [0, 84, 76, 0],
+    "RGB": [237, 59, 47],
     "hex": "#ed3b2f",
     "name": "鱼鳃红",
     "pinyin": "yusaihong"
   },
   {
-    "CMYK": [
-      0,
-      86,
-      82,
-      0
-    ],
-    "RGB": [
-      237,
-      51,
-      33
-    ],
+    "CMYK": [0, 86, 82, 0],
+    "RGB": [237, 51, 33],
     "hex": "#ed3321",
     "name": "樱桃红",
     "pinyin": "yingtaohong"
   },
   {
-    "CMYK": [
-      0,
-      82,
-      44,
-      0
-    ],
-    "RGB": [
-      238,
-      72,
-      102
-    ],
+    "CMYK": [0, 82, 44, 0],
+    "RGB": [238, 72, 102],
     "hex": "#ee4866",
     "name": "淡蕊香红",
     "pinyin": "danruixianghong"
   },
   {
-    "CMYK": [
-      0,
-      82,
-      46,
-      0
-    ],
-    "RGB": [
-      238,
-      72,
-      99
-    ],
+    "CMYK": [0, 82, 46, 0],
+    "RGB": [238, 72, 99],
     "hex": "#ee4863",
     "name": "石竹红",
     "pinyin": "shizhuhong"
   },
   {
-    "CMYK": [
-      0,
-      82,
-      50,
-      0
-    ],
-    "RGB": [
-      239,
-      71,
-      93
-    ],
+    "CMYK": [0, 82, 50, 0],
+    "RGB": [239, 71, 93],
     "hex": "#ef475d",
     "name": "草茉莉红",
     "pinyin": "caomolihong"
   },
   {
-    "CMYK": [
-      0,
-      84,
-      60,
-      0
-    ],
-    "RGB": [
-      238,
-      63,
-      77
-    ],
+    "CMYK": [0, 84, 60, 0],
+    "RGB": [238, 63, 77],
     "hex": "#ee3f4d",
     "name": "茶花红",
     "pinyin": "chahuahong"
   },
   {
-    "CMYK": [
-      0,
-      86,
-      74,
-      0
-    ],
-    "RGB": [
-      237,
-      51,
-      51
-    ],
+    "CMYK": [0, 86, 74, 0],
+    "RGB": [237, 51, 51],
     "hex": "#ed3333",
     "name": "枸枢红",
     "pinyin": "goushuhong"
   },
   {
-    "CMYK": [
-      0,
-      88,
-      81,
-      0
-    ],
-    "RGB": [
-      236,
-      43,
-      36
-    ],
+    "CMYK": [0, 88, 81, 0],
+    "RGB": [236, 43, 36],
     "hex": "#ec2b24",
     "name": "秋海棠红",
     "pinyin": "qiuhaitanghong"
   },
   {
-    "CMYK": [
-      0,
-      89,
-      84,
-      0
-    ],
-    "RGB": [
-      235,
-      38,
-      26
-    ],
+    "CMYK": [0, 89, 84, 0],
+    "RGB": [235, 38, 26],
     "hex": "#eb261a",
     "name": "丽春红",
     "pinyin": "lichunhong"
   },
   {
-    "CMYK": [
-      0,
-      90,
-      90,
-      0
-    ],
-    "RGB": [
-      222,
-      42,
-      24
-    ],
+    "CMYK": [0, 90, 90, 0],
+    "RGB": [222, 42, 24],
     "hex": "#de2a18",
     "name": "夕阳红",
     "pinyin": "xiyanghong"
   },
   {
-    "CMYK": [
-      0,
-      92,
-      95,
-      0
-    ],
-    "RGB": [
-      212,
-      37,
-      23
-    ],
+    "CMYK": [0, 92, 95, 0],
+    "RGB": [212, 37, 23],
     "hex": "#d42517",
     "name": "鹤顶红",
     "pinyin": "hedinghong"
   },
   {
-    "CMYK": [
-      19,
-      89,
-      85,
-      9
-    ],
-    "RGB": [
-      171,
-      55,
-      47
-    ],
+    "CMYK": [19, 89, 85, 9],
+    "RGB": [171, 55, 47],
     "hex": "#ab372f",
     "name": "鹅血石红",
     "pinyin": "exueshihong"
   },
   {
-    "CMYK": [
-      17,
-      98,
-      100,
-      8
-    ],
-    "RGB": [
-      172,
-      31,
-      24
-    ],
+    "CMYK": [17, 98, 100, 8],
+    "RGB": [172, 31, 24],
     "hex": "#ac1f18",
     "name": "覆盆子红",
     "pinyin": "fupenzihong"
   },
   {
-    "CMYK": [
-      36,
-      81,
-      64,
-      54
-    ],
-    "RGB": [
-      93,
-      49,
-      49
-    ],
+    "CMYK": [36, 81, 64, 54],
+    "RGB": [93, 49, 49],
     "hex": "#5d3131",
     "name": "貂紫",
     "pinyin": "diaozi"
   },
   {
-    "CMYK": [
-      35,
-      94,
-      77,
-      53
-    ],
-    "RGB": [
-      92,
-      34,
-      35
-    ],
+    "CMYK": [35, 94, 77, 53],
+    "RGB": [92, 34, 35],
     "hex": "#5c2223",
     "name": "暗玉紫",
     "pinyin": "anyuzi"
   },
   {
-    "CMYK": [
-      35,
-      100,
-      85,
-      54
-    ],
-    "RGB": [
-      90,
-      25,
-      27
-    ],
+    "CMYK": [35, 100, 85, 54],
+    "RGB": [90, 25, 27],
     "hex": "#5a191b",
     "name": "栗紫",
     "pinyin": "lizi"
   },
   {
-    "CMYK": [
-      35,
-      100,
-      80,
-      54
-    ],
-    "RGB": [
-      90,
-      18,
-      22
-    ],
+    "CMYK": [35, 100, 80, 54],
+    "RGB": [90, 18, 22],
     "hex": "#5a1216",
     "name": "葡萄酱紫",
     "pinyin": "putaojiangzi"
   },
   {
-    "CMYK": [
-      0,
-      49,
-      27,
-      0
-    ],
-    "RGB": [
-      238,
-      162,
-      164
-    ],
+    "CMYK": [0, 49, 27, 0],
+    "RGB": [238, 162, 164],
     "hex": "#eea2a4",
     "name": "牡丹粉红",
     "pinyin": "mudanfenhong"
   },
   {
-    "CMYK": [
-      0,
-      78,
-      44,
-      0
-    ],
-    "RGB": [
-      237,
-      85,
-      106
-    ],
+    "CMYK": [0, 78, 44, 0],
+    "RGB": [237, 85, 106],
     "hex": "#ed556a",
     "name": "山茶红",
     "pinyin": "shanchahong"
   },
   {
-    "CMYK": [
-      0,
-      86,
-      55,
-      0
-    ],
-    "RGB": [
-      240,
-      55,
-      82
-    ],
+    "CMYK": [0, 86, 55, 0],
+    "RGB": [240, 55, 82],
     "hex": "#f03752",
     "name": "海棠红",
     "pinyin": "haitanghong"
   },
   {
-    "CMYK": [
-      13,
-      83,
-      62,
-      3
-    ],
-    "RGB": [
-      192,
-      72,
-      81
-    ],
+    "CMYK": [13, 83, 62, 3],
+    "RGB": [192, 72, 81],
     "hex": "#c04851",
     "name": "玉红",
     "pinyin": "yuhong"
   },
   {
-    "CMYK": [
-      11,
-      93,
-      77,
-      2
-    ],
-    "RGB": [
-      192,
-      44,
-      56
-    ],
+    "CMYK": [11, 93, 77, 2],
+    "RGB": [192, 44, 56],
     "hex": "#c02c38",
     "name": "高粱红",
     "pinyin": "gaolianghong"
   },
   {
-    "CMYK": [
-      22,
-      76,
-      54,
-      12
-    ],
-    "RGB": [
-      167,
-      83,
-      90
-    ],
+    "CMYK": [22, 76, 54, 12],
+    "RGB": [167, 83, 90],
     "hex": "#a7535a",
     "name": "满江红",
     "pinyin": "manjianghong"
   },
   {
-    "CMYK": [
-      28,
-      100,
-      86,
-      33
-    ],
-    "RGB": [
-      124,
-      24,
-      35
-    ],
+    "CMYK": [28, 100, 86, 33],
+    "RGB": [124, 24, 35],
     "hex": "#7c1823",
     "name": "枣红",
     "pinyin": "zaohong"
   },
   {
-    "CMYK": [
-      39,
-      92,
-      67,
-      64
-    ],
-    "RGB": [
-      76,
-      31,
-      36
-    ],
+    "CMYK": [39, 92, 67, 64],
+    "RGB": [76, 31, 36],
     "hex": "#4c1f24",
     "name": "葡萄紫",
     "pinyin": "putaozi"
   },
   {
-    "CMYK": [
-      39,
-      100,
-      79,
-      63
-    ],
-    "RGB": [
-      77,
-      16,
-      24
-    ],
+    "CMYK": [39, 100, 79, 63],
+    "RGB": [77, 16, 24],
     "hex": "#4d1018",
     "name": "酱紫",
     "pinyin": "jiangzi"
   },
   {
-    "CMYK": [
-      0,
-      89,
-      62,
-      0
-    ],
-    "RGB": [
-      238,
-      39,
-      70
-    ],
+    "CMYK": [0, 89, 62, 0],
+    "RGB": [238, 39, 70],
     "hex": "#ee2746",
     "name": "淡曙红",
     "pinyin": "danshuhong"
   },
   {
-    "CMYK": [
-      0,
-      93,
-      76,
-      0
-    ],
-    "RGB": [
-      222,
-      28,
-      49
-    ],
+    "CMYK": [0, 93, 76, 0],
+    "RGB": [222, 28, 49],
     "hex": "#de1c31",
     "name": "唐菖蒲红",
     "pinyin": "tangchangpuhong"
   },
   {
-    "CMYK": [
-      1,
-      95,
-      82,
-      0
-    ],
-    "RGB": [
-      209,
-      26,
-      45
-    ],
+    "CMYK": [1, 95, 82, 0],
+    "RGB": [209, 26, 45],
     "hex": "#d11a2d",
     "name": "鹅冠红",
     "pinyin": "eguanhong"
   },
   {
-    "CMYK": [
-      13,
-      76,
-      50,
-      2
-    ],
-    "RGB": [
-      196,
-      90,
-      101
-    ],
+    "CMYK": [13, 76, 50, 2],
+    "RGB": [196, 90, 101],
     "hex": "#c45a65",
     "name": "莓红",
     "pinyin": "meihong"
   },
   {
-    "CMYK": [
-      10,
-      96,
-      82,
-      2
-    ],
-    "RGB": [
-      194,
-      31,
-      48
-    ],
+    "CMYK": [10, 96, 82, 2],
+    "RGB": [194, 31, 48],
     "hex": "#c21f30",
     "name": "枫叶红",
     "pinyin": "fengyehong"
   },
   {
-    "CMYK": [
-      19,
-      99,
-      86,
-      11
-    ],
-    "RGB": [
-      166,
-      27,
-      41
-    ],
+    "CMYK": [19, 99, 86, 11],
+    "RGB": [166, 27, 41],
     "hex": "#a61b29",
     "name": "苋菜红",
     "pinyin": "xiancaihong"
   },
   {
-    "CMYK": [
-      29,
-      73,
-      51,
-      28
-    ],
-    "RGB": [
-      137,
-      78,
-      84
-    ],
+    "CMYK": [29, 73, 51, 28],
+    "RGB": [137, 78, 84],
     "hex": "#894e54",
     "name": "烟红",
     "pinyin": "yanhong"
   },
   {
-    "CMYK": [
-      27,
-      98,
-      79,
-      30
-    ],
-    "RGB": [
-      130,
-      32,
-      43
-    ],
+    "CMYK": [27, 98, 79, 30],
+    "RGB": [130, 32, 43],
     "hex": "#82202b",
     "name": "暗紫苑红",
     "pinyin": "anziyuanhong"
   },
   {
-    "CMYK": [
-      27,
-      100,
-      90,
-      29
-    ],
-    "RGB": [
-      130,
-      17,
-      31
-    ],
+    "CMYK": [27, 100, 90, 29],
+    "RGB": [130, 17, 31],
     "hex": "#82111f",
     "name": "殷红",
     "pinyin": "yanhong"
   },
   {
-    "CMYK": [
-      36,
-      95,
-      71,
-      59
-    ],
-    "RGB": [
-      84,
-      30,
-      36
-    ],
+    "CMYK": [36, 95, 71, 59],
+    "RGB": [84, 30, 36],
     "hex": "#541e24",
     "name": "猪肝紫",
     "pinyin": "zhuganzi"
   },
   {
-    "CMYK": [
-      38,
-      100,
-      81,
-      61
-    ],
-    "RGB": [
-      80,
-      10,
-      22
-    ],
+    "CMYK": [38, 100, 81, 61],
+    "RGB": [80, 10, 22],
     "hex": "#500a16",
     "name": "金鱼紫",
     "pinyin": "jinyuzi"
   },
   {
-    "CMYK": [
-      1,
-      11,
-      9,
-      0
-    ],
-    "RGB": [
-      248,
-      235,
-      230
-    ],
+    "CMYK": [1, 11, 9, 0],
+    "RGB": [248, 235, 230],
     "hex": "#f8ebe6",
     "name": "草珠红",
     "pinyin": "caozhuhong"
   },
   {
-    "CMYK": [
-      0,
-      68,
-      21,
-      0
-    ],
-    "RGB": [
-      236,
-      118,
-      150
-    ],
+    "CMYK": [0, 68, 21, 0],
+    "RGB": [236, 118, 150],
     "hex": "#ec7696",
     "name": "淡绛红",
     "pinyin": "danjianghong"
   },
   {
-    "CMYK": [
-      0,
-      86,
-      30,
-      0
-    ],
-    "RGB": [
-      239,
-      52,
-      115
-    ],
+    "CMYK": [0, 86, 30, 0],
+    "RGB": [239, 52, 115],
     "hex": "#ef3473",
     "name": "品红",
     "pinyin": "pinhong"
   },
   {
-    "CMYK": [
-      0,
-      69,
-      22,
-      0
-    ],
-    "RGB": [
-      234,
-      114,
-      147
-    ],
+    "CMYK": [0, 69, 22, 0],
+    "RGB": [234, 114, 147],
     "hex": "#ea7293",
     "name": "凤仙花红",
     "pinyin": "fengxianhuahong"
   },
   {
-    "CMYK": [
-      0,
-      52,
-      18,
-      0
-    ],
-    "RGB": [
-      236,
-      155,
-      173
-    ],
+    "CMYK": [0, 52, 18, 0],
+    "RGB": [236, 155, 173],
     "hex": "#ec9bad",
     "name": "粉团花红",
     "pinyin": "fentuanhuahong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      28,
-      0
-    ],
-    "RGB": [
-      235,
-      80,
-      126
-    ],
+    "CMYK": [0, 80, 28, 0],
+    "RGB": [235, 80, 126],
     "hex": "#eb507e",
     "name": "夹竹桃红",
     "pinyin": "jiazhutaohong"
   },
   {
-    "CMYK": [
-      0,
-      88,
-      36,
-      0
-    ],
-    "RGB": [
-      237,
-      47,
-      106
-    ],
+    "CMYK": [0, 88, 36, 0],
+    "RGB": [237, 47, 106],
     "hex": "#ed2f6a",
     "name": "榲桲红",
     "pinyin": "wenpohong"
   },
   {
-    "CMYK": [
-      0,
-      39,
-      14,
-      0
-    ],
-    "RGB": [
-      238,
-      184,
-      195
-    ],
+    "CMYK": [0, 39, 14, 0],
+    "RGB": [238, 184, 195],
     "hex": "#eeb8c3",
     "name": "姜红",
     "pinyin": "jianghong"
   },
   {
-    "CMYK": [
-      0,
-      80,
-      27,
-      0
-    ],
-    "RGB": [
-      234,
-      81,
-      127
-    ],
+    "CMYK": [0, 80, 27, 0],
+    "RGB": [234, 81, 127],
     "hex": "#ea517f",
     "name": "莲瓣红",
     "pinyin": "lianbanhong"
   },
   {
-    "CMYK": [
-      0,
-      33,
-      11,
-      0
-    ],
-    "RGB": [
-      241,
-      196,
-      205
-    ],
+    "CMYK": [0, 33, 11, 0],
+    "RGB": [241, 196, 205],
     "hex": "#f1c4cd",
     "name": "水红",
     "pinyin": "shuihong"
   },
   {
-    "CMYK": [
-      0,
-      60,
-      18,
-      0
-    ],
-    "RGB": [
-      236,
-      138,
-      164
-    ],
+    "CMYK": [0, 60, 18, 0],
+    "RGB": [236, 138, 164],
     "hex": "#ec8aa4",
     "name": "报春红",
     "pinyin": "baochunhong"
   },
   {
-    "CMYK": [
-      8,
-      78,
-      35,
-      1
-    ],
-    "RGB": [
-      206,
-      87,
-      109
-    ],
+    "CMYK": [8, 78, 35, 1],
+    "RGB": [206, 87, 109],
     "hex": "#ce5777",
     "name": "月季红",
     "pinyin": "yuejihong"
   },
   {
-    "CMYK": [
-      0,
-      52,
-      15,
-      0
-    ],
-    "RGB": [
-      237,
-      157,
-      178
-    ],
+    "CMYK": [0, 52, 15, 0],
+    "RGB": [237, 157, 178],
     "hex": "#ed9db2",
     "name": "豇豆红",
     "pinyin": "jiangdouhong"
   },
   {
-    "CMYK": [
-      0,
-      63,
-      18,
-      0
-    ],
-    "RGB": [
-      239,
-      130,
-      160
-    ],
+    "CMYK": [0, 63, 18, 0],
+    "RGB": [239, 130, 160],
     "hex": "#ef82a0",
     "name": "霞光红",
     "pinyin": "xiaguanghong"
   },
   {
-    "CMYK": [
-      0,
-      85,
-      33,
-      0
-    ],
-    "RGB": [
-      235,
-      60,
-      112
-    ],
+    "CMYK": [0, 85, 33, 0],
+    "RGB": [235, 60, 112],
     "hex": "#eb3c70",
     "name": "松叶牡丹红",
     "pinyin": "songyemudanhong"
   },
   {
-    "CMYK": [
-      0,
-      88,
-      40,
-      0
-    ],
-    "RGB": [
-      236,
-      44,
-      100
-    ],
+    "CMYK": [0, 88, 40, 0],
+    "RGB": [236, 44, 100],
     "hex": "#ec2c64",
     "name": "喜蛋红",
     "pinyin": "xidanhong"
   },
   {
-    "CMYK": [
-      5,
-      38,
-      20,
-      0
-    ],
-    "RGB": [
-      227,
-      180,
-      184
-    ],
+    "CMYK": [5, 38, 20, 0],
+    "RGB": [227, 180, 184],
     "hex": "#e3b4b8",
     "name": "鼠鼻红",
     "pinyin": "shubihong"
   },
   {
-    "CMYK": [
-      5,
-      96,
-      73,
-      1
-    ],
-    "RGB": [
-      204,
-      22,
-      58
-    ],
+    "CMYK": [5, 96, 73, 1],
+    "RGB": [204, 22, 58],
     "hex": "#cc163a",
     "name": "尖晶玉红",
     "pinyin": "jianjingyuhong"
   },
   {
-    "CMYK": [
-      16,
-      61,
-      34,
-      4
-    ],
-    "RGB": [
-      194,
-      124,
-      136
-    ],
+    "CMYK": [16, 61, 34, 4],
+    "RGB": [194, 124, 136],
     "hex": "#c27c88",
     "name": "山黎豆红",
     "pinyin": "shanlidouhong"
   },
   {
-    "CMYK": [
-      13,
-      90,
-      56,
-      3
-    ],
-    "RGB": [
-      191,
-      53,
-      83
-    ],
+    "CMYK": [13, 90, 56, 3],
+    "RGB": [191, 53, 83],
     "hex": "#bf3553",
     "name": "锦葵红",
     "pinyin": "jinkuihong"
   },
   {
-    "CMYK": [
-      41,
-      64,
-      44,
-      36
-    ],
-    "RGB": [
-      115,
-      87,
-      92
-    ],
+    "CMYK": [41, 64, 44, 36],
+    "RGB": [115, 87, 92],
     "hex": "#73575c",
     "name": "鼠背灰",
     "pinyin": "shubeihui"
   },
   {
-    "CMYK": [
-      33,
-      100,
-      75,
-      49
-    ],
-    "RGB": [
-      98,
-      22,
-      36
-    ],
+    "CMYK": [33, 100, 75, 49],
+    "RGB": [98, 22, 36],
     "hex": "#621624",
     "name": "甘蔗紫",
     "pinyin": "ganzhezi"
   },
   {
-    "CMYK": [
-      32,
-      100,
-      84,
-      49
-    ],
-    "RGB": [
-      99,
-      7,
-      28
-    ],
+    "CMYK": [32, 100, 84, 49],
+    "RGB": [99, 7, 28],
     "hex": "#63071c",
     "name": "石竹紫",
     "pinyin": "shizhuzi"
   },
   {
-    "CMYK": [
-      57,
-      72,
-      54,
-      74
-    ],
-    "RGB": [
-      54,
-      40,
-      43
-    ],
+    "CMYK": [57, 72, 54, 74],
+    "RGB": [54, 40, 43],
     "hex": "#36282b",
     "name": "苍蝇灰",
     "pinyin": "cangyinghui"
   },
   {
-    "CMYK": [
-      52,
-      88,
-      58,
-      81
-    ],
-    "RGB": [
-      48,
-      22,
-      28
-    ],
+    "CMYK": [52, 88, 58, 81],
+    "RGB": [48, 22, 28],
     "hex": "#30161c",
     "name": "卵石紫",
     "pinyin": "luanshizi"
   },
   {
-    "CMYK": [
-      56,
-      88,
-      62,
-      84
-    ],
-    "RGB": [
-      43,
-      18,
-      22
-    ],
+    "CMYK": [56, 88, 62, 84],
+    "RGB": [43, 18, 22],
     "hex": "#2b1216",
     "name": "李紫",
     "pinyin": "lizi"
   },
   {
-    "CMYK": [
-      58,
-      90,
-      63,
-      83
-    ],
-    "RGB": [
-      45,
-      12,
-      19
-    ],
+    "CMYK": [58, 90, 63, 83],
+    "RGB": [45, 12, 19],
     "hex": "#2d0c13",
     "name": "茄皮紫",
     "pinyin": "qiepizi"
   },
   {
-    "CMYK": [
-      0,
-      76,
-      16,
-      0
-    ],
-    "RGB": [
-      206,
-      94,
-      138
-    ],
+    "CMYK": [0, 76, 16, 0],
+    "RGB": [206, 94, 138],
     "hex": "#ce5e8a",
     "name": "吊钟花红",
     "pinyin": "diaozhonghuahong"
   },
   {
-    "CMYK": [
-      0,
-      81,
-      18,
-      0
-    ],
-    "RGB": [
-      236,
-      78,
-      138
-    ],
+    "CMYK": [0, 81, 18, 0],
+    "RGB": [236, 78, 138],
     "hex": "#ec4e8a",
     "name": "兔眼红",
     "pinyin": "tuyanhong"
   },
   {
-    "CMYK": [
-      0,
-      87,
-      24,
-      0
-    ],
-    "RGB": [
-      238,
-      44,
-      121
-    ],
+    "CMYK": [0, 87, 24, 0],
+    "RGB": [238, 44, 121],
     "hex": "#ee2c79",
     "name": "紫荆红",
     "pinyin": "zijinghong"
   },
   {
-    "CMYK": [
-      24,
-      99,
-      52,
-      19
-    ],
-    "RGB": [
-      149,
-      28,
-      72
-    ],
+    "CMYK": [24, 99, 52, 19],
+    "RGB": [149, 28, 72],
     "hex": "#951c48",
     "name": "菜头紫",
     "pinyin": "caitouzi"
   },
   {
-    "CMYK": [
-      34,
-      97,
-      54,
-      50
-    ],
-    "RGB": [
-      98,
-      29,
-      52
-    ],
+    "CMYK": [34, 97, 54, 50],
+    "RGB": [98, 29, 52],
     "hex": "#621d34",
     "name": "鹞冠紫",
     "pinyin": "yaoguanzi"
   },
   {
-    "CMYK": [
-      33,
-      100,
-      58,
-      60
-    ],
-    "RGB": [
-      98,
-      16,
-      46
-    ],
+    "CMYK": [33, 100, 58, 60],
+    "RGB": [98, 16, 46],
     "hex": "#62102e",
     "name": "葡萄酒红",
     "pinyin": "putaojiuhong"
   },
   {
-    "CMYK": [
-      53,
-      81,
-      50,
-      74
-    ],
-    "RGB": [
-      56,
-      33,
-      41
-    ],
+    "CMYK": [53, 81, 50, 74],
+    "RGB": [56, 33, 41],
     "hex": "#382129",
     "name": "磨石紫",
     "pinyin": "moshizi"
   },
   {
-    "CMYK": [
-      48,
-      90,
-      50,
-      76
-    ],
-    "RGB": [
-      56,
-      25,
-      36
-    ],
+    "CMYK": [48, 90, 50, 76],
+    "RGB": [56, 25, 36],
     "hex": "#381924",
     "name": "檀紫",
     "pinyin": "tanzi"
   },
   {
-    "CMYK": [
-      50,
-      91,
-      54,
-      79
-    ],
-    "RGB": [
-      51,
-      20,
-      30
-    ],
+    "CMYK": [50, 91, 54, 79],
+    "RGB": [51, 20, 30],
     "hex": "#33141e",
     "name": "火鹅紫",
     "pinyin": "huoezi"
   },
   {
-    "CMYK": [
-      53,
-      92,
-      55,
-      81
-    ],
-    "RGB": [
-      49,
-      15,
-      27
-    ],
+    "CMYK": [53, 92, 55, 81],
+    "RGB": [49, 15, 27],
     "hex": "#310f1b",
     "name": "墨紫",
     "pinyin": "mozi"
   },
   {
-    "CMYK": [
-      0,
-      48,
-      15,
-      0
-    ],
-    "RGB": [
-      238,
-      166,
-      183
-    ],
+    "CMYK": [0, 48, 15, 0],
+    "RGB": [238, 166, 183],
     "hex": "#eea6b7",
     "name": "晶红",
     "pinyin": "jinghong"
   },
   {
-    "CMYK": [
-      0,
-      82,
-      16,
-      0
-    ],
-    "RGB": [
-      239,
-      73,
-      139
-    ],
+    "CMYK": [0, 82, 16, 0],
+    "RGB": [239, 73, 139],
     "hex": "#ef498b",
     "name": "扁豆花红",
     "pinyin": "biandouhuahong"
   },
   {
-    "CMYK": [
-      2,
-      66,
-      22,
-      0
-    ],
-    "RGB": [
-      222,
-      120,
-      151
-    ],
+    "CMYK": [2, 66, 22, 0],
+    "RGB": [222, 120, 151],
     "hex": "#de7897",
     "name": "白芨红",
     "pinyin": "baijihong"
   },
   {
-    "CMYK": [
-      0,
-      85,
-      24,
-      0
-    ],
-    "RGB": [
-      222,
-      63,
-      124
-    ],
+    "CMYK": [0, 85, 24, 0],
+    "RGB": [222, 63, 124],
     "hex": "#de3f7c",
     "name": "嫩菱红",
     "pinyin": "nenlinghong"
   },
   {
-    "CMYK": [
-      5,
-      87,
-      30,
-      1
-    ],
-    "RGB": [
-      209,
-      60,
-      116
-    ],
+    "CMYK": [5, 87, 30, 1],
+    "RGB": [209, 60, 116],
     "hex": "#d13c74",
     "name": "菠根红",
     "pinyin": "bogenhong"
   },
   {
-    "CMYK": [
-      15,
-      68,
-      28,
-      2
-    ],
-    "RGB": [
-      197,
-      112,
-      139
-    ],
+    "CMYK": [15, 68, 28, 2],
+    "RGB": [197, 112, 139],
     "hex": "#c5708b",
     "name": "酢酱草红",
     "pinyin": "cujiangcaohong"
   },
   {
-    "CMYK": [
-      22,
-      83,
-      34,
-      11
-    ],
-    "RGB": [
-      168,
-      69,
-      107
-    ],
+    "CMYK": [22, 83, 34, 11],
+    "RGB": [168, 69, 107],
     "hex": "#a8456b",
     "name": "洋葱紫",
     "pinyin": "yangcongzi"
   },
   {
-    "CMYK": [
-      40,
-      92,
-      47,
-      64
-    ],
-    "RGB": [
-      75,
-      30,
-      47
-    ],
+    "CMYK": [40, 92, 47, 64],
+    "RGB": [75, 30, 47],
     "hex": "#4b1e2f",
     "name": "海象紫",
     "pinyin": "haixiangzi"
   },
   {
-    "CMYK": [
-      41,
-      97,
-      49,
-      68
-    ],
-    "RGB": [
-      70,
-      22,
-      41
-    ],
+    "CMYK": [41, 97, 49, 68],
+    "RGB": [70, 22, 41],
     "hex": "#461629",
     "name": "绀紫",
     "pinyin": "ganzi"
   },
   {
-    "CMYK": [
-      42,
-      99,
-      51,
-      69
-    ],
-    "RGB": [
-      68,
-      14,
-      37
-    ],
+    "CMYK": [42, 99, 51, 69],
+    "RGB": [68, 14, 37],
     "hex": "#440e25",
     "name": "古铜紫",
     "pinyin": "gutongzi"
   },
   {
-    "CMYK": [
-      0,
-      30,
-      12,
-      0
-    ],
-    "RGB": [
-      240,
-      201,
-      207
-    ],
+    "CMYK": [0, 30, 12, 0],
+    "RGB": [240, 201, 207],
     "hex": "#f0c9cf",
     "name": "石蕊红",
     "pinyin": "shiruihong"
   },
   {
-    "CMYK": [
-      0,
-      50,
-      16,
-      0
-    ],
-    "RGB": [
-      235,
-      160,
-      179
-    ],
+    "CMYK": [0, 50, 16, 0],
+    "RGB": [235, 160, 179],
     "hex": "#eba0b3",
     "name": "芍药耕红",
     "pinyin": "shaoyaogenghong"
   },
   {
-    "CMYK": [
-      0,
-      88,
-      23,
-      0
-    ],
-    "RGB": [
-      236,
-      45,
-      122
-    ],
+    "CMYK": [0, 88, 23, 0],
+    "RGB": [236, 45, 122],
     "hex": "#ec2d7a",
     "name": "藏花红",
     "pinyin": "canghuahong"
   },
   {
-    "CMYK": [
-      0,
-      71,
-      18,
-      0
-    ],
-    "RGB": [
-      225,
-      108,
-      150
-    ],
+    "CMYK": [0, 71, 18, 0],
+    "RGB": [225, 108, 150],
     "hex": "#e16c96",
     "name": "初荷红",
     "pinyin": "chuhehong"
   },
   {
-    "CMYK": [
-      6,
-      13,
-      7,
-      0
-    ],
-    "RGB": [
-      237,
-      227,
-      231
-    ],
+    "CMYK": [6, 13, 7, 0],
+    "RGB": [237, 227, 231],
     "hex": "#ede3e7",
     "name": "马鞭草紫",
     "pinyin": "mabiancaozi"
   },
   {
-    "CMYK": [
-      7,
-      20,
-      8,
-      0
-    ],
-    "RGB": [
-      233,
-      215,
-      223
-    ],
+    "CMYK": [7, 20, 8, 0],
+    "RGB": [233, 215, 223],
     "hex": "#e9d7df",
     "name": "丁香淡紫",
     "pinyin": "dingxiangdanzi"
   },
   {
-    "CMYK": [
-      7,
-      79,
-      18,
-      0
-    ],
-    "RGB": [
-      210,
-      86,
-      140
-    ],
+    "CMYK": [7, 79, 18, 0],
+    "RGB": [210, 86, 140],
     "hex": "#d2568c",
     "name": "丹紫红",
     "pinyin": "danzihong"
   },
   {
-    "CMYK": [
-      4,
-      89,
-      21,
-      0
-    ],
-    "RGB": [
-      210,
-      53,
-      125
-    ],
+    "CMYK": [4, 89, 21, 0],
+    "RGB": [210, 53, 125],
     "hex": "#d2357d",
     "name": "玫瑰红",
     "pinyin": "meiguihong"
   },
   {
-    "CMYK": [
-      19,
-      27,
-      9,
-      0
-    ],
-    "RGB": [
-      209,
-      194,
-      211
-    ],
+    "CMYK": [19, 27, 9, 0],
+    "RGB": [209, 194, 211],
     "hex": "#d1c2d3",
     "name": "淡牵牛紫",
     "pinyin": "danqianniuzi"
   },
   {
-    "CMYK": [
-      21,
-      37,
-      12,
-      0
-    ],
-    "RGB": [
-      200,
-      173,
-      196
-    ],
+    "CMYK": [21, 37, 12, 0],
+    "RGB": [200, 173, 196],
     "hex": "#c8adc4",
     "name": "凤信紫",
     "pinyin": "fengxinzi"
   },
   {
-    "CMYK": [
-      23,
-      53,
-      14,
-      1
-    ],
-    "RGB": [
-      192,
-      142,
-      175
-    ],
+    "CMYK": [23, 53, 14, 1],
+    "RGB": [192, 142, 175],
     "hex": "#c08eaf",
     "name": "萝兰紫",
     "pinyin": "luolanzi"
   },
   {
-    "CMYK": [
-      18,
-      91,
-      18,
-      2
-    ],
-    "RGB": [
-      186,
-      47,
-      123
-    ],
+    "CMYK": [18, 91, 18, 2],
+    "RGB": [186, 47, 123],
     "hex": "#ba2f7b",
     "name": "玫瑰紫",
     "pinyin": "meiguizi"
   },
   {
-    "CMYK": [
-      58,
-      56,
-      17,
-      2
-    ],
-    "RGB": [
-      128,
-      118,
-      163
-    ],
+    "CMYK": [58, 56, 17, 2],
+    "RGB": [128, 118, 163],
     "hex": "#8076a3",
     "name": "藤萝紫",
     "pinyin": "tengluozi"
   },
   {
-    "CMYK": [
-      57,
-      62,
-      16,
-      2
-    ],
-    "RGB": [
-      128,
-      109,
-      158
-    ],
+    "CMYK": [57, 62, 16, 2],
+    "RGB": [128, 109, 158],
     "hex": "#806d9e",
     "name": "槿紫",
     "pinyin": "jinzi"
   },
   {
-    "CMYK": [
-      56,
-      72,
-      15,
-      1
-    ],
-    "RGB": [
-      129,
-      92,
-      148
-    ],
+    "CMYK": [56, 72, 15, 1],
+    "RGB": [129, 92, 148],
     "hex": "#815c94",
     "name": "蕈紫",
     "pinyin": "xunzi"
   },
   {
-    "CMYK": [
-      54,
-      89,
-      12,
-      1
-    ],
-    "RGB": [
-      129,
-      60,
-      133
-    ],
+    "CMYK": [54, 89, 12, 1],
+    "RGB": [129, 60, 133],
     "hex": "#813c85",
     "name": "桔梗紫",
     "pinyin": "jiegengzi"
   },
   {
-    "CMYK": [
-      52,
-      100,
-      17,
-      7
-    ],
-    "RGB": [
-      126,
-      22,
-      113
-    ],
+    "CMYK": [52, 100, 17, 7],
+    "RGB": [126, 22, 113],
     "hex": "#7e1671",
     "name": "魏紫",
     "pinyin": "weizi"
   },
   {
-    "CMYK": [
-      3,
-      26,
-      10,
-      0
-    ],
-    "RGB": [
-      233,
-      204,
-      211
-    ],
+    "CMYK": [3, 26, 10, 0],
+    "RGB": [233, 204, 211],
     "hex": "#e9ccd3",
     "name": "芝兰紫",
     "pinyin": "zhilanzi"
   },
   {
-    "CMYK": [
-      10,
-      67,
-      12,
-      0
-    ],
-    "RGB": [
-      210,
-      118,
-      163
-    ],
+    "CMYK": [10, 67, 12, 0],
+    "RGB": [210, 118, 163],
     "hex": "#d276a3",
     "name": "菱锰红",
     "pinyin": "lingmenghong"
   },
   {
-    "CMYK": [
-      11,
-      97,
-      10,
-      0
-    ],
-    "RGB": [
-      204,
-      85,
-      149
-    ],
+    "CMYK": [11, 97, 10, 0],
+    "RGB": [204, 85, 149],
     "hex": "#cc5595",
     "name": "龙须红",
     "pinyin": "longxuhong"
   },
   {
-    "CMYK": [
-      8,
-      22,
-      12,
-      0
-    ],
-    "RGB": [
-      230,
-      210,
-      213
-    ],
+    "CMYK": [8, 22, 12, 0],
+    "RGB": [230, 210, 213],
     "hex": "#e6d2d5",
     "name": "蓟粉红",
     "pinyin": "jifenhong"
   },
   {
-    "CMYK": [
-      16,
-      79,
-      14,
-      1
-    ],
-    "RGB": [
-      195,
-      86,
-      145
-    ],
+    "CMYK": [16, 79, 14, 1],
+    "RGB": [195, 86, 145],
     "hex": "#c35691",
     "name": "电气石红",
     "pinyin": "dianqishihong"
   },
   {
-    "CMYK": [
-      19,
-      68,
-      18,
-      1
-    ],
-    "RGB": [
-      192,
-      111,
-      152
-    ],
+    "CMYK": [19, 68, 18, 1],
+    "RGB": [192, 111, 152],
     "hex": "#c06f98",
     "name": "樱草紫",
     "pinyin": "yingcaozi"
   },
   {
-    "CMYK": [
-      25,
-      31,
-      26,
-      5
-    ],
-    "RGB": [
-      189,
-      174,
-      173
-    ],
+    "CMYK": [25, 31, 26, 5],
+    "RGB": [189, 174, 173],
     "hex": "#bdaead",
     "name": "芦穗灰",
     "pinyin": "lusuihui"
   },
   {
-    "CMYK": [
-      26,
-      43,
-      26,
-      6
-    ],
-    "RGB": [
-      181,
-      152,
-      161
-    ],
+    "CMYK": [26, 43, 26, 6],
+    "RGB": [181, 152, 161],
     "hex": "#b598a1",
     "name": "隐红灰",
     "pinyin": "yinhonghui"
   },
   {
-    "CMYK": [
-      27,
-      97,
-      27,
-      14
-    ],
-    "RGB": [
-      155,
-      30,
-      100
-    ],
+    "CMYK": [27, 97, 27, 14],
+    "RGB": [155, 30, 100],
     "hex": "#9b1e64",
     "name": "苋菜紫",
     "pinyin": "xiancaizi"
   },
   {
-    "CMYK": [
-      39,
-      53,
-      38,
-      25
-    ],
-    "RGB": [
-      133,
-      109,
-      114
-    ],
+    "CMYK": [39, 53, 38, 25],
+    "RGB": [133, 109, 114],
     "hex": "#856d72",
     "name": "芦灰",
     "pinyin": "luhui"
   },
   {
-    "CMYK": [
-      49,
-      71,
-      49,
-      58
-    ],
-    "RGB": [
-      79,
-      56,
-      62
-    ],
+    "CMYK": [49, 71, 49, 58],
+    "RGB": [79, 56, 62],
     "hex": "#4f383e",
     "name": "暮云灰",
     "pinyin": "muyunhui"
   },
   {
-    "CMYK": [
-      49,
-      82,
-      46,
-      63
-    ],
-    "RGB": [
-      72,
-      41,
-      54
-    ],
+    "CMYK": [49, 82, 46, 63],
+    "RGB": [72, 41, 54],
     "hex": "#482936",
     "name": "斑鸠灰",
     "pinyin": "banjiuhui"
   },
   {
-    "CMYK": [
-      4,
-      11,
-      9,
-      0
-    ],
-    "RGB": [
-      242,
-      231,
-      229
-    ],
+    "CMYK": [4, 11, 9, 0],
+    "RGB": [242, 231, 229],
     "hex": "#f2e7e5",
     "name": "淡藤萝紫",
     "pinyin": "dantengluozi"
   },
   {
-    "CMYK": [
-      10,
-      27,
-      11,
-      0
-    ],
-    "RGB": [
-      224,
-      200,
-      209
-    ],
+    "CMYK": [10, 27, 11, 0],
+    "RGB": [224, 200, 209],
     "hex": "#e0c8d1",
     "name": "淡青紫",
     "pinyin": "danqingzi"
   },
   {
-    "CMYK": [
-      24,
-      58,
-      15,
-      1
-    ],
-    "RGB": [
-      188,
-      132,
-      168
-    ],
+    "CMYK": [24, 58, 15, 1],
+    "RGB": [188, 132, 168],
     "hex": "#bc84a8",
     "name": "青蛤壳紫",
     "pinyin": "qinghakezi"
   },
   {
-    "CMYK": [
-      31,
-      71,
-      15,
-      1
-    ],
-    "RGB": [
-      173,
-      101,
-      152
-    ],
+    "CMYK": [31, 71, 15, 1],
+    "RGB": [173, 101, 152],
     "hex": "#ad6598",
     "name": "豆蔻紫",
     "pinyin": "doukouzi"
   },
   {
-    "CMYK": [
-      35,
-      75,
-      18,
-      2
-    ],
-    "RGB": [
-      163,
-      92,
-      143
-    ],
+    "CMYK": [35, 75, 18, 2],
+    "RGB": [163, 92, 143],
     "hex": "#a35c8f",
     "name": "扁豆紫",
     "pinyin": "biandouzi"
   },
   {
-    "CMYK": [
-      39,
-      91,
-      15,
-      3
-    ],
-    "RGB": [
-      152,
-      54,
-      128
-    ],
+    "CMYK": [39, 91, 15, 3],
+    "RGB": [152, 54, 128],
     "hex": "#983680",
     "name": "芥花紫",
     "pinyin": "jiehuazi"
   },
   {
-    "CMYK": [
-      43,
-      97,
-      19,
-      8
-    ],
-    "RGB": [
-      139,
-      38,
-      113
-    ],
+    "CMYK": [43, 97, 19, 8],
+    "RGB": [139, 38, 113],
     "hex": "#8b2671",
     "name": "青莲",
     "pinyin": "qinglian"
   },
   {
-    "CMYK": [
-      44,
-      85,
-      24,
-      10
-    ],
-    "RGB": [
-      137,
-      66,
-      118
-    ],
+    "CMYK": [44, 85, 24, 10],
+    "RGB": [137, 66, 118],
     "hex": "#894276",
     "name": "芓紫",
     "pinyin": "zizi"
   },
   {
-    "CMYK": [
-      45,
-      99,
-      24,
-      16
-    ],
-    "RGB": [
-      126,
-      32,
-      101
-    ],
+    "CMYK": [45, 99, 24, 16],
+    "RGB": [126, 32, 101],
     "hex": "#7e2065",
     "name": "葛巾紫",
     "pinyin": "gejinzi"
   },
   {
-    "CMYK": [
-      49,
-      100,
-      29,
-      32
-    ],
-    "RGB": [
-      104,
-      23,
-      82
-    ],
+    "CMYK": [49, 100, 29, 32],
+    "RGB": [104, 23, 82],
     "hex": "#681752",
     "name": "牵牛紫",
     "pinyin": "qianniuzi"
   },
   {
-    "CMYK": [
-      53,
-      75,
-      41,
-      41
-    ],
-    "RGB": [
-      93,
-      63,
-      81
-    ],
+    "CMYK": [53, 75, 41, 41],
+    "RGB": [93, 63, 81],
     "hex": "#5d3f51",
     "name": "紫灰",
     "pinyin": "zihui"
   },
   {
-    "CMYK": [
-      55,
-      87,
-      41,
-      52
-    ],
-    "RGB": [
-      78,
-      42,
-      64
-    ],
+    "CMYK": [55, 87, 41, 52],
+    "RGB": [78, 42, 64],
     "hex": "#4e2a40",
     "name": "龙睛鱼紫",
     "pinyin": "longjingyuzi"
   },
   {
-    "CMYK": [
-      58,
-      96,
-      40,
-      61
-    ],
-    "RGB": [
-      65,
-      28,
-      53
-    ],
+    "CMYK": [58, 96, 40, 61],
+    "RGB": [65, 28, 53],
     "hex": "#411c35",
     "name": "荸荠紫",
     "pinyin": "biqizi"
   },
   {
-    "CMYK": [
-      63,
-      74,
-      52,
-      70
-    ],
-    "RGB": [
-      54,
-      41,
-      47
-    ],
+    "CMYK": [63, 74, 52, 70],
+    "RGB": [54, 41, 47],
     "hex": "#36292f",
     "name": "古鼎灰",
     "pinyin": "gudinghui"
   },
   {
-    "CMYK": [
-      81,
-      87,
-      54,
-      84
-    ],
-    "RGB": [
-      30,
-      19,
-      29
-    ],
+    "CMYK": [81, 87, 54, 84],
+    "RGB": [30, 19, 29],
     "hex": "#1e131d",
     "name": "乌梅紫",
     "pinyin": "wumeizi"
   },
   {
-    "CMYK": [
-      83,
-      87,
-      55,
-      86
-    ],
-    "RGB": [
-      28,
-      13,
-      26
-    ],
+    "CMYK": [83, 87, 55, 86],
+    "RGB": [28, 13, 26],
     "hex": "#1c0d1a",
     "name": "深牵牛紫",
     "pinyin": "shenqianniuzi"
   },
   {
-    "CMYK": [
-      7,
-      5,
-      7,
-      0
-    ],
-    "RGB": [
-      241,
-      240,
-      237
-    ],
+    "CMYK": [7, 5, 7, 0],
+    "RGB": [241, 240, 237],
     "hex": "#f1f0ed",
     "name": "银白",
     "pinyin": "yinbai"
   },
   {
-    "CMYK": [
-      13,
-      10,
-      9,
-      0
-    ],
-    "RGB": [
-      226,
-      225,
-      228
-    ],
+    "CMYK": [13, 10, 9, 0],
+    "RGB": [226, 225, 228],
     "hex": "#e2e1e4",
     "name": "芡食白",
     "pinyin": "qianshibai"
   },
   {
-    "CMYK": [
-      23,
-      18,
-      12,
-      1
-    ],
-    "RGB": [
-      204,
-      204,
-      214
-    ],
+    "CMYK": [23, 18, 12, 1],
+    "RGB": [204, 204, 214],
     "hex": "#ccccd6",
     "name": "远山紫",
     "pinyin": "yuanshanzi"
   },
   {
-    "CMYK": [
-      39,
-      31,
-      17,
-      2
-    ],
-    "RGB": [
-      167,
-      168,
-      189
-    ],
+    "CMYK": [39, 31, 17, 2],
+    "RGB": [167, 168, 189],
     "hex": "#a7a8bd",
     "name": "淡蓝紫",
     "pinyin": "danlanzi"
   },
   {
-    "CMYK": [
-      74,
-      64,
-      14,
-      1
-    ],
-    "RGB": [
-      97,
-      100,
-      159
-    ],
+    "CMYK": [74, 64, 14, 1],
+    "RGB": [97, 100, 159],
     "hex": "#61649f",
     "name": "山梗紫",
     "pinyin": "shangengzi"
   },
   {
-    "CMYK": [
-      63,
-      53,
-      22,
-      5
-    ],
-    "RGB": [
-      116,
-      117,
-      155
-    ],
+    "CMYK": [63, 53, 22, 5],
+    "RGB": [116, 117, 155],
     "hex": "#74759b",
     "name": "螺甸紫",
     "pinyin": "luodianzi"
   },
   {
-    "CMYK": [
-      21,
-      17,
-      19,
-      1
-    ],
-    "RGB": [
-      207,
-      204,
-      201
-    ],
+    "CMYK": [21, 17, 19, 1],
+    "RGB": [207, 204, 201],
     "hex": "#cfccc9",
     "name": "玛瑙灰",
     "pinyin": "manaohui"
   },
   {
-    "CMYK": [
-      80,
-      73,
-      21,
-      6
-    ],
-    "RGB": [
-      82,
-      82,
-      136
-    ],
+    "CMYK": [80, 73, 21, 6],
+    "RGB": [82, 82, 136],
     "hex": "#525288",
     "name": "野菊紫",
     "pinyin": "yejuzi"
   },
   {
-    "CMYK": [
-      100,
-      93,
-      21,
-      5
-    ],
-    "RGB": [
-      46,
-      49,
-      124
-    ],
+    "CMYK": [100, 93, 21, 5],
+    "RGB": [46, 49, 124],
     "hex": "#2e317c",
     "name": "满天星紫",
     "pinyin": "mantianxingzi"
   },
   {
-    "CMYK": [
-      48,
-      45,
-      40,
-      26
-    ],
-    "RGB": [
-      122,
-      115,
-      116
-    ],
+    "CMYK": [48, 45, 40, 26],
+    "RGB": [122, 115, 116],
     "hex": "#7a7374",
     "name": "锌灰",
     "pinyin": "xinhui"
   },
   {
-    "CMYK": [
-      91,
-      84,
-      40,
-      43
-    ],
-    "RGB": [
-      48,
-      47,
-      75
-    ],
+    "CMYK": [91, 84, 40, 43],
+    "RGB": [48, 47, 75],
     "hex": "#302f4b",
     "name": "野葡萄紫",
     "pinyin": "yeputaozi"
   },
   {
-    "CMYK": [
-      70,
-      69,
-      49,
-      56
-    ],
-    "RGB": [
-      62,
-      56,
-      65
-    ],
+    "CMYK": [70, 69, 49, 56],
+    "RGB": [62, 56, 65],
     "hex": "#3e3841",
     "name": "剑锋紫",
     "pinyin": "jianfengzi"
   },
   {
-    "CMYK": [
-      79,
-      74,
-      49,
-      60
-    ],
-    "RGB": [
-      50,
-      47,
-      59
-    ],
+    "CMYK": [79, 74, 49, 60],
+    "RGB": [50, 47, 59],
     "hex": "#322f3b",
     "name": "龙葵紫",
     "pinyin": "longkuizi"
   },
   {
-    "CMYK": [
-      90,
-      84,
-      50,
-      69
-    ],
-    "RGB": [
-      34,
-      32,
-      46
-    ],
+    "CMYK": [90, 84, 50, 69],
+    "RGB": [34, 32, 46],
     "hex": "#22202e",
     "name": "暗龙胆紫",
     "pinyin": "anlongdanzi"
   },
   {
-    "CMYK": [
-      98,
-      93,
-      48,
-      73
-    ],
-    "RGB": [
-      31,
-      32,
-      64
-    ],
+    "CMYK": [98, 93, 48, 73],
+    "RGB": [31, 32, 64],
     "hex": "#1f2040",
     "name": "晶石紫",
     "pinyin": "jingshizi"
   },
   {
-    "CMYK": [
-      100,
-      94,
-      52,
-      77
-    ],
-    "RGB": [
-      19,
-      17,
-      36
-    ],
+    "CMYK": [100, 94, 52, 77],
+    "RGB": [19, 17, 36],
     "hex": "#131124",
     "name": "暗蓝紫",
     "pinyin": "anlanzi"
   },
   {
-    "CMYK": [
-      95,
-      46,
-      10,
-      1
-    ],
-    "RGB": [
-      39,
-      117,
-      182
-    ],
+    "CMYK": [95, 46, 10, 1],
+    "RGB": [39, 117, 182],
     "hex": "#2775b6",
     "name": "景泰蓝",
     "pinyin": "jingtailan"
   },
   {
-    "CMYK": [
-      96,
-      47,
-      11,
-      1
-    ],
-    "RGB": [
-      36,
-      116,
-      181
-    ],
+    "CMYK": [96, 47, 11, 1],
+    "RGB": [36, 116, 181],
     "hex": "#2474b5",
     "name": "尼罗蓝",
     "pinyin": "niluolan"
   },
   {
-    "CMYK": [
-      25,
-      6,
-      10,
-      0
-    ],
-    "RGB": [
-      208,
-      223,
-      230
-    ],
+    "CMYK": [25, 6, 10, 0],
+    "RGB": [208, 223, 230],
     "hex": "#d0dfe6",
     "name": "远天蓝",
     "pinyin": "yuantianlan"
   },
   {
-    "CMYK": [
-      53,
-      19,
-      15,
-      1
-    ],
-    "RGB": [
-      147,
-      181,
-      207
-    ],
+    "CMYK": [53, 19, 15, 1],
+    "RGB": [147, 181, 207],
     "hex": "#93b5cf",
     "name": "星蓝",
     "pinyin": "xinglan"
   },
   {
-    "CMYK": [
-      74,
-      27,
-      16,
-      2
-    ],
-    "RGB": [
-      97,
-      154,
-      195
-    ],
+    "CMYK": [74, 27, 16, 2],
+    "RGB": [97, 154, 195],
     "hex": "#619ac3",
     "name": "羽扇豆蓝",
     "pinyin": "yushandoulan"
   },
   {
-    "CMYK": [
-      95,
-      45,
-      10,
-      1
-    ],
-    "RGB": [
-      35,
-      118,
-      183
-    ],
+    "CMYK": [95, 45, 10, 1],
+    "RGB": [35, 118, 183],
     "hex": "#2376b7",
     "name": "花青",
     "pinyin": "huaqing"
   },
   {
-    "CMYK": [
-      78,
-      27,
-      17,
-      2
-    ],
-    "RGB": [
-      86,
-      152,
-      195
-    ],
+    "CMYK": [78, 27, 17, 2],
+    "RGB": [86, 152, 195],
     "hex": "#5698c3",
     "name": "睛蓝",
     "pinyin": "jinglan"
   },
   {
-    "CMYK": [
-      99,
-      44,
-      10,
-      1
-    ],
-    "RGB": [
-      33,
-      119,
-      184
-    ],
+    "CMYK": [99, 44, 10, 1],
+    "RGB": [33, 119, 184],
     "hex": "#2177b8",
     "name": "虹蓝",
     "pinyin": "honglan"
   },
   {
-    "CMYK": [
-      43,
-      4,
-      16,
-      0
-    ],
-    "RGB": [
-      176,
-      213,
-      223
-    ],
+    "CMYK": [43, 4, 16, 0],
+    "RGB": [176, 213, 223],
     "hex": "#b0d5df",
     "name": "湖水蓝",
     "pinyin": "hushuilan"
   },
   {
-    "CMYK": [
-      59,
-      12,
-      19,
-      0
-    ],
-    "RGB": [
-      138,
-      188,
-      209
-    ],
+    "CMYK": [59, 12, 19, 0],
+    "RGB": [138, 188, 209],
     "hex": "#8abcd1",
     "name": "秋波蓝",
     "pinyin": "qiubolan"
   },
   {
-    "CMYK": [
-      73,
-      17,
-      20,
-      1
-    ],
-    "RGB": [
-      102,
-      169,
-      201
-    ],
+    "CMYK": [73, 17, 20, 1],
+    "RGB": [102, 169, 201],
     "hex": "#66a9c9",
     "name": "涧石蓝",
     "pinyin": "jianshilan"
   },
   {
-    "CMYK": [
-      93,
-      36,
-      15,
-      2
-    ],
-    "RGB": [
-      41,
-      131,
-      187
-    ],
+    "CMYK": [93, 36, 15, 2],
+    "RGB": [41, 131, 187],
     "hex": "#2983bb",
     "name": "潮蓝",
     "pinyin": "chaolan"
   },
   {
-    "CMYK": [
-      99,
-      48,
-      11,
-      1
-    ],
-    "RGB": [
-      23,
-      114,
-      180
-    ],
+    "CMYK": [99, 48, 11, 1],
+    "RGB": [23, 114, 180],
     "hex": "#1772b4",
     "name": "群青",
     "pinyin": "qunqing"
   },
   {
-    "CMYK": [
-      74,
-      2,
-      24,
-      0
-    ],
-    "RGB": [
-      99,
-      187,
-      208
-    ],
+    "CMYK": [74, 2, 24, 0],
+    "RGB": [99, 187, 208],
     "hex": "#63bbd0",
     "name": "霁青",
     "pinyin": "jiqing"
   },
   {
-    "CMYK": [
-      77,
-      7,
-      24,
-      0
-    ],
-    "RGB": [
-      92,
-      179,
-      204
-    ],
+    "CMYK": [77, 7, 24, 0],
+    "RGB": [92, 179, 204],
     "hex": "#5cb3cc",
     "name": "碧青",
     "pinyin": "biqing"
   },
   {
-    "CMYK": [
-      94,
-      32,
-      17,
-      3
-    ],
-    "RGB": [
-      36,
-      134,
-      185
-    ],
+    "CMYK": [94, 32, 17, 3],
+    "RGB": [36, 134, 185],
     "hex": "#2486b9",
     "name": "宝石蓝",
     "pinyin": "baoshilan"
   },
   {
-    "CMYK": [
-      98,
-      43,
-      14,
-      2
-    ],
-    "RGB": [
-      22,
-      119,
-      179
-    ],
+    "CMYK": [98, 43, 14, 2],
+    "RGB": [22, 119, 179],
     "hex": "#1677b3",
     "name": "天蓝",
     "pinyin": "tianlan"
   },
   {
-    "CMYK": [
-      100,
-      52,
-      11,
-      1
-    ],
-    "RGB": [
-      18,
-      107,
-      174
-    ],
+    "CMYK": [100, 52, 11, 1],
+    "RGB": [18, 107, 174],
     "hex": "#126bae",
     "name": "柏林蓝",
     "pinyin": "bolinlan"
   },
   {
-    "CMYK": [
-      92,
-      10,
-      25,
-      1
-    ],
-    "RGB": [
-      34,
-      162,
-      195
-    ],
+    "CMYK": [92, 10, 25, 1],
+    "RGB": [34, 162, 195],
     "hex": "#22a2c3",
     "name": "海青",
     "pinyin": "haiqing"
   },
   {
-    "CMYK": [
-      94,
-      16,
-      23,
-      3
-    ],
-    "RGB": [
-      26,
-      148,
-      188
-    ],
+    "CMYK": [94, 16, 23, 3],
+    "RGB": [26, 148, 188],
     "hex": "#1a94bc",
     "name": "钴蓝",
     "pinyin": "gulan"
   },
   {
-    "CMYK": [
-      95,
-      25,
-      20,
-      4
-    ],
-    "RGB": [
-      21,
-      139,
-      184
-    ],
+    "CMYK": [95, 25, 20, 4],
+    "RGB": [21, 139, 184],
     "hex": "#158bb8",
     "name": "鸢尾蓝",
     "pinyin": "yuanweilan"
   },
   {
-    "CMYK": [
-      98,
-      42,
-      16,
-      3
-    ],
-    "RGB": [
-      17,
-      119,
-      176
-    ],
+    "CMYK": [98, 42, 16, 3],
+    "RGB": [17, 119, 176],
     "hex": "#1177b0",
     "name": "牵牛花蓝",
     "pinyin": "qianniuhualan"
   },
   {
-    "CMYK": [
-      100,
-      65,
-      11,
-      1
-    ],
-    "RGB": [
-      15,
-      89,
-      164
-    ],
+    "CMYK": [100, 65, 11, 1],
+    "RGB": [15, 89, 164],
     "hex": "#0f59a4",
     "name": "飞燕草蓝",
     "pinyin": "feiyancaolan"
   },
   {
-    "CMYK": [
-      95,
-      47,
-      14,
-      2
-    ],
-    "RGB": [
-      43,
-      115,
-      175
-    ],
+    "CMYK": [95, 47, 14, 2],
+    "RGB": [43, 115, 175],
     "hex": "#2b73af",
     "name": "品蓝",
     "pinyin": "pinlan"
   },
   {
-    "CMYK": [
-      24,
-      14,
-      16,
-      1
-    ],
-    "RGB": [
-      205,
-      209,
-      211
-    ],
+    "CMYK": [24, 14, 16, 1],
+    "RGB": [205, 209, 211],
     "hex": "#cdd1d3",
     "name": "银鱼白",
     "pinyin": "yinyubai"
   },
   {
-    "CMYK": [
-      93,
-      49,
-      17,
-      3
-    ],
-    "RGB": [
-      49,
-      112,
-      167
-    ],
+    "CMYK": [93, 49, 17, 3],
+    "RGB": [49, 112, 167],
     "hex": "#3170a7",
     "name": "安安蓝",
     "pinyin": "ananlan"
   },
   {
-    "CMYK": [
-      64,
-      52,
-      39,
-      28
-    ],
-    "RGB": [
-      94,
-      97,
-      109
-    ],
+    "CMYK": [64, 52, 39, 28],
+    "RGB": [94, 97, 109],
     "hex": "#5e616d",
     "name": "鱼尾灰",
     "pinyin": "yuweihui"
   },
   {
-    "CMYK": [
-      78,
-      60,
-      40,
-      31
-    ],
-    "RGB": [
-      71,
-      81,
-      100
-    ],
+    "CMYK": [78, 60, 40, 31],
+    "RGB": [71, 81, 100],
     "hex": "#475164",
     "name": "鲸鱼灰",
     "pinyin": "jingyuhui"
   },
   {
-    "CMYK": [
-      69,
-      64,
-      52,
-      59
-    ],
-    "RGB": [
-      255,
-      254,
-      250
-    ],
+    "CMYK": [69, 64, 52, 59],
+    "RGB": [255, 254, 250],
     "hex": "#fffefa",
     "name": "海参灰",
     "pinyin": "haishenhui"
   },
   {
-    "CMYK": [
-      76,
-      70,
-      51,
-      60
-    ],
-    "RGB": [
-      53,
-      51,
-      60
-    ],
+    "CMYK": [76, 70, 51, 60],
+    "RGB": [53, 51, 60],
     "hex": "#35333c",
     "name": "沙鱼灰",
     "pinyin": "shayuhui"
   },
   {
-    "CMYK": [
-      100,
-      89,
-      54,
-      79
-    ],
-    "RGB": [
-      15,
-      20,
-      35
-    ],
+    "CMYK": [100, 89, 54, 79],
+    "RGB": [15, 20, 35],
     "hex": "#0f1423",
     "name": "钢蓝",
     "pinyin": "ganglan"
   },
   {
-    "CMYK": [
-      35,
-      13,
-      13,
-      0
-    ],
-    "RGB": [
-      186,
-      204,
-      217
-    ],
+    "CMYK": [35, 13, 13, 0],
+    "RGB": [186, 204, 217],
     "hex": "#baccd9",
     "name": "云水蓝",
     "pinyin": "yunshuilan"
   },
   {
-    "CMYK": [
-      55,
-      20,
-      18,
-      1
-    ],
-    "RGB": [
-      143,
-      178,
-      201
-    ],
+    "CMYK": [55, 20, 18, 1],
+    "RGB": [143, 178, 201],
     "hex": "#8fb2c9",
     "name": "晴山蓝",
     "pinyin": "qingshanlan"
   },
   {
-    "CMYK": [
-      100,
-      60,
-      8,
-      1
-    ],
-    "RGB": [
-      22,
-      97,
-      171
-    ],
+    "CMYK": [100, 60, 8, 1],
+    "RGB": [22, 97, 171],
     "hex": "#1661ab",
     "name": "靛青",
     "pinyin": "dianqing"
   },
   {
-    "CMYK": [
-      29,
-      16,
-      17,
-      1
-    ],
-    "RGB": [
-      196,
-      203,
-      207
-    ],
+    "CMYK": [29, 16, 17, 1],
+    "RGB": [196, 203, 207],
     "hex": "#c4cbcf",
     "name": "大理石灰",
     "pinyin": "dalishihui"
   },
   {
-    "CMYK": [
-      100,
-      67,
-      16,
-      3
-    ],
-    "RGB": [
-      21,
-      85,
-      154
-    ],
+    "CMYK": [100, 67, 16, 3],
+    "RGB": [21, 85, 154],
     "hex": "#15559a",
     "name": "海涛蓝",
     "pinyin": "haitaolan"
   },
   {
-    "CMYK": [
-      81,
-      41,
-      24,
-      8
-    ],
-    "RGB": [
-      78,
-      124,
-      161
-    ],
+    "CMYK": [81, 41, 24, 8],
+    "RGB": [78, 124, 161],
     "hex": "#4e7ca1",
     "name": "蝶翅蓝",
     "pinyin": "diechilan"
   },
   {
-    "CMYK": [
-      93,
-      50,
-      21,
-      6
-    ],
-    "RGB": [
-      52,
-      108,
-      156
-    ],
+    "CMYK": [93, 50, 21, 6],
+    "RGB": [52, 108, 156],
     "hex": "#346c9c",
     "name": "海军蓝",
     "pinyin": "haijunlan"
   },
   {
-    "CMYK": [
-      77,
-      68,
-      54,
-      66
-    ],
-    "RGB": [
-      47,
-      47,
-      53
-    ],
+    "CMYK": [77, 68, 54, 66],
+    "RGB": [47, 47, 53],
     "hex": "#2f2f35",
     "name": "水牛灰",
     "pinyin": "shuiniuhui"
   },
   {
-    "CMYK": [
-      80,
-      70,
-      53,
-      65
-    ],
-    "RGB": [
-      45,
-      46,
-      54
-    ],
+    "CMYK": [80, 70, 53, 65],
+    "RGB": [45, 46, 54],
     "hex": "#2d2e36",
     "name": "牛角灰",
     "pinyin": "niujiaohui"
   },
   {
-    "CMYK": [
-      100,
-      86,
-      54,
-      78
-    ],
-    "RGB": [
-      19,
-      24,
-      36
-    ],
+    "CMYK": [100, 86, 54, 78],
+    "RGB": [19, 24, 36],
     "hex": "#131824",
     "name": "燕颔蓝",
     "pinyin": "yanhanlan"
   },
   {
-    "CMYK": [
-      21,
-      6,
-      10,
-      0
-    ],
-    "RGB": [
-      216,
-      227,
-      231
-    ],
+    "CMYK": [21, 6, 10, 0],
+    "RGB": [216, 227, 231],
     "hex": "#d8e3e7",
     "name": "云峰白",
     "pinyin": "yunfengbai"
   },
   {
-    "CMYK": [
-      32,
-      8,
-      13,
-      0
-    ],
-    "RGB": [
-      195,
-      215,
-      223
-    ],
+    "CMYK": [32, 8, 13, 0],
+    "RGB": [195, 215, 223],
     "hex": "#c3d7df",
     "name": "井天蓝",
     "pinyin": "jingtianlan"
   },
   {
-    "CMYK": [
-      91,
-      24,
-      22,
-      4
-    ],
-    "RGB": [
-      47,
-      144,
-      185
-    ],
+    "CMYK": [91, 24, 22, 4],
+    "RGB": [47, 144, 185],
     "hex": "#2f90b9",
     "name": "云山蓝",
     "pinyin": "yunshanlan"
   },
   {
-    "CMYK": [
-      96,
-      34,
-      18,
-      4
-    ],
-    "RGB": [
-      23,
-      129,
-      181
-    ],
+    "CMYK": [96, 34, 18, 4],
+    "RGB": [23, 129, 181],
     "hex": "#1781b5",
     "name": "釉蓝",
     "pinyin": "youlan"
   },
   {
-    "CMYK": [
-      28,
-      12,
-      17,
-      0
-    ],
-    "RGB": [
-      199,
-      210,
-      212
-    ],
+    "CMYK": [28, 12, 17, 0],
+    "RGB": [199, 210, 212],
     "hex": "#c7d2d4",
     "name": "鸥蓝",
     "pinyin": "oulan"
   },
   {
-    "CMYK": [
-      100,
-      53,
-      21,
-      6
-    ],
-    "RGB": [
-      17,
-      101,
-      154
-    ],
+    "CMYK": [100, 53, 21, 6],
+    "RGB": [17, 101, 154],
     "hex": "#11659a",
     "name": "搪磁蓝",
     "pinyin": "tangcilan"
   },
   {
-    "CMYK": [
-      29,
-      18,
-      21,
-      2
-    ],
-    "RGB": [
-      192,
-      196,
-      195
-    ],
+    "CMYK": [29, 18, 21, 2],
+    "RGB": [192, 196, 195],
     "hex": "#c0c4c3",
     "name": "月影白",
     "pinyin": "yueyingbai"
   },
   {
-    "CMYK": [
-      36,
-      20,
-      23,
-      2
-    ],
-    "RGB": [
-      178,
-      187,
-      190
-    ],
+    "CMYK": [36, 20, 23, 2],
+    "RGB": [178, 187, 190],
     "hex": "#b2bbbe",
     "name": "星灰",
     "pinyin": "xinghui"
   },
   {
-    "CMYK": [
-      70,
-      38,
-      36,
-      18
-    ],
-    "RGB": [
-      94,
-      121,
-      135
-    ],
+    "CMYK": [70, 38, 36, 18],
+    "RGB": [94, 121, 135],
     "hex": "#5e7987",
     "name": "淡蓝灰",
     "pinyin": "danlanhui"
   },
   {
-    "CMYK": [
-      100,
-      68,
-      32,
-      20
-    ],
-    "RGB": [
-      20,
-      74,
-      116
-    ],
+    "CMYK": [100, 68, 32, 20],
+    "RGB": [20, 74, 116],
     "hex": "#144a74",
     "name": "鷃蓝",
     "pinyin": "yanlan"
   },
   {
-    "CMYK": [
-      55,
-      40,
-      40,
-      23
-    ],
-    "RGB": [
-      116,
-      120,
-      122
-    ],
+    "CMYK": [55, 40, 40, 23],
+    "RGB": [116, 120, 122],
     "hex": "#74787a",
     "name": "嫩灰",
     "pinyin": "nenhui"
   },
   {
-    "CMYK": [
-      77,
-      50,
-      41,
-      31
-    ],
-    "RGB": [
-      73,
-      92,
-      105
-    ],
+    "CMYK": [77, 50, 41, 31],
+    "RGB": [73, 92, 105],
     "hex": "#495c69",
     "name": "战舰灰",
     "pinyin": "zhanjianhui"
   },
   {
-    "CMYK": [
-      67,
-      57,
-      49,
-      49
-    ],
-    "RGB": [
-      71,
-      72,
-      76
-    ],
+    "CMYK": [67, 57, 49, 49],
+    "RGB": [71, 72, 76],
     "hex": "#47484c",
     "name": "瓦罐灰",
     "pinyin": "waguanhui"
   },
   {
-    "CMYK": [
-      87,
-      69,
-      51,
-      58
-    ],
-    "RGB": [
-      43,
-      51,
-      62
-    ],
+    "CMYK": [87, 69, 51, 58],
+    "RGB": [43, 51, 62],
     "hex": "#2b333e",
     "name": "青灰",
     "pinyin": "qinghui"
   },
   {
-    "CMYK": [
-      100,
-      77,
-      50,
-      62
-    ],
-    "RGB": [
-      28,
-      41,
-      56
-    ],
+    "CMYK": [100, 77, 50, 62],
+    "RGB": [28, 41, 56],
     "hex": "#1c2938",
     "name": "鸽蓝",
     "pinyin": "gelan"
   },
   {
-    "CMYK": [
-      100,
-      82,
-      51,
-      64
-    ],
-    "RGB": [
-      20,
-      35,
-      52
-    ],
+    "CMYK": [100, 82, 51, 64],
+    "RGB": [20, 35, 52],
     "hex": "#142334",
     "name": "钢青",
     "pinyin": "gangqing"
   },
   {
-    "CMYK": [
-      100,
-      84,
-      51,
-      68
-    ],
-    "RGB": [
-      16,
-      31,
-      48
-    ],
+    "CMYK": [100, 84, 51, 68],
+    "RGB": [16, 31, 48],
     "hex": "#101f30",
     "name": "暗蓝",
     "pinyin": "anlan"
   },
   {
-    "CMYK": [
-      11,
-      0,
-      8,
-      0
-    ],
-    "RGB": [
-      238,
-      247,
-      242
-    ],
+    "CMYK": [11, 0, 8, 0],
+    "RGB": [238, 247, 242],
     "hex": "#eef7f2",
     "name": "月白",
     "pinyin": "yuebai"
   },
   {
-    "CMYK": [
-      33,
-      0,
-      14,
-      0
-    ],
-    "RGB": [
-      198,
-      230,
-      232
-    ],
+    "CMYK": [33, 0, 14, 0],
+    "RGB": [198, 230, 232],
     "hex": "#c6e6e8",
     "name": "海天蓝",
     "pinyin": "haitianlan"
   },
   {
-    "CMYK": [
-      57,
-      0,
-      22,
-      0
-    ],
-    "RGB": [
-      147,
-      213,
-      220
-    ],
+    "CMYK": [57, 0, 22, 0],
+    "RGB": [147, 213, 220],
     "hex": "#93d5dc",
     "name": "清水蓝",
     "pinyin": "qingshuilan"
   },
   {
-    "CMYK": [
-      79,
-      0,
-      27,
-      0
-    ],
-    "RGB": [
-      81,
-      196,
-      211
-    ],
+    "CMYK": [79, 0, 27, 0],
+    "RGB": [81, 196, 211],
     "hex": "#51c4d3",
     "name": "瀑布蓝",
     "pinyin": "pubulan"
   },
   {
-    "CMYK": [
-      89,
-      0,
-      29,
-      0
-    ],
-    "RGB": [
-      41,
-      183,
-      203
-    ],
+    "CMYK": [89, 0, 29, 0],
+    "RGB": [41, 183, 203],
     "hex": "#29b7cb",
     "name": "蔚蓝",
     "pinyin": "weilan"
   },
   {
-    "CMYK": [
-      92,
-      0,
-      28,
-      0
-    ],
-    "RGB": [
-      14,
-      176,
-      201
-    ],
+    "CMYK": [92, 0, 28, 0],
+    "RGB": [14, 176, 201],
     "hex": "#0eb0c9",
     "name": "孔雀蓝",
     "pinyin": "kongquelan"
   },
   {
-    "CMYK": [
-      93,
-      0,
-      31,
-      0
-    ],
-    "RGB": [
-      16,
-      174,
-      194
-    ],
+    "CMYK": [93, 0, 31, 0],
+    "RGB": [16, 174, 194],
     "hex": "#10aec2",
     "name": "甸子蓝",
     "pinyin": "dianzilan"
   },
   {
-    "CMYK": [
-      78,
-      36,
-      0,
-      0
-    ],
-    "RGB": [
-      87,
-      195,
-      194
-    ],
+    "CMYK": [78, 36, 0, 0],
+    "RGB": [87, 195, 194],
     "hex": "#57c3c2",
     "name": "石绿",
     "pinyin": "shilv"
   },
   {
-    "CMYK": [
-      40,
-      0,
-      30,
-      0
-    ],
-    "RGB": [
-      185,
-      222,
-      201
-    ],
+    "CMYK": [40, 0, 30, 0],
+    "RGB": [185, 222, 201],
     "hex": "#b9dec9",
     "name": "竹篁绿",
     "pinyin": "zhuhuanglv"
   },
   {
-    "CMYK": [
-      64,
-      0,
-      46,
-      0
-    ],
-    "RGB": [
-      131,
-      203,
-      172
-    ],
+    "CMYK": [64, 0, 46, 0],
+    "RGB": [131, 203, 172],
     "hex": "#83cbac",
     "name": "粉绿",
     "pinyin": "fenlv"
   },
   {
-    "CMYK": [
-      95,
-      0,
-      52,
-      0
-    ],
-    "RGB": [
-      18,
-      170,
-      156
-    ],
+    "CMYK": [95, 0, 52, 0],
+    "RGB": [18, 170, 156],
     "hex": "#12aa9c",
     "name": "美蝶绿",
     "pinyin": "meidielv"
   },
   {
-    "CMYK": [
-      75,
-      0,
-      61,
-      0
-    ],
-    "RGB": [
-      102,
-      193,
-      140
-    ],
+    "CMYK": [75, 0, 61, 0],
+    "RGB": [102, 193, 140],
     "hex": "#66c18c",
     "name": "毛绿",
     "pinyin": "maolv"
   },
   {
-    "CMYK": [
-      78,
-      0,
-      62,
-      0
-    ],
-    "RGB": [
-      93,
-      190,
-      138
-    ],
+    "CMYK": [78, 0, 62, 0],
+    "RGB": [93, 190, 138],
     "hex": "#5dbe8a",
     "name": "蔻梢绿",
     "pinyin": "koushaolv"
   },
   {
-    "CMYK": [
-      81,
-      0,
-      62,
-      0
-    ],
-    "RGB": [
-      85,
-      187,
-      138
-    ],
+    "CMYK": [81, 0, 62, 0],
+    "RGB": [85, 187, 138],
     "hex": "#55bb8a",
     "name": "麦苗绿",
     "pinyin": "maimiaolv"
   },
   {
-    "CMYK": [
-      86,
-      0,
-      63,
-      0
-    ],
-    "RGB": [
-      69,
-      183,
-      135
-    ],
+    "CMYK": [86, 0, 63, 0],
+    "RGB": [69, 183, 135],
     "hex": "#45b787",
     "name": "蛙绿",
     "pinyin": "walv"
   },
   {
-    "CMYK": [
-      92,
-      0,
-      64,
-      0
-    ],
-    "RGB": [
-      43,
-      174,
-      133
-    ],
+    "CMYK": [92, 0, 64, 0],
+    "RGB": [43, 174, 133],
     "hex": "#2bae85",
     "name": "铜绿",
     "pinyin": "tonglv"
   },
   {
-    "CMYK": [
-      96,
-      0,
-      64,
-      0
-    ],
-    "RGB": [
-      27,
-      167,
-      132
-    ],
+    "CMYK": [96, 0, 64, 0],
+    "RGB": [27, 167, 132],
     "hex": "#1ba784",
     "name": "竹绿",
     "pinyin": "zhulv"
   },
   {
-    "CMYK": [
-      98,
-      2,
-      64,
-      0
-    ],
-    "RGB": [
-      18,
-      161,
-      130
-    ],
+    "CMYK": [98, 2, 64, 0],
+    "RGB": [18, 161, 130],
     "hex": "#12a182",
     "name": "蓝绿",
     "pinyin": "lanlv"
   },
   {
-    "CMYK": [
-      32,
-      7,
-      18,
-      0
-    ],
-    "RGB": [
-      196,
-      215,
-      214
-    ],
+    "CMYK": [32, 7, 18, 0],
+    "RGB": [196, 215, 214],
     "hex": "#c4d7d6",
     "name": "穹灰",
     "pinyin": "qionghui"
   },
   {
-    "CMYK": [
-      94,
-      11,
-      33,
-      1
-    ],
-    "RGB": [
-      30,
-      158,
-      179
-    ],
+    "CMYK": [94, 11, 33, 1],
+    "RGB": [30, 158, 179],
     "hex": "#1e9eb3",
     "name": "翠蓝",
     "pinyin": "cuilan"
   },
   {
-    "CMYK": [
-      96,
-      16,
-      31,
-      3
-    ],
-    "RGB": [
-      15,
-      149,
-      176
-    ],
+    "CMYK": [96, 16, 31, 3],
+    "RGB": [15, 149, 176],
     "hex": "#0f95b0",
     "name": "胆矾蓝",
     "pinyin": "danfanlan"
   },
   {
-    "CMYK": [
-      96,
-      18,
-      34,
-      4
-    ],
-    "RGB": [
-      20,
-      145,
-      168
-    ],
+    "CMYK": [96, 18, 34, 4],
+    "RGB": [20, 145, 168],
     "hex": "#1491a8",
     "name": "樫鸟蓝",
     "pinyin": "jianniaolan"
   },
   {
-    "CMYK": [
-      64,
-      18,
-      32,
-      2
-    ],
-    "RGB": [
-      124,
-      171,
-      177
-    ],
+    "CMYK": [64, 18, 32, 2],
+    "RGB": [124, 171, 177],
     "hex": "#7cabb1",
     "name": "闪蓝",
     "pinyin": "shanlan"
   },
   {
-    "CMYK": [
-      40,
-      24,
-      32,
-      6
-    ],
-    "RGB": [
-      164,
-      172,
-      167
-    ],
+    "CMYK": [40, 24, 32, 6],
+    "RGB": [164, 172, 167],
     "hex": "#a4aca7",
     "name": "冰山蓝",
     "pinyin": "bingshanlan"
   },
   {
-    "CMYK": [
-      56,
-      26,
-      36,
-      7
-    ],
-    "RGB": [
-      134,
-      157,
-      157
-    ],
+    "CMYK": [56, 26, 36, 7],
+    "RGB": [134, 157, 157],
     "hex": "#869d9d",
     "name": "虾壳青",
     "pinyin": "xiakeqing"
   },
   {
-    "CMYK": [
-      71,
-      28,
-      39,
-      10
-    ],
-    "RGB": [
-      100,
-      142,
-      147
-    ],
+    "CMYK": [71, 28, 39, 10],
+    "RGB": [100, 142, 147],
     "hex": "#648e93",
     "name": "晚波蓝",
     "pinyin": "wanbolan"
   },
   {
-    "CMYK": [
-      89,
-      27,
-      41,
-      13
-    ],
-    "RGB": [
-      59,
-      129,
-      140
-    ],
+    "CMYK": [89, 27, 41, 13],
+    "RGB": [59, 129, 140],
     "hex": "#3b818c",
     "name": "蜻蜓蓝",
     "pinyin": "qingtinglan"
   },
   {
-    "CMYK": [
-      99,
-      33,
-      38,
-      21
-    ],
-    "RGB": [
-      18,
-      110,
-      130
-    ],
+    "CMYK": [99, 33, 38, 21],
+    "RGB": [18, 110, 130],
     "hex": "#126e82",
     "name": "玉鈫蓝",
     "pinyin": "yuqinlan"
   },
   {
-    "CMYK": [
-      57,
-      37,
-      42,
-      21
-    ],
-    "RGB": [
-      115,
-      124,
-      123
-    ],
+    "CMYK": [57, 37, 42, 21],
+    "RGB": [115, 124, 123],
     "hex": "#737c7b",
     "name": "垩灰",
     "pinyin": "ehui"
   },
   {
-    "CMYK": [
-      65,
-      40,
-      44,
-      26
-    ],
-    "RGB": [
-      97,
-      113,
-      114
-    ],
+    "CMYK": [65, 40, 44, 26],
+    "RGB": [97, 113, 114],
     "hex": "#617172",
     "name": "夏云灰",
     "pinyin": "xiayunhui"
   },
   {
-    "CMYK": [
-      100,
-      52,
-      46,
-      43
-    ],
-    "RGB": [
-      19,
-      72,
-      87
-    ],
+    "CMYK": [100, 52, 46, 43],
+    "RGB": [19, 72, 87],
     "hex": "#134857",
     "name": "苍蓝",
     "pinyin": "canglan"
   },
   {
-    "CMYK": [
-      67,
-      53,
-      51,
-      50
-    ],
-    "RGB": [
-      71,
-      75,
-      76
-    ],
+    "CMYK": [67, 53, 51, 50],
+    "RGB": [71, 75, 76],
     "hex": "#474b4c",
     "name": "黄昏灰",
     "pinyin": "huanghunhui"
   },
   {
-    "CMYK": [
-      94,
-      58,
-      54,
-      60
-    ],
-    "RGB": [
-      33,
-      55,
-      61
-    ],
+    "CMYK": [94, 58, 54, 60],
+    "RGB": [33, 55, 61],
     "hex": "#21373d",
     "name": "灰蓝",
     "pinyin": "huilan"
   },
   {
-    "CMYK": [
-      100,
-      64,
-      56,
-      68
-    ],
-    "RGB": [
-      19,
-      44,
-      51
-    ],
+    "CMYK": [100, 64, 56, 68],
+    "RGB": [19, 44, 51],
     "hex": "#132c33",
     "name": "深灰蓝",
     "pinyin": "shenhuilan"
   },
   {
-    "CMYK": [
-      49,
-      5,
-      37,
-      0
-    ],
-    "RGB": [
-      164,
-      202,
-      182
-    ],
+    "CMYK": [49, 5, 37, 0],
+    "RGB": [164, 202, 182],
     "hex": "#a4cab6",
     "name": "玉簪绿",
     "pinyin": "yuzanlv"
   },
   {
-    "CMYK": [
-      96,
-      12,
-      66,
-      2
-    ],
-    "RGB": [
-      44,
-      150,
-      120
-    ],
+    "CMYK": [96, 12, 66, 2],
+    "RGB": [44, 150, 120],
     "hex": "#2c9678",
     "name": "青矾绿",
     "pinyin": "qingfanlv"
   },
   {
-    "CMYK": [
-      52,
-      11,
-      37,
-      0
-    ],
-    "RGB": [
-      154,
-      190,
-      175
-    ],
+    "CMYK": [52, 11, 37, 0],
+    "RGB": [154, 190, 175],
     "hex": "#9abeaf",
     "name": "草原远绿",
     "pinyin": "caoyuanyuanlv"
   },
   {
-    "CMYK": [
-      74,
-      14,
-      51,
-      1
-    ],
-    "RGB": [
-      105,
-      167,
-      148
-    ],
+    "CMYK": [74, 14, 51, 1],
+    "RGB": [105, 167, 148],
     "hex": "#69a794",
     "name": "梧枝绿",
     "pinyin": "wuzhilv"
   },
   {
-    "CMYK": [
-      55,
-      16,
-      40,
-      1
-    ],
-    "RGB": [
-      146,
-      179,
-      165
-    ],
+    "CMYK": [55, 16, 40, 1],
+    "RGB": [146, 179, 165],
     "hex": "#92b3a5",
     "name": "浪花绿",
     "pinyin": "langhualv"
   },
   {
-    "CMYK": [
-      99,
-      23,
-      70,
-      10
-    ],
-    "RGB": [
-      36,
-      128,
-      103
-    ],
+    "CMYK": [99, 23, 70, 10],
+    "RGB": [36, 128, 103],
     "hex": "#248067",
     "name": "海王绿",
     "pinyin": "haiwanglv"
   },
   {
-    "CMYK": [
-      88,
-      24,
-      61,
-      9
-    ],
-    "RGB": [
-      66,
-      134,
-      117
-    ],
+    "CMYK": [88, 24, 61, 9],
+    "RGB": [66, 134, 117],
     "hex": "#428675",
     "name": "亚丁绿",
     "pinyin": "yadinglv"
   },
   {
-    "CMYK": [
-      40,
-      27,
-      36,
-      8
-    ],
-    "RGB": [
-      159,
-      163,
-      154
-    ],
+    "CMYK": [40, 27, 36, 8],
+    "RGB": [159, 163, 154],
     "hex": "#9fa39a",
     "name": "镍灰",
     "pinyin": "niehui"
   },
   {
-    "CMYK": [
-      52,
-      28,
-      42,
-      10
-    ],
-    "RGB": [
-      138,
-      152,
-      142
-    ],
+    "CMYK": [52, 28, 42, 10],
+    "RGB": [138, 152, 142],
     "hex": "#8a988e",
     "name": "明灰",
     "pinyin": "minghui"
   },
   {
-    "CMYK": [
-      63,
-      31,
-      50,
-      14
-    ],
-    "RGB": [
-      112,
-      136,
-      125
-    ],
+    "CMYK": [63, 31, 50, 14],
+    "RGB": [112, 136, 125],
     "hex": "#70887d",
     "name": "淡绿灰",
     "pinyin": "danlvhui"
   },
   {
-    "CMYK": [
-      82,
-      32,
-      60,
-      20
-    ],
-    "RGB": [
-      73,
-      117,
-      104
-    ],
+    "CMYK": [82, 32, 60, 20],
+    "RGB": [73, 117, 104],
     "hex": "#497568",
     "name": "飞泉绿",
     "pinyin": "feiquanlv"
   },
   {
-    "CMYK": [
-      62,
-      43,
-      52,
-      34
-    ],
-    "RGB": [
-      93,
-      101,
-      95
-    ],
+    "CMYK": [62, 43, 52, 34],
+    "RGB": [93, 101, 95],
     "hex": "#5d655f",
     "name": "狼烟灰",
     "pinyin": "langyanhui"
   },
   {
-    "CMYK": [
-      85,
-      44,
-      64,
-      52
-    ],
-    "RGB": [
-      49,
-      74,
-      67
-    ],
+    "CMYK": [85, 44, 64, 52],
+    "RGB": [49, 74, 67],
     "hex": "#314a43",
     "name": "绿灰",
     "pinyin": "lvhui"
   },
   {
-    "CMYK": [
-      93,
-      46,
-      70,
-      61
-    ],
-    "RGB": [
-      34,
-      62,
-      54
-    ],
+    "CMYK": [93, 46, 70, 61],
+    "RGB": [34, 62, 54],
     "hex": "#223e36",
     "name": "苍绿",
     "pinyin": "canglv"
   },
   {
-    "CMYK": [
-      98,
-      46,
-      73,
-      63
-    ],
-    "RGB": [
-      26,
-      59,
-      50
-    ],
+    "CMYK": [98, 46, 73, 63],
+    "RGB": [26, 59, 50],
     "hex": "#1a3b32",
     "name": "深海绿",
     "pinyin": "shenhailv"
   },
   {
-    "CMYK": [
-      67,
-      60,
-      57,
-      68
-    ],
-    "RGB": [
-      54,
-      52,
-      51
-    ],
+    "CMYK": [67, 60, 57, 68],
+    "RGB": [54, 52, 51],
     "hex": "#363433",
     "name": "长石灰",
     "pinyin": "changshihui"
   },
   {
-    "CMYK": [
-      82,
-      60,
-      65,
-      80
-    ],
-    "RGB": [
-      31,
-      38,
-      35
-    ],
+    "CMYK": [82, 60, 65, 80],
+    "RGB": [31, 38, 35],
     "hex": "#1f2623",
     "name": "苷蓝绿",
     "pinyin": "ganlanlv"
   },
   {
-    "CMYK": [
-      90,
-      62,
-      67,
-      86
-    ],
-    "RGB": [
-      20,
-      30,
-      27
-    ],
+    "CMYK": [90, 62, 67, 86],
+    "RGB": [20, 30, 27],
     "hex": "#141e1b",
     "name": "莽丛绿",
     "pinyin": "mangconglv"
   },
   {
-    "CMYK": [
-      33,
-      1,
-      29,
-      0
-    ],
-    "RGB": [
-      198,
-      223,
-      200
-    ],
+    "CMYK": [33, 1, 29, 0],
+    "RGB": [198, 223, 200],
     "hex": "#c6dfc8",
     "name": "淡翠绿",
     "pinyin": "dancuilv"
   },
   {
-    "CMYK": [
-      53,
-      1,
-      44,
-      0
-    ],
-    "RGB": [
-      158,
-      204,
-      171
-    ],
+    "CMYK": [53, 1, 44, 0],
+    "RGB": [158, 204, 171],
     "hex": "#9eccab",
     "name": "明绿",
     "pinyin": "minglv"
   },
   {
-    "CMYK": [
-      75,
-      0,
-      59,
-      0
-    ],
-    "RGB": [
-      104,
-      184,
-      142
-    ],
+    "CMYK": [75, 0, 59, 0],
+    "RGB": [104, 184, 142],
     "hex": "#68b88e",
     "name": "田园绿",
     "pinyin": "tianyuanlv"
   },
   {
-    "CMYK": [
-      98,
-      0,
-      82,
-      0
-    ],
-    "RGB": [
-      32,
-      161,
-      98
-    ],
+    "CMYK": [98, 0, 82, 0],
+    "RGB": [32, 161, 98],
     "hex": "#20a162",
     "name": "翠绿",
     "pinyin": "cuilv"
   },
   {
-    "CMYK": [
-      78,
-      6,
-      62,
-      0
-    ],
-    "RGB": [
-      97,
-      172,
-      133
-    ],
+    "CMYK": [78, 6, 62, 0],
+    "RGB": [97, 172, 133],
     "hex": "#61ac85",
     "name": "淡绿",
     "pinyin": "danlv"
   },
   {
-    "CMYK": [
-      90,
-      7,
-      73,
-      0
-    ],
-    "RGB": [
-      64,
-      160,
-      112
-    ],
+    "CMYK": [90, 7, 73, 0],
+    "RGB": [64, 160, 112],
     "hex": "#40a070",
     "name": "葱绿",
     "pinyin": "conglv"
   },
   {
-    "CMYK": [
-      99,
-      10,
-      91,
-      2
-    ],
-    "RGB": [
-      34,
-      148,
-      83
-    ],
+    "CMYK": [99, 10, 91, 2],
+    "RGB": [34, 148, 83],
     "hex": "#229453",
     "name": "孔雀绿",
     "pinyin": "kongquelv"
   },
   {
-    "CMYK": [
-      27,
-      11,
-      27,
-      1
-    ],
-    "RGB": [
-      202,
-      211,
-      195
-    ],
+    "CMYK": [27, 11, 27, 1],
+    "RGB": [202, 211, 195],
     "hex": "#cad3c3",
     "name": "艾绿",
     "pinyin": "ailv"
   },
   {
-    "CMYK": [
-      92,
-      14,
-      76,
-      2
-    ],
-    "RGB": [
-      60,
-      149,
-      102
-    ],
+    "CMYK": [92, 14, 76, 2],
+    "RGB": [60, 149, 102],
     "hex": "#3c9566",
     "name": "蟾绿",
     "pinyin": "chanlv"
   },
   {
-    "CMYK": [
-      100,
-      17,
-      92,
-      5
-    ],
-    "RGB": [
-      32,
-      137,
-      77
-    ],
+    "CMYK": [100, 17, 92, 5],
+    "RGB": [32, 137, 77],
     "hex": "#20894d",
     "name": "宫殿绿",
     "pinyin": "gongdianlv"
   },
   {
-    "CMYK": [
-      61,
-      19,
-      52,
-      3
-    ],
-    "RGB": [
-      131,
-      167,
-      141
-    ],
+    "CMYK": [61, 19, 52, 3],
+    "RGB": [131, 167, 141],
     "hex": "#83a78d",
     "name": "松霜绿",
     "pinyin": "songshuanglv"
   },
   {
-    "CMYK": [
-      81,
-      19,
-      67,
-      4
-    ],
-    "RGB": [
-      87,
-      149,
-      114
-    ],
+    "CMYK": [81, 19, 67, 4],
+    "RGB": [87, 149, 114],
     "hex": "#579572",
     "name": "蛋白石绿",
     "pinyin": "danbaishilv"
   },
   {
-    "CMYK": [
-      100,
-      22,
-      90,
-      10
-    ],
-    "RGB": [
-      32,
-      127,
-      76
-    ],
+    "CMYK": [100, 22, 90, 10],
+    "RGB": [32, 127, 76],
     "hex": "#207f4c",
     "name": "薄荷绿",
     "pinyin": "bohelv"
   },
   {
-    "CMYK": [
-      66,
-      29,
-      58,
-      12
-    ],
-    "RGB": [
-      110,
-      139,
-      116
-    ],
+    "CMYK": [66, 29, 58, 12],
+    "RGB": [110, 139, 116],
     "hex": "#6e8b74",
     "name": "瓦松绿",
     "pinyin": "wasonglv"
   },
   {
-    "CMYK": [
-      100,
-      31,
-      91,
-      25
-    ],
-    "RGB": [
-      26,
-      104,
-      64
-    ],
+    "CMYK": [100, 31, 91, 25],
+    "RGB": [26, 104, 64],
     "hex": "#1a6840",
     "name": "荷叶绿",
     "pinyin": "heyelv"
   },
   {
-    "CMYK": [
-      62,
-      42,
-      56,
-      34
-    ],
-    "RGB": [
-      94,
-      102,
-      91
-    ],
+    "CMYK": [62, 42, 56, 34],
+    "RGB": [94, 102, 91],
     "hex": "#5e665b",
     "name": "田螺绿",
     "pinyin": "tianluolv"
   },
   {
-    "CMYK": [
-      74,
-      42,
-      65,
-      40
-    ],
-    "RGB": [
-      72,
-      91,
-      77
-    ],
+    "CMYK": [74, 42, 65, 40],
+    "RGB": [72, 91, 77],
     "hex": "#485b4d",
     "name": "白屈菜绿",
     "pinyin": "baiqucailv"
   },
   {
-    "CMYK": [
-      64,
-      57,
-      60,
-      67
-    ],
-    "RGB": [
-      57,
-      55,
-      51
-    ],
+    "CMYK": [64, 57, 60, 67],
+    "RGB": [57, 55, 51],
     "hex": "#393733",
     "name": "河豚灰",
     "pinyin": "hetunhui"
   },
   {
-    "CMYK": [
-      68,
-      56,
-      60,
-      66
-    ],
-    "RGB": [
-      55,
-      56,
-      52
-    ],
+    "CMYK": [68, 56, 60, 66],
+    "RGB": [55, 56, 52],
     "hex": "#373834",
     "name": "蒽油绿",
     "pinyin": "enyoulv"
   },
   {
-    "CMYK": [
-      76,
-      56,
-      75,
-      72
-    ],
-    "RGB": [
-      43,
-      49,
-      44
-    ],
+    "CMYK": [76, 56, 75, 72],
+    "RGB": [43, 49, 44],
     "hex": "#2b312c",
     "name": "槲寄生绿",
     "pinyin": "hujishenglv"
   },
   {
-    "CMYK": [
-      91,
-      60,
-      76,
-      83
-    ],
-    "RGB": [
-      21,
-      35,
-      27
-    ],
+    "CMYK": [91, 60, 76, 83],
+    "RGB": [21, 35, 27],
     "hex": "#15231b",
     "name": "云杉绿",
     "pinyin": "yunshanlv"
   },
   {
-    "CMYK": [
-      9,
-      1,
-      14,
-      0
-    ],
-    "RGB": [
-      240,
-      245,
-      229
-    ],
+    "CMYK": [9, 1, 14, 0],
+    "RGB": [240, 245, 229],
     "hex": "#f0f5e5",
     "name": "嫩菊绿",
     "pinyin": "nenjulv"
   },
   {
-    "CMYK": [
-      20,
-      1,
-      23,
-      0
-    ],
-    "RGB": [
-      223,
-      236,
-      213
-    ],
+    "CMYK": [20, 1, 23, 0],
+    "RGB": [223, 236, 213],
     "hex": "#dfecd5",
     "name": "艾背绿",
     "pinyin": "aibeilv"
   },
   {
-    "CMYK": [
-      47,
-      0,
-      49,
-      0
-    ],
-    "RGB": [
-      173,
-      213,
-      162
-    ],
+    "CMYK": [47, 0, 49, 0],
+    "RGB": [173, 213, 162],
     "hex": "#add5a2",
     "name": "嘉陵水绿",
     "pinyin": "jialingshuilv"
   },
   {
-    "CMYK": [
-      89,
-      0,
-      96,
-      0
-    ],
-    "RGB": [
-      65,
-      179,
-      73
-    ],
+    "CMYK": [89, 0, 96, 0],
+    "RGB": [65, 179, 73],
     "hex": "#41b349",
     "name": "玉髓绿",
     "pinyin": "yusuilv"
   },
   {
-    "CMYK": [
-      88,
-      0,
-      99,
-      0
-    ],
-    "RGB": [
-      67,
-      178,
-      68
-    ],
+    "CMYK": [88, 0, 99, 0],
+    "RGB": [67, 178, 68],
     "hex": "#43b244",
     "name": "鲜绿",
     "pinyin": "xianlv"
   },
   {
-    "CMYK": [
-      90,
-      0,
-      100,
-      0
-    ],
-    "RGB": [
-      65,
-      174,
-      60
-    ],
+    "CMYK": [90, 0, 100, 0],
+    "RGB": [65, 174, 60],
     "hex": "#41ae3c",
     "name": "宝石绿",
     "pinyin": "baoshilv"
   },
   {
-    "CMYK": [
-      18,
-      4,
-      33,
-      0
-    ],
-    "RGB": [
-      226,
-      231,
-      191
-    ],
+    "CMYK": [18, 4, 33, 0],
+    "RGB": [226, 231, 191],
     "hex": "#e2e7bf",
     "name": "海沬绿",
     "pinyin": "haimeilv"
   },
   {
-    "CMYK": [
-      28,
-      4,
-      44,
-      0
-    ],
-    "RGB": [
-      208,
-      222,
-      170
-    ],
+    "CMYK": [28, 4, 44, 0],
+    "RGB": [208, 222, 170],
     "hex": "#d0deaa",
     "name": "姚黄",
     "pinyin": "yaohuang"
   },
   {
-    "CMYK": [
-      44,
-      3,
-      61,
-      0
-    ],
-    "RGB": [
-      178,
-      207,
-      135
-    ],
+    "CMYK": [44, 3, 61, 0],
+    "RGB": [178, 207, 135],
     "hex": "#b2cf87",
     "name": "橄榄石绿",
     "pinyin": "ganlanshilv"
   },
   {
-    "CMYK": [
-      62,
-      0,
-      76,
-      0
-    ],
-    "RGB": [
-      140,
-      194,
-      105
-    ],
+    "CMYK": [62, 0, 76, 0],
+    "RGB": [140, 194, 105],
     "hex": "#8cc269",
     "name": "水绿",
     "pinyin": "shuilv"
   },
   {
-    "CMYK": [
-      42,
-      3,
-      67,
-      0
-    ],
-    "RGB": [
-      183,
-      208,
-      122
-    ],
+    "CMYK": [42, 3, 67, 0],
+    "RGB": [183, 208, 122],
     "hex": "#b7d07a",
     "name": "芦苇绿",
     "pinyin": "luweilv"
   },
   {
-    "CMYK": [
-      28,
-      6,
-      66,
-      0
-    ],
-    "RGB": [
-      210,
-      217,
-      122
-    ],
+    "CMYK": [28, 6, 66, 0],
+    "RGB": [210, 217, 122],
     "hex": "#d2d97a",
     "name": "槐花黄绿",
     "pinyin": "huaihuahuanglv"
   },
   {
-    "CMYK": [
-      41,
-      4,
-      76,
-      0
-    ],
-    "RGB": [
-      186,
-      207,
-      101
-    ],
+    "CMYK": [41, 4, 76, 0],
+    "RGB": [186, 207, 101],
     "hex": "#bacf65",
     "name": "苹果绿",
     "pinyin": "pingguolv"
   },
   {
-    "CMYK": [
-      58,
-      1,
-      88,
-      0
-    ],
-    "RGB": [
-      150,
-      194,
-      78
-    ],
+    "CMYK": [58, 1, 88, 0],
+    "RGB": [150, 194, 78],
     "hex": "#96c24e",
     "name": "芽绿",
     "pinyin": "yalv"
   },
   {
-    "CMYK": [
-      19,
-      9,
-      84,
-      1
-    ],
-    "RGB": [
-      226,
-      216,
-      73
-    ],
+    "CMYK": [19, 9, 84, 1],
+    "RGB": [226, 216, 73],
     "hex": "#e2d849",
     "name": "蝶黄",
     "pinyin": "diehuang"
   },
   {
-    "CMYK": [
-      38,
-      8,
-      94,
-      1
-    ],
-    "RGB": [
-      190,
-      201,
-      54
-    ],
+    "CMYK": [38, 8, 94, 1],
+    "RGB": [190, 201, 54],
     "hex": "#bec936",
     "name": "橄榄黄绿",
     "pinyin": "ganlanhuanglv"
   },
   {
-    "CMYK": [
-      81,
-      0,
-      100,
-      0
-    ],
-    "RGB": [
-      91,
-      174,
-      35
-    ],
+    "CMYK": [81, 0, 100, 0],
+    "RGB": [91, 174, 35],
     "hex": "#5bae23",
     "name": "鹦鹉绿",
     "pinyin": "yingwulv"
   },
   {
-    "CMYK": [
-      84,
-      64,
-      94,
-      45
-    ],
-    "RGB": [
-      37,
-      61,
-      36
-    ],
+    "CMYK": [84, 64, 94, 45],
+    "RGB": [37, 61, 36],
     "hex": "#253d24",
     "name": "油绿",
     "pinyin": "youlv"
   },
   {
-    "CMYK": [
-      0,
-      1,
-      4,
-      0
-    ],
-    "RGB": [
-      255,
-      254,
-      248
-    ],
+    "CMYK": [0, 1, 4, 0],
+    "RGB": [255, 254, 248],
     "hex": "#fffef8",
     "name": "象牙白",
     "pinyin": "xiangyabai"
   },
   {
-    "CMYK": [
-      3,
-      5,
-      8,
-      0
-    ],
-    "RGB": [
-      248,
-      244,
-      237
-    ],
+    "CMYK": [3, 5, 8, 0],
+    "RGB": [248, 244, 237],
     "hex": "#f8f4ed",
     "name": "汉白玉",
     "pinyin": "hanbaiyu"
   },
   {
-    "CMYK": [
-      0,
-      1,
-      3,
-      0
-    ],
-    "RGB": [
-      255,
-      254,
-      249
-    ],
+    "CMYK": [0, 1, 3, 0],
+    "RGB": [255, 254, 249],
     "hex": "#fffef9",
     "name": "雪白",
     "pinyin": "xuebai"
   },
   {
-    "CMYK": [
-      4,
-      4,
-      8,
-      0
-    ],
-    "RGB": [
-      247,
-      244,
-      237
-    ],
+    "CMYK": [4, 4, 8, 0],
+    "RGB": [247, 244, 237],
     "hex": "#f7f4ed",
     "name": "鱼肚白",
     "pinyin": "yudubai"
   },
   {
-    "CMYK": [
-      12,
-      12,
-      16,
-      0
-    ],
-    "RGB": [
-      228,
-      223,
-      215
-    ],
+    "CMYK": [12, 12, 16, 0],
+    "RGB": [228, 223, 215],
     "hex": "#e4dfd7",
     "name": "珍珠灰",
     "pinyin": "zhenzhuhui"
   },
   {
-    "CMYK": [
-      16,
-      15,
-      20,
-      1
-    ],
-    "RGB": [
-      218,
-      212,
-      203
-    ],
+    "CMYK": [16, 15, 20, 1],
+    "RGB": [218, 212, 203],
     "hex": "#dad4cb",
     "name": "浅灰",
     "pinyin": "qianhui"
   },
   {
-    "CMYK": [
-      28,
-      5,
-      30,
-      5
-    ],
-    "RGB": [
-      187,
-      181,
-      172
-    ],
+    "CMYK": [28, 5, 30, 5],
+    "RGB": [187, 181, 172],
     "hex": "#bbb5ac",
     "name": "铅灰",
     "pinyin": "qianhui"
   },
   {
-    "CMYK": [
-      28,
-      25,
-      30,
-      5
-    ],
-    "RGB": [
-      187,
-      181,
-      172
-    ],
+    "CMYK": [28, 25, 30, 5],
+    "RGB": [187, 181, 172],
     "hex": "#bbb5ac",
     "name": "中灰",
     "pinyin": "zhonghui"
   },
   {
-    "CMYK": [
-      42,
-      40,
-      43,
-      23
-    ],
-    "RGB": [
-      134,
-      126,
-      118
-    ],
+    "CMYK": [42, 40, 43, 23],
+    "RGB": [134, 126, 118],
     "hex": "#867e76",
     "name": "瓦灰",
     "pinyin": "wahui"
   },
   {
-    "CMYK": [
-      43,
-      40,
-      44,
-      42
-    ],
-    "RGB": [
-      132,
-      124,
-      116
-    ],
+    "CMYK": [43, 40, 44, 42],
+    "RGB": [132, 124, 116],
     "hex": "#847c74",
     "name": "夜灰",
     "pinyin": "yehui"
   },
   {
-    "CMYK": [
-      42,
-      42,
-      45,
-      27
-    ],
-    "RGB": [
-      128,
-      118,
-      110
-    ],
+    "CMYK": [42, 42, 45, 27],
+    "RGB": [128, 118, 110],
     "hex": "#80766e",
     "name": "雁灰",
     "pinyin": "yanhui"
   },
   {
-    "CMYK": [
-      42,
-      42,
-      46,
-      27
-    ],
-    "RGB": [
-      129,
-      119,
-      110
-    ],
+    "CMYK": [42, 42, 46, 27],
+    "RGB": [129, 119, 110],
     "hex": "#81776e",
     "name": "深灰",
     "pinyin": "shenhui"
   }
-]
+]

src/settings/designColorRecommend.json

@@ -1,66 +1,30 @@
 [
   {
-    "CMYK": [
-      62,
-      0,
-      21,
-      16
-    ],
-    "RGB": [
-      81,
-      214,
-      169
-    ],
+    "CMYK": [62, 0, 21, 16],
+    "RGB": [81, 214, 169],
     "hex": "#51d6a9",
     "name": "碧空绿",
     "pinyin": "bikonlv"
   },
   {
-    "CMYK": [
-      93,
-      0,
-      31,
-      0
-    ],
-    "RGB": [
-      16,
-      174,
-      194
-    ],
-    "hex": "#10aec2",
-    "name": "甸子蓝",
-    "pinyin": "dianzilan"
+    "CMYK": [4, 13, 67, 0],
+    "RGB": [248, 223, 114],
+    "hex": "#f8df72",
+    "name": "茉莉黄",
+    "pinyin": "molihuang"
   },
   {
-    "CMYK": [
-      76,
-      51,
-      0,
-      0
-    ],
-    "RGB": [
-      60,
-      126,
-      255
-    ],
+    "CMYK": [76, 51, 0, 0],
+    "RGB": [60, 126, 255],
     "hex": "#3c7eff",
     "name": "深海蓝",
     "pinyin": "shenhailan"
   },
   {
-    "CMYK": [
-      4,
-      13,
-      67,
-      0
-    ],
-    "RGB": [
-      248,
-      223,
-      114
-    ],
-    "hex": "#f8df72",
-    "name": "茉莉黄",
-    "pinyin": "molihuang"
+    "CMYK": [59, 12, 19, 0],
+    "RGB": [138, 188, 209],
+    "hex": "#8abcd1",
+    "name": "秋波蓝",
+    "pinyin": "qiubolan"
   }
-]
+]

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -111,6 +111,7 @@ export type EditCanvasConfigType = {
   [FilterEnum.ROTATE_Y]: number
   [FilterEnum.SKEW_X]: number
   [FilterEnum.SKEW_Y]: number
+  [FilterEnum.BLEND_MODE]: string
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度

src/store/modules/chartEditStore/chartEditStore.ts

@@ -115,6 +115,8 @@ export const useChartEditStore = defineStore({
       rotateY: 0,
       skewX: 0,
       skewY: 0,
+      // 混合模式
+      blendMode: 'normal',
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,
@@ -557,6 +559,10 @@ export const useChartEditStore = defineStore({
         return
       }
 
+      // 取消选中
+      this.setTargetSelectChart()
+
+      // 重新选中
       let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
@@ -627,7 +633,8 @@ export const useChartEditStore = defineStore({
               ids.push(item.id)
             })
           } else {
-            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+            const group = historyData[0] as CreateComponentGroupType
+            group.groupList.forEach(item => {
               ids.push(item.id)
             })
           }
@@ -642,6 +649,38 @@ export const useChartEditStore = defineStore({
         }
         return
       }
+
+      // 处理锁定
+      const isLock = HistoryItem.actionType === HistoryActionTypeEnum.LOCK
+      const isUnLock = HistoryItem.actionType === HistoryActionTypeEnum.UNLOCK
+      if (isLock || isUnLock) {
+        if ((isLock && isForward) || (isUnLock && !isForward)) {
+          historyData.forEach(item => {
+            this.setLock(!item.status.lock, false)
+          })
+          return
+        }
+        historyData.forEach(item => {
+          this.setUnLock(false)
+        })
+        return
+      }
+
+      // 处理隐藏
+      const isHide = HistoryItem.actionType === HistoryActionTypeEnum.HIDE
+      const isShow = HistoryItem.actionType === HistoryActionTypeEnum.SHOW
+      if (isHide || isShow) {
+        if ((isHide && isForward) || (isShow && !isForward)) {
+          historyData.forEach(item => {
+            this.setHide(!item.status.hide, false)
+          })
+          return
+        }
+        historyData.forEach(item => {
+          this.setShow(false)
+        })
+        return
+      }
     },
     // * 撤回
     setBack() {
@@ -820,7 +859,73 @@ export const useChartEditStore = defineStore({
         loadingFinish()
       }
     },
-    // * 页面缩放设置-----------------
+    // * 锁定
+    setLock(status: boolean = true, isHistory: boolean = true) {
+      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
+        loadingStart()
+        const index: number = this.fetchTargetIndex()
+        if (index !== -1) {
+          // 更新状态
+          const targetItem = this.getComponentList[index]
+          targetItem.status.lock = status
+
+          // 历史记录
+          if (isHistory) {
+            status
+              ? chartHistoryStore.createLockHistory([targetItem])
+              : chartHistoryStore.createUnLockHistory([targetItem])
+          }
+          this.updateComponentList(index, targetItem)
+          // 锁定添加失焦效果
+          if (status) this.setTargetSelectChart(undefined)
+          loadingFinish()
+          return
+        }
+      } catch (value) {
+        loadingError()
+      }
+    },
+    // * 解除锁定
+    setUnLock(isHistory: boolean = true) {
+      this.setLock(false, isHistory)
+    },
+    // * 隐藏
+    setHide(status: boolean = true, isHistory: boolean = true) {
+      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
+        loadingStart()
+        const index: number = this.fetchTargetIndex()
+        if (index !== -1) {
+          // 更新状态
+          const targetItem = this.getComponentList[index]
+          targetItem.status.hide = status
+
+          // 历史记录
+          if (isHistory) {
+            status
+              ? chartHistoryStore.createHideHistory([targetItem])
+              : chartHistoryStore.createShowHistory([targetItem])
+          }
+          this.updateComponentList(index, targetItem)
+          loadingFinish()
+
+          // 隐藏添加失焦效果
+          if (status) this.setTargetSelectChart(undefined)
+        }
+      } catch (value) {
+        loadingError()
+      }
+    },
+    // * 显示
+    setShow(isHistory: boolean = true) {
+      this.setHide(false, isHistory)
+    },
+    // ----------------
     // * 设置页面大小
     setPageSize(scale: number): void {
       this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)

src/store/modules/chartHistoryStore/chartHistoryDefine.ts

@@ -1,23 +1,23 @@
-import {
-  HistoryTargetTypeEnum,
-  HistoryActionTypeEnum
-} from './chartHistoryStore.d'
+import { HistoryTargetTypeEnum, HistoryActionTypeEnum } from './chartHistoryStore.d'
 
 export const historyActionTypeName = {
-  [HistoryActionTypeEnum.ADD]: '新增图表',
-  [HistoryActionTypeEnum.DELETE]: '删除图表',
-  [HistoryActionTypeEnum.UPDATE]: '修改属性',
-  [HistoryActionTypeEnum.MOVE]: '移动图表',
-  [HistoryActionTypeEnum.PASTE]: '粘贴图表',
-  [HistoryActionTypeEnum.COPY]: '复制图表',
-  [HistoryActionTypeEnum.CUT]: '剪切图表',
-  [HistoryActionTypeEnum.TOP]: '层级置顶',
-  [HistoryActionTypeEnum.BOTTOM]: '层级置底',
-  [HistoryActionTypeEnum.UP]: '层级上移',
-  [HistoryActionTypeEnum.DOWN]: '层级下移',
-  [HistoryActionTypeEnum.GROUP]: '创建分组',
-  [HistoryActionTypeEnum.UN_GROUP]: '解除分组',
-  [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
-  
+  [HistoryActionTypeEnum.ADD]: '新增',
+  [HistoryActionTypeEnum.DELETE]: '删除',
+  [HistoryActionTypeEnum.UPDATE]: '更新',
+  [HistoryActionTypeEnum.MOVE]: '移动',
+  [HistoryActionTypeEnum.PASTE]: '粘贴',
+  [HistoryActionTypeEnum.COPY]: '复制',
+  [HistoryActionTypeEnum.CUT]: '剪切',
+  [HistoryActionTypeEnum.TOP]: '置顶',
+  [HistoryActionTypeEnum.BOTTOM]: '置底',
+  [HistoryActionTypeEnum.UP]: '上移',
+  [HistoryActionTypeEnum.DOWN]: '下移',
+  [HistoryActionTypeEnum.GROUP]: '成组',
+  [HistoryActionTypeEnum.UN_GROUP]: '解组',
+  [HistoryActionTypeEnum.LOCK]: '锁定',
+  [HistoryActionTypeEnum.UNLOCK]: '解锁',
+  [HistoryActionTypeEnum.HIDE]: '隐藏',
+  [HistoryActionTypeEnum.SHOW]: '显示',
+
   [HistoryTargetTypeEnum.CANVAS]: '画布初始化'
 }

src/store/modules/chartHistoryStore/chartHistoryStore.d.ts

@@ -2,6 +2,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 // 操作类型枚举
+
 export enum HistoryActionTypeEnum {
   // 新增
   ADD = 'add',
@@ -29,8 +30,14 @@ export enum HistoryActionTypeEnum {
   GROUP = 'group',
   // 解组
   UN_GROUP = 'unGroup',
-  // 选择历史记录
-  SELECT_HISTORY = 'selectHistory'
+  // 锁定
+  LOCK = 'lock',
+  // 解除锁定
+  UNLOCK = 'unLock',
+  // 隐藏
+  HIDE = 'hide',
+  // 显示
+  SHOW = 'show'
 }
 
 // 对象类型

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -167,6 +167,22 @@ export const useChartHistoryStore = defineStore({
     // * 解除分组
     createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
       this.createStackItem(item, HistoryActionTypeEnum.UN_GROUP, HistoryTargetTypeEnum.CHART)
+    },
+    // * 锁定记录
+    createLockHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.LOCK, HistoryTargetTypeEnum.CHART)
+    },
+    // * 解锁记录
+    createUnLockHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.UNLOCK, HistoryTargetTypeEnum.CHART)
+    },
+    // * 隐藏记录
+    createHideHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.HIDE, HistoryTargetTypeEnum.CHART)
+    },
+    // * 展示记录
+    createShowHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
+      this.createStackItem(item, HistoryActionTypeEnum.SHOW, HistoryTargetTypeEnum.CHART)
     }
   }
 })

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -1,7 +1,13 @@
+export enum LayerModeEnum {
+  THUMBNAIL = 'thumbnail',
+  TEXT = 'text'
+}
+
 export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
+  LAYER_TYPE = 'layerType'
 }
 
 export interface ChartLayoutType {
@@ -11,4 +17,6 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.CHARTS]: boolean
   // 详情设置
   [ChartLayoutStoreEnum.DETAILS]: boolean
+  // 层级展示方式
+  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ChartLayoutType } from './chartLayoutStore.d'
+import { ChartLayoutType, LayerModeEnum } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -20,7 +20,9 @@ export const useChartLayoutStore = defineStore({
       // 图表组件
       charts: true,
       // 详情设置（收缩为true）
-      details: false
+      details: false,
+      // 图层类型（默认图片）
+      layerType: LayerModeEnum.THUMBNAIL
     },
   getters: {
     getLayers(): boolean {
@@ -31,6 +33,9 @@ export const useChartLayoutStore = defineStore({
     },
     getDetails(): boolean {
       return this.details
+    },
+    getLayerType(): LayerModeEnum {
+      return this.layerType
     }
   },
   actions: {

src/styles/common/style.scss

@@ -1,7 +1,7 @@
-@import './var.scss';
-@import './format.scss';
-@import './animation.scss';
-@import './mixins/mixins.scss';
+@import "./var.scss";
+@import "./format.scss";
+@import "./animation.scss";
+@import "./mixins/mixins.scss";
 
 // 过度
 .go-transition {
@@ -49,14 +49,14 @@
 // 毛玻璃
 .go-background-filter {
   backdrop-filter: $--filter-blur-base;
-  @include fetch-bg-color('filter-color');
+  @include fetch-bg-color("filter-color");
   box-shadow: $--border-shadow;
 }
 
 // 毛玻璃
 .go-background-filter-shallow {
   backdrop-filter: $--filter-blur-base;
-  @include fetch-bg-color('filter-color-shallow');
+  @include fetch-bg-color("filter-color-shallow");
   box-shadow: $--border-shadow;
 }
 
@@ -68,7 +68,7 @@
 
 // 背景斑点需配合 @mixin background-image 使用
 .go-point-bg {
-  @include fetch-theme-custom('background-color', 'background-color1');
+  @include fetch-theme-custom("background-color", "background-color1");
   background-size: 15px 15px, 15px 15px;
 }
 
@@ -117,4 +117,11 @@
   .go-#{$typekey} {
     #{$type}: 0 !important;
   }
-}
+}
+
+.go-d-inline-block {
+  display: inline-block;
+}
+.go-d-block {
+  display: block;
+}

src/utils/style.ts

@@ -16,11 +16,11 @@ export const animationsClass = (animations: string[]) => {
 
 // * 滤镜
 export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
-  if(!styles || !styles.filterShow) return {}
+  if (!styles || !styles.filterShow) return {}
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     opacity: opacity,
-    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
+    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
   }
 }
 
@@ -28,17 +28,28 @@ export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
 export const getTransformStyle = (styles: StylesType) => {
   const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
   return {
-    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
+    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${
+      skewX || 0
+    }deg) skewY(${skewY || 0}deg)`
+  }
+}
+
+// * 混合模式
+export const getBlendModeStyle = (styles: StylesType) => {
+  if (!styles || !styles.filterShow) return {}
+  const { blendMode } = styles
+  return {
+    'mix-blend-mode': blendMode
   }
 }
 
 /**
- * * hsla 转换 
+ * * hsla 转换
  * @param color 颜色
  * @param alpha 默认1
- * @returns 
+ * @returns
  */
-export function alpha(color: string, alpha = 1 ) {
+export function alpha(color: string, alpha = 1) {
   return Color(color).alpha(alpha).toString()
 }
 
@@ -47,7 +58,7 @@ export function alpha(color: string, alpha = 1 ) {
  * rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function fade(color: string, fade: number) {
   return Color(color).fade(fade).toString()
@@ -58,7 +69,7 @@ export function fade(color: string, fade: number) {
  * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function lighten(color: string, concentration: number) {
   return Color(color).lighten(concentration).toString()
@@ -69,7 +80,7 @@ export function lighten(color: string, concentration: number) {
  * hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
  * @param color 颜色
  * @param concentration 0~1 浓度
- * @returns 
+ * @returns
  */
 export function darken(color: string, concentration: number) {
   return Color(color).darken(concentration).toString()
@@ -88,4 +99,4 @@ export const setHtmlTheme = (themeName?: string) => {
   }
   const designStore = useDesignStore()
   e.setAttribute('data-theme', designStore.themeName)
-}
+}

src/views/chart/ContentBox/index.vue

@@ -10,14 +10,9 @@
           <slot name="icon"></slot>
         </div>
       </n-space>
-      <n-space>
+      <n-space align="center" style="gap: 4px">
         <slot name="top-right"></slot>
-        <n-icon
-          v-show="backIcon"
-          size="20"
-          class="go-cursor-pointer"
-          @click="backHandle"
-        >
+        <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
           <chevron-back-outline-icon></chevron-back-outline-icon>
         </n-icon>
       </n-space>
@@ -151,7 +146,7 @@ $topOrBottomHeight: 40px;
     border-bottom: 1px solid;
     @include fetch-border-color('background-color1');
   }
-  
+
   .content {
     height: calc(100vh - #{$--header-height});
     overflow: hidden;
@@ -165,9 +160,7 @@ $topOrBottomHeight: 40px;
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }
   .content-height-show-both {
-    height: calc(
-      100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}
-    );
+    height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
   }
 }
 </style>

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -30,17 +30,11 @@
         :onBeforeUpload="beforeUploadHandle"
       >
         <n-upload-dragger>
-          <img
-            v-if="canvasConfig.backgroundImage"
-            class="upload-show"
-            :src="canvasConfig.backgroundImage"
-            alt="背景"
-          />
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">
-              背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif
-              的文件
+              背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
             </n-text>
           </div>
         </n-upload-dragger>
@@ -48,43 +42,52 @@
     </n-card>
     <n-space vertical :size="12">
       <n-space>
-        <n-text>背景色</n-text>
-        <n-color-picker
-          style="width: 326px;"
-          :showPreview="true"
-          :swatches="swatchesColors"
-          v-model:value="canvasConfig.background"
-        ></n-color-picker>
+        <n-text>背景颜色</n-text>
+        <div class="picker-height">
+          <n-color-picker
+            v-if="!switchSelectColorLoading"
+            size="small"
+            style="width: 250px"
+            v-model:value="canvasConfig.background"
+            :showPreview="true"
+            :swatches="swatchesColors"
+          ></n-color-picker>
+        </div>
       </n-space>
       <n-space>
-        <n-text>颜色应用</n-text>
-        <n-switch
+        <n-text>应用类型</n-text>
+        <n-select
           size="small"
-          v-model:value="canvasConfig.selectColor"
-          :loading="switchSelectColorLoading"
-          :round="false"
+          style="width: 250px"
+          v-model:value="selectColorValue"
           :disabled="!canvasConfig.backgroundImage"
-          :onUpdate="switchSelectColorHandle"
-        ></n-switch>
+          :options="selectColorOptions"
+          @update:value="selectColorValueHandle"
+        />
       </n-space>
       <n-space>
         <n-text>背景控制</n-text>
-        <n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
-        <n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
+        <n-button class="clear-btn" size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">
+          清除背景
+        </n-button>
+        <n-button class="clear-btn" size="small" :disabled="!canvasConfig.background" @click="clearColor">
+          清除颜色
+        </n-button>
       </n-space>
       <n-space>
         <n-text>预览方式</n-text>
         <n-button-group>
-          <n-button 
-            ghost
+          <n-button
             v-for="item in previewTypeList"
             :key="item.key"
             :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
+            ghost
             size="small"
-            @click="selectPreviewType(item.key)">
+            @click="selectPreviewType(item.key)"
+          >
             <n-tooltip :show-arrow="false" trigger="hover">
               <template #trigger>
-                <n-icon size="18">
+                <n-icon class="select-preview-icon" size="18">
                   <component :is="item.icon"></component>
                 </n-icon>
               </template>
@@ -97,7 +100,7 @@
 
     <!-- 滤镜 -->
     <styles-setting :isCanvas="true" :chartStyles="canvasConfig"></styles-setting>
-    <n-divider style="margin: 10px 0;"></n-divider>
+    <n-divider style="margin: 10px 0"></n-divider>
 
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
@@ -123,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -147,23 +150,25 @@ const editCanvas = chartEditStore.getEditCanvas
 
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
+const selectColorValue = ref(0)
 
-const ChartThemeColor = loadAsyncComponent(() =>
-  import('./components/ChartThemeColor/index.vue')
-)
+const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
 
-// 北京默认展示颜色列表
-const swatchesColors = [
-  '#232324',
-  '#2a2a2b',
-  '#313132',
-  '#373739',
-  '#757575',
-  '#e0e0e0',
-  '#eeeeee',
-  '#fafafa'
+// 默认应用类型
+const selectColorOptions = [
+  {
+    label: '应用颜色',
+    value: 0
+  },
+  {
+    label: '应用背景',
+    value: 1
+  }
 ]
 
+// 默认展示颜色列表
+const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
+
 const globalTabList = [
   {
     key: 'ChartTheme',
@@ -197,9 +202,19 @@ const previewTypeList = [
     title: '铺满',
     icon: FitToScreenIcon,
     desc: '强行拉伸画面，填充所有视图'
-  },
+  }
 ]
 
+watch(
+  () => canvasConfig.selectColor,
+  newValue => {
+    selectColorValue.value = newValue ? 0 : 1
+  },
+  {
+    immediate: true
+  }
+)
+
 // 画布尺寸规则
 const validator = (x: number) => x > 50
 
@@ -216,9 +231,7 @@ const beforeUploadHandle = async ({ file }) => {
   const size = file.file.size
 
   if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(
-      `图片超出 ${backgroundImageSize}M 限制，请重新上传！`
-    )
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
     return false
   }
   if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
@@ -228,38 +241,32 @@ const beforeUploadHandle = async ({ file }) => {
   return true
 }
 
-// 清除背景
-const clearImage = () => {
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND_IMAGE,
-    undefined
-  )
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.SELECT_COLOR,
-    true
-  )
+// 应用颜色
+const selectColorValueHandle = (value: number) => {
+  canvasConfig.selectColor = value == 0
 }
 
-// 清除颜色
-const clearColor = () => {
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND,
-    undefined
-  )
-  if (canvasConfig.backgroundImage) {
-    chartEditStore.setEditCanvasConfig(
-      EditCanvasConfigEnum.SELECT_COLOR,
-      false
-    )
-  }
+// 清除背景
+const clearImage = () => {
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
 }
 
-// 启用/关闭 颜色
+// 启用/关闭 颜色（强制更新）
 const switchSelectColorHandle = () => {
   switchSelectColorLoading.value = true
   setTimeout(() => {
     switchSelectColorLoading.value = false
-  }, 1000)
+  })
+}
+
+// 清除颜色
+const clearColor = () => {
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, undefined)
+  if (canvasConfig.backgroundImage) {
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+  }
+  switchSelectColorHandle()
 }
 
 // 自定义上传操作
@@ -306,8 +313,8 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
 </script>
 
 <style lang="scss" scoped>
-$updloadWidth: 326px;
-$updloadHeight: 193px;
+$uploadWidth: 326px;
+$uploadHeight: 193px;
 @include go(canvas-setting) {
   padding-top: 20px;
   .upload-box {
@@ -320,12 +327,12 @@ $updloadHeight: 193px;
       }
       .n-upload-dragger {
         padding: 5px;
-        width: $updloadWidth;
+        width: $uploadWidth;
       }
     }
     .upload-show {
       width: -webkit-fill-available;
-      height: $updloadHeight;
+      height: $uploadHeight;
       border-radius: 5px;
     }
     .upload-img {
@@ -343,6 +350,17 @@ $updloadHeight: 193px;
   .icon-position {
     padding-top: 2px;
   }
+  .picker-height {
+    min-height: 35px;
+  }
+  .clear-btn {
+    padding-left: 2.25em;
+    padding-right: 2.25em;
+  }
+  .select-preview-icon {
+    padding-right: .68em;
+    padding-left: .68em;
+  }
   .tabs-box {
     margin-top: 20px;
   }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -41,7 +41,7 @@
             @before-upload="beforeUpload"
           >
             <n-space>
-              <n-button v-if="!ajax" class="sourceBtn-item">
+              <n-button v-if="!ajax" class="sourceBtn-item" :disabled="noData">
                 <template #icon>
                   <n-icon>
                     <document-add-icon />
@@ -52,7 +52,7 @@
             </n-space>
           </n-upload>
           <div>
-            <n-button class="sourceBtn-item" @click="download">
+            <n-button class="sourceBtn-item" :disabled="noData" @click="download">
               <template #icon>
                 <n-icon>
                   <document-download-icon />
@@ -111,6 +111,7 @@ const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
 const source = ref()
 const dimensions = ref()
 const dimensionsAndSource = ref()
+const noData = ref(false)
 
 const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(targetData)
 
@@ -180,6 +181,7 @@ watch(
       dimensionsAndSource.value = null
       source.value = newData
     } else {
+      noData.value = true
       source.value = '此组件无数据源'
     }
     if (isArray(newData)) {

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -5,7 +5,7 @@
     <!-- 尺寸 -->
     <size-setting :isGroup="targetData.isGroup" :chartAttr="targetData.attr"></size-setting>
     <!-- 位置 -->
-    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
+    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig" />
     <!-- 滤镜 -->
     <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
@@ -17,7 +17,6 @@
 import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
 const { targetData, chartEditStore } = useTargetData()
-
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -11,7 +11,8 @@
         ...useComponentStyle(groupData.attr, groupIndex),
         ...useSizeStyle(groupData.attr),
         ...getFilterStyle(groupData.styles),
-        ...getTransformStyle(groupData.styles)
+        ...getTransformStyle(groupData.styles),
+        ...getBlendModeStyle(groupData.styles) as any
       }"
       @click="mouseClickHandle($event, groupData)"
       @mousedown="mousedownHandle($event, groupData)"
@@ -55,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
 import { chartColors } from '@/settings/chartThemes/index'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'
@@ -85,26 +86,32 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
-  // 多选
-  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
-  // 单选
-  const singleMenuEnums = [MenuEnum.UN_GROUP]
-
   const filter = (menulist: MenuEnum[]) => {
-    const list: MenuOptionsItemType[] = []
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
   }
 
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    return filter(moreMenuEnums)
+    return filter([MenuEnum.GROUP, MenuEnum.DELETE])
   } else {
-    return [...filter(singleMenuEnums), divider(), ...targetList]
+    const statusMenuEnums: MenuEnum[] = []
+    if (targetInstance.status.lock) {
+      statusMenuEnums.push(MenuEnum.LOCK)
+    } else {
+      statusMenuEnums.push(MenuEnum.UNLOCK)
+    }
+    if (targetInstance.status.hide) {
+      statusMenuEnums.push(MenuEnum.HIDE)
+    } else {
+      statusMenuEnums.push(MenuEnum.SHOW)
+    }
+    // 单选
+    const singleMenuEnums = [MenuEnum.UN_GROUP]
+    return [
+      ...filter(singleMenuEnums),
+      divider(),
+      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
+    ]
   }
 }
 

src/views/chart/ContentEdit/components/EditHistory/index.vue

@@ -48,8 +48,19 @@ import {
   HistoryActionTypeEnum
 } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 
-const { DesktopOutlineIcon, PencilIcon, TrashIcon, CopyIcon, LayersIcon, DuplicateIcon, HelpOutlineIcon } =
-  icon.ionicons5
+const {
+  DesktopOutlineIcon,
+  PencilIcon,
+  TrashIcon,
+  CopyIcon,
+  LayersIcon,
+  DuplicateIcon,
+  HelpOutlineIcon,
+  LockClosedOutlineIcon,
+  LockOpenOutlineIcon,
+  EyeOffOutlineIcon,
+  EyeOutlineIcon
+} = icon.ionicons5
 const { StackedMoveIcon, Carbon3DCursorIcon, Carbon3DSoftwareIcon } = icon.carbon
 
 const chartHistoryStoreStore = useChartHistoryStore()
@@ -83,6 +94,14 @@ const iconHandle = (e: HistoryItemType) => {
       return Carbon3DCursorIcon
     case HistoryActionTypeEnum.UN_GROUP:
       return Carbon3DSoftwareIcon
+    case HistoryActionTypeEnum.LOCK:
+      return LockClosedOutlineIcon
+    case HistoryActionTypeEnum.UNLOCK:
+      return LockOpenOutlineIcon
+    case HistoryActionTypeEnum.HIDE:
+      return EyeOffOutlineIcon
+    case HistoryActionTypeEnum.SHOW:
+      return EyeOutlineIcon
     default:
       return PencilIcon
   }
@@ -109,9 +128,7 @@ const options = computed(() => {
     }
   })
 
-  return reverse(options.filter(item => {
-    return item.label
-  }))
+  return reverse(options.filter(item => item.label))
 })
 </script>
 

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-shape-box">
+  <div class="go-shape-box" :class="{ lock, hide }">
     <slot></slot>
     <!-- 锚点 -->
     <template v-if="!hiddenPoint">
@@ -55,14 +55,26 @@ const themeColor = computed(() => {
 
 // 计算当前选中目标
 const hover = computed(() => {
+  if (props.item.status.lock) return false
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
 // 兼容多值场景
 const select = computed(() => {
   const id = props.item.id
+  if (props.item.status.lock) return false
   return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
+
+// 锁定
+const lock = computed(() => {
+  return props.item.status.lock
+})
+
+// 隐藏
+const hide = computed(() => {
+  return props.item.status.hide
+})
 </script>
 
 <style lang="scss" scoped>
@@ -70,6 +82,14 @@ const select = computed(() => {
   position: absolute;
   cursor: move;
 
+  &.lock {
+    cursor: default !important;
+  }
+
+  &.hide {
+    display: none;
+  }
+
   /* 锚点 */
   .shape-point {
     z-index: 1;

src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue

@@ -63,6 +63,26 @@ const shortcutKeyOptions = [
     win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
     mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
   },
+  {
+    label: '锁定',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + L `
+  },
+  {
+    label: '解锁',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()}+ L `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + L `
+  },
+  {
+    label: '展示',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + H `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + H `
+  },
+  {
+    label: '隐藏',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + H `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + H `
+  },
   {
     label: '删除',
     win: 'Delete'.toUpperCase(),

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -179,7 +179,8 @@ $asideBottom: 70px;
       }
       @include deep() {
         .n-button__icon {
-          margin-right: 4px;
+          margin-right: 0;
+          margin-left: 0;
           margin-bottom: 12px;
         }
       }

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -140,7 +140,9 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
           targetAttr.x1 - selectAttr.x1 >= 0 &&
           targetAttr.y1 - selectAttr.y1 >= 0 &&
           targetAttr.x2 - selectAttr.x2 <= 0 &&
-          targetAttr.y2 - selectAttr.y2 <= 0
+          targetAttr.y2 - selectAttr.y2 <= 0 &&
+          !item.status.lock &&
+          !item.status.hide
         ) {
           isSelect = true
           chartEditStore.setTargetSelectChart(item.id, true)
@@ -166,6 +168,7 @@ export const useMouseHandle = () => {
   const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
+    if (item.status.lock) return
     // 若此时按下了 CTRL, 表示多选
     if (
       window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
@@ -185,6 +188,7 @@ export const useMouseHandle = () => {
   const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
     e.preventDefault()
     e.stopPropagation()
+    if (item.status.lock) return
     onClickOutSide()
     // 按下左键 + CTRL
     if (

src/views/chart/ContentEdit/index.vue

@@ -37,7 +37,10 @@
               v-else
               :data-id="item.id"
               :index="index"
-              :style="useComponentStyle(item.attr, index)"
+              :style="{
+                ...useComponentStyle(item.attr, index),
+                ...getBlendModeStyle(item.styles) as any
+              }"
               :item="item"
               @click="mouseClickHandle($event, item)"
               @mousedown="mousedownHandle($event, item)"
@@ -81,7 +84,7 @@ import { onMounted, computed } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -116,24 +119,22 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
-  // 多选
-  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
-  // 单选
-  const singleMenuEnums = targetList
-
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    const list: MenuOptionsItemType[] = []
-
-    allList.forEach(item => {
-      // 成组
-      if (moreMenuEnums.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
+  }
+  const statusMenuEnums: MenuEnum[] = []
+  if (targetInstance.status.lock) {
+    statusMenuEnums.push(MenuEnum.LOCK)
+  } else {
+    statusMenuEnums.push(MenuEnum.UNLOCK)
+  }
+  if (targetInstance.status.hide) {
+    statusMenuEnums.push(MenuEnum.HIDE)
+  } else {
+    statusMenuEnums.push(MenuEnum.SHOW)
   }
-  return singleMenuEnums
+  return targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
 }
 
 // 主题色

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -2,7 +2,7 @@
   <div class="go-content-layers-group-list-item">
     <div
       class="root-item-content"
-      :class="{ hover: hover, select: select }"
+      :class="{ hover, select, 'list-mini': selectText }"
       @click="clickHandle($event)"
       @mousedown="groupMousedownHandle($event)"
       @mouseenter="mouseenterHandle(componentGroupData)"
@@ -18,11 +18,12 @@
             <folder-icon></folder-icon>
           </template>
         </n-icon>
-        <n-ellipsis>
+        <n-ellipsis style="margin-right: auto">
           <n-text class="go-ml-2 list-text" :depth="2">
             {{ componentGroupData.chartConfig.title }}
           </n-text>
         </n-ellipsis>
+        <layers-status :isGroup="false" :hover="hover" :status="status"></layers-status>
       </div>
       <div :class="{ 'select-modal': select }"></div>
     </div>
@@ -31,6 +32,8 @@
         v-for="element in componentGroupData.groupList"
         :key="element.id"
         :componentData="element"
+        :layer-mode="layerMode"
+        :isGroup="true"
         @mousedown="mousedownHandle($event, element, componentGroupData.id)"
         @mouseenter="mouseenterHandle(element)"
         @mouseleave="mouseleaveHandle(element)"
@@ -48,15 +51,20 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersListItem } from '../LayersListItem'
-import throttle from 'lodash/throttle'
+import { LayersStatus } from '../LayersStatus/index'
 import { icon } from '@/plugins'
 
 const props = defineProps({
   componentGroupData: {
     type: Object as PropType<CreateComponentGroupType>,
     required: true
+  },
+  layerMode: {
+    type: String as PropType<LayerModeEnum>,
+    default: LayerModeEnum.THUMBNAIL
   }
 })
 
@@ -77,6 +85,27 @@ const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+// 是否选中文本
+const selectText = computed(() => {
+  return props.layerMode === LayerModeEnum.TEXT
+})
+
+// 计算当前选中目标
+const select = computed(() => {
+  const id = props.componentGroupData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
+})
+
+// 悬浮
+const hover = computed(() => {
+  return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
+})
+
+// 组件状态 隐藏/锁定
+const status = computed(() => {
+  return props.componentGroupData.status
+})
+
 // 右键
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
@@ -84,20 +113,29 @@ const optionsHandle = (
   targetInstance: CreateComponentType
 ) => {
   const filter = (menulist: MenuEnum[]) => {
-    const list: MenuOptionsItemType[] = []
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
   }
 
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
     return filter([MenuEnum.GROUP])
   } else {
-    return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
+    const statusMenuEnums: MenuEnum[] = []
+    if (targetInstance.status.lock) {
+      statusMenuEnums.push(MenuEnum.LOCK)
+    } else {
+      statusMenuEnums.push(MenuEnum.UNLOCK)
+    }
+    if (targetInstance.status.hide) {
+      statusMenuEnums.push(MenuEnum.HIDE)
+    } else {
+      statusMenuEnums.push(MenuEnum.SHOW)
+    }
+    return [
+      ...filter([MenuEnum.UN_GROUP]),
+      divider(),
+      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
+    ]
   }
 }
 
@@ -114,17 +152,6 @@ const clickHandle = (e: MouseEvent) => {
   mousedownHandle(e, props.componentGroupData)
 }
 
-// 计算当前选中目标
-const select = computed(() => {
-  const id = props.componentGroupData.id
-  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
-})
-
-// 悬浮
-const hover = computed(() => {
-  return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
-})
-
 // 组点击事件
 const groupMousedownHandle = (e: MouseEvent) => {
   onClickOutSide()
@@ -148,7 +175,11 @@ const groupMousedownHandle = (e: MouseEvent) => {
 }
 
 // 公共点击事件
-const mousedownHandle = (e: MouseEvent, componentInstance: CreateComponentType | CreateComponentGroupType, id?: string) => {
+const mousedownHandle = (
+  e: MouseEvent,
+  componentInstance: CreateComponentType | CreateComponentGroupType,
+  id?: string
+) => {
   e.preventDefault()
   e.stopPropagation()
 
@@ -169,6 +200,7 @@ const mouseleaveHandle = (componentInstance: CreateComponentType | CreateCompone
 
 <style lang="scss" scoped>
 $centerHeight: 52px;
+$centerMiniHeight: 28px;
 $textSize: 10px;
 
 @include go(content-layers-group-list-item) {
@@ -177,6 +209,20 @@ $textSize: 10px;
   margin: 10px 5%;
   margin-bottom: 5px;
   @extend .go-transition-quick;
+  @include deep() {
+    .go-content-layers-list-item {
+      margin-right: 0 !important;
+      width: 95% !important;
+    }
+  }
+
+  &:hover {
+    @include deep() {
+      .icon-item {
+        opacity: 1;
+      }
+    }
+  }
 
   .root-item-content {
     height: $centerHeight;
@@ -196,6 +242,17 @@ $textSize: 10px;
         border: 1px solid v-bind('themeColor') !important;
       }
     }
+
+    // mini样式
+    &.list-mini {
+      height: $centerMiniHeight;
+      .item-content {
+        height: calc(#{$centerMiniHeight} - 10px) !important;
+      }
+      .select-modal {
+        height: calc(#{$centerMiniHeight} + 2px) !important;
+      }
+    }
   }
   .select-modal,
   .item-content {
@@ -220,5 +277,9 @@ $textSize: 10px;
     padding-left: 6px;
     font-size: $textSize;
   }
+
+  .list-status-icon {
+    margin-left: 3px;
+  }
 }
 </style>

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select }">
+  <div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
     <div class="go-flex-center item-content">
       <n-image
         class="list-img"
@@ -8,54 +8,77 @@
         :src="image"
         :fallback-src="requireErrorImg()"
       ></n-image>
-      <n-ellipsis>
+      <n-ellipsis style="margin-right: auto">
         <n-text class="list-text" :depth="2">
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
+      <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
     </div>
     <div :class="{ 'select-modal': select }"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { computed, PropType } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-// 全局颜色
-const designStore = useDesignStore()
-const chartEditStore = useChartEditStore()
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { LayersStatus } from '../LayersStatus/index'
 
 const props = defineProps({
   componentData: {
     type: Object,
     required: true
+  },
+  isGroup: {
+    type: Boolean,
+    default: false
+  },
+  layerMode: {
+    type: String as PropType<LayerModeEnum>,
+    default: LayerModeEnum.THUMBNAIL
   }
 })
 
+// 全局颜色
+const designStore = useDesignStore()
+const chartEditStore = useChartEditStore()
+
 // eslint-disable-next-line vue/no-setup-props-destructure
 const { image } = props.componentData.chartConfig
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // 计算当前选中目标
 const select = computed(() => {
   const id = props.componentData.id
   return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 
+// 悬浮对象
 const hover = computed(() => {
   return props.componentData.id === chartEditStore.getTargetChart.hoverId
 })
+
+// 组件状态 隐藏/锁定
+const status = computed(() => {
+  return props.componentData.status
+})
+
+// 是否选中文本
+const selectText = computed(() => {
+  return props.layerMode === LayerModeEnum.TEXT
+})
 </script>
 
 <style lang="scss" scoped>
 $centerHeight: 52px;
+$centerMiniHeight: 28px;
 $textSize: 10px;
 
 @include go(content-layers-list-item) {
@@ -72,15 +95,14 @@ $textSize: 10px;
   &:hover {
     @include fetch-bg-color('background-color4');
   }
-  /* 选中 */
-  &.select {
-    border: 1px solid v-bind('themeColor');
-    /* 需要设置最高级，覆盖 hover 的颜色 */
-    background-color: rgba(0, 0, 0, 0);
-    .list-img {
-      border: 1px solid v-bind('themeColor') !important;
+  &:hover {
+    @include deep() {
+      .icon-item {
+        opacity: 1;
+      }
     }
   }
+
   .select-modal,
   .item-content {
     position: absolute;
@@ -94,24 +116,39 @@ $textSize: 10px;
     width: calc(100% - 10px);
     height: calc(100% - 10px);
   }
+
   .select-modal {
     width: 100%;
     height: 100%;
     opacity: 0.3;
     background-color: v-bind('themeColor');
   }
+
   .list-img {
     flex-shrink: 0;
     height: $centerHeight;
     border-radius: 5px;
     overflow: hidden;
-    border: 1px solid;
+    border: none !important;
     padding: 2px;
     @include hover-border-color('hover-border-color');
   }
+
   .list-text {
     padding-left: 6px;
     font-size: $textSize;
   }
+
+  /* 选中样式 */
+  &.select {
+    border: 1px solid v-bind('themeColor');
+    /* 需要设置最高级，覆盖 hover 的颜色 */
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  // mini样式
+  &.list-mini {
+    height: $centerMiniHeight;
+  }
 }
 </style>

src/views/chart/ContentLayers/components/LayersStatus/index.ts

@@ -0,0 +1,3 @@
+import LayersStatus from './index.vue'
+
+export { LayersStatus }

src/views/chart/ContentLayers/components/LayersStatus/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="icon-item-box" v-show="!isGroup">
+    <n-icon
+      class="go-ml-1 icon-item"
+      :class="{ active: status.lock }"
+      size="15"
+      :component="status.lock ? LockClosedOutlineIcon : LockOpenOutlineIcon"
+      @click="lockHandle"
+    />
+    <n-icon
+      class="go-ml-1 icon-item"
+      :class="{ active: status.hide }"
+      size="15"
+      :component="status.hide ? EyeOffOutlineIcon : EyeOutlineIcon"
+      @click="showHandle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { StatusType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { icon } from '@/plugins'
+
+const props = defineProps({
+  isGroup: {
+    type: Boolean,
+    default: false
+  },
+  hover: {
+    type: Boolean,
+    default: false
+  },
+  status: {
+    type: Object as PropType<StatusType>,
+    default: () => ({
+      lock: false,
+      hide: false
+    })
+  }
+})
+
+const { LockClosedOutlineIcon, LockOpenOutlineIcon, EyeOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+const designStore = useDesignStore()
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 隐藏 / 展示
+const showHandle = (e: MouseEvent) => {
+  e.stopPropagation()
+  props.status.hide ? chartEditStore.setShow() : chartEditStore.setHide()
+}
+
+// 锁定 / 解锁
+const lockHandle = (e: MouseEvent) => {
+  e.stopPropagation()
+  props.status.lock ? chartEditStore.setUnLock() : chartEditStore.setLock()
+}
+</script>
+
+<style lang="scss" scoped>
+$activeColor: v-bind('themeColor');
+
+.icon-item-box {
+  white-space: nowrap;
+
+  .icon-item {
+    opacity: 0;
+    padding-top: 5px;
+    @extend.go-transition;
+    &.active,
+    &:hover {
+      color: $activeColor;
+    }
+    &.active {
+      opacity: 1 !important;
+    }
+  }
+}
+</style>

src/views/chart/ContentLayers/index.vue

@@ -8,24 +8,49 @@
     @mousedown="boxMousedownHandle($event)"
   >
     <template #icon>
-      <n-icon size="16" :depth="2">
-        <component :is="LayersIcon"></component>
-      </n-icon>
+      <n-icon size="16" :depth="2" :component="LayersIcon" />
     </template>
+
+    <template #top-right>
+      <n-button-group style="display: flex">
+        <n-button
+          v-for="(item, index) in layerModeList"
+          :key="index"
+          ghost
+          size="small"
+          :type="layerMode === item.value ? 'primary' : 'tertiary'"
+          @click="changeLayerType(item.value)"
+        >
+          <n-tooltip :show-arrow="false" trigger="hover">
+            <template #trigger>
+              <n-icon size="14" :component="item.icon" />
+            </template>
+            {{ item.label }}
+          </n-tooltip>
+        </n-button>
+      </n-button-group>
+    </template>
+
     <!-- 图层内容 -->
     <n-space v-if="reverseList.length === 0" justify="center">
       <n-text class="not-layer-text">暂无图层~</n-text>
     </n-space>
+
     <!-- https://github.com/SortableJS/vue.draggable.next -->
     <draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
       <template #item="{ element }">
         <div class="go-content-layer-box">
           <!-- 组合 -->
-          <layers-group-list-item v-if="element.isGroup" :componentGroupData="element"></layers-group-list-item>
+          <layers-group-list-item
+            v-if="element.isGroup"
+            :componentGroupData="element"
+            :layer-mode="layerMode"
+          ></layers-group-list-item>
           <!-- 单组件 -->
           <layers-list-item
             v-else
             :componentData="element"
+            :layer-mode="layerMode"
             @mousedown="mousedownHandle($event, element)"
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
@@ -43,7 +68,7 @@ import Draggable from 'vuedraggable'
 import cloneDeep from 'lodash/cloneDeep'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { ChartLayoutStoreEnum, LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
@@ -55,12 +80,18 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index'
 
 import { icon } from '@/plugins'
 
-const { LayersIcon } = icon.ionicons5
+const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { handleContextMenu, onClickOutSide } = useContextMenu()
 
+const layerModeList = [
+  { label: '缩略图', icon: GridIcon, value: LayerModeEnum.THUMBNAIL },
+  { label: '文本列表', icon: ListIcon, value: LayerModeEnum.TEXT }
+]
+
 const layerList = ref<any>([])
+const layerMode = ref<LayerModeEnum>(chartLayoutStore.getLayerType)
 
 // 逆序展示
 const reverseList = computed(() => {
@@ -83,16 +114,21 @@ const optionsHandle = (
 ) => {
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    const list: MenuOptionsItemType[] = []
-    targetList.forEach(item => {
-      // 成组
-      if (item.key === MenuEnum.GROUP) {
-        list.push(item)
-      }
-    })
-    return list
+    return targetList.filter(i => i.key === MenuEnum.GROUP)
+  }
+  const statusMenuEnums: MenuEnum[] = []
+  // 处理锁定与隐藏
+  if (targetInstance.status.lock) {
+    statusMenuEnums.push(MenuEnum.LOCK)
+  } else {
+    statusMenuEnums.push(MenuEnum.UNLOCK)
   }
-  return targetList
+  if (targetInstance.status.hide) {
+    statusMenuEnums.push(MenuEnum.HIDE)
+  } else {
+    statusMenuEnums.push(MenuEnum.SHOW)
+  }
+  return targetList.filter(item => !statusMenuEnums.includes(item.key as MenuEnum))
 }
 
 // 缩小
@@ -156,10 +192,17 @@ const mouseenterHandle = (item: CreateComponentType) => {
 const mouseleaveHandle = (item: CreateComponentType) => {
   chartEditStore.setTargetHoverChart(undefined)
 }
+
+// 修改图层展示方式
+const changeLayerType = (value: LayerModeEnum) => {
+  layerMode.value = value
+  chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value)
+}
+
 </script>
 
 <style lang="scss" scoped>
-$wight: 170px;
+$wight: 200px;
 @include go(content-layers) {
   width: $wight;
   flex-shrink: 0;
@@ -177,5 +220,8 @@ $wight: 170px;
   .ghost {
     opacity: 0;
   }
+  .go-layer-mode-active {
+    color: #51d6a9;
+  }
 }
 </style>

src/views/chart/hooks/useContextMenu.hook.ts

@@ -7,7 +7,18 @@ import { MenuOptionsItemType } from './useContextMenu.hook.d'
 import { MenuEnum } from '@/enums/editPageEnum'
 import cloneDeep from 'lodash/cloneDeep'
 
-const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5
+const {
+  CopyIcon,
+  CutIcon,
+  ClipboardOutlineIcon,
+  TrashIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  LockOpenOutlineIcon,
+  LockClosedOutlineIcon,
+  EyeOutlineIcon,
+  EyeOffOutlineIcon
+} = icon.ionicons5
 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
@@ -17,7 +28,7 @@ const chartEditStore = useChartEditStore()
  * @param {number} n > 2
  * @returns
  */
-export const divider = (n:number = 3) => {
+export const divider = (n: number = 3) => {
   return {
     type: 'divider',
     key: `d${n}`
@@ -26,6 +37,34 @@ export const divider = (n:number = 3) => {
 
 // * 默认单组件选项
 export const defaultOptions: MenuOptionsItemType[] = [
+  {
+    label: '锁定',
+    key: MenuEnum.LOCK,
+    icon: renderIcon(LockClosedOutlineIcon),
+    fnHandle: chartEditStore.setLock
+  },
+  {
+    label: '解锁',
+    key: MenuEnum.UNLOCK,
+    icon: renderIcon(LockOpenOutlineIcon),
+    fnHandle: chartEditStore.setUnLock
+  },
+  {
+    label: '隐藏',
+    key: MenuEnum.HIDE,
+    icon: renderIcon(EyeOffOutlineIcon),
+    fnHandle: chartEditStore.setHide
+  },
+  {
+    label: '显示',
+    key: MenuEnum.SHOW,
+    icon: renderIcon(EyeOutlineIcon),
+    fnHandle: chartEditStore.setShow
+  },
+  {
+    type: 'divider',
+    key: 'd0'
+  },
   {
     label: '复制',
     key: MenuEnum.COPY,
@@ -61,13 +100,13 @@ export const defaultOptions: MenuOptionsItemType[] = [
     fnHandle: chartEditStore.setBottom
   },
   {
-    label: '上移一层',
+    label: '上移',
     key: MenuEnum.UP,
     icon: renderIcon(ChevronUpIcon),
     fnHandle: chartEditStore.setUp
   },
   {
-    label: '下移一层',
+    label: '下移',
     key: MenuEnum.DOWN,
     icon: renderIcon(ChevronDownIcon),
     fnHandle: chartEditStore.setDown
@@ -160,7 +199,9 @@ const handleContextMenu = (
     target = target.parentNode
   }
 
-  // 展示列表
+  chartEditStore.setTargetSelectChart(targetInstance && targetInstance.id)
+
+  // 隐藏旧列表
   chartEditStore.setRightMenuShow(false)
 
   // * 多选默认选项

src/views/chart/hooks/useKeyboard.hook.ts

@@ -26,6 +26,10 @@ export const winKeyboardValue = {
   [MenuEnum.SAVE]: winCtrlMerge('s'),
   [MenuEnum.GROUP]: winCtrlMerge('g'),
   [MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')),
+  [MenuEnum.LOCK]: winCtrlMerge('l'),
+  [MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
+  [MenuEnum.HIDE]: winCtrlMerge('h'),
+  [MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
 }
 
 // 这个 Ctrl 后面还是换成了 ⌘
@@ -48,6 +52,10 @@ export const macKeyboardValue = {
   [MenuEnum.SAVE]: macCtrlMerge('s'),
   [MenuEnum.GROUP]: macCtrlMerge('g'),
   [MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')),
+  [MenuEnum.LOCK]: macCtrlMerge('l'),
+  [MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
+  [MenuEnum.HIDE]: macCtrlMerge('h'),
+  [MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
 }
 
 // Win 快捷键列表
@@ -68,6 +76,12 @@ const winKeyList: Array<string> = [
   winKeyboardValue.save,
   winKeyboardValue.group,
   winKeyboardValue.unGroup,
+
+  winKeyboardValue.lock,
+  winKeyboardValue.unLock,
+
+  winKeyboardValue.hide,
+  winKeyboardValue.show,
 ]
 
 // Mac 快捷键列表
@@ -88,6 +102,12 @@ const macKeyList: Array<string> = [
   macKeyboardValue.save,
   macKeyboardValue.group,
   macKeyboardValue.unGroup,
+
+  macKeyboardValue.lock,
+  macKeyboardValue.unLock,
+
+  macKeyboardValue.hide,
+  macKeyboardValue.show,
 ]
 
 // 处理键盘记录
@@ -162,6 +182,24 @@ export const useAddKeyboard = () => {
         keymaster(e, throttle(() => { chartEditStore.setUnGroup(); return false }, throttleTime))
         break;
 
+      // 锁定 ct+l
+      case keyboardValue.lock:
+        keymaster(e, throttle(() => { chartEditStore.setLock(); return false }, throttleTime))
+        break;
+      // 解除锁定 ct+sh+l
+      case keyboardValue.unLock:
+        keymaster(e, throttle(() => { chartEditStore.setUnLock(); return false }, throttleTime))
+        break;
+
+      // 锁定 ct+h
+      case keyboardValue.hide:
+        keymaster(e, throttle(() => { chartEditStore.setHide(); return false }, throttleTime))
+        break;
+      // 解除锁定 ct+sh+h
+      case keyboardValue.show:
+        keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime))
+        break;
+
       // 保存 ct+s
       case keyboardValue.save:
         keymaster(e, throttle(() => { useSyncIns.dataSyncUpdate(); return false }, 200))

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -7,7 +7,9 @@
     :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status),
+      ...getBlendModeStyle(item.styles) as any
     }"
   >
     <component
@@ -23,8 +25,8 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({
   groupData: {

src/views/preview/components/PreviewRenderList/index.vue

@@ -7,8 +7,10 @@
     :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles)
-    }"
+      ...getTransformStyle(item.styles),
+      ...getStatusStyle(item.status),
+      ...getBlendModeStyle(item.styles) as any
+    } as any"
   >
     <!-- 分组 -->
     <preview-render-group
@@ -37,8 +39,8 @@ import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {

src/views/preview/utils/style.ts

@@ -2,7 +2,7 @@ import { PickCreateComponentType } from '@/packages/index.d'
 import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 type AttrType = PickCreateComponentType<'attr'>
-type StylesType = PickCreateComponentType<'styles'>
+type StatusType = PickCreateComponentType<'status'>
 
 // 设置位置
 export const getComponentAttrStyle = (attr: AttrType, index: number) => {
@@ -16,10 +16,17 @@ export const getComponentAttrStyle = (attr: AttrType, index: number) => {
 
 // 设置大小
 export const getSizeStyle = (attr: AttrType, scale?: number) => {
-  return ({
+  return {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`
-  })
+  }
+}
+
+// 设置状态样式
+export const getStatusStyle = (attr: StatusType) => {
+  return {
+    display: attr.hide ? 'none' : 'block'
+  }
 }
 
 // 全局样式