feat: 添加编辑器页面
luoer
parent
820c53378f
commit
95dfbc6cdb
|
|
@ -44,6 +44,7 @@
|
|||
"vite-plugin-pages": "^0.28.0",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-drag-resize": "^2.0.3",
|
||||
"vue-router": "^4.2.4",
|
||||
"vue-tsc": "^1.8.11"
|
||||
}
|
||||
|
|
|
|||
382
pnpm-lock.yaml
382
pnpm-lock.yaml
|
|
@ -94,12 +94,12 @@ devDependencies:
|
|||
vite-plugin-style-import:
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0(vite@4.4.9)
|
||||
vitepress:
|
||||
specifier: 1.0.0-beta.1
|
||||
version: 1.0.0-beta.1(@algolia/client-search@4.20.0)(axios@1.5.0)(less@4.2.0)(nprogress@0.2.0)(search-insights@2.8.2)
|
||||
vue:
|
||||
specifier: ^3.3.4
|
||||
version: 3.3.4
|
||||
vue-drag-resize:
|
||||
specifier: ^2.0.3
|
||||
version: 2.0.3
|
||||
vue-router:
|
||||
specifier: ^4.2.4
|
||||
version: 4.2.4(vue@3.3.4)
|
||||
|
|
@ -109,140 +109,6 @@ devDependencies:
|
|||
|
||||
packages:
|
||||
|
||||
/@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2):
|
||||
resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
|
||||
dependencies:
|
||||
'@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2)
|
||||
'@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
|
||||
transitivePeerDependencies:
|
||||
- '@algolia/client-search'
|
||||
- algoliasearch
|
||||
- search-insights
|
||||
dev: true
|
||||
|
||||
/@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2):
|
||||
resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
|
||||
peerDependencies:
|
||||
search-insights: '>= 1 < 3'
|
||||
dependencies:
|
||||
'@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
|
||||
search-insights: 2.8.2
|
||||
transitivePeerDependencies:
|
||||
- '@algolia/client-search'
|
||||
- algoliasearch
|
||||
dev: true
|
||||
|
||||
/@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
|
||||
resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
|
||||
peerDependencies:
|
||||
'@algolia/client-search': '>= 4.9.1 < 6'
|
||||
algoliasearch: '>= 4.9.1 < 6'
|
||||
dependencies:
|
||||
'@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
|
||||
'@algolia/client-search': 4.20.0
|
||||
algoliasearch: 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0):
|
||||
resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
|
||||
peerDependencies:
|
||||
'@algolia/client-search': '>= 4.9.1 < 6'
|
||||
algoliasearch: '>= 4.9.1 < 6'
|
||||
dependencies:
|
||||
'@algolia/client-search': 4.20.0
|
||||
algoliasearch: 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/cache-browser-local-storage@4.20.0:
|
||||
resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==}
|
||||
dependencies:
|
||||
'@algolia/cache-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/cache-common@4.20.0:
|
||||
resolution: {integrity: sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==}
|
||||
dev: true
|
||||
|
||||
/@algolia/cache-in-memory@4.20.0:
|
||||
resolution: {integrity: sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==}
|
||||
dependencies:
|
||||
'@algolia/cache-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/client-account@4.20.0:
|
||||
resolution: {integrity: sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==}
|
||||
dependencies:
|
||||
'@algolia/client-common': 4.20.0
|
||||
'@algolia/client-search': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/client-analytics@4.20.0:
|
||||
resolution: {integrity: sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==}
|
||||
dependencies:
|
||||
'@algolia/client-common': 4.20.0
|
||||
'@algolia/client-search': 4.20.0
|
||||
'@algolia/requester-common': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/client-common@4.20.0:
|
||||
resolution: {integrity: sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==}
|
||||
dependencies:
|
||||
'@algolia/requester-common': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/client-personalization@4.20.0:
|
||||
resolution: {integrity: sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==}
|
||||
dependencies:
|
||||
'@algolia/client-common': 4.20.0
|
||||
'@algolia/requester-common': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/client-search@4.20.0:
|
||||
resolution: {integrity: sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==}
|
||||
dependencies:
|
||||
'@algolia/client-common': 4.20.0
|
||||
'@algolia/requester-common': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/logger-common@4.20.0:
|
||||
resolution: {integrity: sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==}
|
||||
dev: true
|
||||
|
||||
/@algolia/logger-console@4.20.0:
|
||||
resolution: {integrity: sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==}
|
||||
dependencies:
|
||||
'@algolia/logger-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/requester-browser-xhr@4.20.0:
|
||||
resolution: {integrity: sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==}
|
||||
dependencies:
|
||||
'@algolia/requester-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/requester-common@4.20.0:
|
||||
resolution: {integrity: sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==}
|
||||
dev: true
|
||||
|
||||
/@algolia/requester-node-http@4.20.0:
|
||||
resolution: {integrity: sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==}
|
||||
dependencies:
|
||||
'@algolia/requester-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@algolia/transporter@4.20.0:
|
||||
resolution: {integrity: sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==}
|
||||
dependencies:
|
||||
'@algolia/cache-common': 4.20.0
|
||||
'@algolia/logger-common': 4.20.0
|
||||
'@algolia/requester-common': 4.20.0
|
||||
dev: true
|
||||
|
||||
/@ampproject/remapping@2.2.1:
|
||||
resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
|
@ -608,49 +474,6 @@ packages:
|
|||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@docsearch/css@3.5.2:
|
||||
resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
|
||||
dev: true
|
||||
|
||||
/@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2):
|
||||
resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
|
||||
dependencies:
|
||||
'@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2)
|
||||
preact: 10.17.1
|
||||
transitivePeerDependencies:
|
||||
- '@algolia/client-search'
|
||||
- '@types/react'
|
||||
- react
|
||||
- react-dom
|
||||
- search-insights
|
||||
dev: true
|
||||
|
||||
/@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2):
|
||||
resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
|
||||
peerDependencies:
|
||||
'@types/react': '>= 16.8.0 < 19.0.0'
|
||||
react: '>= 16.8.0 < 19.0.0'
|
||||
react-dom: '>= 16.8.0 < 19.0.0'
|
||||
search-insights: '>= 1 < 3'
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
search-insights:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2)
|
||||
'@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
|
||||
'@docsearch/css': 3.5.2
|
||||
algoliasearch: 4.20.0
|
||||
search-insights: 2.8.2
|
||||
transitivePeerDependencies:
|
||||
- '@algolia/client-search'
|
||||
dev: true
|
||||
|
||||
/@esbuild-kit/cjs-loader@2.4.2:
|
||||
resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
|
||||
dependencies:
|
||||
|
|
@ -1493,10 +1316,6 @@ packages:
|
|||
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
|
||||
dev: true
|
||||
|
||||
/@types/web-bluetooth@0.0.17:
|
||||
resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
|
||||
dev: true
|
||||
|
||||
/@unocss/astro@0.49.8(vite@4.4.9):
|
||||
resolution: {integrity: sha512-JymFhe6OqBMjCTMGXVVfTn7dNTD5I/LDtKy+6uOgo+DRsAtZVpHJkR3e3lrGViJl0TiIIohHJBAu0a9G0zwjiQ==}
|
||||
dependencies:
|
||||
|
|
@ -1841,18 +1660,6 @@ packages:
|
|||
- typescript
|
||||
dev: true
|
||||
|
||||
/@vueuse/core@10.4.1(vue@3.3.4):
|
||||
resolution: {integrity: sha512-DkHIfMIoSIBjMgRRvdIvxsyboRZQmImofLyOHADqiVbQVilP8VVHDhBX2ZqoItOgu7dWa8oXiNnScOdPLhdEXg==}
|
||||
dependencies:
|
||||
'@types/web-bluetooth': 0.0.17
|
||||
'@vueuse/metadata': 10.4.1
|
||||
'@vueuse/shared': 10.4.1(vue@3.3.4)
|
||||
vue-demi: 0.14.6(vue@3.3.4)
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: true
|
||||
|
||||
/@vueuse/core@9.13.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
|
||||
dependencies:
|
||||
|
|
@ -1865,75 +1672,10 @@ packages:
|
|||
- vue
|
||||
dev: true
|
||||
|
||||
/@vueuse/integrations@10.4.1(axios@1.5.0)(focus-trap@7.5.2)(nprogress@0.2.0)(vue@3.3.4):
|
||||
resolution: {integrity: sha512-uRBPyG5Lxoh1A/J+boiioPT3ELEAPEo4t8W6Mr4yTKIQBeW/FcbsotZNPr4k9uz+3QEksMmflWloS9wCnypM7g==}
|
||||
peerDependencies:
|
||||
async-validator: '*'
|
||||
axios: '*'
|
||||
change-case: '*'
|
||||
drauu: '*'
|
||||
focus-trap: '*'
|
||||
fuse.js: '*'
|
||||
idb-keyval: '*'
|
||||
jwt-decode: '*'
|
||||
nprogress: '*'
|
||||
qrcode: '*'
|
||||
sortablejs: '*'
|
||||
universal-cookie: '*'
|
||||
peerDependenciesMeta:
|
||||
async-validator:
|
||||
optional: true
|
||||
axios:
|
||||
optional: true
|
||||
change-case:
|
||||
optional: true
|
||||
drauu:
|
||||
optional: true
|
||||
focus-trap:
|
||||
optional: true
|
||||
fuse.js:
|
||||
optional: true
|
||||
idb-keyval:
|
||||
optional: true
|
||||
jwt-decode:
|
||||
optional: true
|
||||
nprogress:
|
||||
optional: true
|
||||
qrcode:
|
||||
optional: true
|
||||
sortablejs:
|
||||
optional: true
|
||||
universal-cookie:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vueuse/core': 10.4.1(vue@3.3.4)
|
||||
'@vueuse/shared': 10.4.1(vue@3.3.4)
|
||||
axios: 1.5.0
|
||||
focus-trap: 7.5.2
|
||||
nprogress: 0.2.0
|
||||
vue-demi: 0.14.6(vue@3.3.4)
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: true
|
||||
|
||||
/@vueuse/metadata@10.4.1:
|
||||
resolution: {integrity: sha512-2Sc8X+iVzeuMGHr6O2j4gv/zxvQGGOYETYXEc41h0iZXIRnRbJZGmY/QP8dvzqUelf8vg0p/yEA5VpCEu+WpZg==}
|
||||
dev: true
|
||||
|
||||
/@vueuse/metadata@9.13.0:
|
||||
resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
|
||||
dev: true
|
||||
|
||||
/@vueuse/shared@10.4.1(vue@3.3.4):
|
||||
resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==}
|
||||
dependencies:
|
||||
vue-demi: 0.14.6(vue@3.3.4)
|
||||
transitivePeerDependencies:
|
||||
- '@vue/composition-api'
|
||||
- vue
|
||||
dev: true
|
||||
|
||||
/@vueuse/shared@9.13.0(vue@3.3.4):
|
||||
resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
|
||||
dependencies:
|
||||
|
|
@ -2012,25 +1754,6 @@ packages:
|
|||
uri-js: 4.4.1
|
||||
dev: true
|
||||
|
||||
/algoliasearch@4.20.0:
|
||||
resolution: {integrity: sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==}
|
||||
dependencies:
|
||||
'@algolia/cache-browser-local-storage': 4.20.0
|
||||
'@algolia/cache-common': 4.20.0
|
||||
'@algolia/cache-in-memory': 4.20.0
|
||||
'@algolia/client-account': 4.20.0
|
||||
'@algolia/client-analytics': 4.20.0
|
||||
'@algolia/client-common': 4.20.0
|
||||
'@algolia/client-personalization': 4.20.0
|
||||
'@algolia/client-search': 4.20.0
|
||||
'@algolia/logger-common': 4.20.0
|
||||
'@algolia/logger-console': 4.20.0
|
||||
'@algolia/requester-browser-xhr': 4.20.0
|
||||
'@algolia/requester-common': 4.20.0
|
||||
'@algolia/requester-node-http': 4.20.0
|
||||
'@algolia/transporter': 4.20.0
|
||||
dev: true
|
||||
|
||||
/ansi-align@3.0.1:
|
||||
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
|
||||
dependencies:
|
||||
|
|
@ -2054,10 +1777,6 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dev: true
|
||||
|
||||
/ansi-sequence-parser@1.1.1:
|
||||
resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
|
||||
dev: true
|
||||
|
||||
/ansi-styles@3.2.1:
|
||||
resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
|
||||
engines: {node: '>=4'}
|
||||
|
|
@ -2237,10 +1956,6 @@ packages:
|
|||
readable-stream: 3.6.2
|
||||
dev: true
|
||||
|
||||
/body-scroll-lock@4.0.0-beta.0:
|
||||
resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
|
||||
dev: true
|
||||
|
||||
/boxen@7.1.1:
|
||||
resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
|
||||
engines: {node: '>=14.16'}
|
||||
|
|
@ -3627,12 +3342,6 @@ packages:
|
|||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/focus-trap@7.5.2:
|
||||
resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==}
|
||||
dependencies:
|
||||
tabbable: 6.2.0
|
||||
dev: true
|
||||
|
||||
/follow-redirects@1.15.2:
|
||||
resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
|
||||
engines: {node: '>=4.0'}
|
||||
|
|
@ -5012,10 +4721,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/mark.js@8.11.1:
|
||||
resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
|
||||
dev: true
|
||||
|
||||
/mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
dev: true
|
||||
|
|
@ -5159,10 +4864,6 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/minisearch@6.1.0:
|
||||
resolution: {integrity: sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==}
|
||||
dev: true
|
||||
|
||||
/minizlib@2.1.2:
|
||||
resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
|
@ -5968,10 +5669,6 @@ packages:
|
|||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/preact@10.17.1:
|
||||
resolution: {integrity: sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==}
|
||||
dev: true
|
||||
|
||||
/prelude-ls@1.1.2:
|
||||
resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
|
@ -6396,10 +6093,6 @@ packages:
|
|||
resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
|
||||
dev: true
|
||||
|
||||
/search-insights@2.8.2:
|
||||
resolution: {integrity: sha512-PxA9M5Q2bpBelVvJ3oDZR8nuY00Z6qwOxL53wNpgzV28M/D6u9WUbImDckjLSILBF8F1hn/mgyuUaOPtjow4Qw==}
|
||||
dev: true
|
||||
|
||||
/semver-diff@4.0.0:
|
||||
resolution: {integrity: sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -6471,15 +6164,6 @@ packages:
|
|||
rechoir: 0.6.2
|
||||
dev: true
|
||||
|
||||
/shiki@0.14.4:
|
||||
resolution: {integrity: sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==}
|
||||
dependencies:
|
||||
ansi-sequence-parser: 1.1.1
|
||||
jsonc-parser: 3.2.0
|
||||
vscode-oniguruma: 1.7.0
|
||||
vscode-textmate: 8.0.0
|
||||
dev: true
|
||||
|
||||
/should-equal@2.0.0:
|
||||
resolution: {integrity: sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==}
|
||||
dependencies:
|
||||
|
|
@ -6839,10 +6523,6 @@ packages:
|
|||
- encoding
|
||||
dev: true
|
||||
|
||||
/tabbable@6.2.0:
|
||||
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
|
||||
dev: true
|
||||
|
||||
/tapable@1.1.3:
|
||||
resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
@ -7423,50 +7103,6 @@ packages:
|
|||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
/vitepress@1.0.0-beta.1(@algolia/client-search@4.20.0)(axios@1.5.0)(less@4.2.0)(nprogress@0.2.0)(search-insights@2.8.2):
|
||||
resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@docsearch/css': 3.5.2
|
||||
'@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.8.2)
|
||||
'@vitejs/plugin-vue': 4.3.4(vite@4.4.9)(vue@3.3.4)
|
||||
'@vue/devtools-api': 6.5.0
|
||||
'@vueuse/core': 10.4.1(vue@3.3.4)
|
||||
'@vueuse/integrations': 10.4.1(axios@1.5.0)(focus-trap@7.5.2)(nprogress@0.2.0)(vue@3.3.4)
|
||||
body-scroll-lock: 4.0.0-beta.0
|
||||
focus-trap: 7.5.2
|
||||
mark.js: 8.11.1
|
||||
minisearch: 6.1.0
|
||||
shiki: 0.14.4
|
||||
vite: 4.4.9(less@4.2.0)
|
||||
vue: 3.3.4
|
||||
transitivePeerDependencies:
|
||||
- '@algolia/client-search'
|
||||
- '@types/node'
|
||||
- '@types/react'
|
||||
- '@vue/composition-api'
|
||||
- async-validator
|
||||
- axios
|
||||
- change-case
|
||||
- drauu
|
||||
- fuse.js
|
||||
- idb-keyval
|
||||
- jwt-decode
|
||||
- less
|
||||
- lightningcss
|
||||
- nprogress
|
||||
- qrcode
|
||||
- react
|
||||
- react-dom
|
||||
- sass
|
||||
- search-insights
|
||||
- sortablejs
|
||||
- stylus
|
||||
- sugarss
|
||||
- terser
|
||||
- universal-cookie
|
||||
dev: true
|
||||
|
||||
/vm2@3.9.19:
|
||||
resolution: {integrity: sha512-J637XF0DHDMV57R6JyVsTak7nIL8gy5KH4r1HiwWLf/4GBbb5MKL5y7LpmF4A8E2nR6XmzpmMFQ7V7ppPTmUQg==}
|
||||
engines: {node: '>=6.0'}
|
||||
|
|
@ -7477,14 +7113,6 @@ packages:
|
|||
acorn-walk: 8.2.0
|
||||
dev: true
|
||||
|
||||
/vscode-oniguruma@1.7.0:
|
||||
resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
|
||||
dev: true
|
||||
|
||||
/vscode-textmate@8.0.0:
|
||||
resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
|
||||
dev: true
|
||||
|
||||
/vue-demi@0.14.6(vue@3.3.4):
|
||||
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -7500,6 +7128,10 @@ packages:
|
|||
vue: 3.3.4
|
||||
dev: true
|
||||
|
||||
/vue-drag-resize@2.0.3:
|
||||
resolution: {integrity: sha512-5q03tZ/LyvQsg1iHRcqs+wI2OKNbNIWl9+7V8rVL6MxJhZLCIYSSgbAUaDE38LhD6dFd5aJhdgNmES61AxjXuw==}
|
||||
dev: true
|
||||
|
||||
/vue-router@4.2.4(vue@3.3.4):
|
||||
resolution: {integrity: sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==}
|
||||
peerDependencies:
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<template>
|
||||
<a-config-provider>
|
||||
<!-- <a-config-provider>
|
||||
<router-view v-slot="{ Component }">
|
||||
<page-403 v-if="Math.random() > 0.999"></page-403>
|
||||
<component v-else :is="Component"></component>
|
||||
</router-view>
|
||||
</a-config-provider>
|
||||
</a-config-provider> -->
|
||||
<div>
|
||||
<my-editor></my-editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MyEditor from '@/components/editor/index.vue';
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,350 @@
|
|||
<!-- 修改自: https://github.com/zuley/vue-color-picker -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
// 当前颜色
|
||||
modelValue: string;
|
||||
// 默认颜色
|
||||
defaultColor?: string;
|
||||
// 禁用状态
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
defaultColor: "#000000",
|
||||
}
|
||||
);
|
||||
|
||||
const emits = defineEmits<{
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", value: string): void;
|
||||
}>();
|
||||
|
||||
// 面板状态
|
||||
const openStatus = ref(false);
|
||||
// 打开面板
|
||||
const openPanel = () => {
|
||||
openStatus.value = !props.disabled;
|
||||
};
|
||||
const colorPicker = ref<HTMLInputElement | null>(null);
|
||||
// 关闭面板
|
||||
const closePanel = () => {
|
||||
openStatus.value = false;
|
||||
};
|
||||
|
||||
onClickOutside(colorPicker, closePanel);
|
||||
|
||||
// 鼠标经过的颜色块
|
||||
const hoveColor = ref("");
|
||||
const handleOver = (color: string) => {
|
||||
hoveColor.value = color;
|
||||
};
|
||||
// 主题颜色
|
||||
const tColor = [
|
||||
"#000000",
|
||||
"#ffffff",
|
||||
"#eeece1",
|
||||
"#1e497b",
|
||||
"#4e81bb",
|
||||
"#e2534d",
|
||||
"#9aba60",
|
||||
"#8165a0",
|
||||
"#47acc5",
|
||||
"#f9974c",
|
||||
];
|
||||
// 颜色面板
|
||||
const colorConfig = [
|
||||
["#7f7f7f", "#f2f2f2"],
|
||||
["#0d0d0d", "#808080"],
|
||||
["#1c1a10", "#ddd8c3"],
|
||||
["#0e243d", "#c6d9f0"],
|
||||
["#233f5e", "#dae5f0"],
|
||||
["#632623", "#f2dbdb"],
|
||||
["#4d602c", "#eaf1de"],
|
||||
["#3f3150", "#e6e0ec"],
|
||||
["#1e5867", "#d9eef3"],
|
||||
["#99490f", "#fee9da"],
|
||||
];
|
||||
// 标准颜色
|
||||
const bColor = [
|
||||
"#c21401",
|
||||
"#ff1e02",
|
||||
"#ffc12a",
|
||||
"#ffff3a",
|
||||
"#90cf5b",
|
||||
"#00af57",
|
||||
"#00afee",
|
||||
"#0071be",
|
||||
"#00215f",
|
||||
"#72349d",
|
||||
];
|
||||
const html5Color = props.modelValue;
|
||||
// 计算属性：显示面板颜色
|
||||
const showPanelColor = computed(() => {
|
||||
if (hoveColor.value) {
|
||||
return hoveColor;
|
||||
} else {
|
||||
return showColor;
|
||||
}
|
||||
});
|
||||
// 计算属性：显示颜色
|
||||
const showColor = computed(() => {
|
||||
if (props.modelValue) {
|
||||
return props.modelValue;
|
||||
} else {
|
||||
return props.defaultColor;
|
||||
}
|
||||
});
|
||||
// 计算属性：颜色面板
|
||||
const colorPanel = computed(() => {
|
||||
let colorArr = [];
|
||||
for (let color of colorConfig) {
|
||||
colorArr.push(gradient(color[1], color[0], 5));
|
||||
}
|
||||
return colorArr;
|
||||
});
|
||||
|
||||
const html5ColorEl = ref<HTMLInputElement | null>(null);
|
||||
const triggerHtml5Color = () => {
|
||||
html5ColorEl.value?.click();
|
||||
};
|
||||
// 更新组件的值
|
||||
const updataValue = (value: string) => {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
openStatus.value = false;
|
||||
};
|
||||
// 设置默认颜色
|
||||
const handleDefaultColor = () => {
|
||||
updataValue(props.defaultColor);
|
||||
};
|
||||
|
||||
/**
|
||||
* 颜色计算
|
||||
*/
|
||||
// 格式化 hex 颜色值
|
||||
const parseColor = (hexStr: string) => {
|
||||
if (hexStr.length === 4) {
|
||||
return (hexStr = "#" + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3]);
|
||||
} else {
|
||||
return hexStr;
|
||||
}
|
||||
};
|
||||
// RGB 颜色 转 HEX 颜色
|
||||
const rgbToHex = (r: number, g: number, b: number) => {
|
||||
const hex = ((r << 16) | (g << 8) | b).toString(16);
|
||||
return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
|
||||
};
|
||||
// HEX 转 RGB 颜色
|
||||
const hexToRgb = (hex: string) => {
|
||||
hex = parseColor(hex);
|
||||
let rgb = [];
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
rgb.push(parseInt("0x" + hex.slice(i, i + 2)));
|
||||
}
|
||||
return rgb;
|
||||
};
|
||||
// 计算渐变过渡颜色
|
||||
const gradient = (startColor: string, endColor: string, step: number) => {
|
||||
// 讲 hex 转换为 rgb
|
||||
let sColor = hexToRgb(startColor);
|
||||
let eColor = hexToRgb(endColor);
|
||||
// 计算R\G\B每一步的差值
|
||||
let rStep = (eColor[0] - sColor[0]) / step;
|
||||
let gStep = (eColor[1] - sColor[1]) / step;
|
||||
let bStep = (eColor[2] - sColor[2]) / step;
|
||||
let gradientColorArr = [];
|
||||
// 计算每一步的hex值
|
||||
for (let i = 0; i < step; i++) {
|
||||
gradientColorArr.push(rgbToHex(rStep * i + sColor[0], gStep * i + sColor[1], bStep * i + sColor[2]));
|
||||
}
|
||||
return gradientColorArr;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="m-colorPicker"
|
||||
ref="colorPicker"
|
||||
@click="
|
||||
(event) => {
|
||||
event.stopPropagation();
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- 颜色显示小方块 -->
|
||||
<div
|
||||
class="colorBtn"
|
||||
:style="`background-color: ${showColor}`"
|
||||
:class="{ disabled: disabled }"
|
||||
@click="openPanel"
|
||||
></div>
|
||||
<!-- 颜色色盘 -->
|
||||
<div class="box" :class="{ open: openStatus }">
|
||||
<div class="hd">
|
||||
<div class="colorView" :style="{ 'background-color': showPanelColor.value }"></div>
|
||||
<div
|
||||
class="defaultColor"
|
||||
@click="handleDefaultColor"
|
||||
@mouseover="handleOver(defaultColor)"
|
||||
@mouseout="handleOver('')"
|
||||
>
|
||||
默认颜色
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<h3>主题颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="(color, index) of tColor"
|
||||
:key="index"
|
||||
:style="{ cursor: 'pointer', backgroundColor: color }"
|
||||
@mouseover="handleOver(color)"
|
||||
@mouseout="handleOver('')"
|
||||
@click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<ul class="bColor">
|
||||
<li v-for="(item, index) of colorPanel" :key="index">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(color, cindex) of item"
|
||||
:key="cindex"
|
||||
:style="{ cursor: 'pointer', backgroundColor: color }"
|
||||
@mouseover="handleOver(color)"
|
||||
@mouseout="handleOver('')"
|
||||
@click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>标准颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="(color, index) of bColor"
|
||||
:key="index"
|
||||
:style="{ cursor: 'pointer', backgroundColor: color }"
|
||||
@mouseover="handleOver(color)"
|
||||
@mouseout="handleOver('')"
|
||||
@click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<h3 @click="triggerHtml5Color">更多颜色...</h3>
|
||||
<!-- 用以激活HTML5颜色面板 -->
|
||||
<input type="color" ref="html5ColorEl" v-model="html5Color" @change="updataValue(html5Color)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.m-colorPicker {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.colorBtn {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.colorBtn.disabled {
|
||||
cursor: no-drop;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
visibility: hidden;
|
||||
border-radius: 2px;
|
||||
margin-top: 2px;
|
||||
padding: 10px;
|
||||
padding-bottom: 5px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: content-box;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
}
|
||||
input {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.box.open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
.hd {
|
||||
overflow: hidden;
|
||||
line-height: 29px;
|
||||
.colorView {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.defaultColor {
|
||||
width: 80px;
|
||||
float: right;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.tColor {
|
||||
li {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
li:hover {
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.bColor {
|
||||
li {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
li {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
transition: all 0.3s ease;
|
||||
margin: 0;
|
||||
}
|
||||
li:hover {
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<a-modal :visible="true" :fullscreen="true" :footer="false" class="ani-modal">
|
||||
<div class="w-full h-full bg-slate-100 grid grid-rows-[auto_1fr]">
|
||||
<div class="h-13 bg-white border-b border-slate-200 z-10">
|
||||
<panel-header></panel-header>
|
||||
</div>
|
||||
<div class="grid grid-cols-[auto_1fr_auto]">
|
||||
<div class="bg-white shadow-[2px_0_6px_rgba(0,0,0,.05)] z-10">
|
||||
<panel-left></panel-left>
|
||||
</div>
|
||||
<div class="w-full h-full">
|
||||
<panel-main></panel-main>
|
||||
</div>
|
||||
<div class="bg-white shadow-[-2px_0_6px_rgba(0,0,0,.05)]">
|
||||
<panel-right></panel-right>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PanelLeft from "./panel-left/index.vue";
|
||||
import PanelMain from "./panel-main/index.vue";
|
||||
import PanelRight from "./panel-right/index.vue";
|
||||
import PanelHeader from "./panel-header/index.vue";
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ani-modal {
|
||||
.muti-form-item .arco-form-item .arco-form-item-label {
|
||||
color: #899;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
.arco-modal-fullscreen {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
.arco-modal-header {
|
||||
display: none;
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.arco-tabs-nav-vertical .arco-tabs-nav-ink {
|
||||
display: none;
|
||||
}
|
||||
.arco-tabs-nav-vertical.arco-tabs-nav-type-line .arco-tabs-tab {
|
||||
padding: 4px;
|
||||
}
|
||||
.arco-form-item-content-flex {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
export interface Block<T = any> {
|
||||
id: string;
|
||||
type: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
bgImage?: string;
|
||||
bgColor?: string;
|
||||
data: T;
|
||||
meta: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface Container {
|
||||
id: string;
|
||||
type: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
bgImage?: string;
|
||||
bgColor?: string;
|
||||
children: Block[];
|
||||
}
|
||||
|
||||
export interface Current {
|
||||
container: Container;
|
||||
block: Block;
|
||||
}
|
||||
|
||||
export type TextAlign = "left" | "center" | "right";
|
||||
|
||||
export interface TextStyle {
|
||||
text: string;
|
||||
family: string;
|
||||
size: number;
|
||||
color: string;
|
||||
bold: boolean;
|
||||
italic: boolean;
|
||||
underline: boolean;
|
||||
align: TextAlign;
|
||||
}
|
||||
|
||||
export const TextAlignOptions = [
|
||||
{
|
||||
label: "居上",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "居下",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "居中",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "居左",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "居右",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const TextFamilyOptions = [
|
||||
{
|
||||
label: "微软雅黑111111111",
|
||||
value: "microsoft yahei",
|
||||
},
|
||||
{
|
||||
label: "黑体",
|
||||
value: "gothic",
|
||||
},
|
||||
{
|
||||
label: "宋体",
|
||||
value: "simsun",
|
||||
},
|
||||
{
|
||||
label: "Arial",
|
||||
value: "arial",
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
export interface Text {
|
||||
/**
|
||||
* 文字内容
|
||||
*/
|
||||
text: string;
|
||||
/**
|
||||
* 字体
|
||||
*/
|
||||
family: string;
|
||||
/**
|
||||
* 字号(px)
|
||||
*/
|
||||
size: number;
|
||||
/**
|
||||
* 颜色(16进制)
|
||||
*/
|
||||
color: string;
|
||||
/**
|
||||
* 是否加粗
|
||||
*/
|
||||
bold: boolean;
|
||||
/**
|
||||
* 是否斜体
|
||||
*/
|
||||
italic: boolean;
|
||||
/**
|
||||
* 是否下划线
|
||||
*/
|
||||
underline: boolean;
|
||||
/**
|
||||
* 对齐方式
|
||||
*/
|
||||
align: number;
|
||||
}
|
||||
|
||||
export const DefaultText = {
|
||||
text: "双击编辑文字",
|
||||
family: "microsoft yahei",
|
||||
size: 14,
|
||||
color: "#000000",
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
align: 3,
|
||||
}
|
||||
|
||||
export const TextAlignOptions = [
|
||||
{
|
||||
label: "居上",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "居下",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: "居中",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: "居左",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: "居右",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const TextFamilyOptions = [
|
||||
{
|
||||
label: "微软雅黑111111111",
|
||||
value: "microsoft yahei",
|
||||
},
|
||||
{
|
||||
label: "黑体",
|
||||
value: "gothic",
|
||||
},
|
||||
{
|
||||
label: "宋体",
|
||||
value: "simsun",
|
||||
},
|
||||
{
|
||||
label: "Arial",
|
||||
value: "arial",
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="w-full h-full table overflow-hidden" :style="style">
|
||||
<div class="table-cell break-all" :style="{ verticalAlign: style.verticalAlign }">
|
||||
<slot>
|
||||
{{ data.text }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Text } from "./index.ts";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<Text>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const style = computed(() => {
|
||||
const { size, family, color, bold, italic, underline, align } = props.data;
|
||||
|
||||
let textAlign = "left";
|
||||
let verticalAlign = "middle";
|
||||
switch (align) {
|
||||
case 1:
|
||||
textAlign = "center";
|
||||
verticalAlign = "top";
|
||||
break;
|
||||
case 2:
|
||||
textAlign = "center";
|
||||
verticalAlign = "bottom";
|
||||
break;
|
||||
case 3:
|
||||
textAlign = "center";
|
||||
verticalAlign = "middle";
|
||||
break;
|
||||
case 4:
|
||||
textAlign = "left";
|
||||
verticalAlign = "middle";
|
||||
break;
|
||||
case 5:
|
||||
textAlign = "right";
|
||||
verticalAlign = "middle";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
fontFamily: family,
|
||||
fontSize: size + "px",
|
||||
fontWeight: bold ? "bold" : "normal",
|
||||
fontStyle: italic ? "italic" : "normal",
|
||||
textDecoration: underline ? "underline" : "none",
|
||||
color,
|
||||
textAlign,
|
||||
verticalAlign,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div class="h-full flex items-center justify-between px-4">
|
||||
<div class="text-base">前端编辑器</div>
|
||||
<div class="flex gap-2">
|
||||
<a-button> 设置 </a-button>
|
||||
<a-button type="primary"> 立即保存 </a-button>
|
||||
<a-button>退出</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="border-r border-slate-200">
|
||||
<a-menu :collapsed="true">
|
||||
<a-menu-item key="0_0">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-all-application"></i>
|
||||
</template>
|
||||
组件列表
|
||||
</a-menu-item>
|
||||
<a-menu-item key="0_1">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-all-application"></i>
|
||||
</template>
|
||||
Menu 2
|
||||
</a-menu-item>
|
||||
<a-menu-item key="0_2">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-all-application"></i>
|
||||
</template>
|
||||
Menu 3
|
||||
</a-menu-item>
|
||||
<a-menu-item key="0_3">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-all-application"></i>
|
||||
</template>
|
||||
Menu 4
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="h-full grid grid-rows-[auto_1fr]">
|
||||
<div class="h-10 bg-white"></div>
|
||||
<div class="h-full p-5 px-6">
|
||||
<div class="bg-white h-full relative">
|
||||
<drag-resizer
|
||||
:style="{ backgroundColor: item.bgColor }"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:parentLimitation="true"
|
||||
@dragging="onItemDragOrResize"
|
||||
@resizing="onItemDragOrResize"
|
||||
>
|
||||
<text-render :data="textCh"> </text-render>
|
||||
</drag-resizer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DragResizer from "vue-drag-resize";
|
||||
import TextRender from "../items/text/render.vue";
|
||||
|
||||
const item = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 200,
|
||||
h: 100,
|
||||
bgColor: "#0099ff",
|
||||
xFixed: false,
|
||||
yFixed: false,
|
||||
resizable: true,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
const onItemDragOrResize = (rect) => {
|
||||
item.value.x = rect.left;
|
||||
item.value.y = rect.top;
|
||||
item.value.w = rect.width;
|
||||
item.value.h = rect.height;
|
||||
};
|
||||
|
||||
const textCh = {
|
||||
text: "文本",
|
||||
family: "simsun",
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
size: 14,
|
||||
color: "#33cc99",
|
||||
align: 3,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="flex gap-4">
|
||||
<a-form-item label="左侧">
|
||||
<a-input-number v-model="block.x" :min="0" :max="100">
|
||||
<template #prefix>
|
||||
<a-tooltip content="固定水平方向">
|
||||
<i
|
||||
class="cursor-pointer text-gray-400 hover:text-gray-700"
|
||||
:class="
|
||||
block.xFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'
|
||||
"
|
||||
@click="block.xFixed = !block.xFixed"
|
||||
></i>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="顶部">
|
||||
<a-input-number v-model="block.y" :min="0" :max="100">
|
||||
<template #prefix>
|
||||
<a-tooltip content="固定垂直方向">
|
||||
<i
|
||||
class="cursor-pointer text-gray-400 hover:text-gray-700"
|
||||
:class="
|
||||
block.yFixed ? 'icon-park-outline-lock text-gray-900' : 'icon-park-outline-unlock text-gray-400'
|
||||
"
|
||||
@click="block.yFixed = !block.yFixed"
|
||||
></i>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<a-form-item label="宽度">
|
||||
<a-input-number v-model="block.w" :min="0" :max="100"> </a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="高度">
|
||||
<a-input-number v-model="block.h" :min="0" :max="100"> </a-input-number>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<a-form-item label="背景图片">
|
||||
<a-input v-model="block.bgImage" class="group w-full" allow-clear placeholder="暂无">
|
||||
<template #prefix>
|
||||
<a-link class="!text-xs">选择</a-link>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="背景颜色">
|
||||
<a-input v-model="block.bgColor" allow-clear placeholder="无">
|
||||
<template #prefix>
|
||||
<color-picker v-model="block.bgColor"></color-picker>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Block } from "../interface.ts";
|
||||
|
||||
defineProps({
|
||||
block: {
|
||||
type: Object as PropType<Block>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="w-[248px] overflow-hidden p-3">
|
||||
<a-radio-group type="button" class="w-full mb-2">
|
||||
<a-radio value="1">基本</a-radio>
|
||||
<a-radio value="2">字体</a-radio>
|
||||
</a-radio-group>
|
||||
<a-form :model="block" layout="vertical">
|
||||
<div class="muti-form-item mt-2">
|
||||
<block-attr :block="item"></block-attr>
|
||||
</div>
|
||||
<div class="muti-form-item">
|
||||
<text-attr :block="block.textStyle"></text-attr>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BlockAttr from "./block-attr.vue";
|
||||
import TextAttr from "./text-attr.vue";
|
||||
|
||||
const item = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 200,
|
||||
h: 100,
|
||||
bgColor: "#0099ff",
|
||||
xFixed: false,
|
||||
yFixed: false,
|
||||
resizable: true,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
const block = ref({
|
||||
x: 10,
|
||||
y: 19,
|
||||
w: 20,
|
||||
h: 5,
|
||||
volume: 39,
|
||||
textStyle: {
|
||||
family: "simsun",
|
||||
bold: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
size: 14,
|
||||
color: "#33cc99",
|
||||
align: 3,
|
||||
},
|
||||
meta: {
|
||||
vFixed: false,
|
||||
hFixed: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-form-item label="颜色">
|
||||
<a-input v-model="block.color">
|
||||
<template #prefix>
|
||||
<color-picker v-model="block.color"></color-picker>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<a-form-item label="字体">
|
||||
<a-select v-model="block.family" :options="TextFamilyOptions" class="w-full overflow-hidden"> </a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="大小">
|
||||
<a-input-number v-model="block.size" :min="12"> </a-input-number>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a-form-item label="样式">
|
||||
<div class="h-8 flex items-center justify-between">
|
||||
<a-tag
|
||||
class="cursor-pointer !h-7"
|
||||
:color="block.bold ? 'blue' : ''"
|
||||
:bordered="block.bold ? true : false"
|
||||
@click="block.bold = !block.bold"
|
||||
>
|
||||
<i class="icon-park-outline-text-bold"></i>
|
||||
</a-tag>
|
||||
<a-tag
|
||||
class="!h-7 cursor-pointer"
|
||||
:color="block.italic ? 'blue' : ''"
|
||||
:bordered="block.italic ? true : false"
|
||||
@click="block.italic = !block.italic"
|
||||
>
|
||||
<i class="icon-park-outline-text-italic"></i>
|
||||
</a-tag>
|
||||
<a-tag
|
||||
class="!h-7 cursor-pointer"
|
||||
:color="block.underline ? 'blue' : ''"
|
||||
:bordered="block.underline ? true : false"
|
||||
@click="block.underline = !block.underline"
|
||||
>
|
||||
<i class="icon-park-outline-text-underline"></i>
|
||||
</a-tag>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="方向">
|
||||
<a-select v-model="block.align" :options="TextAlignOptions"></a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TextAlignOptions, TextFamilyOptions } from "../interface.ts";
|
||||
import ColorPicker from "../components/ColorPicker.vue";
|
||||
defineProps({
|
||||
block: {
|
||||
type: Object as PropType<any>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
|
|||
AFormItem: typeof import('@arco-design/web-vue')['FormItem']
|
||||
AImage: typeof import('@arco-design/web-vue')['Image']
|
||||
AInput: typeof import('@arco-design/web-vue')['Input']
|
||||
AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
|
||||
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
|
||||
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
|
||||
ALayout: typeof import('@arco-design/web-vue')['Layout']
|
||||
|
|
@ -43,6 +44,8 @@ declare module '@vue/runtime-core' {
|
|||
ARadio: typeof import('@arco-design/web-vue')['Radio']
|
||||
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
|
||||
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
|
||||
ASelect: typeof import('@arco-design/web-vue')['Select']
|
||||
ASlider: typeof import('@arco-design/web-vue')['Slider']
|
||||
ASpace: typeof import('@arco-design/web-vue')['Space']
|
||||
ASpin: typeof import('@arco-design/web-vue')['Spin']
|
||||
ASwitch: typeof import('@arco-design/web-vue')['Switch']
|
||||
|
|
@ -53,11 +56,22 @@ declare module '@vue/runtime-core' {
|
|||
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
|
||||
ATree: typeof import('@arco-design/web-vue')['Tree']
|
||||
AUpload: typeof import('@arco-design/web-vue')['Upload']
|
||||
BlockAttr: typeof import('./../components/editor/panel-right/block-attr.vue')['default']
|
||||
BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']
|
||||
BreadPage: typeof import('./../components/breadcrumb/bread-page.vue')['default']
|
||||
ColorPicker: typeof import('./../components/editor/components/ColorPicker.vue')['default']
|
||||
Editor: typeof import('./../components/editor/index.vue')['default']
|
||||
Option: typeof import('./../components/editor/items/text/option.vue')['default']
|
||||
Options: typeof import('./../components/editor/items/text/options.vue')['default']
|
||||
Page403: typeof import('./../components/error/page-403.vue')['default']
|
||||
PanelHeader: typeof import('./../components/editor/panel-header/index.vue')['default']
|
||||
PanelLeft: typeof import('./../components/editor/panel-left/index.vue')['default']
|
||||
PanelMain: typeof import('./../components/editor/panel-main/index.vue')['default']
|
||||
PanelRight: typeof import('./../components/editor/panel-right/index.vue')['default']
|
||||
Render: typeof import('./../components/editor/items/text/render.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TextAttr: typeof import('./../components/editor/panel-right/text-attr.vue')['default']
|
||||
Toast: typeof import('./../components/toast/toast.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue