mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 00:02:51 +08:00
feat: 合并1.1.1
This commit is contained in:
奔跑的面条
commit
b93a2a516a
@ -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'
|
||||
|
||||
21
index.css
21
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%);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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",
|
||||
|
||||
440
pnpm-lock.yaml
440
pnpm-lock.yaml
@ -38,7 +38,7 @@ specifiers:
|
||||
lodash: ~4.17.21
|
||||
mockjs: ^1.1.0
|
||||
monaco-editor: ^0.33.0
|
||||
naive-ui: 2.30.3
|
||||
naive-ui: 2.33.3
|
||||
pinia: ^2.0.13
|
||||
plop: ^3.0.5
|
||||
prettier: ^2.6.2
|
||||
@ -77,7 +77,7 @@ dependencies:
|
||||
html2canvas: 1.4.1
|
||||
keymaster: 1.6.2
|
||||
monaco-editor: 0.33.0
|
||||
naive-ui: 2.30.3_vue@3.2.37
|
||||
naive-ui: registry.npmmirror.com/naive-ui/2.33.3_vue@3.2.37
|
||||
pinia: 2.0.14_ub5l46u3nefphax5x2tezui4oq
|
||||
screenfull: 6.0.1
|
||||
vue: 3.2.37
|
||||
@ -458,7 +458,7 @@ packages:
|
||||
engines: {node: '>=v14'}
|
||||
dependencies:
|
||||
'@commitlint/types': 17.0.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
dev: true
|
||||
|
||||
/@commitlint/execute-rule/17.0.0:
|
||||
@ -500,11 +500,11 @@ packages:
|
||||
'@commitlint/execute-rule': 17.0.0
|
||||
'@commitlint/resolve-extends': 17.0.0
|
||||
'@commitlint/types': 17.0.0
|
||||
'@types/node': 17.0.43
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
chalk: 4.1.2
|
||||
cosmiconfig: 7.0.1
|
||||
cosmiconfig-typescript-loader: 2.0.1_sg2ukyc6p547g74ru6fclbyzsu
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
resolve-from: 5.0.0
|
||||
typescript: 4.7.3
|
||||
transitivePeerDependencies:
|
||||
@ -543,7 +543,7 @@ packages:
|
||||
'@commitlint/config-validator': 17.0.0
|
||||
'@commitlint/types': 17.0.0
|
||||
import-fresh: 3.3.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
resolve-from: 5.0.0
|
||||
resolve-global: 1.0.0
|
||||
dev: true
|
||||
@ -585,22 +585,6 @@ packages:
|
||||
'@jridgewell/trace-mapping': 0.3.9
|
||||
dev: true
|
||||
|
||||
/@css-render/plugin-bem/0.15.10_css-render@0.15.10:
|
||||
resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==}
|
||||
peerDependencies:
|
||||
css-render: ~0.15.10
|
||||
dependencies:
|
||||
css-render: 0.15.10
|
||||
dev: false
|
||||
|
||||
/@css-render/vue3-ssr/0.15.10_vue@3.2.37:
|
||||
resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/@emmetio/abbreviation/2.2.3:
|
||||
resolution: {integrity: sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA==}
|
||||
dependencies:
|
||||
@ -617,10 +601,6 @@ packages:
|
||||
resolution: {integrity: sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==}
|
||||
dev: true
|
||||
|
||||
/@emotion/hash/0.8.0:
|
||||
resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
|
||||
dev: false
|
||||
|
||||
/@eslint/eslintrc/1.3.0:
|
||||
resolution: {integrity: sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
@ -754,10 +734,6 @@ packages:
|
||||
'@jridgewell/sourcemap-codec': 1.4.13
|
||||
dev: true
|
||||
|
||||
/@juggle/resize-observer/3.3.1:
|
||||
resolution: {integrity: sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==}
|
||||
dev: false
|
||||
|
||||
/@nodelib/fs.scandir/2.1.5:
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
engines: {node: '>= 8'}
|
||||
@ -863,13 +839,6 @@ packages:
|
||||
rxjs: 7.5.5
|
||||
dev: true
|
||||
|
||||
/@types/jest/27.5.2:
|
||||
resolution: {integrity: sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==}
|
||||
dependencies:
|
||||
jest-matcher-utils: 27.5.1
|
||||
pretty-format: 27.5.1
|
||||
dev: false
|
||||
|
||||
/@types/json-schema/7.0.11:
|
||||
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
|
||||
dev: true
|
||||
@ -886,15 +855,9 @@ packages:
|
||||
resolution: {integrity: sha512-Ny/PJkO6nxWAQnaet8q/oWz15lrfwvdvBpuY4treB0CSsBO1CG0fVuNLngR3m3bepQLd+E4c3Y3DlC2okpUvPw==}
|
||||
dependencies:
|
||||
'@types/fined': 1.1.3
|
||||
'@types/node': 16.11.40
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
dev: true
|
||||
|
||||
/@types/lodash-es/4.17.6:
|
||||
resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.185
|
||||
dev: false
|
||||
|
||||
/@types/lodash/4.14.185:
|
||||
resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==}
|
||||
dev: false
|
||||
@ -911,9 +874,6 @@ packages:
|
||||
resolution: {integrity: sha512-7bOWglXUO6f21NG3YDI7hIpeMX3M59GG+DzZuzX2EkFKYUnRoxq3EOg4R0KNv2hxryY9M3UUqG5akwwsifrukw==}
|
||||
dev: true
|
||||
|
||||
/@types/node/17.0.43:
|
||||
resolution: {integrity: sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA==}
|
||||
|
||||
/@types/normalize-package-data/2.4.1:
|
||||
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
|
||||
dev: true
|
||||
@ -925,13 +885,13 @@ packages:
|
||||
/@types/resolve/1.17.1:
|
||||
resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
|
||||
dependencies:
|
||||
'@types/node': 17.0.43
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
dev: true
|
||||
|
||||
/@types/through/0.0.30:
|
||||
resolution: {integrity: sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==}
|
||||
dependencies:
|
||||
'@types/node': 17.0.43
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/eslint-plugin/5.28.0_evi7yu7wunhzwb24olrfvzynny:
|
||||
@ -1223,7 +1183,7 @@ packages:
|
||||
dependencies:
|
||||
'@vue/runtime-core': 3.2.37
|
||||
'@vue/shared': 3.2.37
|
||||
csstype: 2.6.20
|
||||
csstype: registry.npmmirror.com/csstype/2.6.20
|
||||
|
||||
/@vue/server-renderer/3.2.37_vue@3.2.37:
|
||||
resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
|
||||
@ -1332,6 +1292,7 @@ packages:
|
||||
/ansi-regex/5.0.1:
|
||||
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/ansi-regex/6.0.1:
|
||||
resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
|
||||
@ -1350,11 +1311,7 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
|
||||
/ansi-styles/5.2.0:
|
||||
resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
|
||||
engines: {node: '>=10'}
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/anymatch/3.1.2:
|
||||
resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
|
||||
@ -1425,10 +1382,6 @@ packages:
|
||||
resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
|
||||
dev: true
|
||||
|
||||
/async-validator/4.1.1:
|
||||
resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
|
||||
dev: false
|
||||
|
||||
/asynckit/0.4.0:
|
||||
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
|
||||
dev: false
|
||||
@ -1603,6 +1556,7 @@ packages:
|
||||
dependencies:
|
||||
ansi-styles: 4.3.0
|
||||
supports-color: 7.2.0
|
||||
dev: true
|
||||
|
||||
/chalk/5.0.1:
|
||||
resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
|
||||
@ -1802,7 +1756,7 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
dependencies:
|
||||
compare-func: 2.0.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
q: 1.5.1
|
||||
dev: true
|
||||
|
||||
@ -1813,7 +1767,7 @@ packages:
|
||||
dependencies:
|
||||
JSONStream: 1.3.5
|
||||
is-text-path: 1.0.1
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
meow: 8.1.2
|
||||
split2: 3.2.2
|
||||
through2: 4.0.2
|
||||
@ -1832,7 +1786,7 @@ packages:
|
||||
'@types/node': '*'
|
||||
typescript: '>=3'
|
||||
dependencies:
|
||||
'@types/node': 17.0.43
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
cosmiconfig: 7.0.1
|
||||
ts-node: 10.8.1_sg2ukyc6p547g74ru6fclbyzsu
|
||||
typescript: 4.7.3
|
||||
@ -1875,45 +1829,17 @@ packages:
|
||||
utrie: 1.0.2
|
||||
dev: false
|
||||
|
||||
/css-render/0.15.10:
|
||||
resolution: {integrity: sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==}
|
||||
dependencies:
|
||||
'@emotion/hash': 0.8.0
|
||||
'@types/node': 17.0.43
|
||||
csstype: 3.0.11
|
||||
dev: false
|
||||
|
||||
/cssesc/3.0.0:
|
||||
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/csstype/2.6.20:
|
||||
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
|
||||
|
||||
/csstype/3.0.11:
|
||||
resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
|
||||
dev: false
|
||||
|
||||
/dargs/7.0.0:
|
||||
resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/date-fns-tz/1.3.4_date-fns@2.28.0:
|
||||
resolution: {integrity: sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==}
|
||||
peerDependencies:
|
||||
date-fns: '>=2.0.0'
|
||||
dependencies:
|
||||
date-fns: 2.28.0
|
||||
dev: false
|
||||
|
||||
/date-fns/2.28.0:
|
||||
resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==}
|
||||
engines: {node: '>=0.11'}
|
||||
dev: false
|
||||
|
||||
/debug/2.6.9:
|
||||
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
|
||||
peerDependencies:
|
||||
@ -2012,11 +1938,6 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/diff-sequences/27.5.1:
|
||||
resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
|
||||
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
|
||||
dev: false
|
||||
|
||||
/diff/4.0.2:
|
||||
resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
|
||||
engines: {node: '>=0.3.1'}
|
||||
@ -2476,10 +2397,6 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/evtd/0.2.3:
|
||||
resolution: {integrity: sha512-tmiT1YUVqFjTY+BSBOAskL83xNx41iUfpvKP6Gcd/xMHjg3mnER98jXGXJyKnxCG19uPc6EhZiUC+MUyvoqCtw==}
|
||||
dev: false
|
||||
|
||||
/execa/5.1.1:
|
||||
resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
|
||||
engines: {node: '>=10'}
|
||||
@ -2748,7 +2665,7 @@ packages:
|
||||
hasBin: true
|
||||
dependencies:
|
||||
dargs: 7.0.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
meow: 8.1.2
|
||||
split2: 3.2.2
|
||||
through2: 4.0.2
|
||||
@ -2875,6 +2792,7 @@ packages:
|
||||
/has-flag/4.0.0:
|
||||
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/has-property-descriptors/1.0.0:
|
||||
resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
|
||||
@ -3031,7 +2949,7 @@ packages:
|
||||
cli-width: 3.0.0
|
||||
external-editor: 3.1.0
|
||||
figures: 3.2.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
mute-stream: 0.0.8
|
||||
ora: 5.4.1
|
||||
run-async: 2.4.1
|
||||
@ -3291,31 +3209,6 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/jest-diff/27.5.1:
|
||||
resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==}
|
||||
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
|
||||
dependencies:
|
||||
chalk: 4.1.2
|
||||
diff-sequences: 27.5.1
|
||||
jest-get-type: 27.5.1
|
||||
pretty-format: 27.5.1
|
||||
dev: false
|
||||
|
||||
/jest-get-type/27.5.1:
|
||||
resolution: {integrity: sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==}
|
||||
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
|
||||
dev: false
|
||||
|
||||
/jest-matcher-utils/27.5.1:
|
||||
resolution: {integrity: sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==}
|
||||
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
|
||||
dependencies:
|
||||
chalk: 4.1.2
|
||||
jest-diff: 27.5.1
|
||||
jest-get-type: 27.5.1
|
||||
pretty-format: 27.5.1
|
||||
dev: false
|
||||
|
||||
/js-stringify/1.0.2:
|
||||
resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
|
||||
dev: true
|
||||
@ -3452,10 +3345,6 @@ packages:
|
||||
p-locate: 5.0.0
|
||||
dev: true
|
||||
|
||||
/lodash-es/4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
dev: false
|
||||
|
||||
/lodash.get/4.4.2:
|
||||
resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
|
||||
dev: true
|
||||
@ -3466,6 +3355,7 @@ packages:
|
||||
|
||||
/lodash/4.17.21:
|
||||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||
dev: true
|
||||
|
||||
/log-symbols/4.1.0:
|
||||
resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
|
||||
@ -3634,31 +3524,6 @@ packages:
|
||||
resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
|
||||
dev: true
|
||||
|
||||
/naive-ui/2.30.3_vue@3.2.37:
|
||||
resolution: {integrity: sha512-s6iphodOfLklhgAGtzhzoE0oPi6eY72UufUDRySBbfV+r+64vw9omYUOqk3Z1M/t/Mh8KwqW6z+ex8bYftFKPA==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': 0.15.10_css-render@0.15.10
|
||||
'@css-render/vue3-ssr': 0.15.10_vue@3.2.37
|
||||
'@types/lodash': 4.14.185
|
||||
'@types/lodash-es': 4.17.6
|
||||
async-validator: 4.1.1
|
||||
css-render: 0.15.10
|
||||
date-fns: 2.28.0
|
||||
date-fns-tz: 1.3.4_date-fns@2.28.0
|
||||
evtd: 0.2.3
|
||||
highlight.js: 11.5.1
|
||||
lodash: 4.17.21
|
||||
lodash-es: 4.17.21
|
||||
seemly: 0.3.4
|
||||
treemate: 0.3.11
|
||||
vdirs: 0.1.8_vue@3.2.37
|
||||
vooks: 0.2.12_vue@3.2.37
|
||||
vue: 3.2.37
|
||||
vueuc: 0.4.44_vue@3.2.37
|
||||
dev: false
|
||||
|
||||
/nanoid/3.3.4:
|
||||
resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
|
||||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||
@ -4100,15 +3965,6 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/pretty-format/27.5.1:
|
||||
resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
|
||||
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
|
||||
dependencies:
|
||||
ansi-regex: 5.0.1
|
||||
ansi-styles: 5.2.0
|
||||
react-is: 17.0.2
|
||||
dev: false
|
||||
|
||||
/promise/7.3.1:
|
||||
resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
|
||||
dependencies:
|
||||
@ -4225,10 +4081,6 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/react-is/17.0.2:
|
||||
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
|
||||
dev: false
|
||||
|
||||
/read-pkg-up/7.0.1:
|
||||
resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
|
||||
engines: {node: '>=8'}
|
||||
@ -4444,12 +4296,6 @@ packages:
|
||||
engines: {node: ^14.13.1 || >=16.0.0}
|
||||
dev: false
|
||||
|
||||
/seemly/0.3.4:
|
||||
resolution: {integrity: sha512-/crL+UfbtYd6NdLdnf58xaABfeSRt5uKE4N1SFQAW7nIznOrJQchAaslJHxV8/iAfV0LWInrmxJBFdDb0c2/sw==}
|
||||
dependencies:
|
||||
'@types/jest': 27.5.2
|
||||
dev: false
|
||||
|
||||
/semver/5.7.1:
|
||||
resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
|
||||
hasBin: true
|
||||
@ -4650,6 +4496,7 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
has-flag: 4.0.0
|
||||
dev: true
|
||||
|
||||
/supports-preserve-symlinks-flag/1.0.0:
|
||||
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
|
||||
@ -4713,10 +4560,6 @@ packages:
|
||||
resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
|
||||
dev: true
|
||||
|
||||
/treemate/0.3.11:
|
||||
resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==}
|
||||
dev: false
|
||||
|
||||
/trim-newlines/3.0.1:
|
||||
resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
|
||||
engines: {node: '>=8'}
|
||||
@ -4741,7 +4584,7 @@ packages:
|
||||
'@tsconfig/node12': 1.0.10
|
||||
'@tsconfig/node14': 1.0.2
|
||||
'@tsconfig/node16': 1.0.3
|
||||
'@types/node': 17.0.43
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
acorn: 8.7.1
|
||||
acorn-walk: 8.2.0
|
||||
arg: 4.1.3
|
||||
@ -4908,15 +4751,6 @@ packages:
|
||||
spdx-expression-parse: 3.0.1
|
||||
dev: true
|
||||
|
||||
/vdirs/0.1.8_vue@3.2.37:
|
||||
resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
evtd: 0.2.3
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/vite-plugin-compression/0.5.1_vite@2.9.9:
|
||||
resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
|
||||
peerDependencies:
|
||||
@ -5001,15 +4835,6 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/vooks/0.2.12_vue@3.2.37:
|
||||
resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
evtd: 0.2.3
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/vscode-css-languageservice/5.4.2:
|
||||
resolution: {integrity: sha512-DT7+7vfdT2HDNjDoXWtYJ0lVDdeDEdbMNdK4PKqUl2MS8g7PWt7J5G9B6k9lYox8nOfhCEjLnoNC3UKHHCR1lg==}
|
||||
dependencies:
|
||||
@ -5183,7 +5008,7 @@ packages:
|
||||
eslint-visitor-keys: 3.3.0
|
||||
espree: 9.3.2
|
||||
esquery: 1.4.0
|
||||
lodash: 4.17.21
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
semver: 7.3.7
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -5266,21 +5091,6 @@ packages:
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/vueuc/0.4.44_vue@3.2.37:
|
||||
resolution: {integrity: sha512-2sLWo1Ow3DRKTDvGVlaWlf0KL+LOqeO6zlvb6nUxWxqj4VjUpg7sMtH+xtvBK+oOXH4goGt1RyLMaBVgPFpqHw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
'@css-render/vue3-ssr': 0.15.10_vue@3.2.37
|
||||
'@juggle/resize-observer': 3.3.1
|
||||
css-render: 0.15.10
|
||||
evtd: 0.2.3
|
||||
seemly: 0.3.4
|
||||
vdirs: 0.1.8_vue@3.2.37
|
||||
vooks: 0.2.12_vue@3.2.37
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
/wcwidth/1.0.1:
|
||||
resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
|
||||
dependencies:
|
||||
@ -5396,6 +5206,104 @@ packages:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
|
||||
registry.npmmirror.com/@css-render/plugin-bem/0.15.10_css-render@0.15.10:
|
||||
resolution: {integrity: sha512-V7b08sM2PWJlXI7BJiVIa0Sg30H3u/jHay4AclNXfF2yRFwwb4ZJjggsMfzwj3WSihAdNf2WTqvOU5qsOD80Dg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.10.tgz}
|
||||
id: registry.npmmirror.com/@css-render/plugin-bem/0.15.10
|
||||
name: '@css-render/plugin-bem'
|
||||
version: 0.15.10
|
||||
peerDependencies:
|
||||
css-render: ~0.15.10
|
||||
dependencies:
|
||||
css-render: registry.npmmirror.com/css-render/0.15.10
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37:
|
||||
resolution: {integrity: sha512-keGKnkB2nyVGoA8GezMKNsmvTGXEzgLOGGlgshwOTSEzd1dsROyZ2m/khJ9jV5zbzDM4rWeAWbWF0zwHemsJcw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.10.tgz}
|
||||
id: registry.npmmirror.com/@css-render/vue3-ssr/0.15.10
|
||||
name: '@css-render/vue3-ssr'
|
||||
version: 0.15.10
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@emotion/hash/0.8.0:
|
||||
resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz}
|
||||
name: '@emotion/hash'
|
||||
version: 0.8.0
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@juggle/resize-observer/3.3.1:
|
||||
resolution: {integrity: sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz}
|
||||
name: '@juggle/resize-observer'
|
||||
version: 3.3.1
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@types/lodash-es/4.17.6:
|
||||
resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz}
|
||||
name: '@types/lodash-es'
|
||||
version: 4.17.6
|
||||
dependencies:
|
||||
'@types/lodash': registry.npmmirror.com/@types/lodash/4.14.185
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@types/lodash/4.14.185:
|
||||
resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.185.tgz}
|
||||
name: '@types/lodash'
|
||||
version: 4.14.185
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@types/node/17.0.43:
|
||||
resolution: {integrity: sha512-jnUpgw8fL9kP2iszfIDyBQtw5Mf4/XSqy0Loc1J9pI14ejL83XcCEvSf50Gs/4ET0I9VCCDoOfufQysj0S66xA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-17.0.43.tgz}
|
||||
name: '@types/node'
|
||||
version: 17.0.43
|
||||
|
||||
registry.npmmirror.com/async-validator/4.1.1:
|
||||
resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.1.1.tgz}
|
||||
name: async-validator
|
||||
version: 4.1.1
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/css-render/0.15.10:
|
||||
resolution: {integrity: sha512-6j5acvm81sXTHJiF47FNNICtDpF74YoWk1xEK3qQvdqgW6vc+OXrPqflL6m8f5GE6XuFYrbACNEd17kraCSBAQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/css-render/-/css-render-0.15.10.tgz}
|
||||
name: css-render
|
||||
version: 0.15.10
|
||||
dependencies:
|
||||
'@emotion/hash': registry.npmmirror.com/@emotion/hash/0.8.0
|
||||
'@types/node': registry.npmmirror.com/@types/node/17.0.43
|
||||
csstype: registry.npmmirror.com/csstype/3.0.11
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/csstype/2.6.20:
|
||||
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz}
|
||||
name: csstype
|
||||
version: 2.6.20
|
||||
|
||||
registry.npmmirror.com/csstype/3.0.11:
|
||||
resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz}
|
||||
name: csstype
|
||||
version: 3.0.11
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/date-fns-tz/1.3.4_date-fns@2.28.0:
|
||||
resolution: {integrity: sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.4.tgz}
|
||||
id: registry.npmmirror.com/date-fns-tz/1.3.4
|
||||
name: date-fns-tz
|
||||
version: 1.3.4
|
||||
peerDependencies:
|
||||
date-fns: '>=2.0.0'
|
||||
dependencies:
|
||||
date-fns: registry.npmmirror.com/date-fns/2.28.0
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/date-fns/2.28.0:
|
||||
resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz}
|
||||
name: date-fns
|
||||
version: 2.28.0
|
||||
engines: {node: '>=0.11'}
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.3.3:
|
||||
resolution: {integrity: sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz}
|
||||
id: registry.npmmirror.com/echarts-wordcloud/2.0.0
|
||||
@ -5627,6 +5535,12 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/evtd/0.2.4:
|
||||
resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz}
|
||||
name: evtd
|
||||
version: 0.2.4
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/fsevents/2.3.2:
|
||||
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz}
|
||||
name: fsevents
|
||||
@ -5645,6 +5559,64 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/highlight.js/11.5.1:
|
||||
resolution: {integrity: sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/highlight.js/-/highlight.js-11.5.1.tgz}
|
||||
name: highlight.js
|
||||
version: 11.5.1
|
||||
engines: {node: '>=12.0.0'}
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/lodash-es/4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz}
|
||||
name: lodash-es
|
||||
version: 4.17.21
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/lodash/4.17.21:
|
||||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
|
||||
name: lodash
|
||||
version: 4.17.21
|
||||
|
||||
registry.npmmirror.com/naive-ui/2.33.3_vue@3.2.37:
|
||||
resolution: {integrity: sha512-yz2aKdghMVadtvCSBXyjU2bAuGmwLEUcbzmXdUhSdtcbI6mT+mT8vRy43FnbJangPQ87v080q453vtnydNcnhA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/naive-ui/-/naive-ui-2.33.3.tgz}
|
||||
id: registry.npmmirror.com/naive-ui/2.33.3
|
||||
name: naive-ui
|
||||
version: 2.33.3
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': registry.npmmirror.com/@css-render/plugin-bem/0.15.10_css-render@0.15.10
|
||||
'@css-render/vue3-ssr': registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37
|
||||
'@types/lodash': registry.npmmirror.com/@types/lodash/4.14.185
|
||||
'@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.6
|
||||
async-validator: registry.npmmirror.com/async-validator/4.1.1
|
||||
css-render: registry.npmmirror.com/css-render/0.15.10
|
||||
date-fns: registry.npmmirror.com/date-fns/2.28.0
|
||||
date-fns-tz: registry.npmmirror.com/date-fns-tz/1.3.4_date-fns@2.28.0
|
||||
evtd: registry.npmmirror.com/evtd/0.2.4
|
||||
highlight.js: registry.npmmirror.com/highlight.js/11.5.1
|
||||
lodash: registry.npmmirror.com/lodash/4.17.21
|
||||
lodash-es: registry.npmmirror.com/lodash-es/4.17.21
|
||||
seemly: registry.npmmirror.com/seemly/0.3.6
|
||||
treemate: registry.npmmirror.com/treemate/0.3.11
|
||||
vdirs: registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37
|
||||
vooks: registry.npmmirror.com/vooks/0.2.12_vue@3.2.37
|
||||
vue: 3.2.37
|
||||
vueuc: registry.npmmirror.com/vueuc/0.4.49_vue@3.2.37
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/seemly/0.3.6:
|
||||
resolution: {integrity: sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz}
|
||||
name: seemly
|
||||
version: 0.3.6
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/treemate/0.3.11:
|
||||
resolution: {integrity: sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz}
|
||||
name: treemate
|
||||
version: 0.3.11
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/uglify-js/3.16.0:
|
||||
resolution: {integrity: sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/uglify-js/-/uglify-js-3.16.0.tgz}
|
||||
name: uglify-js
|
||||
@ -5654,3 +5626,45 @@ packages:
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37:
|
||||
resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz}
|
||||
id: registry.npmmirror.com/vdirs/0.1.8
|
||||
name: vdirs
|
||||
version: 0.1.8
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
evtd: registry.npmmirror.com/evtd/0.2.4
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/vooks/0.2.12_vue@3.2.37:
|
||||
resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz}
|
||||
id: registry.npmmirror.com/vooks/0.2.12
|
||||
name: vooks
|
||||
version: 0.2.12
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
evtd: registry.npmmirror.com/evtd/0.2.4
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/vueuc/0.4.49_vue@3.2.37:
|
||||
resolution: {integrity: sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vueuc/-/vueuc-0.4.49.tgz}
|
||||
id: registry.npmmirror.com/vueuc/0.4.49
|
||||
name: vueuc
|
||||
version: 0.4.49
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
'@css-render/vue3-ssr': registry.npmmirror.com/@css-render/vue3-ssr/0.15.10_vue@3.2.37
|
||||
'@juggle/resize-observer': registry.npmmirror.com/@juggle/resize-observer/3.3.1
|
||||
css-render: registry.npmmirror.com/css-render/0.15.10
|
||||
evtd: registry.npmmirror.com/evtd/0.2.4
|
||||
seemly: registry.npmmirror.com/seemly/0.3.6
|
||||
vdirs: registry.npmmirror.com/vdirs/0.1.8_vue@3.2.37
|
||||
vooks: registry.npmmirror.com/vooks/0.2.12_vue@3.2.37
|
||||
vue: 3.2.37
|
||||
dev: false
|
||||
|
||||
@ -64,7 +64,6 @@ axiosInstance.interceptors.response.use(
|
||||
return Promise.resolve(res.data)
|
||||
},
|
||||
(err: AxiosResponse) => {
|
||||
httpErrorHandle()
|
||||
Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
BIN
src/assets/images/chart/decorates/countdown.png
Normal file
BIN
src/assets/images/chart/decorates/countdown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/images/chart/decorates/flipper-number.png
Normal file
BIN
src/assets/images/chart/decorates/flipper-number.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
4
src/components/Flipper/index.ts
Normal file
4
src/components/Flipper/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import Flipper from './index.vue'
|
||||
type FlipType = 'up' | 'down'
|
||||
|
||||
export { Flipper, FlipType }
|
||||
224
src/components/Flipper/index.vue
Normal file
224
src/components/Flipper/index.vue
Normal file
@ -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>
|
||||
@ -190,11 +190,14 @@ const handleChange = (e: MouseEvent, item: ListType) => {
|
||||
width: 100px;
|
||||
}
|
||||
.select-min-width {
|
||||
width: 110px;
|
||||
width: 115px;
|
||||
}
|
||||
@include deep() {
|
||||
.n-list-item:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
.n-list-item {
|
||||
border-bottom: 0!important;
|
||||
}
|
||||
.n-list-item__divider {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// 鼠标点击左右键
|
||||
export enum MouseEventButton {
|
||||
LEFT = 1,
|
||||
RIGHT = 2,
|
||||
RIGHT = 2
|
||||
}
|
||||
|
||||
// 页面拖拽键名
|
||||
@ -41,7 +41,16 @@ export enum MenuEnum {
|
||||
// 后退
|
||||
BACK = 'back',
|
||||
FORWORD = 'forward',
|
||||
SAVE = 'save'
|
||||
// 保存
|
||||
SAVE = 'save',
|
||||
// 锁定
|
||||
LOCK = 'lock',
|
||||
// 解除锁定
|
||||
UNLOCK = 'unLock',
|
||||
// 隐藏
|
||||
HIDE = 'hide',
|
||||
// 显示
|
||||
SHOW = 'show'
|
||||
}
|
||||
|
||||
// Win 键盘枚举
|
||||
@ -49,9 +58,9 @@ export enum WinKeyboard {
|
||||
CTRL = 'ctrl',
|
||||
SHIFT = 'shift',
|
||||
ALT = ' alt',
|
||||
CTRL_SOURCE_KEY = "control",
|
||||
SHIFT_SOURCE_KEY = "shift",
|
||||
ALT_SOURCE_KEY = "alt"
|
||||
CTRL_SOURCE_KEY = 'control',
|
||||
SHIFT_SOURCE_KEY = 'shift',
|
||||
ALT_SOURCE_KEY = 'alt'
|
||||
}
|
||||
|
||||
// Mac 键盘枚举
|
||||
@ -60,9 +69,9 @@ export enum MacKeyboard {
|
||||
CTRL = '⌘',
|
||||
SHIFT = '⇧',
|
||||
ALT = '⌥',
|
||||
CTRL_SOURCE_KEY = "⌘",
|
||||
SHIFT_SOURCE_KEY = "⇧",
|
||||
ALT_SOURCE_KEY = "⌥"
|
||||
CTRL_SOURCE_KEY = '⌘',
|
||||
SHIFT_SOURCE_KEY = '⇧',
|
||||
ALT_SOURCE_KEY = '⌥'
|
||||
}
|
||||
|
||||
// 同步状态枚举
|
||||
|
||||
@ -12,7 +12,7 @@ export enum ResultEnum {
|
||||
SERVER_FORBIDDEN = 403,
|
||||
NOT_FOUND = 404,
|
||||
TOKEN_OVERDUE = 886,
|
||||
TIMEOUT = 10042,
|
||||
TIMEOUT = 60000,
|
||||
}
|
||||
|
||||
// 数据相关
|
||||
|
||||
@ -24,6 +24,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -51,8 +52,9 @@ const option = computed(() => {
|
||||
// dataset 无法变更条数的补丁
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (newData.dimensions.length !== oldData.dimensions.length) {
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
|
||||
@ -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++) {
|
||||
|
||||
@ -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++) {
|
||||
|
||||
@ -73,7 +73,7 @@ export const option = {
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: '#FFF',
|
||||
color: '#FFFFFF',
|
||||
show: true
|
||||
},
|
||||
itemStyle: {
|
||||
@ -95,19 +95,23 @@ export const option = {
|
||||
geoIndex: 1,
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
backgroundColor: '#00000060',
|
||||
borderColor: 'rgba(147, 235, 248, 0.8)',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
},
|
||||
emphasis: {
|
||||
disabled: false,
|
||||
label: {
|
||||
color: '#fffFFF'
|
||||
color: '#FFFFFF',
|
||||
fontSize: 12,
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#389BB7',
|
||||
@ -126,11 +130,11 @@ export const option = {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
color: '#93ebf800' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
color: '#93ebf820' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
|
||||
@ -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="涟漪大小">
|
||||
|
||||
@ -61,10 +61,14 @@ const getGeojson = (regionId: string) => {
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
await getGeojson(props.chartConfig.option.mapRegion.adcode)
|
||||
if (props.chartConfig.option.mapRegion.adcode!="china") {
|
||||
await getGeojson(props.chartConfig.option.mapRegion.adcode)
|
||||
}else{
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
vEchartsSetOption()
|
||||
}
|
||||
registerMapInitAsync()
|
||||
@ -85,7 +89,14 @@ const dataSetHandle = async (dataset: any) => {
|
||||
|
||||
isPreview() && vEchartsSetOption()
|
||||
}
|
||||
|
||||
// 处理海南群岛
|
||||
const hainanLandsHandle=async(newData:boolean)=>{
|
||||
if (newData) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
}
|
||||
//监听 dataset 数据发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
@ -102,11 +113,7 @@ watch(
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.showHainanIsLands,
|
||||
async newData => {
|
||||
if (newData) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
await hainanLandsHandle(newData)
|
||||
vEchartsSetOption()
|
||||
},
|
||||
{
|
||||
|
||||
@ -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)
|
||||
},
|
||||
{
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -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: {}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
47
src/packages/components/Decorates/Mores/CountDown/config.ts
Normal file
47
src/packages/components/Decorates/Mores/CountDown/config.ts
Normal file
@ -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)
|
||||
}
|
||||
98
src/packages/components/Decorates/Mores/CountDown/config.vue
Normal file
98
src/packages/components/Decorates/Mores/CountDown/config.vue
Normal file
@ -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>
|
||||
14
src/packages/components/Decorates/Mores/CountDown/index.ts
Normal file
14
src/packages/components/Decorates/Mores/CountDown/index.ts
Normal file
@ -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
|
||||
}
|
||||
184
src/packages/components/Decorates/Mores/CountDown/index.vue
Normal file
184
src/packages/components/Decorates/Mores/CountDown/index.vue
Normal file
@ -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>
|
||||
@ -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)
|
||||
}
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
@ -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>
|
||||
@ -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,
|
||||
|
||||
@ -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]
|
||||
|
||||
@ -28,57 +28,29 @@
|
||||
<SettingItem name="显示行号">
|
||||
<n-switch size="small" v-model:value="optionData.index" />
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="配置" :alone="true">
|
||||
<SettingItem name="表头数据">
|
||||
<n-input
|
||||
v-model:value="header"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="表头数据(英文','分割)"
|
||||
></n-input>
|
||||
<n-input v-model:value="header" :min="1" size="small" placeholder="表头数据(英文','分割)"></n-input>
|
||||
</SettingItem>
|
||||
<SettingItem name="列对齐方式">
|
||||
<n-input
|
||||
v-model:value="align"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="对齐方式(英文','分割)"
|
||||
></n-input>
|
||||
<n-input v-model:value="align" :min="1" size="small" placeholder="对齐方式(英文','分割)"></n-input>
|
||||
</SettingItem>
|
||||
<SettingItem name="列宽度">
|
||||
<n-input
|
||||
v-model:value="columnWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="列宽度(英文','分割)"
|
||||
></n-input>
|
||||
<n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="表头背景色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.headerBGC"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.headerBGC"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="奇数行背景色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.oddRowBGC"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.oddRowBGC"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="偶数行背景色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.evenRowBGC"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.evenRowBGC"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
@ -86,36 +58,43 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, ref, watch } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const header = ref(props.optionData.header.toString())
|
||||
const align = ref(props.optionData.align.toString())
|
||||
const columnWidth = ref(props.optionData.columnWidth.toString())
|
||||
const header = ref()
|
||||
const align = ref()
|
||||
const columnWidth = ref()
|
||||
|
||||
watch([header, align, columnWidth],([headerNew,alignNew,columnWidthNew],[headerOld,alignOld,columnWidthOld])=>{
|
||||
if(headerNew !== headerOld){
|
||||
watch(
|
||||
() => props.optionData,
|
||||
newData => {
|
||||
header.value = props.optionData.header.toString()
|
||||
align.value = props.optionData.align.toString()
|
||||
columnWidth.value = props.optionData.columnWidth.toString()
|
||||
},
|
||||
{
|
||||
deep: false,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch([header, align, columnWidth], ([headerNew, alignNew, columnWidthNew], [headerOld, alignOld, columnWidthOld]) => {
|
||||
if (headerNew !== headerOld) {
|
||||
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>
|
||||
|
||||
40
src/packages/index.d.ts
vendored
40
src/packages/index.d.ts
vendored
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -66,6 +66,9 @@ export class PublicConfigClass implements PublicConfigType {
|
||||
skewX: 0,
|
||||
skewY: 0,
|
||||
|
||||
// 混合模式
|
||||
blendMode: 'normal',
|
||||
|
||||
// 动画
|
||||
animations: []
|
||||
}
|
||||
|
||||
@ -58,7 +58,12 @@ import {
|
||||
ChevronDownOutline as ChevronDownOutlineIcon,
|
||||
Pulse as PulseIcon,
|
||||
Folder as FolderIcon,
|
||||
FolderOpen as FolderOpenIcon
|
||||
FolderOpen as FolderOpenIcon,
|
||||
Image as ImageIcon,
|
||||
Images as ImagesIcon,
|
||||
List as ListIcon,
|
||||
EyeOutline as EyeOutlineIcon,
|
||||
EyeOffOutline as EyeOffOutlineIcon
|
||||
} from '@vicons/ionicons5'
|
||||
|
||||
import {
|
||||
@ -215,7 +220,16 @@ const ionicons5 = {
|
||||
// 文件夹
|
||||
FolderIcon,
|
||||
// 文件夹打开
|
||||
FolderOpenIcon
|
||||
FolderOpenIcon,
|
||||
// 图片
|
||||
ImageIcon,
|
||||
// 多个图片
|
||||
ImagesIcon,
|
||||
// 列表
|
||||
ListIcon,
|
||||
// 眼睛
|
||||
EyeOutlineIcon,
|
||||
EyeOffOutlineIcon
|
||||
}
|
||||
|
||||
const carbon = {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,66 +1,30 @@
|
||||
[
|
||||
{
|
||||
"CMYK": [
|
||||
62,
|
||||
0,
|
||||
21,
|
||||
16
|
||||
],
|
||||
"RGB": [
|
||||
81,
|
||||
214,
|
||||
169
|
||||
],
|
||||
"CMYK": [62, 0, 21, 16],
|
||||
"RGB": [81, 214, 169],
|
||||
"hex": "#51d6a9",
|
||||
"name": "碧空绿",
|
||||
"pinyin": "bikonlv"
|
||||
},
|
||||
{
|
||||
"CMYK": [
|
||||
93,
|
||||
0,
|
||||
31,
|
||||
0
|
||||
],
|
||||
"RGB": [
|
||||
16,
|
||||
174,
|
||||
194
|
||||
],
|
||||
"hex": "#10aec2",
|
||||
"name": "甸子蓝",
|
||||
"pinyin": "dianzilan"
|
||||
"CMYK": [4, 13, 67, 0],
|
||||
"RGB": [248, 223, 114],
|
||||
"hex": "#f8df72",
|
||||
"name": "茉莉黄",
|
||||
"pinyin": "molihuang"
|
||||
},
|
||||
{
|
||||
"CMYK": [
|
||||
76,
|
||||
51,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"RGB": [
|
||||
60,
|
||||
126,
|
||||
255
|
||||
],
|
||||
"CMYK": [76, 51, 0, 0],
|
||||
"RGB": [60, 126, 255],
|
||||
"hex": "#3c7eff",
|
||||
"name": "深海蓝",
|
||||
"pinyin": "shenhailan"
|
||||
},
|
||||
{
|
||||
"CMYK": [
|
||||
4,
|
||||
13,
|
||||
67,
|
||||
0
|
||||
],
|
||||
"RGB": [
|
||||
248,
|
||||
223,
|
||||
114
|
||||
],
|
||||
"hex": "#f8df72",
|
||||
"name": "茉莉黄",
|
||||
"pinyin": "molihuang"
|
||||
"CMYK": [59, 12, 19, 0],
|
||||
"RGB": [138, 188, 209],
|
||||
"hex": "#8abcd1",
|
||||
"name": "秋波蓝",
|
||||
"pinyin": "qiubolan"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
@ -111,6 +111,7 @@ export type EditCanvasConfigType = {
|
||||
[FilterEnum.ROTATE_Y]: number
|
||||
[FilterEnum.SKEW_X]: number
|
||||
[FilterEnum.SKEW_Y]: number
|
||||
[FilterEnum.BLEND_MODE]: string
|
||||
// 大屏宽度
|
||||
[EditCanvasConfigEnum.WIDTH]: number
|
||||
// 大屏高度
|
||||
|
||||
@ -115,6 +115,8 @@ export const useChartEditStore = defineStore({
|
||||
rotateY: 0,
|
||||
skewX: 0,
|
||||
skewY: 0,
|
||||
// 混合模式
|
||||
blendMode: 'normal',
|
||||
// 默认背景色
|
||||
background: undefined,
|
||||
backgroundImage: undefined,
|
||||
@ -557,6 +559,10 @@ export const useChartEditStore = defineStore({
|
||||
return
|
||||
}
|
||||
|
||||
// 取消选中
|
||||
this.setTargetSelectChart()
|
||||
|
||||
// 重新选中
|
||||
let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
|
||||
if (isArray(historyData)) {
|
||||
// 选中目标元素，支持多个
|
||||
@ -627,7 +633,8 @@ export const useChartEditStore = defineStore({
|
||||
ids.push(item.id)
|
||||
})
|
||||
} else {
|
||||
(historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
|
||||
const group = historyData[0] as CreateComponentGroupType
|
||||
group.groupList.forEach(item => {
|
||||
ids.push(item.id)
|
||||
})
|
||||
}
|
||||
@ -642,6 +649,38 @@ export const useChartEditStore = defineStore({
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 处理锁定
|
||||
const isLock = HistoryItem.actionType === HistoryActionTypeEnum.LOCK
|
||||
const isUnLock = HistoryItem.actionType === HistoryActionTypeEnum.UNLOCK
|
||||
if (isLock || isUnLock) {
|
||||
if ((isLock && isForward) || (isUnLock && !isForward)) {
|
||||
historyData.forEach(item => {
|
||||
this.setLock(!item.status.lock, false)
|
||||
})
|
||||
return
|
||||
}
|
||||
historyData.forEach(item => {
|
||||
this.setUnLock(false)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 处理隐藏
|
||||
const isHide = HistoryItem.actionType === HistoryActionTypeEnum.HIDE
|
||||
const isShow = HistoryItem.actionType === HistoryActionTypeEnum.SHOW
|
||||
if (isHide || isShow) {
|
||||
if ((isHide && isForward) || (isShow && !isForward)) {
|
||||
historyData.forEach(item => {
|
||||
this.setHide(!item.status.hide, false)
|
||||
})
|
||||
return
|
||||
}
|
||||
historyData.forEach(item => {
|
||||
this.setShow(false)
|
||||
})
|
||||
return
|
||||
}
|
||||
},
|
||||
// * 撤回
|
||||
setBack() {
|
||||
@ -820,7 +859,73 @@ export const useChartEditStore = defineStore({
|
||||
loadingFinish()
|
||||
}
|
||||
},
|
||||
// * 页面缩放设置-----------------
|
||||
// * 锁定
|
||||
setLock(status: boolean = true, isHistory: boolean = true) {
|
||||
try {
|
||||
// 暂不支持多选
|
||||
if (this.getTargetChart.selectId.length > 1) return
|
||||
|
||||
loadingStart()
|
||||
const index: number = this.fetchTargetIndex()
|
||||
if (index !== -1) {
|
||||
// 更新状态
|
||||
const targetItem = this.getComponentList[index]
|
||||
targetItem.status.lock = status
|
||||
|
||||
// 历史记录
|
||||
if (isHistory) {
|
||||
status
|
||||
? chartHistoryStore.createLockHistory([targetItem])
|
||||
: chartHistoryStore.createUnLockHistory([targetItem])
|
||||
}
|
||||
this.updateComponentList(index, targetItem)
|
||||
// 锁定添加失焦效果
|
||||
if (status) this.setTargetSelectChart(undefined)
|
||||
loadingFinish()
|
||||
return
|
||||
}
|
||||
} catch (value) {
|
||||
loadingError()
|
||||
}
|
||||
},
|
||||
// * 解除锁定
|
||||
setUnLock(isHistory: boolean = true) {
|
||||
this.setLock(false, isHistory)
|
||||
},
|
||||
// * 隐藏
|
||||
setHide(status: boolean = true, isHistory: boolean = true) {
|
||||
try {
|
||||
// 暂不支持多选
|
||||
if (this.getTargetChart.selectId.length > 1) return
|
||||
|
||||
loadingStart()
|
||||
const index: number = this.fetchTargetIndex()
|
||||
if (index !== -1) {
|
||||
// 更新状态
|
||||
const targetItem = this.getComponentList[index]
|
||||
targetItem.status.hide = status
|
||||
|
||||
// 历史记录
|
||||
if (isHistory) {
|
||||
status
|
||||
? chartHistoryStore.createHideHistory([targetItem])
|
||||
: chartHistoryStore.createShowHistory([targetItem])
|
||||
}
|
||||
this.updateComponentList(index, targetItem)
|
||||
loadingFinish()
|
||||
|
||||
// 隐藏添加失焦效果
|
||||
if (status) this.setTargetSelectChart(undefined)
|
||||
}
|
||||
} catch (value) {
|
||||
loadingError()
|
||||
}
|
||||
},
|
||||
// * 显示
|
||||
setShow(isHistory: boolean = true) {
|
||||
this.setHide(false, isHistory)
|
||||
},
|
||||
// ----------------
|
||||
// * 设置页面大小
|
||||
setPageSize(scale: number): void {
|
||||
this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
import {
|
||||
HistoryTargetTypeEnum,
|
||||
HistoryActionTypeEnum
|
||||
} from './chartHistoryStore.d'
|
||||
import { HistoryTargetTypeEnum, HistoryActionTypeEnum } from './chartHistoryStore.d'
|
||||
|
||||
export const historyActionTypeName = {
|
||||
[HistoryActionTypeEnum.ADD]: '新增图表',
|
||||
[HistoryActionTypeEnum.DELETE]: '删除图表',
|
||||
[HistoryActionTypeEnum.UPDATE]: '修改属性',
|
||||
[HistoryActionTypeEnum.MOVE]: '移动图表',
|
||||
[HistoryActionTypeEnum.PASTE]: '粘贴图表',
|
||||
[HistoryActionTypeEnum.COPY]: '复制图表',
|
||||
[HistoryActionTypeEnum.CUT]: '剪切图表',
|
||||
[HistoryActionTypeEnum.TOP]: '层级置顶',
|
||||
[HistoryActionTypeEnum.BOTTOM]: '层级置底',
|
||||
[HistoryActionTypeEnum.UP]: '层级上移',
|
||||
[HistoryActionTypeEnum.DOWN]: '层级下移',
|
||||
[HistoryActionTypeEnum.GROUP]: '创建分组',
|
||||
[HistoryActionTypeEnum.UN_GROUP]: '解除分组',
|
||||
[HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
|
||||
|
||||
[HistoryActionTypeEnum.ADD]: '新增',
|
||||
[HistoryActionTypeEnum.DELETE]: '删除',
|
||||
[HistoryActionTypeEnum.UPDATE]: '更新',
|
||||
[HistoryActionTypeEnum.MOVE]: '移动',
|
||||
[HistoryActionTypeEnum.PASTE]: '粘贴',
|
||||
[HistoryActionTypeEnum.COPY]: '复制',
|
||||
[HistoryActionTypeEnum.CUT]: '剪切',
|
||||
[HistoryActionTypeEnum.TOP]: '置顶',
|
||||
[HistoryActionTypeEnum.BOTTOM]: '置底',
|
||||
[HistoryActionTypeEnum.UP]: '上移',
|
||||
[HistoryActionTypeEnum.DOWN]: '下移',
|
||||
[HistoryActionTypeEnum.GROUP]: '成组',
|
||||
[HistoryActionTypeEnum.UN_GROUP]: '解组',
|
||||
[HistoryActionTypeEnum.LOCK]: '锁定',
|
||||
[HistoryActionTypeEnum.UNLOCK]: '解锁',
|
||||
[HistoryActionTypeEnum.HIDE]: '隐藏',
|
||||
[HistoryActionTypeEnum.SHOW]: '显示',
|
||||
|
||||
[HistoryTargetTypeEnum.CANVAS]: '画布初始化'
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
// 对象类型
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import './var.scss';
|
||||
@import './format.scss';
|
||||
@import './animation.scss';
|
||||
@import './mixins/mixins.scss';
|
||||
@import "./var.scss";
|
||||
@import "./format.scss";
|
||||
@import "./animation.scss";
|
||||
@import "./mixins/mixins.scss";
|
||||
|
||||
// 过度
|
||||
.go-transition {
|
||||
@ -49,14 +49,14 @@
|
||||
// 毛玻璃
|
||||
.go-background-filter {
|
||||
backdrop-filter: $--filter-blur-base;
|
||||
@include fetch-bg-color('filter-color');
|
||||
@include fetch-bg-color("filter-color");
|
||||
box-shadow: $--border-shadow;
|
||||
}
|
||||
|
||||
// 毛玻璃
|
||||
.go-background-filter-shallow {
|
||||
backdrop-filter: $--filter-blur-base;
|
||||
@include fetch-bg-color('filter-color-shallow');
|
||||
@include fetch-bg-color("filter-color-shallow");
|
||||
box-shadow: $--border-shadow;
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
// 背景斑点需配合 @mixin background-image 使用
|
||||
.go-point-bg {
|
||||
@include fetch-theme-custom('background-color', 'background-color1');
|
||||
@include fetch-theme-custom("background-color", "background-color1");
|
||||
background-size: 15px 15px, 15px 15px;
|
||||
}
|
||||
|
||||
@ -117,4 +117,11 @@
|
||||
.go-#{$typekey} {
|
||||
#{$type}: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.go-d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.go-d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,14 +10,9 @@
|
||||
<slot name="icon"></slot>
|
||||
</div>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-space align="center" style="gap: 4px">
|
||||
<slot name="top-right"></slot>
|
||||
<n-icon
|
||||
v-show="backIcon"
|
||||
size="20"
|
||||
class="go-cursor-pointer"
|
||||
@click="backHandle"
|
||||
>
|
||||
<n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
|
||||
<chevron-back-outline-icon></chevron-back-outline-icon>
|
||||
</n-icon>
|
||||
</n-space>
|
||||
@ -151,7 +146,7 @@ $topOrBottomHeight: 40px;
|
||||
border-bottom: 1px solid;
|
||||
@include fetch-border-color('background-color1');
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
height: calc(100vh - #{$--header-height});
|
||||
overflow: hidden;
|
||||
@ -165,9 +160,7 @@ $topOrBottomHeight: 40px;
|
||||
height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
|
||||
}
|
||||
.content-height-show-both {
|
||||
height: calc(
|
||||
100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight}
|
||||
);
|
||||
height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,17 +30,11 @@
|
||||
:onBeforeUpload="beforeUploadHandle"
|
||||
>
|
||||
<n-upload-dragger>
|
||||
<img
|
||||
v-if="canvasConfig.backgroundImage"
|
||||
class="upload-show"
|
||||
:src="canvasConfig.backgroundImage"
|
||||
alt="背景"
|
||||
/>
|
||||
<img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
|
||||
<div class="upload-img" v-show="!canvasConfig.backgroundImage">
|
||||
<img src="@/assets/images/canvas/noImage.png" />
|
||||
<n-text class="upload-desc" depth="3">
|
||||
背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif
|
||||
的文件
|
||||
背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
|
||||
</n-text>
|
||||
</div>
|
||||
</n-upload-dragger>
|
||||
@ -48,43 +42,52 @@
|
||||
</n-card>
|
||||
<n-space vertical :size="12">
|
||||
<n-space>
|
||||
<n-text>背景色</n-text>
|
||||
<n-color-picker
|
||||
style="width: 326px;"
|
||||
:showPreview="true"
|
||||
:swatches="swatchesColors"
|
||||
v-model:value="canvasConfig.background"
|
||||
></n-color-picker>
|
||||
<n-text>背景颜色</n-text>
|
||||
<div class="picker-height">
|
||||
<n-color-picker
|
||||
v-if="!switchSelectColorLoading"
|
||||
size="small"
|
||||
style="width: 250px"
|
||||
v-model:value="canvasConfig.background"
|
||||
:showPreview="true"
|
||||
:swatches="swatchesColors"
|
||||
></n-color-picker>
|
||||
</div>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>颜色应用</n-text>
|
||||
<n-switch
|
||||
<n-text>应用类型</n-text>
|
||||
<n-select
|
||||
size="small"
|
||||
v-model:value="canvasConfig.selectColor"
|
||||
:loading="switchSelectColorLoading"
|
||||
:round="false"
|
||||
style="width: 250px"
|
||||
v-model:value="selectColorValue"
|
||||
:disabled="!canvasConfig.backgroundImage"
|
||||
:onUpdate="switchSelectColorHandle"
|
||||
></n-switch>
|
||||
:options="selectColorOptions"
|
||||
@update:value="selectColorValueHandle"
|
||||
/>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>背景控制</n-text>
|
||||
<n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
|
||||
<n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
|
||||
<n-button class="clear-btn" size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">
|
||||
清除背景
|
||||
</n-button>
|
||||
<n-button class="clear-btn" size="small" :disabled="!canvasConfig.background" @click="clearColor">
|
||||
清除颜色
|
||||
</n-button>
|
||||
</n-space>
|
||||
<n-space>
|
||||
<n-text>预览方式</n-text>
|
||||
<n-button-group>
|
||||
<n-button
|
||||
ghost
|
||||
<n-button
|
||||
v-for="item in previewTypeList"
|
||||
:key="item.key"
|
||||
:type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
|
||||
ghost
|
||||
size="small"
|
||||
@click="selectPreviewType(item.key)">
|
||||
@click="selectPreviewType(item.key)"
|
||||
>
|
||||
<n-tooltip :show-arrow="false" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="18">
|
||||
<n-icon class="select-preview-icon" size="18">
|
||||
<component :is="item.icon"></component>
|
||||
</n-icon>
|
||||
</template>
|
||||
@ -97,7 +100,7 @@
|
||||
|
||||
<!-- 滤镜 -->
|
||||
<styles-setting :isCanvas="true" :chartStyles="canvasConfig"></styles-setting>
|
||||
<n-divider style="margin: 10px 0;"></n-divider>
|
||||
<n-divider style="margin: 10px 0"></n-divider>
|
||||
|
||||
<!-- 主题选择和全局配置 -->
|
||||
<n-tabs class="tabs-box" size="small" type="segment">
|
||||
@ -123,7 +126,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { ref, nextTick, watch } from 'vue'
|
||||
import { backgroundImageSize } from '@/settings/designSetting'
|
||||
import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -147,23 +150,25 @@ const editCanvas = chartEditStore.getEditCanvas
|
||||
|
||||
const uploadFileListRef = ref()
|
||||
const switchSelectColorLoading = ref(false)
|
||||
const selectColorValue = ref(0)
|
||||
|
||||
const ChartThemeColor = loadAsyncComponent(() =>
|
||||
import('./components/ChartThemeColor/index.vue')
|
||||
)
|
||||
const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
|
||||
|
||||
// 北京默认展示颜色列表
|
||||
const swatchesColors = [
|
||||
'#232324',
|
||||
'#2a2a2b',
|
||||
'#313132',
|
||||
'#373739',
|
||||
'#757575',
|
||||
'#e0e0e0',
|
||||
'#eeeeee',
|
||||
'#fafafa'
|
||||
// 默认应用类型
|
||||
const selectColorOptions = [
|
||||
{
|
||||
label: '应用颜色',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '应用背景',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
|
||||
// 默认展示颜色列表
|
||||
const swatchesColors = ['#232324', '#2a2a2b', '#313132', '#373739', '#757575', '#e0e0e0', '#eeeeee', '#fafafa']
|
||||
|
||||
const globalTabList = [
|
||||
{
|
||||
key: 'ChartTheme',
|
||||
@ -197,9 +202,19 @@ const previewTypeList = [
|
||||
title: '铺满',
|
||||
icon: FitToScreenIcon,
|
||||
desc: '强行拉伸画面，填充所有视图'
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
watch(
|
||||
() => canvasConfig.selectColor,
|
||||
newValue => {
|
||||
selectColorValue.value = newValue ? 0 : 1
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
// 画布尺寸规则
|
||||
const validator = (x: number) => x > 50
|
||||
|
||||
@ -216,9 +231,7 @@ const beforeUploadHandle = async ({ file }) => {
|
||||
const size = file.file.size
|
||||
|
||||
if (size > 1024 * 1024 * backgroundImageSize) {
|
||||
window['$message'].warning(
|
||||
`图片超出 ${backgroundImageSize}M 限制，请重新上传！`
|
||||
)
|
||||
window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
|
||||
return false
|
||||
}
|
||||
if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
|
||||
@ -228,38 +241,32 @@ const beforeUploadHandle = async ({ file }) => {
|
||||
return true
|
||||
}
|
||||
|
||||
// 应用颜色
|
||||
const selectColorValueHandle = (value: number) => {
|
||||
canvasConfig.selectColor = value == 0
|
||||
}
|
||||
|
||||
// 清除背景
|
||||
const clearImage = () => {
|
||||
chartEditStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.BACKGROUND_IMAGE,
|
||||
undefined
|
||||
)
|
||||
chartEditStore.setEditCanvasConfig(
|
||||
EditCanvasConfigEnum.SELECT_COLOR,
|
||||
true
|
||||
)
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, 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()
|
||||
}
|
||||
|
||||
// 自定义上传操作
|
||||
@ -306,8 +313,8 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$updloadWidth: 326px;
|
||||
$updloadHeight: 193px;
|
||||
$uploadWidth: 326px;
|
||||
$uploadHeight: 193px;
|
||||
@include go(canvas-setting) {
|
||||
padding-top: 20px;
|
||||
.upload-box {
|
||||
@ -320,12 +327,12 @@ $updloadHeight: 193px;
|
||||
}
|
||||
.n-upload-dragger {
|
||||
padding: 5px;
|
||||
width: $updloadWidth;
|
||||
width: $uploadWidth;
|
||||
}
|
||||
}
|
||||
.upload-show {
|
||||
width: -webkit-fill-available;
|
||||
height: $updloadHeight;
|
||||
height: $uploadHeight;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.upload-img {
|
||||
@ -343,6 +350,17 @@ $updloadHeight: 193px;
|
||||
.icon-position {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.picker-height {
|
||||
min-height: 35px;
|
||||
}
|
||||
.clear-btn {
|
||||
padding-left: 2.25em;
|
||||
padding-right: 2.25em;
|
||||
}
|
||||
.select-preview-icon {
|
||||
padding-right: .68em;
|
||||
padding-left: .68em;
|
||||
}
|
||||
.tabs-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@ -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)) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
...useComponentStyle(groupData.attr, groupIndex),
|
||||
...useSizeStyle(groupData.attr),
|
||||
...getFilterStyle(groupData.styles),
|
||||
...getTransformStyle(groupData.styles)
|
||||
...getTransformStyle(groupData.styles),
|
||||
...getBlendModeStyle(groupData.styles) as any
|
||||
}"
|
||||
@click="mouseClickHandle($event, groupData)"
|
||||
@mousedown="mousedownHandle($event, groupData)"
|
||||
@ -55,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { useMouseHandle } from '../../hooks/useDrag.hook'
|
||||
@ -85,26 +86,32 @@ const optionsHandle = (
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
// 多选
|
||||
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
|
||||
// 单选
|
||||
const singleMenuEnums = [MenuEnum.UN_GROUP]
|
||||
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
const list: MenuOptionsItemType[] = []
|
||||
allList.forEach(item => {
|
||||
if (menulist.includes(item.key as MenuEnum)) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
return list
|
||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
||||
}
|
||||
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter(moreMenuEnums)
|
||||
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
|
||||
} else {
|
||||
return [...filter(singleMenuEnums), divider(), ...targetList]
|
||||
const statusMenuEnums: MenuEnum[] = []
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK)
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.UNLOCK)
|
||||
}
|
||||
if (targetInstance.status.hide) {
|
||||
statusMenuEnums.push(MenuEnum.HIDE)
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.SHOW)
|
||||
}
|
||||
// 单选
|
||||
const singleMenuEnums = [MenuEnum.UN_GROUP]
|
||||
return [
|
||||
...filter(singleMenuEnums),
|
||||
divider(),
|
||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -48,8 +48,19 @@ import {
|
||||
HistoryActionTypeEnum
|
||||
} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
|
||||
|
||||
const { DesktopOutlineIcon, PencilIcon, TrashIcon, CopyIcon, LayersIcon, DuplicateIcon, HelpOutlineIcon } =
|
||||
icon.ionicons5
|
||||
const {
|
||||
DesktopOutlineIcon,
|
||||
PencilIcon,
|
||||
TrashIcon,
|
||||
CopyIcon,
|
||||
LayersIcon,
|
||||
DuplicateIcon,
|
||||
HelpOutlineIcon,
|
||||
LockClosedOutlineIcon,
|
||||
LockOpenOutlineIcon,
|
||||
EyeOffOutlineIcon,
|
||||
EyeOutlineIcon
|
||||
} = icon.ionicons5
|
||||
const { StackedMoveIcon, Carbon3DCursorIcon, Carbon3DSoftwareIcon } = icon.carbon
|
||||
|
||||
const chartHistoryStoreStore = useChartHistoryStore()
|
||||
@ -83,6 +94,14 @@ const iconHandle = (e: HistoryItemType) => {
|
||||
return Carbon3DCursorIcon
|
||||
case HistoryActionTypeEnum.UN_GROUP:
|
||||
return Carbon3DSoftwareIcon
|
||||
case HistoryActionTypeEnum.LOCK:
|
||||
return LockClosedOutlineIcon
|
||||
case HistoryActionTypeEnum.UNLOCK:
|
||||
return LockOpenOutlineIcon
|
||||
case HistoryActionTypeEnum.HIDE:
|
||||
return EyeOffOutlineIcon
|
||||
case HistoryActionTypeEnum.SHOW:
|
||||
return EyeOutlineIcon
|
||||
default:
|
||||
return PencilIcon
|
||||
}
|
||||
@ -109,9 +128,7 @@ const options = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
return reverse(options.filter(item => {
|
||||
return item.label
|
||||
}))
|
||||
return reverse(options.filter(item => item.label))
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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(),
|
||||
|
||||
@ -179,7 +179,8 @@ $asideBottom: 70px;
|
||||
}
|
||||
@include deep() {
|
||||
.n-button__icon {
|
||||
margin-right: 4px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -37,7 +37,10 @@
|
||||
v-else
|
||||
:data-id="item.id"
|
||||
:index="index"
|
||||
:style="useComponentStyle(item.attr, index)"
|
||||
:style="{
|
||||
...useComponentStyle(item.attr, index),
|
||||
...getBlendModeStyle(item.styles) as any
|
||||
}"
|
||||
:item="item"
|
||||
@click="mouseClickHandle($event, item)"
|
||||
@mousedown="mousedownHandle($event, item)"
|
||||
@ -81,7 +84,7 @@ import { onMounted, computed } from 'vue'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { MenuEnum } from '@/enums/editPageEnum'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -116,24 +119,22 @@ const optionsHandle = (
|
||||
allList: MenuOptionsItemType[],
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
// 多选
|
||||
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
|
||||
// 单选
|
||||
const singleMenuEnums = targetList
|
||||
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
const list: MenuOptionsItemType[] = []
|
||||
|
||||
allList.forEach(item => {
|
||||
// 成组
|
||||
if (moreMenuEnums.includes(item.key as MenuEnum)) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
return list
|
||||
return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
|
||||
}
|
||||
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))
|
||||
}
|
||||
|
||||
// 主题色
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="go-content-layers-group-list-item">
|
||||
<div
|
||||
class="root-item-content"
|
||||
:class="{ hover: hover, select: select }"
|
||||
:class="{ hover, select, 'list-mini': selectText }"
|
||||
@click="clickHandle($event)"
|
||||
@mousedown="groupMousedownHandle($event)"
|
||||
@mouseenter="mouseenterHandle(componentGroupData)"
|
||||
@ -18,11 +18,12 @@
|
||||
<folder-icon></folder-icon>
|
||||
</template>
|
||||
</n-icon>
|
||||
<n-ellipsis>
|
||||
<n-ellipsis style="margin-right: auto">
|
||||
<n-text class="go-ml-2 list-text" :depth="2">
|
||||
{{ componentGroupData.chartConfig.title }}
|
||||
</n-text>
|
||||
</n-ellipsis>
|
||||
<layers-status :isGroup="false" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
@ -31,6 +32,8 @@
|
||||
v-for="element in componentGroupData.groupList"
|
||||
:key="element.id"
|
||||
:componentData="element"
|
||||
:layer-mode="layerMode"
|
||||
:isGroup="true"
|
||||
@mousedown="mousedownHandle($event, element, componentGroupData.id)"
|
||||
@mouseenter="mouseenterHandle(element)"
|
||||
@mouseleave="mouseleaveHandle(element)"
|
||||
@ -48,15 +51,20 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { LayersListItem } from '../LayersListItem'
|
||||
import throttle from 'lodash/throttle'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const props = defineProps({
|
||||
componentGroupData: {
|
||||
type: Object as PropType<CreateComponentGroupType>,
|
||||
required: true
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
@ -77,6 +85,27 @@ const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT
|
||||
})
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentGroupData.status
|
||||
})
|
||||
|
||||
// 右键
|
||||
const optionsHandle = (
|
||||
targetList: MenuOptionsItemType[],
|
||||
@ -84,20 +113,29 @@ const optionsHandle = (
|
||||
targetInstance: CreateComponentType
|
||||
) => {
|
||||
const filter = (menulist: MenuEnum[]) => {
|
||||
const list: MenuOptionsItemType[] = []
|
||||
allList.forEach(item => {
|
||||
if (menulist.includes(item.key as MenuEnum)) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
return list
|
||||
return allList.filter(i => menulist.includes(i.key as MenuEnum))
|
||||
}
|
||||
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
return filter([MenuEnum.GROUP])
|
||||
} else {
|
||||
return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
|
||||
const statusMenuEnums: MenuEnum[] = []
|
||||
if (targetInstance.status.lock) {
|
||||
statusMenuEnums.push(MenuEnum.LOCK)
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.UNLOCK)
|
||||
}
|
||||
if (targetInstance.status.hide) {
|
||||
statusMenuEnums.push(MenuEnum.HIDE)
|
||||
} else {
|
||||
statusMenuEnums.push(MenuEnum.SHOW)
|
||||
}
|
||||
return [
|
||||
...filter([MenuEnum.UN_GROUP]),
|
||||
divider(),
|
||||
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,17 +152,6 @@ const clickHandle = (e: MouseEvent) => {
|
||||
mousedownHandle(e, props.componentGroupData)
|
||||
}
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentGroupData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮
|
||||
const hover = computed(() => {
|
||||
return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
// 组点击事件
|
||||
const groupMousedownHandle = (e: MouseEvent) => {
|
||||
onClickOutSide()
|
||||
@ -148,7 +175,11 @@ const groupMousedownHandle = (e: MouseEvent) => {
|
||||
}
|
||||
|
||||
// 公共点击事件
|
||||
const mousedownHandle = (e: MouseEvent, componentInstance: CreateComponentType | CreateComponentGroupType, id?: string) => {
|
||||
const mousedownHandle = (
|
||||
e: MouseEvent,
|
||||
componentInstance: CreateComponentType | CreateComponentGroupType,
|
||||
id?: string
|
||||
) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
@ -169,6 +200,7 @@ const mouseleaveHandle = (componentInstance: CreateComponentType | CreateCompone
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
|
||||
@include go(content-layers-group-list-item) {
|
||||
@ -177,6 +209,20 @@ $textSize: 10px;
|
||||
margin: 10px 5%;
|
||||
margin-bottom: 5px;
|
||||
@extend .go-transition-quick;
|
||||
@include deep() {
|
||||
.go-content-layers-list-item {
|
||||
margin-right: 0 !important;
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root-item-content {
|
||||
height: $centerHeight;
|
||||
@ -196,6 +242,17 @@ $textSize: 10px;
|
||||
border: 1px solid v-bind('themeColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
// mini样式
|
||||
&.list-mini {
|
||||
height: $centerMiniHeight;
|
||||
.item-content {
|
||||
height: calc(#{$centerMiniHeight} - 10px) !important;
|
||||
}
|
||||
.select-modal {
|
||||
height: calc(#{$centerMiniHeight} + 2px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-modal,
|
||||
.item-content {
|
||||
@ -220,5 +277,9 @@ $textSize: 10px;
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
.list-status-icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="go-content-layers-list-item" :class="{ hover: hover, select: select }">
|
||||
<div class="go-content-layers-list-item" :class="{ hover, select, 'list-mini': selectText }">
|
||||
<div class="go-flex-center item-content">
|
||||
<n-image
|
||||
class="list-img"
|
||||
@ -8,54 +8,77 @@
|
||||
:src="image"
|
||||
:fallback-src="requireErrorImg()"
|
||||
></n-image>
|
||||
<n-ellipsis>
|
||||
<n-ellipsis style="margin-right: auto">
|
||||
<n-text class="list-text" :depth="2">
|
||||
{{ props.componentData.chartConfig.title }}
|
||||
</n-text>
|
||||
</n-ellipsis>
|
||||
<layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
|
||||
</div>
|
||||
<div :class="{ 'select-modal': select }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, computed } from 'vue'
|
||||
import { computed, PropType } from 'vue'
|
||||
import { requireErrorImg } from '@/utils'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
import { LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { LayersStatus } from '../LayersStatus/index'
|
||||
|
||||
const props = defineProps({
|
||||
componentData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
layerMode: {
|
||||
type: String as PropType<LayerModeEnum>,
|
||||
default: LayerModeEnum.THUMBNAIL
|
||||
}
|
||||
})
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const { image } = props.componentData.chartConfig
|
||||
|
||||
// 颜色
|
||||
const themeColor = computed(() => {
|
||||
return designStore.getAppTheme
|
||||
})
|
||||
|
||||
// 计算当前选中目标
|
||||
const select = computed(() => {
|
||||
const id = props.componentData.id
|
||||
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
|
||||
})
|
||||
|
||||
// 悬浮对象
|
||||
const hover = computed(() => {
|
||||
return props.componentData.id === chartEditStore.getTargetChart.hoverId
|
||||
})
|
||||
|
||||
// 组件状态 隐藏/锁定
|
||||
const status = computed(() => {
|
||||
return props.componentData.status
|
||||
})
|
||||
|
||||
// 是否选中文本
|
||||
const selectText = computed(() => {
|
||||
return props.layerMode === LayerModeEnum.TEXT
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$centerHeight: 52px;
|
||||
$centerMiniHeight: 28px;
|
||||
$textSize: 10px;
|
||||
|
||||
@include go(content-layers-list-item) {
|
||||
@ -72,15 +95,14 @@ $textSize: 10px;
|
||||
&:hover {
|
||||
@include fetch-bg-color('background-color4');
|
||||
}
|
||||
/* 选中 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
/* 需要设置最高级，覆盖 hover 的颜色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
.list-img {
|
||||
border: 1px solid v-bind('themeColor') !important;
|
||||
&:hover {
|
||||
@include deep() {
|
||||
.icon-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal,
|
||||
.item-content {
|
||||
position: absolute;
|
||||
@ -94,24 +116,39 @@ $textSize: 10px;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.select-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
|
||||
.list-img {
|
||||
flex-shrink: 0;
|
||||
height: $centerHeight;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
border: 1px solid;
|
||||
border: none !important;
|
||||
padding: 2px;
|
||||
@include hover-border-color('hover-border-color');
|
||||
}
|
||||
|
||||
.list-text {
|
||||
padding-left: 6px;
|
||||
font-size: $textSize;
|
||||
}
|
||||
|
||||
/* 选中样式 */
|
||||
&.select {
|
||||
border: 1px solid v-bind('themeColor');
|
||||
/* 需要设置最高级，覆盖 hover 的颜色 */
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
// mini样式
|
||||
&.list-mini {
|
||||
height: $centerMiniHeight;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
import LayersStatus from './index.vue'
|
||||
|
||||
export { LayersStatus }
|
||||
@ -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>
|
||||
0
src/views/chart/ContentLayers/enums.ts
Normal file
0
src/views/chart/ContentLayers/enums.ts
Normal file
@ -8,24 +8,49 @@
|
||||
@mousedown="boxMousedownHandle($event)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon size="16" :depth="2">
|
||||
<component :is="LayersIcon"></component>
|
||||
</n-icon>
|
||||
<n-icon size="16" :depth="2" :component="LayersIcon" />
|
||||
</template>
|
||||
|
||||
<template #top-right>
|
||||
<n-button-group style="display: flex">
|
||||
<n-button
|
||||
v-for="(item, index) in layerModeList"
|
||||
:key="index"
|
||||
ghost
|
||||
size="small"
|
||||
:type="layerMode === item.value ? 'primary' : 'tertiary'"
|
||||
@click="changeLayerType(item.value)"
|
||||
>
|
||||
<n-tooltip :show-arrow="false" trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon size="14" :component="item.icon" />
|
||||
</template>
|
||||
{{ item.label }}
|
||||
</n-tooltip>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
</template>
|
||||
|
||||
<!-- 图层内容 -->
|
||||
<n-space v-if="reverseList.length === 0" justify="center">
|
||||
<n-text class="not-layer-text">暂无图层~</n-text>
|
||||
</n-space>
|
||||
|
||||
<!-- https://github.com/SortableJS/vue.draggable.next -->
|
||||
<draggable item-key="id" v-model="layerList" ghostClass="ghost" @change="onMoveCallback">
|
||||
<template #item="{ element }">
|
||||
<div class="go-content-layer-box">
|
||||
<!-- 组合 -->
|
||||
<layers-group-list-item v-if="element.isGroup" :componentGroupData="element"></layers-group-list-item>
|
||||
<layers-group-list-item
|
||||
v-if="element.isGroup"
|
||||
:componentGroupData="element"
|
||||
:layer-mode="layerMode"
|
||||
></layers-group-list-item>
|
||||
<!-- 单组件 -->
|
||||
<layers-list-item
|
||||
v-else
|
||||
:componentData="element"
|
||||
:layer-mode="layerMode"
|
||||
@mousedown="mousedownHandle($event, element)"
|
||||
@mouseenter="mouseenterHandle(element)"
|
||||
@mouseleave="mouseleaveHandle(element)"
|
||||
@ -43,7 +68,7 @@ import Draggable from 'vuedraggable'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { ChartLayoutStoreEnum, LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
|
||||
@ -55,12 +80,18 @@ import { LayersGroupListItem } from './components/LayersGroupListItem/index'
|
||||
|
||||
import { icon } from '@/plugins'
|
||||
|
||||
const { LayersIcon } = icon.ionicons5
|
||||
const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5
|
||||
const chartLayoutStore = useChartLayoutStore()
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { handleContextMenu, onClickOutSide } = useContextMenu()
|
||||
|
||||
const layerModeList = [
|
||||
{ label: '缩略图', icon: GridIcon, value: LayerModeEnum.THUMBNAIL },
|
||||
{ label: '文本列表', icon: ListIcon, value: LayerModeEnum.TEXT }
|
||||
]
|
||||
|
||||
const layerList = ref<any>([])
|
||||
const layerMode = ref<LayerModeEnum>(chartLayoutStore.getLayerType)
|
||||
|
||||
// 逆序展示
|
||||
const reverseList = computed(() => {
|
||||
@ -83,16 +114,21 @@ const optionsHandle = (
|
||||
) => {
|
||||
// 多选处理
|
||||
if (chartEditStore.getTargetChart.selectId.length > 1) {
|
||||
const list: MenuOptionsItemType[] = []
|
||||
targetList.forEach(item => {
|
||||
// 成组
|
||||
if (item.key === MenuEnum.GROUP) {
|
||||
list.push(item)
|
||||
}
|
||||
})
|
||||
return list
|
||||
return targetList.filter(i => i.key === MenuEnum.GROUP)
|
||||
}
|
||||
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>
|
||||
|
||||
@ -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)
|
||||
|
||||
// * 多选默认选项
|
||||
|
||||
@ -26,6 +26,10 @@ export const winKeyboardValue = {
|
||||
[MenuEnum.SAVE]: winCtrlMerge('s'),
|
||||
[MenuEnum.GROUP]: winCtrlMerge('g'),
|
||||
[MenuEnum.UN_GROUP]: winCtrlMerge(winShiftMerge('g')),
|
||||
[MenuEnum.LOCK]: winCtrlMerge('l'),
|
||||
[MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
|
||||
[MenuEnum.HIDE]: winCtrlMerge('h'),
|
||||
[MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
|
||||
}
|
||||
|
||||
// 这个 Ctrl 后面还是换成了 ⌘
|
||||
@ -48,6 +52,10 @@ export const macKeyboardValue = {
|
||||
[MenuEnum.SAVE]: macCtrlMerge('s'),
|
||||
[MenuEnum.GROUP]: macCtrlMerge('g'),
|
||||
[MenuEnum.UN_GROUP]: macCtrlMerge(macShiftMerge('g')),
|
||||
[MenuEnum.LOCK]: macCtrlMerge('l'),
|
||||
[MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
|
||||
[MenuEnum.HIDE]: macCtrlMerge('h'),
|
||||
[MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
|
||||
}
|
||||
|
||||
// Win 快捷键列表
|
||||
@ -68,6 +76,12 @@ const winKeyList: Array<string> = [
|
||||
winKeyboardValue.save,
|
||||
winKeyboardValue.group,
|
||||
winKeyboardValue.unGroup,
|
||||
|
||||
winKeyboardValue.lock,
|
||||
winKeyboardValue.unLock,
|
||||
|
||||
winKeyboardValue.hide,
|
||||
winKeyboardValue.show,
|
||||
]
|
||||
|
||||
// Mac 快捷键列表
|
||||
@ -88,6 +102,12 @@ const macKeyList: Array<string> = [
|
||||
macKeyboardValue.save,
|
||||
macKeyboardValue.group,
|
||||
macKeyboardValue.unGroup,
|
||||
|
||||
macKeyboardValue.lock,
|
||||
macKeyboardValue.unLock,
|
||||
|
||||
macKeyboardValue.hide,
|
||||
macKeyboardValue.show,
|
||||
]
|
||||
|
||||
// 处理键盘记录
|
||||
@ -162,6 +182,24 @@ export const useAddKeyboard = () => {
|
||||
keymaster(e, throttle(() => { chartEditStore.setUnGroup(); return false }, throttleTime))
|
||||
break;
|
||||
|
||||
// 锁定 ct+l
|
||||
case keyboardValue.lock:
|
||||
keymaster(e, throttle(() => { chartEditStore.setLock(); return false }, throttleTime))
|
||||
break;
|
||||
// 解除锁定 ct+sh+l
|
||||
case keyboardValue.unLock:
|
||||
keymaster(e, throttle(() => { chartEditStore.setUnLock(); return false }, throttleTime))
|
||||
break;
|
||||
|
||||
// 锁定 ct+h
|
||||
case keyboardValue.hide:
|
||||
keymaster(e, throttle(() => { chartEditStore.setHide(); return false }, throttleTime))
|
||||
break;
|
||||
// 解除锁定 ct+sh+h
|
||||
case keyboardValue.show:
|
||||
keymaster(e, throttle(() => { chartEditStore.setShow(); return false }, throttleTime))
|
||||
break;
|
||||
|
||||
// 保存 ct+s
|
||||
case keyboardValue.save:
|
||||
keymaster(e, throttle(() => { useSyncIns.dataSyncUpdate(); return false }, 200))
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
:style="{
|
||||
...getComponentAttrStyle(item.attr, groupIndex),
|
||||
...getFilterStyle(item.styles),
|
||||
...getTransformStyle(item.styles)
|
||||
...getTransformStyle(item.styles),
|
||||
...getStatusStyle(item.status),
|
||||
...getBlendModeStyle(item.styles) as any
|
||||
}"
|
||||
>
|
||||
<component
|
||||
@ -23,8 +25,8 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle } from '../../utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
|
||||
|
||||
const props = defineProps({
|
||||
groupData: {
|
||||
|
||||
@ -7,8 +7,10 @@
|
||||
:style="{
|
||||
...getComponentAttrStyle(item.attr, index),
|
||||
...getFilterStyle(item.styles),
|
||||
...getTransformStyle(item.styles)
|
||||
}"
|
||||
...getTransformStyle(item.styles),
|
||||
...getStatusStyle(item.status),
|
||||
...getBlendModeStyle(item.styles) as any
|
||||
} as any"
|
||||
>
|
||||
<!-- 分组 -->
|
||||
<preview-render-group
|
||||
@ -37,8 +39,8 @@ import { ChartEditStorageType } from '../../index.d'
|
||||
import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
|
||||
import { CreateComponentGroupType } from '@/packages/index.d'
|
||||
import { chartColors } from '@/settings/chartThemes/index'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle } from '../../utils'
|
||||
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
|
||||
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
|
||||
|
||||
const props = defineProps({
|
||||
localStorageInfo: {
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
// 全局样式
|
||||
|
||||
Loading…
Reference in New Issue
Block a user