Merge branch 'dev' of https://gitee.com/MTrun/go-view

.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
-
+    dev: true
-  /ansi-styles/5.2.0:
-    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
-    engines: {node: '>=10'}
-    dev: false
 
   /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

@@ -27,7 +27,6 @@ axiosInstance.interceptors.response.use(
     return Promise.resolve(res.data)
   },
   (err: AxiosResponse) => {
-    window['$message'].error('接口异常，请检查！')
     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) {
+    .n-list-item {
-      border-bottom: 0;
+      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,15 @@ export enum MenuEnum {
   // 后退
   BACK = 'back',
   // 前进
-  FORWORD = 'forward'
+  FORWORD = 'forward',
+  // 锁定
+  LOCK = 'lock',
+  // 解除锁定
+  UNLOCK = 'unLock',
+  // 隐藏
+  HIDE = 'hide',
+  // 显示
+  SHOW = 'show'
 }
 
 // Win 键盘枚举
@@ -49,9 +57,9 @@ export enum WinKeyboard {
   CTRL = 'ctrl',
   SHIFT = 'shift',
   ALT = ' alt',
-  CTRL_SOURCE_KEY = "control",
+  CTRL_SOURCE_KEY = 'control',
-  SHIFT_SOURCE_KEY = "shift",
+  SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = "alt"
+  ALT_SOURCE_KEY = 'alt'
 }
 
 // Mac 键盘枚举
@@ -60,7 +68,7 @@ export enum MacKeyboard {
   CTRL = '⌘',
   SHIFT = '⇧',
   ALT = '⌥',
-  CTRL_SOURCE_KEY = "⌘",
+  CTRL_SOURCE_KEY = '⌘',
-  SHIFT_SOURCE_KEY = "⇧",
+  SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = "⌥"
+  ALT_SOURCE_KEY = '⌥'
 }

src/enums/httpEnum.ts

@@ -7,7 +7,7 @@ export enum ResultEnum {
   SERVER_ERROR = 500,
   SERVER_FORBIDDEN = 403,
   NOT_FOUND = 404,
-  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) => {
+  (newData: { dimensions: any }, oldData) => {
-    if (newData.dimensions.length !== oldData.dimensions.length) {
+    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)',
+        backgroundColor: '#00000060',
-        borderColor: 'rgba(147, 235, 248, .8)',
+        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 hainanLandsHandle(newData)
-      await getGeojson('china')
-    } else {
-      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-    }
     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
+        <n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
-          v-model:value="header"
-          :min="1"
-          size="small"
-          placeholder="表头数据(英文','分割)"
-        ></n-input>
       </SettingItem>
       <SettingItem name="列对齐方式">
-        <n-input
+        <n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
-          v-model:value="align"
-          :min="1"
-          size="small"
-          placeholder="对齐方式(英文','分割)"
-        ></n-input>
       </SettingItem>
       <SettingItem name="列宽度">
-        <n-input
+        <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
-          v-model:value="columnWidth"
-          :min="1"
-          size="small"
-          placeholder="列宽度(英文','分割)"
-        ></n-input>
       </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">
       <SettingItem name="表头背景色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.headerBGC"
-        ></n-color-picker>
       </SettingItem>
       <SettingItem name="奇数行背景色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.oddRowBGC"
-        ></n-color-picker>
       </SettingItem>
       <SettingItem name="偶数行背景色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></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 {
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-  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 header = ref()
-const align = ref(props.optionData.align.toString())
+const align = ref()
-const columnWidth = ref(props.optionData.columnWidth.toString())
+const columnWidth = ref()
 
-watch([header, align, columnWidth],([headerNew,alignNew,columnWidthNew],[headerOld,alignOld,columnWidthOld])=>{
+watch(
-  if(headerNew !== headerOld){
+  () => 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) {
     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

@@ -57,7 +57,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 {
@@ -211,7 +216,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/designColorRecommend.json

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

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

@@ -77,6 +77,7 @@ export interface 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

@@ -97,6 +97,8 @@ export const useChartEditStore = defineStore({
       rotateY: 0,
       skewX: 0,
       skewY: 0,
+      // 混合模式
+      blendMode: 'normal',
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,
@@ -532,6 +534,10 @@ export const useChartEditStore = defineStore({
         return
       }
 
+      // 取消选中
+      this.setTargetSelectChart()
+
+      // 重新选中
       let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
@@ -602,7 +608,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)
             })
           }
@@ -617,6 +624,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() {
@@ -795,6 +834,72 @@ 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 {

src/store/modules/chartHistoryStore/chartHistoryDefine.ts

@@ -1,23 +1,23 @@
-import {
+import { HistoryTargetTypeEnum, HistoryActionTypeEnum } from './chartHistoryStore.d'
-  HistoryTargetTypeEnum,
-  HistoryActionTypeEnum
-} from './chartHistoryStore.d'
 
 export const historyActionTypeName = {
-  [HistoryActionTypeEnum.ADD]: '新增图表',
+  [HistoryActionTypeEnum.ADD]: '新增',
-  [HistoryActionTypeEnum.DELETE]: '删除图表',
+  [HistoryActionTypeEnum.DELETE]: '删除',
-  [HistoryActionTypeEnum.UPDATE]: '修改属性',
+  [HistoryActionTypeEnum.UPDATE]: '更新',
-  [HistoryActionTypeEnum.MOVE]: '移动图表',
+  [HistoryActionTypeEnum.MOVE]: '移动',
-  [HistoryActionTypeEnum.PASTE]: '粘贴图表',
+  [HistoryActionTypeEnum.PASTE]: '粘贴',
-  [HistoryActionTypeEnum.COPY]: '复制图表',
+  [HistoryActionTypeEnum.COPY]: '复制',
-  [HistoryActionTypeEnum.CUT]: '剪切图表',
+  [HistoryActionTypeEnum.CUT]: '剪切',
-  [HistoryActionTypeEnum.TOP]: '层级置顶',
+  [HistoryActionTypeEnum.TOP]: '置顶',
-  [HistoryActionTypeEnum.BOTTOM]: '层级置底',
+  [HistoryActionTypeEnum.BOTTOM]: '置底',
-  [HistoryActionTypeEnum.UP]: '层级上移',
+  [HistoryActionTypeEnum.UP]: '上移',
-  [HistoryActionTypeEnum.DOWN]: '层级下移',
+  [HistoryActionTypeEnum.DOWN]: '下移',
-  [HistoryActionTypeEnum.GROUP]: '创建分组',
+  [HistoryActionTypeEnum.GROUP]: '成组',
-  [HistoryActionTypeEnum.UN_GROUP]: '解除分组',
+  [HistoryActionTypeEnum.UN_GROUP]: '解组',
-  [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
+  [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 "./var.scss";
-@import './format.scss';
+@import "./format.scss";
-@import './animation.scss';
+@import "./animation.scss";
-@import './mixins/mixins.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
+        <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
-          v-show="backIcon"
-          size="20"
-          class="go-cursor-pointer"
-          @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(
+    height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
-      100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}
-    );
   }
 }
 </style>

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

@@ -30,17 +30,11 @@
         :onBeforeUpload="beforeUploadHandle"
       >
         <n-upload-dragger>
-          <img
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
-            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-text>背景颜色</n-text>
-        <n-color-picker
+        <div class="picker-height">
-          style="width: 326px;"
+          <n-color-picker
-          :showPreview="true"
+            v-if="!switchSelectColorLoading"
-          :swatches="swatchesColors"
+            size="small"
-          v-model:value="canvasConfig.background"
+            style="width: 250px"
-        ></n-color-picker>
+            v-model:value="canvasConfig.background"
+            :showPreview="true"
+            :swatches="swatchesColors"
+          ></n-color-picker>
+        </div>
       </n-space>
       <n-space>
-        <n-text>颜色应用</n-text>
+        <n-text>应用类型</n-text>
-        <n-switch
+        <n-select
           size="small"
-          v-model:value="canvasConfig.selectColor"
+          style="width: 250px"
-          :loading="switchSelectColorLoading"
+          v-model:value="selectColorValue"
-          :round="false"
           :disabled="!canvasConfig.backgroundImage"
-          :onUpdate="switchSelectColorHandle"
+          :options="selectColorOptions"
-        ></n-switch>
+          @update:value="selectColorValueHandle"
+        />
       </n-space>
       <n-space>
         <n-text>背景控制</n-text>
-        <n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
+        <n-button class="clear-btn" size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">
-        <n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
+          清除背景
+        </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 
+          <n-button
-            ghost
             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'
@@ -143,23 +146,25 @@ const editCanvas = chartEditStore.getEditCanvas
 
 const uploadFileListRef = ref()
 const switchSelectColorLoading = ref(false)
+const selectColorValue = ref(0)
 
-const ChartThemeColor = loadAsyncComponent(() =>
+const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
-  import('./components/ChartThemeColor/index.vue')
-)
 
-// 北京默认展示颜色列表
+// 默认应用类型
-const swatchesColors = [
+const selectColorOptions = [
-  '#232324',
+  {
-  '#2a2a2b',
+    label: '应用颜色',
-  '#313132',
+    value: 0
-  '#373739',
+  },
-  '#757575',
+  {
-  '#e0e0e0',
+    label: '应用背景',
-  '#eeeeee',
+    value: 1
-  '#fafafa'
+  }
 ]
 
+// 默认展示颜色列表
+const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
+
 const globalTabList = [
   {
     key: 'ChartTheme',
@@ -193,9 +198,19 @@ const previewTypeList = [
     title: '铺满',
     icon: FitToScreenIcon,
     desc: '强行拉伸画面，填充所有视图'
-  },
+  }
 ]
 
+watch(
+  () => canvasConfig.selectColor,
+  newValue => {
+    selectColorValue.value = newValue ? 0 : 1
+  },
+  {
+    immediate: true
+  }
+)
+
 // 画布尺寸规则
 const validator = (x: number) => x > 50
 
@@ -212,9 +227,7 @@ const beforeUploadHandle = async ({ file }) => {
   const size = file.file.size
 
   if (size > 1024 * 1024 * backgroundImageSize) {
-    window['$message'].warning(
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
-      `图片超出 ${backgroundImageSize}M 限制，请重新上传！`
-    )
     return false
   }
   if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
@@ -224,38 +237,32 @@ const beforeUploadHandle = async ({ file }) => {
   return true
 }
 
+// 应用颜色
+const selectColorValueHandle = (value: number) => {
+  canvasConfig.selectColor = value == 0
+}
+
 // 清除背景
 const clearImage = () => {
-  chartEditStore.setEditCanvasConfig(
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
-    EditCanvasConfigEnum.BACKGROUND_IMAGE,
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, true)
-    undefined
-  )
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.SELECT_COLOR,
-    true
-  )
 }
 
-// 清除颜色
+// 启用/关闭 颜色（强制更新）
-const clearColor = () => {
-  chartEditStore.setEditCanvasConfig(
-    EditCanvasConfigEnum.BACKGROUND,
-    undefined
-  )
-  if (canvasConfig.backgroundImage) {
-    chartEditStore.setEditCanvasConfig(
-      EditCanvasConfigEnum.SELECT_COLOR,
-      false
-    )
-  }
-}
-
-// 启用/关闭 颜色
 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()
 }
 
 // 自定义上传操作
@@ -264,14 +271,8 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   nextTick(() => {
     if (file.file) {
       const ImageUrl = fileToUrl(file.file)
-      chartEditStore.setEditCanvasConfig(
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl)
-        EditCanvasConfigEnum.BACKGROUND_IMAGE,
+      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
-        ImageUrl
-      )
-      chartEditStore.setEditCanvasConfig(
-        EditCanvasConfigEnum.SELECT_COLOR,
-        false
-      )
     } else {
       window['$message'].error('添加图片失败，请稍后重试！')
     }
@@ -285,8 +286,8 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
 </script>
 
 <style lang="scss" scoped>
-$updloadWidth: 326px;
+$uploadWidth: 326px;
-$updloadHeight: 193px;
+$uploadHeight: 193px;
 @include go(canvas-setting) {
   padding-top: 20px;
   .upload-box {
@@ -299,12 +300,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 {
@@ -322,6 +323,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[] = []
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
 
   // 多选处理
   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 } =
+const {
-  icon.ionicons5
+  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 reverse(options.filter(item => item.label))
-    return 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'
@@ -114,24 +117,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[] = []
+    return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
-
-    allList.forEach(item => {
-      // 成组
-      if (moreMenuEnums.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
-  return singleMenuEnums
+  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 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[] = []
+    return allList.filter(i => menulist.includes(i.key as MenuEnum))
-    allList.forEach(item => {
-      if (menulist.includes(item.key as MenuEnum)) {
-        list.push(item)
-      }
-    })
-    return list
   }
 
   // 多选处理
   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'
-
+import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-// 全局颜色
+import { LayersStatus } from '../LayersStatus/index'
-const designStore = useDesignStore()
-const chartEditStore = useChartEditStore()
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
 
 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');
   }
-  /* 选中 */
+  &:hover {
-  &.select {
+    @include deep() {
-    border: 1px solid v-bind('themeColor');
+      .icon-item {
-    /* 需要设置最高级，覆盖 hover 的颜色 */
+        opacity: 1;
-    background-color: rgba(0, 0, 0, 0);
+      }
-    .list-img {
-      border: 1px solid v-bind('themeColor') !important;
     }
   }
+
   .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">
+      <n-icon size="16" :depth="2" :component="LayersIcon" />
-        <component :is="LayersIcon"></component>
-      </n-icon>
     </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[] = []
+    return targetList.filter(i => i.key === MenuEnum.GROUP)
-    targetList.forEach(item => {
-      // 成组
-      if (item.key === MenuEnum.GROUP) {
-        list.push(item)
-      }
-    })
-    return list
   }
-  return 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 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

@@ -24,6 +24,10 @@ export const winKeyboardValue = {
   [MenuEnum.FORWORD]: winCtrlMerge(winShiftMerge('z')),
   [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 后面还是换成了 ⌘
@@ -45,6 +49,10 @@ export const macKeyboardValue = {
   [MenuEnum.FORWORD]: macCtrlMerge(macShiftMerge('z')),
   [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 快捷键列表
@@ -64,6 +72,12 @@ const winKeyList: Array<string> = [
 
   winKeyboardValue.group,
   winKeyboardValue.unGroup,
+
+  winKeyboardValue.lock,
+  winKeyboardValue.unLock,
+
+  winKeyboardValue.hide,
+  winKeyboardValue.show,
 ]
 
 // Mac 快捷键列表
@@ -83,6 +97,12 @@ const macKeyList: Array<string> = [
 
   macKeyboardValue.group,
   macKeyboardValue.unGroup,
+
+  macKeyboardValue.lock,
+  macKeyboardValue.unLock,
+
+  macKeyboardValue.hide,
+  macKeyboardValue.show,
 ]
 
 // 处理键盘记录
@@ -156,6 +176,24 @@ export const useAddKeyboard = () => {
       case keyboardValue.unGroup:
         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;
     }
   }
   winKeyList.forEach((key: string) => {

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 { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } 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 { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle } 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'
+  }
 }
 
 // 全局样式