From 95dfbc6cdbe64a78d5aa8ad8ee28d9847505b311 Mon Sep 17 00:00:00 2001 From: luoer Date: Mon, 9 Oct 2023 19:45:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 382 +----------------- src/App.vue | 8 +- .../editor/components/ColorPicker.vue | 350 ++++++++++++++++ src/components/editor/index.vue | 59 +++ src/components/editor/interface.ts | 84 ++++ src/components/editor/items/text/index.ts | 87 ++++ src/components/editor/items/text/option.vue | 0 src/components/editor/items/text/render.vue | 64 +++ src/components/editor/panel-header/index.vue | 14 + src/components/editor/panel-left/index.vue | 37 ++ src/components/editor/panel-main/index.vue | 58 +++ .../editor/panel-right/block-attr.vue | 74 ++++ src/components/editor/panel-right/index.vue | 56 +++ .../editor/panel-right/text-attr.vue | 67 +++ src/types/auto-component.d.ts | 14 + 16 files changed, 978 insertions(+), 377 deletions(-) create mode 100644 src/components/editor/components/ColorPicker.vue create mode 100644 src/components/editor/index.vue create mode 100644 src/components/editor/interface.ts create mode 100644 src/components/editor/items/text/index.ts create mode 100644 src/components/editor/items/text/option.vue create mode 100644 src/components/editor/items/text/render.vue create mode 100644 src/components/editor/panel-header/index.vue create mode 100644 src/components/editor/panel-left/index.vue create mode 100644 src/components/editor/panel-main/index.vue create mode 100644 src/components/editor/panel-right/block-attr.vue create mode 100644 src/components/editor/panel-right/index.vue create mode 100644 src/components/editor/panel-right/text-attr.vue diff --git a/package.json b/package.json index c92e678..4933c6f 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a44efcd..64d323b 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/App.vue b/src/App.vue index f6fb06d..3c6c877 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,17 @@ diff --git a/src/components/editor/components/ColorPicker.vue b/src/components/editor/components/ColorPicker.vue new file mode 100644 index 0000000..14c5dc1 --- /dev/null +++ b/src/components/editor/components/ColorPicker.vue @@ -0,0 +1,350 @@ + + + + + + + diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue new file mode 100644 index 0000000..f37348d --- /dev/null +++ b/src/components/editor/index.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/components/editor/interface.ts b/src/components/editor/interface.ts new file mode 100644 index 0000000..7855c97 --- /dev/null +++ b/src/components/editor/interface.ts @@ -0,0 +1,84 @@ +export interface Block { + id: string; + type: string; + x: number; + y: number; + w: number; + h: number; + bgImage?: string; + bgColor?: string; + data: T; + meta: Record; +} + +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", + }, +]; \ No newline at end of file diff --git a/src/components/editor/items/text/index.ts b/src/components/editor/items/text/index.ts new file mode 100644 index 0000000..bfcd27f --- /dev/null +++ b/src/components/editor/items/text/index.ts @@ -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", + }, +]; diff --git a/src/components/editor/items/text/option.vue b/src/components/editor/items/text/option.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/components/editor/items/text/render.vue b/src/components/editor/items/text/render.vue new file mode 100644 index 0000000..3e397b9 --- /dev/null +++ b/src/components/editor/items/text/render.vue @@ -0,0 +1,64 @@ + + + + + diff --git a/src/components/editor/panel-header/index.vue b/src/components/editor/panel-header/index.vue new file mode 100644 index 0000000..bfda836 --- /dev/null +++ b/src/components/editor/panel-header/index.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/src/components/editor/panel-left/index.vue b/src/components/editor/panel-left/index.vue new file mode 100644 index 0000000..64b3647 --- /dev/null +++ b/src/components/editor/panel-left/index.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/components/editor/panel-main/index.vue b/src/components/editor/panel-main/index.vue new file mode 100644 index 0000000..3c66242 --- /dev/null +++ b/src/components/editor/panel-main/index.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/components/editor/panel-right/block-attr.vue b/src/components/editor/panel-right/block-attr.vue new file mode 100644 index 0000000..0ef02d7 --- /dev/null +++ b/src/components/editor/panel-right/block-attr.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/src/components/editor/panel-right/index.vue b/src/components/editor/panel-right/index.vue new file mode 100644 index 0000000..e07001f --- /dev/null +++ b/src/components/editor/panel-right/index.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/components/editor/panel-right/text-attr.vue b/src/components/editor/panel-right/text-attr.vue new file mode 100644 index 0000000..8e49dd2 --- /dev/null +++ b/src/components/editor/panel-right/text-attr.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/types/auto-component.d.ts b/src/types/auto-component.d.ts index 810aafc..d2cdf4d 100644 --- a/src/types/auto-component.d.ts +++ b/src/types/auto-component.d.ts @@ -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'] } }