From 4eed4583d97c4bfcbc32bdbc0bfcd82bb53e6aff Mon Sep 17 00:00:00 2001 From: Ciusyan <101268302+Yziyan@users.noreply.github.com> Date: Mon, 1 Aug 2022 19:10:30 +0800 Subject: [PATCH 001/235] Update HomeView.vue --- src/views/HomeView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index e956f45..f64a49c 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,5 +1,5 @@ From c756413556ac2e94b0a3cd7c8f0ac5d23dec1afc Mon Sep 17 00:00:00 2001 From: Ciusyan <101268302+Yziyan@users.noreply.github.com> Date: Mon, 1 Aug 2022 19:16:04 +0800 Subject: [PATCH 002/235] Update HomeView.vue --- src/views/HomeView.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index e956f45..eabe91a 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,5 +1,5 @@ From e353c9af1694cbf51a64c9a08dd57d456fb2aa96 Mon Sep 17 00:00:00 2001 From: zhiyan <1533460130@qq.com> Date: Mon, 1 Aug 2022 19:43:14 +0800 Subject: [PATCH 003/235] test: pr --- src/views/HomeView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index eabe91a..190adee 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -2,4 +2,5 @@ From 1957617b806c00f9e32753864d30f0cfc8c7ea13 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Mon, 1 Aug 2022 21:10:53 +0800 Subject: [PATCH 004/235] feat: merge from https://github.com/james-curtis/lowCodeDemo --- src/components/genericsLib.vue | 136 ++++++++++++++++ src/library/button/index.vue | 33 ++++ src/library/image/index.vue | 30 ++++ src/library/registerController.ts | 72 +++++++++ src/router/index.ts | 2 +- src/stores/counter.ts | 16 -- src/stores/storage.ts | 10 ++ src/views/HomeView.vue | 258 +++++++++++++++++++++++++++++- tailwind.config.js | 1 + 9 files changed, 537 insertions(+), 21 deletions(-) create mode 100644 src/components/genericsLib.vue create mode 100644 src/library/button/index.vue create mode 100644 src/library/image/index.vue create mode 100644 src/library/registerController.ts delete mode 100644 src/stores/counter.ts create mode 100644 src/stores/storage.ts diff --git a/src/components/genericsLib.vue b/src/components/genericsLib.vue new file mode 100644 index 0000000..40404a4 --- /dev/null +++ b/src/components/genericsLib.vue @@ -0,0 +1,136 @@ + + + + + + + diff --git a/src/library/button/index.vue b/src/library/button/index.vue new file mode 100644 index 0000000..6387c67 --- /dev/null +++ b/src/library/button/index.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/library/image/index.vue b/src/library/image/index.vue new file mode 100644 index 0000000..463a85f --- /dev/null +++ b/src/library/image/index.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/library/registerController.ts b/src/library/registerController.ts new file mode 100644 index 0000000..8a88404 --- /dev/null +++ b/src/library/registerController.ts @@ -0,0 +1,72 @@ +import type { ComponentOptions } from "vue"; + +export interface libraryComponent extends ComponentOptions { + /** + * 所在library选项卡的name + */ + libraryName: string; + /** + * 所在lib->tab面板中的name + */ + tabName: string; + /** + * 所在tab面板中的顺序 + */ + order: number; + /** + * 提示信息 + * 鼠标指向“?”触发 + */ + tips: { + /** + * 提示信息的标题 + * 单独成一行 + */ + title: string; + /** + * 提示信息的描述 + * 单独成一行 + */ + desc?: string; + /** + * 可预览的组件 + */ + preview?: JSX.Element; + }; +} + +const libraryComponents = import.meta.glob( + "./*/index.(vue|jsx)", + { + eager: true, + } +); + +const libMap: Record> = {}; +const tempLib: Record = {}; + +// 添加每一个lib下面的组件 +Object.entries(libraryComponents).forEach(([path, module]) => { + module = module?.default || module; + // TODO:添加类型 + if (!tempLib[module.libraryName]) tempLib[module.libraryName] = []; + tempLib[module.libraryName].push(module); +}); + +// 再分类每个lib下面的组件到lib->tab +Object.entries(tempLib).forEach(([libraryName, modules]) => { + if (!libMap[libraryName]) libMap[libraryName] = {}; + modules.forEach((module) => { + if (!libMap[libraryName][module.tabName]) + libMap[libraryName][module.tabName] = []; + libMap[libraryName][module.tabName].push(module); + }); +}); + +// 排序每个tab中的物料顺序 +Object.entries(libMap).forEach(([_, modules]) => { + Object.entries(modules).forEach(([_, module]) => { + module.sort((a, b) => a.order - b.order); + }); +}); +export default libMap; diff --git a/src/router/index.ts b/src/router/index.ts index e2a1f4b..a3ef9bd 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -6,7 +6,7 @@ const router = createRouter({ { path: "/", name: "home", - component: () => import("../views/HomeView.vue"), + component: () => import("@/views/HomeView.vue"), }, ], }); diff --git a/src/stores/counter.ts b/src/stores/counter.ts deleted file mode 100644 index 252406e..0000000 --- a/src/stores/counter.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineStore } from "pinia"; - -export const useCounterStore = defineStore({ - id: "counter", - state: () => ({ - counter: 0, - }), - getters: { - doubleCount: (state) => state.counter * 2, - }, - actions: { - increment() { - this.counter++; - }, - }, -}); diff --git a/src/stores/storage.ts b/src/stores/storage.ts new file mode 100644 index 0000000..2c35253 --- /dev/null +++ b/src/stores/storage.ts @@ -0,0 +1,10 @@ +import { defineStore } from "pinia"; +import { ref } from "vue"; + +export const useStorage = defineStore("Storage", () => { + const code = ref>({}); + + return { + code, + }; +}); diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8a4f434..26b5bfc 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,7 +1,257 @@ - + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 7d5d9e1..3254826 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], content: [], theme: { extend: {}, From ed96c0b1fd16f54d369b34c230408a91aced7a73 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Mon, 1 Aug 2022 23:11:14 +0800 Subject: [PATCH 005/235] =?UTF-8?q?fix:=20=E6=9B=B4=E6=AD=A3tailwind?= =?UTF-8?q?=E8=BF=87=E6=97=B6=E9=85=8D=E7=BD=AEpurge=20feat:=20=E6=8A=BD?= =?UTF-8?q?=E7=A6=BBlibrary=E7=89=A9=E6=96=99=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/genericsLib.vue | 87 +++++++++++++++++++++++-------- src/library/button/index.vue | 12 +++++ src/library/image/index.vue | 12 +++++ src/library/registerController.ts | 10 ++++ src/views/HomeView.vue | 28 +--------- tailwind.config.js | 3 +- 6 files changed, 101 insertions(+), 51 deletions(-) diff --git a/src/components/genericsLib.vue b/src/components/genericsLib.vue index 40404a4..5771089 100644 --- a/src/components/genericsLib.vue +++ b/src/components/genericsLib.vue @@ -1,23 +1,29 @@ @@ -83,21 +84,39 @@ export default vmOptions; - + + diff --git a/src/library/button/index.vue b/src/library/button/index.vue index 6387c67..946ee08 100644 --- a/src/library/button/index.vue +++ b/src/library/button/index.vue @@ -5,12 +5,24 @@ + + + + diff --git a/src/components/editPanel/types.ts b/src/components/editPanel/types.ts new file mode 100644 index 0000000..10f51b6 --- /dev/null +++ b/src/components/editPanel/types.ts @@ -0,0 +1,7 @@ +import type { ELibraryName } from "@/components/libraryPanel/types"; + +export interface IEditableInstancedLibraryComponentData { + uuid: string; + libraryName: ELibraryName; + componentName: string; +} diff --git a/src/components/genericsLib.vue b/src/components/libraryPanel/genericsLib/index.vue similarity index 86% rename from src/components/genericsLib.vue rename to src/components/libraryPanel/genericsLib/index.vue index 5771089..8872c77 100644 --- a/src/components/genericsLib.vue +++ b/src/components/libraryPanel/genericsLib/index.vue @@ -8,12 +8,12 @@ :title="tabsList[tabItemKey].title" > diff --git a/src/library/index.ts b/src/library/index.ts new file mode 100644 index 0000000..dcf9360 --- /dev/null +++ b/src/library/index.ts @@ -0,0 +1,37 @@ +import type { ILibraryComponent } from "@/library/types"; + +const libraryComponents = import.meta.glob( + "./*/index.(vue|jsx)", + { + eager: true, + } +); + +const libraryTree: Record> = {}; +const libTemp: Record = {}; + +// 添加每一个lib下面的组件 +Object.entries(libraryComponents).forEach(([path, module]) => { + module = module?.default || module; + if (!libTemp[module.libraryName]) libTemp[module.libraryName] = []; + libTemp[module.libraryName].push(module); +}); + +// 再分类每个lib下面的组件到lib->tab +Object.entries(libTemp).forEach(([libraryName, modules]) => { + if (!libraryTree[libraryName]) libraryTree[libraryName] = {}; + modules.forEach((module) => { + if (!libraryTree[libraryName][module.tabName]) + libraryTree[libraryName][module.tabName] = []; + libraryTree[libraryName][module.tabName].push(module); + }); +}); + +// 排序每个tab中的物料顺序 +Object.entries(libraryTree).forEach(([_, modules]) => { + Object.entries(modules).forEach(([_, module]) => { + module.sort((a, b) => a.order - b.order); + }); +}); +export const libraryRecord = libTemp; +export default libraryTree; diff --git a/src/library/registerController.ts b/src/library/registerController.ts deleted file mode 100644 index 0709733..0000000 --- a/src/library/registerController.ts +++ /dev/null @@ -1,82 +0,0 @@ -import type { ComponentOptions } from "vue"; - -export interface libraryComponent extends ComponentOptions { - /** - * 所在library选项卡的name - */ - libraryName: string; - /** - * 所在lib->tab面板中的name - */ - tabName: string; - /** - * 所在tab面板中的顺序 - */ - order: number; - /** - * 在左侧物料面板显示的信息 - */ - libraryPanelShowDetail: { - /** - * 在左侧物料面板显示的中文名称 - */ - title: string; - icon: JSX.Element; - }; - /** - * 提示信息 - * 鼠标指向“?”触发 - */ - tips: { - /** - * 提示信息的标题 - * 单独成一行 - */ - title: string; - /** - * 提示信息的描述 - * 单独成一行 - */ - desc?: string; - /** - * 可预览的组件 - */ - preview?: JSX.Element; - }; -} - -const libraryComponents = import.meta.glob( - "./*/index.(vue|jsx)", - { - eager: true, - } -); - -const libMap: Record> = {}; -const tempLib: Record = {}; - -// 添加每一个lib下面的组件 -Object.entries(libraryComponents).forEach(([path, module]) => { - module = module?.default || module; - // TODO:添加类型 - if (!tempLib[module.libraryName]) tempLib[module.libraryName] = []; - tempLib[module.libraryName].push(module); -}); - -// 再分类每个lib下面的组件到lib->tab -Object.entries(tempLib).forEach(([libraryName, modules]) => { - if (!libMap[libraryName]) libMap[libraryName] = {}; - modules.forEach((module) => { - if (!libMap[libraryName][module.tabName]) - libMap[libraryName][module.tabName] = []; - libMap[libraryName][module.tabName].push(module); - }); -}); - -// 排序每个tab中的物料顺序 -Object.entries(libMap).forEach(([_, modules]) => { - Object.entries(modules).forEach(([_, module]) => { - module.sort((a, b) => a.order - b.order); - }); -}); -export default libMap; diff --git a/src/library/types.ts b/src/library/types.ts new file mode 100644 index 0000000..b1d3d35 --- /dev/null +++ b/src/library/types.ts @@ -0,0 +1,51 @@ +import type { ComponentOptions } from "vue"; +import type { ELibraryName } from "@/components/libraryPanel/types"; + +export interface ILibraryComponent extends ComponentOptions { + /** + * 组件标识符 + */ + name: string; + /** + * 所在library选项卡的name + */ + libraryName: ELibraryName; + /** + * 所在lib->tab面板中的name + */ + tabName: string; + /** + * 所在tab面板中的顺序 + */ + order: number; + /** + * 在左侧物料面板显示的信息 + */ + libraryPanelShowDetail: { + /** + * 在左侧物料面板显示的中文名称 + */ + title: string; + icon: JSX.Element; + }; + /** + * 提示信息 + * 鼠标指向“?”触发 + */ + tips: { + /** + * 提示信息的标题 + * 单独成一行 + */ + title: string; + /** + * 提示信息的描述 + * 单独成一行 + */ + desc?: string; + /** + * 可预览的组件 + */ + preview?: JSX.Element; + }; +} diff --git a/src/utils/library.ts b/src/utils/library.ts new file mode 100644 index 0000000..20d5724 --- /dev/null +++ b/src/utils/library.ts @@ -0,0 +1,15 @@ +import { v4 as uuidv4 } from "uuid"; +import type { ILibraryComponent } from "@/library/types"; +import type { IEditableInstancedLibraryComponentData } from "@/components/editPanel/types"; + +export const uuid = uuidv4; + +export function createEditableInstancedLibraryComponentData( + com: ILibraryComponent +): IEditableInstancedLibraryComponentData { + return { + uuid: uuidv4(), + componentName: com.name, + libraryName: com.libraryName, + }; +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index b86ba89..01cf539 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -24,12 +24,14 @@ const stylePanelWidth = computed(() => { }); //----------左侧组件栏 +import libraryPanels from "@/components/libraryPanel"; import * as monaco from "monaco-editor"; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; -// import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"; -// import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"; -// import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -38,15 +40,6 @@ window.MonacoEnvironment = { if (label === "json") { return new jsonWorker(); } - // if (label === "css" || label === "scss" || label === "less") { - // return new cssWorker(); - // } - // if (label === "html" || label === "handlebars" || label === "razor") { - // return new htmlWorker(); - // } - // if (label === "typescript" || label === "javascript") { - // return new tsWorker(); - // } return new editorWorker(); }, }; @@ -71,43 +64,15 @@ onMounted(() => { //-------------拖拽、数据核心 // TODO:禁止自己拖入自己，从组件区域拖出去再拖入自己区域时候图标应该是禁止，不应该是默认的 -const DRAG_DATA_CONSTANTS = { - dataTransferKey: "componentName", -}; - -function onPhoneDragEnter(e: DragEvent) { - console.log(e.dataTransfer!.getData(DRAG_DATA_CONSTANTS.dataTransferKey)); -} - -function onPhoneDragOver(e: DragEvent) { - e.preventDefault(); -} - -function onPhoneDragDrop(e: DragEvent) { - console.log(e.dataTransfer!.getData(DRAG_DATA_CONSTANTS.dataTransferKey)); -} - -function onLibraryComponentDragStart(e: DragEvent) { - e.dataTransfer!.setData(DRAG_DATA_CONSTANTS.dataTransferKey, "test"); -} - -const phoneLibraryComponentsDragData = ref[]>([ - { name: "John 1", id: 0 }, - { name: "Joao 2", id: 1 }, - { name: "Jean 3", id: 2 }, -]); @@ -134,8 +99,14 @@ export default {
- - + + + + @@ -149,17 +120,8 @@ export default {
-
- - - +
+
@@ -210,12 +172,12 @@ export default { .panel-main { @apply flex-1; - .phone-wrapper { + .edit-wrapper { flex-basis: 375px; min-height: 812px; @apply flex-col flex m-auto; - .phone { + .edit { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); @apply h-full w-full flex-1; } diff --git a/tsconfig.json b/tsconfig.json index 8d23599..2c04905 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,6 @@ "@/*": ["./src/*"] } }, - "references": [ { "path": "./tsconfig.config.json" From 620a412ed54ec88cc80ec6715bff685d36fdea59 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Wed, 3 Aug 2022 14:22:51 +0800 Subject: [PATCH 007/235] =?UTF-8?q?feat:=20=E6=8A=BD=E7=A6=BB=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BC=96=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=20feat:?= =?UTF-8?q?=20=E5=AE=8C=E5=96=84=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E5=AF=B9=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE=E7=9A=84?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=20feat:=20=E6=8B=96=E5=8A=A8drop?= =?UTF-8?q?=E4=B9=8B=E5=90=8E=E6=95=B0=E6=8D=AE=E6=B7=BB=E5=8A=A0=E5=88=B0?= =?UTF-8?q?pinia=E5=85=A8=E5=B1=80=20fix:=20=E7=89=A9=E6=96=99=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=88=9B=E5=BB=BA=E5=AE=9E=E4=BE=8B=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=20feat:=20=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8C=81=E4=B9=85=E5=8C=96=E5=88=B0localStor?= =?UTF-8?q?age?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 4 +- index.html | 2 +- package-lock.json | 57 ++++++++++++++ package.json | 1 + src/components/attributePanel/config.ts | 19 +++++ src/components/attributePanel/index.vue | 18 +++++ src/components/attributePanel/types.ts | 31 ++++++++ src/components/codePanel/index.vue | 76 +++++++++++++++++++ src/components/editPanel/index.vue | 55 ++++++++------ src/components/editPanel/types.ts | 70 +++++++++++++++++ .../libraryPanel/genericsLib/index.vue | 17 ++--- src/library/button/index.vue | 22 +++++- src/library/image/index.vue | 20 ++++- src/library/types.ts | 21 ++++- src/main.ts | 23 ++---- src/stores/code.ts | 24 ++++++ src/stores/libraryComponentData.ts | 14 ++++ src/stores/storage.ts | 10 --- src/utils/library.ts | 64 +++++++++++++++- src/views/HomeView.vue | 61 ++------------- tsconfig.config.json | 2 +- 21 files changed, 485 insertions(+), 126 deletions(-) create mode 100644 src/components/attributePanel/config.ts create mode 100644 src/components/attributePanel/index.vue create mode 100644 src/components/attributePanel/types.ts create mode 100644 src/components/codePanel/index.vue create mode 100644 src/stores/code.ts create mode 100644 src/stores/libraryComponentData.ts delete mode 100644 src/stores/storage.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2637a0c..c96faa4 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -16,6 +16,8 @@ module.exports = { "@vue/eslint-config-prettier", ], rules: { - 'vue/multi-word-component-names': 0 + 'vue/multi-word-component-names': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', } }; diff --git a/index.html b/index.html index 11603f8..c40b9f1 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package-lock.json b/package-lock.json index f34befd..1210bb9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "lodash": "^4.17.21", "monaco-editor": "^0.33.0", "pinia": "^2.0.16", + "pinia-plugin-persist": "^1.0.0", "uuid": "^8.3.2", "vant": "^3.5.3", "vue": "^3.2.37", @@ -5538,6 +5539,46 @@ } } }, + "node_modules/pinia-plugin-persist": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz", + "integrity": "sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==", + "dependencies": { + "vue-demi": "^0.12.1" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0", + "pinia": "^2.0.0", + "vue": "^2.0.0 || >=3.0.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/pinia-plugin-persist/node_modules/vue-demi": { + "version": "0.12.5", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz", + "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/pinia/node_modules/vue-demi": { "version": "0.13.6", "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.6.tgz", @@ -11183,6 +11224,22 @@ } } }, + "pinia-plugin-persist": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz", + "integrity": "sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==", + "requires": { + "vue-demi": "^0.12.1" + }, + "dependencies": { + "vue-demi": { + "version": "0.12.5", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz", + "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", + "requires": {} + } + } + }, "postcss": { "version": "8.4.14", "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz", diff --git a/package.json b/package.json index 68ab524..575b61a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lodash": "^4.17.21", "monaco-editor": "^0.33.0", "pinia": "^2.0.16", + "pinia-plugin-persist": "^1.0.0", "uuid": "^8.3.2", "vant": "^3.5.3", "vue": "^3.2.37", diff --git a/src/components/attributePanel/config.ts b/src/components/attributePanel/config.ts new file mode 100644 index 0000000..2c45497 --- /dev/null +++ b/src/components/attributePanel/config.ts @@ -0,0 +1,19 @@ +import { + EAttributePanels, + type IAttributePanelTabConfig, +} from "@/components/attributePanel/types"; + +export const panelList: IAttributePanelTabConfig[] = [ + { + title: "属性", + name: EAttributePanels.appearance, + }, + { + title: "外观", + name: EAttributePanels.attribute, + }, + { + title: "事件", + name: EAttributePanels.event, + }, +]; diff --git a/src/components/attributePanel/index.vue b/src/components/attributePanel/index.vue new file mode 100644 index 0000000..dc1de8d --- /dev/null +++ b/src/components/attributePanel/index.vue @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/components/attributePanel/types.ts b/src/components/attributePanel/types.ts new file mode 100644 index 0000000..d2a70f6 --- /dev/null +++ b/src/components/attributePanel/types.ts @@ -0,0 +1,31 @@ +/** + * 右侧编辑面板的子tab枚举 + */ +export enum EAttributePanels { + /** + * 属性 编辑面板 + */ + attribute = "attribute", + /** + * 外观 编辑面板 + */ + appearance = "appearance", + /** + * 事件 编辑面板 + */ + event = "event", +} + +/** + * 单个子tab配置 + */ +export interface IAttributePanelTabConfig { + /** + * 显示的文字 + */ + title: string; + /** + * 唯一标识符 + */ + name: EAttributePanels; +} diff --git a/src/components/codePanel/index.vue b/src/components/codePanel/index.vue new file mode 100644 index 0000000..b4438e2 --- /dev/null +++ b/src/components/codePanel/index.vue @@ -0,0 +1,76 @@ + + + + + + + diff --git a/src/components/editPanel/index.vue b/src/components/editPanel/index.vue index 27ed652..d51b403 100644 --- a/src/components/editPanel/index.vue +++ b/src/components/editPanel/index.vue @@ -7,43 +7,46 @@ > diff --git a/src/components/editPanel/types.ts b/src/components/editPanel/types.ts index 10f51b6..9007fcb 100644 --- a/src/components/editPanel/types.ts +++ b/src/components/editPanel/types.ts @@ -1,7 +1,77 @@ import type { ELibraryName } from "@/components/libraryPanel/types"; +import type { EAttributePanels } from "@/components/attributePanel/types"; +/** + * 此类型是作用于物料组件实例的 + */ +export type IEditableConfigValue = Partial<{ + [key in EAttributePanels]: Record; +}>; + +/** + * 物料组件实例的参数 + */ export interface IEditableInstancedLibraryComponentData { + /** + * 全局唯一ID + * TODO:暂时不知道干啥用 + */ uuid: string; + /** + * 是否选中当前物料组件实例 + */ + focus: boolean; + /** + * 物料库标识符 + */ libraryName: ELibraryName; + /** + * 在vue中组件名 + */ componentName: string; + /** + *右侧属性面板可编辑参数 + */ + editableConfig?: IEditableConfigValue; +} + +/** + * 编辑面板每个config的表单类型 + * TODO:这里需要拓展其他类型 + */ +export enum EEditableConfigItemInputType { + /** + * 输入框 + */ + input = "input", + /** + * 开关 + */ + switch = "switch", +} + +/** + * 编辑面板每个config的结构 + */ +export interface IEditableConfigPanelItemSchema { + /** + * 表单name，唯一标识符 + */ + name: string; + /** + * 表单类型 + */ + type: EEditableConfigItemInputType; + /** + * 描述标题 + */ + title: string; + /** + * 提示信息 + */ + tips?: string; + /** + * 默认值 + */ + default?: any; } diff --git a/src/components/libraryPanel/genericsLib/index.vue b/src/components/libraryPanel/genericsLib/index.vue index 8872c77..a9cbc8c 100644 --- a/src/components/libraryPanel/genericsLib/index.vue +++ b/src/components/libraryPanel/genericsLib/index.vue @@ -58,7 +58,6 @@ diff --git a/src/library/button/index.vue b/src/library/button/index.vue index 738b14e..57a45f3 100644 --- a/src/library/button/index.vue +++ b/src/library/button/index.vue @@ -1,4 +1,5 @@ @@ -7,9 +8,14 @@ import { Button } from "vant"; import { ElIcon } from "element-plus"; import { Aim } from "@element-plus/icons-vue"; import { ELibraryName } from "@/components/libraryPanel/types"; -import type { ILibraryComponent } from "@/library/types"; +import { EAttributePanels } from "@/components/attributePanel/types"; +import { + createEditableConfigPanelItem, + defineLibraryComponent, +} from "@/utils/library"; +import { EEditableConfigItemInputType } from "@/components/editPanel/types"; -export default { +export default defineLibraryComponent({ name: "LibButton", libraryName: ELibraryName.generics, tabName: "show", @@ -37,10 +43,20 @@ export default { ), }, + editableConfig: { + [EAttributePanels.attribute]: [ + createEditableConfigPanelItem({ + name: "title", + title: "按钮名称", + default: "按钮", + type: EEditableConfigItemInputType.input, + }), + ], + }, setup() { return {}; }, -} as ILibraryComponent; +}); diff --git a/src/library/image/index.vue b/src/library/image/index.vue index 637f52d..03a7727 100644 --- a/src/library/image/index.vue +++ b/src/library/image/index.vue @@ -11,9 +11,14 @@ import { Image as VanImage } from "vant"; import { ElIcon } from "element-plus"; import { Aim } from "@element-plus/icons-vue"; import { ELibraryName } from "@/components/libraryPanel/types"; -import type { ILibraryComponent } from "@/library/types"; +import { + createEditableConfigPanelItem, + defineLibraryComponent, +} from "@/utils/library"; +import { EAttributePanels } from "@/components/attributePanel/types"; +import { EEditableConfigItemInputType } from "@/components/editPanel/types"; -export default { +export default defineLibraryComponent({ name: "LibImage", libraryName: ELibraryName.generics, tabName: "show", @@ -37,7 +42,16 @@ export default { ), }, -} as ILibraryComponent; + editableConfig: { + [EAttributePanels.attribute]: [ + createEditableConfigPanelItem({ + name: "url", + title: "url链接", + type: EEditableConfigItemInputType.input, + }), + ], + }, +}); diff --git a/src/library/types.ts b/src/library/types.ts index b1d3d35..b383e01 100644 --- a/src/library/types.ts +++ b/src/library/types.ts @@ -1,9 +1,22 @@ import type { ComponentOptions } from "vue"; import type { ELibraryName } from "@/components/libraryPanel/types"; +import type { EAttributePanels } from "@/components/attributePanel/types"; +import type { IEditableConfigPanelItemSchema } from "@/components/editPanel/types"; -export interface ILibraryComponent extends ComponentOptions { +/** + * 物料组件可编辑的参数 + * 存在的意义是为了在组件types.ts中定义时候约束[键名] + * 此类型是作用于物料组件的，而不是物料组件实例 + * TODO:这里的泛型可以删除了 + */ +export type IEditableConfig = Partial<{ + [key in EAttributePanels]: IEditableConfigPanelItemSchema[]; +}>; + +export interface ILibraryComponent + extends ComponentOptions { /** - * 组件标识符 + * 物料组件标识符 */ name: string; /** @@ -48,4 +61,8 @@ export interface ILibraryComponent extends ComponentOptions { */ preview?: JSX.Element; }; + /** + *右侧属性面板可编辑参数 + */ + editableConfig?: T; } diff --git a/src/main.ts b/src/main.ts index 899542a..854caa6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,33 +1,26 @@ import { createApp } from "vue"; import App from "./App.vue"; - -const app = createApp(App); import router from "./router"; - -app.use(router); - import { createPinia } from "pinia"; - -app.use(createPinia()); - +import piniaPersist from "pinia-plugin-persist"; import "@/assets/tailwind.css"; - import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; import zhCn from "element-plus/es/locale/lang/zh-cn"; import * as ElementPlusIconsVue from "@element-plus/icons-vue"; +import Vant from "vant"; +import "vant/lib/index.css"; +const app = createApp(App); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } - app.use(ElementPlus, { locale: zhCn, }); - -import Vant from "vant"; -import "vant/lib/index.css"; - app.use(Vant); - +app.use(router); +const pinia = createPinia(); +pinia.use(piniaPersist); +app.use(pinia); app.mount("#app"); diff --git a/src/stores/code.ts b/src/stores/code.ts new file mode 100644 index 0000000..30a05d0 --- /dev/null +++ b/src/stores/code.ts @@ -0,0 +1,24 @@ +import { defineStore } from "pinia"; +import { ref, shallowRef } from "vue"; +import type { IEditableInstancedLibraryComponentData } from "@/components/editPanel/types"; + +export const useCode = defineStore( + "Code", + () => { + const jsonCode = ref([]); + + return { + jsonCode, + }; + }, + { + persist: { + enabled: true, + strategies: [ + { + storage: localStorage, + }, + ], + }, + } +); diff --git a/src/stores/libraryComponentData.ts b/src/stores/libraryComponentData.ts new file mode 100644 index 0000000..d690cb2 --- /dev/null +++ b/src/stores/libraryComponentData.ts @@ -0,0 +1,14 @@ +import { defineStore } from "pinia"; +import { ref } from "vue"; +import type { IEditableInstancedLibraryComponentData } from "@/components/editPanel/types"; + +export const useLibraryComponentData = defineStore( + "LibraryComponentData", + () => { + const focusData = ref(); + + return { + focusData, + }; + } +); diff --git a/src/stores/storage.ts b/src/stores/storage.ts deleted file mode 100644 index 2c35253..0000000 --- a/src/stores/storage.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineStore } from "pinia"; -import { ref } from "vue"; - -export const useStorage = defineStore("Storage", () => { - const code = ref>({}); - - return { - code, - }; -}); diff --git a/src/utils/library.ts b/src/utils/library.ts index 20d5724..469bff7 100644 --- a/src/utils/library.ts +++ b/src/utils/library.ts @@ -1,15 +1,73 @@ import { v4 as uuidv4 } from "uuid"; -import type { ILibraryComponent } from "@/library/types"; -import type { IEditableInstancedLibraryComponentData } from "@/components/editPanel/types"; +import type { IEditableConfig, ILibraryComponent } from "@/library/types"; +import type { + IEditableConfigPanelItemSchema, + IEditableConfigValue, + IEditableInstancedLibraryComponentData, +} from "@/components/editPanel/types"; +import { EAttributePanels } from "@/components/attributePanel/types"; +import { cloneDeep } from "lodash"; export const uuid = uuidv4; +/** + * 从物料组件克隆一个组件实例 + * @param com + */ export function createEditableInstancedLibraryComponentData( com: ILibraryComponent ): IEditableInstancedLibraryComponentData { - return { + const data = { uuid: uuidv4(), componentName: com.name, libraryName: com.libraryName, + focus: false, }; + if (com.editableConfig) { + Object.assign(data, { + editableConfig: createEditableValueByConfig(com.editableConfig), + }); + } + return data; +} + +/** + * 生成组件实例属性 + * @param config + */ +export function createEditableValueByConfig( + config: IEditableConfig +): IEditableConfigValue { + const _config = cloneDeep(config); + const result = {} as IEditableConfigValue; + Object.entries(_config).forEach(([panelIdentifier, configSchema]) => { + const enumPanelIdentifier = + panelIdentifier as keyof typeof EAttributePanels; + result[EAttributePanels[enumPanelIdentifier]] = configSchema.reduce( + (pre, cursor) => { + pre[cursor.name] = cursor.default ?? undefined; + return pre; + }, + {} as Record + ); + }); + return result; +} + +/** + * 快速定义物料组件 + * @param com + */ +export function defineLibraryComponent(com: ILibraryComponent) { + return com; +} + +/** + * 快速创建物料组件可编辑的一个属性 + * @param data + */ +export function createEditableConfigPanelItem( + data: IEditableConfigPanelItemSchema +) { + return data; } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 01cf539..fef62ea 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -25,56 +25,14 @@ const stylePanelWidth = computed(() => { //----------左侧组件栏 import libraryPanels from "@/components/libraryPanel"; -import * as monaco from "monaco-editor"; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -window.MonacoEnvironment = { - getWorker(_: string, label: string) { - if (label === "json") { - return new jsonWorker(); - } - return new editorWorker(); - }, -}; -import { useStorage } from "@/stores/storage"; -import { storeToRefs } from "pinia"; - -const Storage = useStorage(); -const { code } = storeToRefs(Storage); -const codeContainer = ref>(); -onMounted(() => { - monaco.editor.create(codeContainer.value!, { - value: JSON.stringify(code.value), - language: "json", - automaticLayout: true, //开启自适应大小 - minimap: { - enabled: false, // 不需要小的缩略图 - }, - lineNumbers: "off", //关闭显示行号 - folding: false, //关闭折叠 - }); -}); +import CodePanel from "@/components/codePanel/index.vue"; //-------------拖拽、数据核心 // TODO:禁止自己拖入自己，从组件区域拖出去再拖入自己区域时候图标应该是禁止，不应该是默认的 - - - @@ -49,120 +27,148 @@ export default { 1. 纯粹遍历 panelList 问题在于组件属性schema和data全部都要从起点开始拿 比如 - componentSchema.editableConfig.panelItem['name'][第几个表单项].type - componentData.editableConfig.panelItem['name'].xxx属性 + componentSchema.props.panelItem['name'][第几个表单项].type + componentData.props.panelItem['name'].xxx属性 2. 把组件属性schema和data糅合进 panelList 里面，然后一起遍历 问题在于当被选中物料组件变化时候又需要重新糅合一遍 */ import { panelList } from "@/components/attributePanel/config"; import type { - IEditableConfigPanelItemSchema, - IEditableConfigValue, - IEditableInstancedLibraryComponentData, - IEditableInstancedLibraryComponentDataAtFocus, + IAttributePanelFormItemSchema, + ILibraryComponentInstanceData, + ILibraryComponentInstanceDataAtFocus, + ILibraryComponentInstanceProps, } from "@/components/editPanel/types"; import { useCodeStore } from "@/stores/code"; import { storeToRefs } from "pinia"; -import { ref, watch, shallowRef, type Ref, unref, toRefs } from "vue"; +import { ref, watch, shallowRef, type Ref, unref, toRefs, toRef } from "vue"; import { libraryRecord } from "@/library"; -import type { ILibraryComponent } from "@/library/types"; +import type { + ILibraryComponent, + ILibraryComponentProps, +} from "@/library/types"; import { EEditableConfigItemInputType } from "@/components/editPanel/types"; import { EAttributePanels } from "@/components/attributePanel/types"; import { ElInput } from "element-plus"; -const componentData = ref(); -const componentSchema = shallowRef(); - const codeStore = useCodeStore(); const { focusData, jsonCode } = storeToRefs(codeStore); +const componentData = ref(); +const componentDataProps = ref(); +const componentSchema = shallowRef(); +const componentSchemaProps = shallowRef(); +watch(focusData, () => { + if (!focusData.value) return false; + const [focusedLibraryComponentInstanceData, focusedLibraryComponentSchema] = + getLibraryComponentInstanceDataAndSchema(focusData.value); + componentData.value = focusedLibraryComponentInstanceData; + componentSchema.value = focusedLibraryComponentSchema; + componentDataProps.value = focusedLibraryComponentInstanceData.props; + componentSchemaProps.value = focusedLibraryComponentSchema.props; +}); -function getPanelEditableConfigByEnumPanel( - component: - | ILibraryComponent - | IEditableInstancedLibraryComponentData - | Ref, +function getLibraryComponentPropsRecordInAPanel( + propsSchema: ILibraryComponentProps, panel: EAttributePanels ) { - const _component = unref(component); - if (!_component.editableConfig) return undefined; - return _component.editableConfig[panel]; -} - -function getEditableConfigDataValue( - component: - | IEditableInstancedLibraryComponentData - | Ref, - panel: EAttributePanels, - formItemName: string -): Ref { - const editableConfig = getPanelEditableConfigByEnumPanel(component, panel); - if (!editableConfig) - throw new Error(`not found editableConfig of panel: ${panel}`); - const _editableConfig = toRefs(editableConfig); - return _editableConfig[formItemName]; + const propsFilterArr = Object.entries(propsSchema).filter( + (e) => e[1].belongToPanel === panel + ); + return Object.fromEntries(propsFilterArr); } -function formItemChildRender( - component: - | IEditableInstancedLibraryComponentData - | Ref, - panel: EAttributePanels, - formItemSchema: IEditableConfigPanelItemSchema +function getLibraryComponentPropsArrayInAPanel( + propsSchema: ILibraryComponentProps, + panel: EAttributePanels ) { - const _component = unref(component); - const configValue = getEditableConfigDataValue( - _component, - panel, - formItemSchema.name - ); - console.log(`configValue`, configValue); - if (formItemSchema.type === EEditableConfigItemInputType.input) { - return ( - <> - - - ); - } - return undefined; + return Object.entries( + getLibraryComponentPropsRecordInAPanel(propsSchema, panel) + ).reduce((previousValue, currentValue) => { + previousValue.push({ + ...currentValue[1], + name: currentValue[0], + }); + return previousValue; + }, [] as IAttributePanelFormItemSchema[]); } /** * 获取当前选中组件的数据和定义 * @param focusData */ -function getLibraryComponentInstanceDataAndSchemaByFocusData( - focusData: IEditableInstancedLibraryComponentDataAtFocus -): [IEditableInstancedLibraryComponentData, ILibraryComponent] { - let focusedLibraryComponentData = undefined; +function getLibraryComponentInstanceDataAndSchema( + focusData: ILibraryComponentInstanceDataAtFocus +): [ILibraryComponentInstanceData, ILibraryComponent] { + let focusedLibraryComponentInstanceData = undefined; for (const jsonCodeElement of jsonCode.value) { if (jsonCodeElement.uuid && jsonCodeElement.uuid === focusData.uuid) { // console.log(`jsonCodeElement`, jsonCodeElement, jsonCode); - focusedLibraryComponentData = jsonCodeElement; + focusedLibraryComponentInstanceData = jsonCodeElement; break; } } - if (!focusedLibraryComponentData) + if (!focusedLibraryComponentInstanceData) throw new Error( `not found focusedLibraryComponentData(uuid): ${focusData.uuid}` ); let focusedLibraryComponentSchema = undefined; - for (const e of libraryRecord[focusedLibraryComponentData.libraryName]) { - if (e.name == focusedLibraryComponentData.componentName) { + for (const e of libraryRecord[ + focusedLibraryComponentInstanceData.libraryName + ]) { + if (e.name == focusedLibraryComponentInstanceData.componentName) { focusedLibraryComponentSchema = e; break; } } if (!focusedLibraryComponentSchema) throw new Error( - `not found focusedLibraryComponentSchema(name): ${focusedLibraryComponentData.componentName}` + `not found focusedLibraryComponentSchema(name): ${focusedLibraryComponentInstanceData.componentName}` ); - return [focusedLibraryComponentData, focusedLibraryComponentSchema]; + return [focusedLibraryComponentInstanceData, focusedLibraryComponentSchema]; +} + +import { ElForm, ElFormItem } from "element-plus"; + +/** + * 渲染表单 + * @param propsSchema + * @param propsData + * @param cursorPanel + */ +function formRender( + propsData: ILibraryComponentInstanceProps, + cursorPanel: EAttributePanels, + propsSchema: ILibraryComponentProps +) { + if (!propsSchema) return undefined; + const cursorPropsArray = getLibraryComponentPropsArrayInAPanel( + propsSchema, + cursorPanel + ); + const propsDataRefs = toRefs(propsData); + + const formItemChildRender = ( + propsData: Ref, + formItemSchema: IAttributePanelFormItemSchema + ) => { + console.log(`configValue`, propsData); + if (formItemSchema.formType === EEditableConfigItemInputType.input) { + return ( + <> + + + ); + } + return undefined; + }; + + const formItemList = cursorPropsArray.map((propItem) => { + return ( + + {formItemChildRender(propsDataRefs[propItem.name], propItem)} + + ); + }); + return {formItemList}; } -watch(focusData, () => { - if (!focusData.value) return false; - const [focusedLibraryComponentData, focusedLibraryComponentSchema] = - getLibraryComponentInstanceDataAndSchemaByFocusData(focusData.value); - componentData.value = unref(focusedLibraryComponentData); - componentSchema.value = unref(focusedLibraryComponentSchema); -}); diff --git a/src/components/editPanel/index.vue b/src/components/editPanel/index.vue index 45c0fae..6ed0df2 100644 --- a/src/components/editPanel/index.vue +++ b/src/components/editPanel/index.vue @@ -23,7 +23,7 @@ export default { diff --git a/src/library/button/index.vue b/src/library/button/index.vue index 69358e0..331a513 100644 --- a/src/library/button/index.vue +++ b/src/library/button/index.vue @@ -1,6 +1,6 @@ diff --git a/src/library/image/index.vue b/src/library/image/index.vue index 36942d5..7ded15b 100644 --- a/src/library/image/index.vue +++ b/src/library/image/index.vue @@ -1,9 +1,5 @@ diff --git a/src/library/index.ts b/src/library/index.ts index dcf9360..de18cd7 100644 --- a/src/library/index.ts +++ b/src/library/index.ts @@ -6,7 +6,7 @@ const libraryComponents = import.meta.glob( eager: true, } ); - +// console.log(`libraryComponents`, libraryComponents); const libraryTree: Record> = {}; const libTemp: Record = {}; @@ -35,3 +35,4 @@ Object.entries(libraryTree).forEach(([_, modules]) => { }); export const libraryRecord = libTemp; export default libraryTree; +// console.log(`libraryRecord`, libraryRecord, `libraryTree`, libraryTree); diff --git a/src/library/types.ts b/src/library/types.ts index 9d671f7..b4ebf5e 100644 --- a/src/library/types.ts +++ b/src/library/types.ts @@ -1,21 +1,40 @@ import type { ComponentOptions } from "vue"; import type { ELibraryName } from "@/components/libraryPanel/types"; import type { EAttributePanels } from "@/components/attributePanel/types"; -import type { IEditableConfigPanelItemSchema } from "@/components/editPanel/types"; +import type { EEditableConfigItemInputType } from "@/components/editPanel/types"; /** - * 物料组件可编辑的参数 - * 存在的意义是为了在组件types.ts中定义时候约束[键名] - * 此类型是作用于物料组件的，而不是物料组件实例 - * TODO:这里的泛型可以删除了 + * 组件单个prop */ -export type IEditableConfig = Partial<{ - [key in EAttributePanels]: IEditableConfigPanelItemSchema[]; -}>; +export interface ILibraryComponentPropItem { + /** + * 表单类型 + */ + formType: EEditableConfigItemInputType; + /** + * 描述标题 + */ + title: string; + /** + * 提示信息 + */ + tips?: string; + /** + * 默认值 + */ + default?: any; + /** + * 当前属性应该显示在哪个面板 + */ + belongToPanel: EAttributePanels; +} + +/** + * 组件Props + */ +export type ILibraryComponentProps = Record; -export interface ILibraryComponent< - T extends IEditableConfig = IEditableConfig -> { +export interface ILibraryComponent extends ComponentOptions { /** * 物料组件标识符 */ @@ -63,7 +82,7 @@ export interface ILibraryComponent< preview?: JSX.Element; }; /** - *右侧属性面板可编辑参数 + * 右侧属性面板可编辑参数 && 物料组件props */ - editableConfig?: T; + props?: ILibraryComponentProps; } diff --git a/src/stores/code.ts b/src/stores/code.ts index 8df733d..e518cf2 100644 --- a/src/stores/code.ts +++ b/src/stores/code.ts @@ -1,14 +1,14 @@ import { defineStore } from "pinia"; import { ref, shallowRef } from "vue"; import type { - IEditableInstancedLibraryComponentData, - IEditableInstancedLibraryComponentDataAtFocus, + ILibraryComponentInstanceData, + ILibraryComponentInstanceDataAtFocus, } from "@/components/editPanel/types"; export const useCodeStore = defineStore( "CodeStore", () => { - const jsonCode = ref([]); + const jsonCode = ref([]); /** * 想到三种方案 * 1. 在原本组件实例数据上根据 focus:true 自动去找是哪个组件被选中了 @@ -18,7 +18,7 @@ export const useCodeStore = defineStore( * 3. 使用 focusData 记录被选中组件在JSON中的路径，根据路径就可以直达被选中组件 * 问题是拖动组件换顺序之后要全部重新计算 */ - const focusData = ref(); + const focusData = ref(); function dispatchFocus(uuid: string, path?: string) { focusData.value = { @@ -39,7 +39,7 @@ export const useCodeStore = defineStore( enabled: true, strategies: [ { - storage: localStorage, + storage: sessionStorage, paths: ["jsonCode"], }, ], diff --git a/src/stores/libraryComponentData.ts b/src/stores/libraryComponentData.ts index d690cb2..d75c92d 100644 --- a/src/stores/libraryComponentData.ts +++ b/src/stores/libraryComponentData.ts @@ -1,11 +1,11 @@ import { defineStore } from "pinia"; import { ref } from "vue"; -import type { IEditableInstancedLibraryComponentData } from "@/components/editPanel/types"; +import type { ILibraryComponentInstanceData } from "@/components/editPanel/types"; export const useLibraryComponentData = defineStore( "LibraryComponentData", () => { - const focusData = ref(); + const focusData = ref(); return { focusData, diff --git a/src/utils/library.ts b/src/utils/library.ts index 469bff7..19571b6 100644 --- a/src/utils/library.ts +++ b/src/utils/library.ts @@ -1,11 +1,13 @@ import { v4 as uuidv4 } from "uuid"; -import type { IEditableConfig, ILibraryComponent } from "@/library/types"; import type { - IEditableConfigPanelItemSchema, - IEditableConfigValue, - IEditableInstancedLibraryComponentData, + ILibraryComponent, + ILibraryComponentPropItem, + ILibraryComponentProps, +} from "@/library/types"; +import type { + ILibraryComponentInstanceData, + ILibraryComponentInstanceProps, } from "@/components/editPanel/types"; -import { EAttributePanels } from "@/components/attributePanel/types"; import { cloneDeep } from "lodash"; export const uuid = uuidv4; @@ -14,42 +16,34 @@ export const uuid = uuidv4; * 从物料组件克隆一个组件实例 * @param com */ -export function createEditableInstancedLibraryComponentData( +export function createLibraryComponentInstance( com: ILibraryComponent -): IEditableInstancedLibraryComponentData { +): ILibraryComponentInstanceData { const data = { - uuid: uuidv4(), + uuid: uuid(), componentName: com.name, libraryName: com.libraryName, focus: false, }; - if (com.editableConfig) { + if (com.props) { Object.assign(data, { - editableConfig: createEditableValueByConfig(com.editableConfig), + props: createLibraryComponentInstanceProps(com.props), }); } return data; } /** - * 生成组件实例属性 - * @param config + * 生成组件实例props + * @param props */ -export function createEditableValueByConfig( - config: IEditableConfig -): IEditableConfigValue { - const _config = cloneDeep(config); - const result = {} as IEditableConfigValue; - Object.entries(_config).forEach(([panelIdentifier, configSchema]) => { - const enumPanelIdentifier = - panelIdentifier as keyof typeof EAttributePanels; - result[EAttributePanels[enumPanelIdentifier]] = configSchema.reduce( - (pre, cursor) => { - pre[cursor.name] = cursor.default ?? undefined; - return pre; - }, - {} as Record - ); +export function createLibraryComponentInstanceProps( + props: ILibraryComponentProps +): ILibraryComponentInstanceProps { + const _props = cloneDeep(props); + const result = {} as ILibraryComponentInstanceProps; + Object.entries(_props).forEach(([propKey, propSchema]) => { + result[propKey] = propSchema.default ?? undefined; }); return result; } @@ -63,11 +57,11 @@ export function defineLibraryComponent(com: ILibraryComponent) { } /** - * 快速创建物料组件可编辑的一个属性 + * 快速创建物料组件的一个prop * @param data */ -export function createEditableConfigPanelItem( - data: IEditableConfigPanelItemSchema +export function createLibraryComponentPropItem( + data: ILibraryComponentPropItem ) { return data; } From c23f4caae0ff9f987c046596bf4d42b92eb2b71b Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Wed, 3 Aug 2022 22:39:07 +0800 Subject: [PATCH 011/235] =?UTF-8?q?fix:=20=E7=BC=96=E8=BE=91=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=90=8E=E7=89=A9=E6=96=99=E7=BB=84=E4=BB=B6=E5=AE=9E?= =?UTF-8?q?=E4=BE=8B=E4=B8=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/attributePanel/index.vue | 39 ++------------------- src/components/editPanel/index.vue | 20 +++++------ src/components/editPanel/types.ts | 4 +-- src/stores/code.ts | 45 +++++++++++++++++++++++-- 4 files changed, 57 insertions(+), 51 deletions(-) diff --git a/src/components/attributePanel/index.vue b/src/components/attributePanel/index.vue index 27e50e6..9e62afc 100644 --- a/src/components/attributePanel/index.vue +++ b/src/components/attributePanel/index.vue @@ -36,7 +36,7 @@ import { panelList } from "@/components/attributePanel/config"; import type { IAttributePanelFormItemSchema, ILibraryComponentInstanceData, - ILibraryComponentInstanceDataAtFocus, + ILibraryComponentInstanceFocus, ILibraryComponentInstanceProps, } from "@/components/editPanel/types"; import { useCodeStore } from "@/stores/code"; @@ -60,7 +60,7 @@ const componentSchemaProps = shallowRef(); watch(focusData, () => { if (!focusData.value) return false; const [focusedLibraryComponentInstanceData, focusedLibraryComponentSchema] = - getLibraryComponentInstanceDataAndSchema(focusData.value); + codeStore.getLibraryComponentInstanceDataAndSchema(focusData.value); componentData.value = focusedLibraryComponentInstanceData; componentSchema.value = focusedLibraryComponentSchema; componentDataProps.value = focusedLibraryComponentInstanceData.props; @@ -92,41 +92,6 @@ function getLibraryComponentPropsArrayInAPanel( }, [] as IAttributePanelFormItemSchema[]); } -/** - * 获取当前选中组件的数据和定义 - * @param focusData - */ -function getLibraryComponentInstanceDataAndSchema( - focusData: ILibraryComponentInstanceDataAtFocus -): [ILibraryComponentInstanceData, ILibraryComponent] { - let focusedLibraryComponentInstanceData = undefined; - for (const jsonCodeElement of jsonCode.value) { - if (jsonCodeElement.uuid && jsonCodeElement.uuid === focusData.uuid) { - // console.log(`jsonCodeElement`, jsonCodeElement, jsonCode); - focusedLibraryComponentInstanceData = jsonCodeElement; - break; - } - } - if (!focusedLibraryComponentInstanceData) - throw new Error( - `not found focusedLibraryComponentData(uuid): ${focusData.uuid}` - ); - let focusedLibraryComponentSchema = undefined; - for (const e of libraryRecord[ - focusedLibraryComponentInstanceData.libraryName - ]) { - if (e.name == focusedLibraryComponentInstanceData.componentName) { - focusedLibraryComponentSchema = e; - break; - } - } - if (!focusedLibraryComponentSchema) - throw new Error( - `not found focusedLibraryComponentSchema(name): ${focusedLibraryComponentInstanceData.componentName}` - ); - return [focusedLibraryComponentInstanceData, focusedLibraryComponentSchema]; -} - import { ElForm, ElFormItem } from "element-plus"; /** diff --git a/src/components/editPanel/index.vue b/src/components/editPanel/index.vue index 6ed0df2..3a231c1 100644 --- a/src/components/editPanel/index.vue +++ b/src/components/editPanel/index.vue @@ -6,23 +6,20 @@ item-key="id" > - - From bea28d6b4f237babc6de5ea20d80568638478219 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Thu, 4 Aug 2022 00:24:39 +0800 Subject: [PATCH 013/235] =?UTF-8?q?feat:=20=E9=87=8D=E7=BD=AE=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=20chore:=20=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80type?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=20fix:=20=E7=A6=81=E6=AD=A2=E9=BB=98?= =?UTF-8?q?=E8=AE=A4referer=E8=A1=8C=E4=B8=BA=20feat:=20=E6=8B=93=E5=B1=95?= =?UTF-8?q?=E7=BB=84=E4=BB=B6props=E5=8F=AF=E9=80=89=E8=8C=83=E5=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- global.d.ts | 1 + index.html | 7 ++++--- src/components/editPanel/types.ts | 5 ++--- src/library/types.ts | 6 +++--- src/main.ts | 2 ++ src/stores/code.ts | 11 +++++++++++ src/stores/plugins/storeReset.ts | 11 +++++++++++ src/views/HomeView.vue | 25 ++++++++++++++----------- tsconfig.json | 2 +- 9 files changed, 49 insertions(+), 21 deletions(-) create mode 100644 global.d.ts create mode 100644 src/stores/plugins/storeReset.ts diff --git a/global.d.ts b/global.d.ts new file mode 100644 index 0000000..56f03df --- /dev/null +++ b/global.d.ts @@ -0,0 +1 @@ +type ValueOf = T[keyof T]; diff --git a/index.html b/index.html index c40b9f1..d4f9e5b 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,13 @@ - - + + + Vite App
- + diff --git a/src/components/editPanel/types.ts b/src/components/editPanel/types.ts index f5d6fc1..4c3d4c9 100644 --- a/src/components/editPanel/types.ts +++ b/src/components/editPanel/types.ts @@ -47,14 +47,13 @@ export enum EEditableConfigItemInputType { /** * attribute属性编辑面板每个form表单项结构 */ -export interface IAttributePanelFormItemSchema - extends ILibraryComponentPropItem { +export type IAttributePanelFormItemSchema = { /** * 表单name，唯一标识符 * 对应 ILibraryComponentPropItem 的键名 */ name: string; -} +} & ILibraryComponentPropItem; /** * 编辑区被选中物料组件的定位数据 diff --git a/src/library/types.ts b/src/library/types.ts index b4ebf5e..3be7ed9 100644 --- a/src/library/types.ts +++ b/src/library/types.ts @@ -1,4 +1,4 @@ -import type { ComponentOptions } from "vue"; +import type { ComponentOptions, Prop } from "vue"; import type { ELibraryName } from "@/components/libraryPanel/types"; import type { EAttributePanels } from "@/components/attributePanel/types"; import type { EEditableConfigItemInputType } from "@/components/editPanel/types"; @@ -6,7 +6,7 @@ import type { EEditableConfigItemInputType } from "@/components/editPanel/types" /** * 组件单个prop */ -export interface ILibraryComponentPropItem { +export type ILibraryComponentPropItem = { /** * 表单类型 */ @@ -27,7 +27,7 @@ export interface ILibraryComponentPropItem { * 当前属性应该显示在哪个面板 */ belongToPanel: EAttributePanels; -} +} & Prop; /** * 组件Props diff --git a/src/main.ts b/src/main.ts index 854caa6..7ad5e14 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,6 +3,7 @@ import App from "./App.vue"; import router from "./router"; import { createPinia } from "pinia"; import piniaPersist from "pinia-plugin-persist"; +import storeReset from "@/stores/plugins/storeReset"; import "@/assets/tailwind.css"; import ElementPlus from "element-plus"; import "element-plus/dist/index.css"; @@ -22,5 +23,6 @@ app.use(Vant); app.use(router); const pinia = createPinia(); pinia.use(piniaPersist); +pinia.use(storeReset); app.use(pinia); app.mount("#app"); diff --git a/src/stores/code.ts b/src/stores/code.ts index f9a17fd..f514afc 100644 --- a/src/stores/code.ts +++ b/src/stores/code.ts @@ -22,6 +22,16 @@ export const useCodeStore = defineStore( */ const focusData = ref(); + /** + * store恢复初始状态 + * Q: 为什么不用 store.$reset() ? + * A: 使用持久化插件之后reset是sessionStorage的数据 + */ + function clear() { + jsonCode.value = []; + focusData.value = undefined; + } + function dispatchFocus(uuid: string, path?: string) { focusData.value = { uuid, @@ -73,6 +83,7 @@ export const useCodeStore = defineStore( focusData, dispatchFocus, getLibraryComponentInstanceDataAndSchema, + clear, }; }, { diff --git a/src/stores/plugins/storeReset.ts b/src/stores/plugins/storeReset.ts new file mode 100644 index 0000000..12abd69 --- /dev/null +++ b/src/stores/plugins/storeReset.ts @@ -0,0 +1,11 @@ +import { cloneDeep } from "lodash"; +import type { PiniaPluginContext } from "pinia"; + +/** + * @link https://stackoverflow.com/a/73116803 + */ +export default function storeReset(context: PiniaPluginContext) { + const { store } = context; + const initialState = cloneDeep(store.$state); + store.$reset = () => store.$patch(cloneDeep(initialState)); +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index fef62ea..c912b7f 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,6 +1,13 @@ - - + + diff --git a/src/library/image/index.vue b/src/library/image/index.vue index 7ded15b..8d26262 100644 --- a/src/library/image/index.vue +++ b/src/library/image/index.vue @@ -3,25 +3,22 @@ diff --git a/src/library/index.ts b/src/library/index.ts index 8a6d8b2..e1a5e26 100644 --- a/src/library/index.ts +++ b/src/library/index.ts @@ -1,42 +1,38 @@ -import type { ILibraryComponent } from "@/library/types"; +import type { ILibraryComponent } from '@/library/types' -const libraryComponents = import.meta.glob( - "./*/index.(vue|jsx)", - { - eager: true, - } -); +const libraryComponents = import.meta.glob('./*/index.(vue|jsx)', { + eager: true, +}) // console.log(`libraryComponents`, libraryComponents); -const libraryTree: Record> = {}; -const libTemp: Record = {}; +const libraryTree: Record> = {} +const libTemp: Record = {} // 添加每一个lib下面的组件 -Object.entries(libraryComponents).forEach(([path, module]) => { - module = module?.default || module; - if (!libTemp[module.libraryName]) libTemp[module.libraryName] = []; - libTemp[module.libraryName].push(module); -}); +Object.entries(libraryComponents).forEach(([, module]) => { + module = module?.default || module + if (!libTemp[module.libraryName]) libTemp[module.libraryName] = [] + libTemp[module.libraryName].push(module) +}) // 再分类每个lib下面的组件到lib->tab Object.entries(libTemp).forEach(([libraryName, modules]) => { - if (!libraryTree[libraryName]) libraryTree[libraryName] = {}; + if (!libraryTree[libraryName]) libraryTree[libraryName] = {} modules.forEach((module) => { - if (!libraryTree[libraryName][module.tabName]) - libraryTree[libraryName][module.tabName] = []; - libraryTree[libraryName][module.tabName].push(module); - }); -}); + if (!libraryTree[libraryName][module.tabName]) libraryTree[libraryName][module.tabName] = [] + libraryTree[libraryName][module.tabName].push(module) + }) +}) // 排序每个tab中的物料顺序 -Object.entries(libraryTree).forEach(([_, modules]) => { - Object.entries(modules).forEach(([_, module]) => { - module.sort((a, b) => a.order - b.order); - }); -}); -export const libraryRecord = libTemp; -export default libraryTree; +Object.entries(libraryTree).forEach(([, modules]) => { + Object.entries(modules).forEach(([, module]) => { + module.sort((a, b) => a.order - b.order) + }) +}) +export const libraryRecord = libTemp +export default libraryTree export function getLibraryModules(libraryName: string) { - return libraryTree[libraryName] ?? {}; + return libraryTree[libraryName] ?? {} } // console.log(`libraryRecord`, libraryRecord, `libraryTree`, libraryTree); diff --git a/src/library/types.ts b/src/library/types.ts index 3be7ed9..e537ee7 100644 --- a/src/library/types.ts +++ b/src/library/types.ts @@ -1,7 +1,7 @@ -import type { ComponentOptions, Prop } from "vue"; -import type { ELibraryName } from "@/components/libraryPanel/types"; -import type { EAttributePanels } from "@/components/attributePanel/types"; -import type { EEditableConfigItemInputType } from "@/components/editPanel/types"; +import type { ComponentOptions, Prop } from 'vue' +import type { ELibraryName } from '@/components/libraryPanel/types' +import type { EAttributePanels } from '@/components/attributePanel/types' +import type { EEditableConfigItemInputType } from '@/components/editPanel/types' /** * 组件单个prop @@ -10,47 +10,47 @@ export type ILibraryComponentPropItem = { /** * 表单类型 */ - formType: EEditableConfigItemInputType; + formType: EEditableConfigItemInputType /** * 描述标题 */ - title: string; + title: string /** * 提示信息 */ - tips?: string; + tips?: string /** * 默认值 */ - default?: any; + default?: any /** * 当前属性应该显示在哪个面板 */ - belongToPanel: EAttributePanels; -} & Prop; + belongToPanel: EAttributePanels +} & Prop /** * 组件Props */ -export type ILibraryComponentProps = Record; +export type ILibraryComponentProps = Record export interface ILibraryComponent extends ComponentOptions { /** * 物料组件标识符 */ - name: string; + name: string /** * 所在library选项卡的name */ - libraryName: ELibraryName; + libraryName: ELibraryName /** * 所在lib->tab面板中的name */ - tabName: string; + tabName: string /** * 所在tab面板中的顺序 */ - order: number; + order: number /** * 在左侧物料面板显示的信息 */ @@ -58,9 +58,9 @@ export interface ILibraryComponent extends ComponentOptions { /** * 在左侧物料面板显示的中文名称 */ - title: string; - icon: JSX.Element; - }; + title: string + icon: JSX.Element + } /** * 提示信息 * 鼠标指向“?”触发 @@ -70,19 +70,19 @@ export interface ILibraryComponent extends ComponentOptions { * 提示信息的标题 * 单独成一行 */ - title: string; + title: string /** * 提示信息的描述 * 单独成一行 */ - desc?: string; + desc?: string /** * 可预览的组件 */ - preview?: JSX.Element; - }; + preview?: JSX.Element + } /** * 右侧属性面板可编辑参数 && 物料组件props */ - props?: ILibraryComponentProps; + props?: ILibraryComponentProps } diff --git a/src/main.ts b/src/main.ts index 6b077c2..e310fcf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,11 @@ -import App from "./App.vue"; -import router from "./router"; -import piniaPersist from "pinia-plugin-persist"; -import storeReset from "@/stores/plugins/storeReset"; -import "@/assets/tailwind.css"; +import piniaPersist from 'pinia-plugin-persist' +import App from './App.vue' +import router from './router' +import storeReset from '@/stores/plugins/storeReset' +import '@/assets/tailwind.css' -const app = createApp(App); +const app = createApp(App) -app.use(router); -app.use(createPinia().use(piniaPersist).use(storeReset)); -app.mount("#app"); +app.use(router) +app.use(createPinia().use(piniaPersist).use(storeReset)) +app.mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts index b30f511..fa53629 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,23 +1,23 @@ -import { createRouter, createWebHistory } from "vue-router"; -import HomeView from "@/views/HomeView.vue"; -import codePanel from "@/components/codePanel/index.vue"; +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '@/views/HomeView.vue' +import codePanel from '@/components/codePanel/index.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { - path: "/", - name: "home", + path: '/', + name: 'home', component: HomeView, children: [ { - path: "", - name: "homeCode", + path: '', + name: 'homeCode', component: codePanel, }, ], }, ], -}); +}) -export default router; +export default router diff --git a/src/stores/code.ts b/src/stores/code.ts index 10e2594..48a4974 100644 --- a/src/stores/code.ts +++ b/src/stores/code.ts @@ -1,16 +1,14 @@ -import { defineStore } from "pinia"; -import { ref, shallowRef } from "vue"; import type { ILibraryComponentInstanceData, ILibraryComponentInstanceFocus, -} from "@/components/editPanel/types"; -import type { ILibraryComponent } from "@/library/types"; -import { libraryRecord } from "@/library"; +} from '@/components/editPanel/types' +import type { ILibraryComponent } from '@/library/types' +import { libraryRecord } from '@/library' export const useCodeStore = defineStore( - "CodeStore", + 'CodeStore', () => { - const jsonCode = ref([]); + const jsonCode = ref([]) /** * 想到三种方案 * 1. 在原本组件实例数据上根据 focus:true 自动去找是哪个组件被选中了 @@ -20,7 +18,7 @@ export const useCodeStore = defineStore( * 3. 使用 focusData 记录被选中组件在JSON中的路径，根据路径就可以直达被选中组件 * 问题是拖动组件换顺序之后要全部重新计算 */ - const focusData = ref(); + const focusData = ref() /** * store恢复初始状态 @@ -28,19 +26,19 @@ export const useCodeStore = defineStore( * A: 使用持久化插件之后reset是sessionStorage的数据 */ function clear() { - jsonCode.value = []; - focusData.value = undefined; + jsonCode.value = [] + focusData.value = undefined } function dispatchFocus(uuid: string, path?: string) { focusData.value = { uuid, - path: path ?? "", - }; - return focusData; + path: path ?? '', + } + return focusData } function freeFocus() { - focusData.value = undefined; + focusData.value = undefined } /** @@ -50,35 +48,28 @@ export const useCodeStore = defineStore( function getLibraryComponentInstanceDataAndSchema( focusData: ILibraryComponentInstanceFocus ): [ILibraryComponentInstanceData, ILibraryComponent] { - let focusedLibraryComponentInstanceData = undefined; + let focusedLibraryComponentInstanceData = undefined for (const jsonCodeElement of jsonCode.value) { if (jsonCodeElement.uuid && jsonCodeElement.uuid === focusData.uuid) { // console.log(`jsonCodeElement`, jsonCodeElement, jsonCode); - focusedLibraryComponentInstanceData = jsonCodeElement; - break; + focusedLibraryComponentInstanceData = jsonCodeElement + break } } if (!focusedLibraryComponentInstanceData) - throw new Error( - `not found focusedLibraryComponentData(uuid): ${focusData.uuid}` - ); - let focusedLibraryComponentSchema = undefined; - for (const e of libraryRecord[ - focusedLibraryComponentInstanceData.libraryName - ]) { + throw new Error(`not found focusedLibraryComponentData(uuid): ${focusData.uuid}`) + let focusedLibraryComponentSchema = undefined + for (const e of libraryRecord[focusedLibraryComponentInstanceData.libraryName]) { if (e.name == focusedLibraryComponentInstanceData.componentName) { - focusedLibraryComponentSchema = e; - break; + focusedLibraryComponentSchema = e + break } } if (!focusedLibraryComponentSchema) throw new Error( `not found focusedLibraryComponentSchema(name): ${focusedLibraryComponentInstanceData.componentName}` - ); - return [ - focusedLibraryComponentInstanceData, - focusedLibraryComponentSchema, - ]; + ) + return [focusedLibraryComponentInstanceData, focusedLibraryComponentSchema] } return { @@ -88,7 +79,7 @@ export const useCodeStore = defineStore( getLibraryComponentInstanceDataAndSchema, clear, freeFocus, - }; + } }, { persist: { @@ -96,9 +87,9 @@ export const useCodeStore = defineStore( strategies: [ { storage: sessionStorage, - paths: ["jsonCode"], + paths: ['jsonCode'], }, ], }, } -); +) diff --git a/src/stores/plugins/storeReset.ts b/src/stores/plugins/storeReset.ts index 666b6e5..30dc577 100644 --- a/src/stores/plugins/storeReset.ts +++ b/src/stores/plugins/storeReset.ts @@ -1,11 +1,11 @@ -import { cloneDeep } from "lodash-es"; -import type { PiniaPluginContext } from "pinia"; +import { cloneDeep } from 'lodash-es' +import type { PiniaPluginContext } from 'pinia' /** * @link https://stackoverflow.com/a/73116803 */ export default function storeReset(context: PiniaPluginContext) { - const { store } = context; - const initialState = cloneDeep(store.$state); - store.$reset = () => store.$patch(cloneDeep(initialState)); + const { store } = context + const initialState = cloneDeep(store.$state) + store.$reset = () => store.$patch(cloneDeep(initialState)) } diff --git a/src/utils/library.ts b/src/utils/library.ts index 252f70e..7bc5e98 100644 --- a/src/utils/library.ts +++ b/src/utils/library.ts @@ -1,16 +1,16 @@ -import { v4 as uuidv4 } from "uuid"; +import { v4 as uuidv4 } from 'uuid' +import { cloneDeep } from 'lodash-es' import type { ILibraryComponent, ILibraryComponentPropItem, ILibraryComponentProps, -} from "@/library/types"; +} from '@/library/types' import type { ILibraryComponentInstanceData, ILibraryComponentInstanceProps, -} from "@/components/editPanel/types"; -import { cloneDeep } from "lodash-es"; +} from '@/components/editPanel/types' -export const uuid = uuidv4; +export const uuid = uuidv4 /** * 从物料组件克隆一个组件实例 @@ -24,13 +24,13 @@ export function createLibraryComponentInstance( componentName: com.name, libraryName: com.libraryName, focus: false, - }; + } if (com.props) { Object.assign(data, { props: createLibraryComponentInstanceProps(com.props), - }); + }) } - return data; + return data } /** @@ -40,12 +40,12 @@ export function createLibraryComponentInstance( export function createLibraryComponentInstanceProps( props: ILibraryComponentProps ): ILibraryComponentInstanceProps { - const _props = cloneDeep(props); - const result = {} as ILibraryComponentInstanceProps; + const _props = cloneDeep(props) + const result = {} as ILibraryComponentInstanceProps Object.entries(_props).forEach(([propKey, propSchema]) => { - if (propSchema.default) result[propKey] = propSchema.default; - }); - return result; + if (propSchema.default) result[propKey] = propSchema.default + }) + return result } /** @@ -53,15 +53,13 @@ export function createLibraryComponentInstanceProps( * @param com */ export function defineLibraryComponent(com: ILibraryComponent) { - return com; + return com } /** * 快速创建物料组件的一个prop * @param data */ -export function createLibraryComponentPropItem( - data: ILibraryComponentPropItem -) { - return data; +export function createLibraryComponentPropItem(data: ILibraryComponentPropItem) { + return data } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 3230b20..5d07d78 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,41 +1,43 @@ @@ -43,11 +45,9 @@ function resetAll() { - + LowCodeDemo - + 重置 预览 @@ -67,12 +67,12 @@ function resetAll() { :label="panel.libraryTitle" > - + - +
@@ -80,13 +80,13 @@ function resetAll() {
- +
- +
@@ -111,7 +111,7 @@ function resetAll() { } .panel-left { - width: max(v-bind("stylePanelWidth.left"), 385px); + width: max(v-bind('stylePanelWidth.left'), 385px); .el-tabs { @apply flex-grow; @@ -140,7 +140,7 @@ function resetAll() { } .panel-right { - width: max(v-bind("stylePanelWidth.left"), 385px); + width: max(v-bind('stylePanelWidth.left'), 385px); .el-tabs { @apply flex-grow flex-col; diff --git a/tailwind.config.js b/tailwind.config.js index c4b56fd..b41eef2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], + content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, @@ -8,4 +8,4 @@ module.exports = { corePlugins: { preflight: false, }, -}; +} diff --git a/vite.config.ts b/vite.config.ts index 542c983..13ad701 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,22 +1,21 @@ -import { fileURLToPath, URL } from "node:url"; +import { URL, fileURLToPath } from 'node:url' -import { defineConfig } from "vite"; -import vue from "@vitejs/plugin-vue"; -import vueJsx from "@vitejs/plugin-vue-jsx"; -import Inspect from "vite-plugin-inspect"; +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import Inspect from 'vite-plugin-inspect' -import AutoImport from "unplugin-auto-import/vite"; -import Components from "unplugin-vue-components/vite"; -import IconsResolver from "unplugin-icons/resolver"; -import Icons from "unplugin-icons/vite"; +import AutoImport from 'unplugin-auto-import/vite' +import Components from 'unplugin-vue-components/vite' +import IconsResolver from 'unplugin-icons/resolver' +import Icons from 'unplugin-icons/vite' -import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; -import ElementPlus from "unplugin-element-plus/vite"; -import { VantResolver } from "unplugin-vue-components/resolvers"; +import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers' +import ElementPlus from 'unplugin-element-plus/vite' -import { manualChunksPlugin } from "vite-plugin-webpackchunkname"; +// import { manualChunksPlugin } from 'vite-plugin-webpackchunkname' -import { visualizer } from "rollup-plugin-visualizer"; +import { visualizer } from 'rollup-plugin-visualizer' // https://vitejs.dev/config/ export default defineConfig({ @@ -39,9 +38,9 @@ export default defineConfig({ */ imports: [ // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等 - "vue", - "@vueuse/core", - "pinia", + 'vue', + '@vueuse/core', + 'pinia', ], // Auto import for module exports under directories // by default it only scan one level of modules under the directory @@ -59,7 +58,7 @@ export default defineConfig({ * @link https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L27 */ ElementPlusResolver({ - importStyle: "sass", + importStyle: 'sass', }), /** * @link https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L33 @@ -80,7 +79,7 @@ export default defineConfig({ dirs: [], resolvers: [ ElementPlusResolver({ - importStyle: "sass", + importStyle: 'sass', }), /** * 自动注册图标组件 @@ -98,7 +97,7 @@ export default defineConfig({ * @link https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5 */ ElementPlus({ - defaultLocale: "zh-cn", + defaultLocale: 'zh-cn', }), Icons({ /** @@ -129,16 +128,16 @@ export default defineConfig({ }, resolve: { alias: { - "@": fileURLToPath(new URL("./src", import.meta.url)), + '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, build: { rollupOptions: { output: { manualChunks: { - editor: ["monaco-editor"], + editor: ['monaco-editor'], }, }, }, }, -}); +}) From 748bbfb5516f4afe67eefdc52f20c81106846352 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Thu, 4 Aug 2022 23:56:16 +0800 Subject: [PATCH 021/235] style: prettier format once --- auto-imports.d.ts | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 5913e98..46d3ff0 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -287,7 +287,9 @@ declare module '@vue/runtime-core' { readonly createInjectionState: UnwrapRef readonly createPinia: UnwrapRef readonly createReactiveFn: UnwrapRef - readonly createSharedComposable: UnwrapRef + readonly createSharedComposable: UnwrapRef< + typeof import('@vueuse/core')['createSharedComposable'] + > readonly createUnrefFn: UnwrapRef readonly customRef: UnwrapRef readonly debouncedRef: UnwrapRef @@ -408,13 +410,17 @@ declare module '@vue/runtime-core' { readonly useDateFormat: UnwrapRef readonly useDebounce: UnwrapRef readonly useDebounceFn: UnwrapRef - readonly useDebouncedRefHistory: UnwrapRef + readonly useDebouncedRefHistory: UnwrapRef< + typeof import('@vueuse/core')['useDebouncedRefHistory'] + > readonly useDeviceMotion: UnwrapRef readonly useDeviceOrientation: UnwrapRef readonly useDevicePixelRatio: UnwrapRef readonly useDevicesList: UnwrapRef readonly useDisplayMedia: UnwrapRef - readonly useDocumentVisibility: UnwrapRef + readonly useDocumentVisibility: UnwrapRef< + typeof import('@vueuse/core')['useDocumentVisibility'] + > readonly useDraggable: UnwrapRef readonly useDropZone: UnwrapRef readonly useElementBounding: UnwrapRef @@ -439,7 +445,9 @@ declare module '@vue/runtime-core' { readonly useIdle: UnwrapRef readonly useImage: UnwrapRef readonly useInfiniteScroll: UnwrapRef - readonly useIntersectionObserver: UnwrapRef + readonly useIntersectionObserver: UnwrapRef< + typeof import('@vueuse/core')['useIntersectionObserver'] + > readonly useInterval: UnwrapRef readonly useIntervalFn: UnwrapRef readonly useKeyModifier: UnwrapRef @@ -467,9 +475,13 @@ declare module '@vue/runtime-core' { readonly usePermission: UnwrapRef readonly usePointer: UnwrapRef readonly usePointerSwipe: UnwrapRef - readonly usePreferredColorScheme: UnwrapRef + readonly usePreferredColorScheme: UnwrapRef< + typeof import('@vueuse/core')['usePreferredColorScheme'] + > readonly usePreferredDark: UnwrapRef - readonly usePreferredLanguages: UnwrapRef + readonly usePreferredLanguages: UnwrapRef< + typeof import('@vueuse/core')['usePreferredLanguages'] + > readonly useRafFn: UnwrapRef readonly useRefHistory: UnwrapRef readonly useResizeObserver: UnwrapRef @@ -495,7 +507,9 @@ declare module '@vue/runtime-core' { readonly useTextareaAutosize: UnwrapRef readonly useThrottle: UnwrapRef readonly useThrottleFn: UnwrapRef - readonly useThrottledRefHistory: UnwrapRef + readonly useThrottledRefHistory: UnwrapRef< + typeof import('@vueuse/core')['useThrottledRefHistory'] + > readonly useTimeAgo: UnwrapRef readonly useTimeout: UnwrapRef readonly useTimeoutFn: UnwrapRef From 27a283315a40842a63e867dd2a0a5e4b9f3553cd Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Fri, 5 Aug 2022 14:06:30 +0800 Subject: [PATCH 022/235] =?UTF-8?q?feat(library):=20=E5=A2=9E=E5=8A=A0swip?= =?UTF-8?q?e=E8=BD=AE=E6=92=AD=E5=9B=BE=20feat(editPanel):=20=E6=8C=89?= =?UTF-8?q?=E4=B8=8BCtrlLeft=E5=B1=8F=E8=94=BD=E6=8B=96=E5=8A=A8=20fix:=20?= =?UTF-8?q?=E4=BC=98=E5=8C=96icon=E3=80=81preview=E5=AE=9A=E4=B9=89=20fix(?= =?UTF-8?q?library):=20swipe=E6=8B=96=E5=85=A5=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E9=A1=B5=E9=9D=A2=E6=92=91=E6=BB=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- auto-imports.d.ts | 28 ++++----------- components.d.ts | 4 +++ package-lock.json | 24 +++++++++++++ package.json | 2 ++ src/components/editPanel/index.vue | 19 ++++++++-- src/library/button/index.vue | 7 ++-- src/library/image/index.vue | 7 ++-- src/library/swipe/index.vue | 58 ++++++++++++++++++++++++++++++ src/library/swipe/preview.tsx | 25 +++++++++++++ src/library/types.ts | 10 +++--- src/main.ts | 1 + src/views/HomeView.vue | 1 + tsconfig.json | 3 +- 13 files changed, 153 insertions(+), 36 deletions(-) create mode 100644 src/library/swipe/index.vue create mode 100644 src/library/swipe/preview.tsx diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 46d3ff0..5913e98 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -287,9 +287,7 @@ declare module '@vue/runtime-core' { readonly createInjectionState: UnwrapRef readonly createPinia: UnwrapRef readonly createReactiveFn: UnwrapRef - readonly createSharedComposable: UnwrapRef< - typeof import('@vueuse/core')['createSharedComposable'] - > + readonly createSharedComposable: UnwrapRef readonly createUnrefFn: UnwrapRef readonly customRef: UnwrapRef readonly debouncedRef: UnwrapRef @@ -410,17 +408,13 @@ declare module '@vue/runtime-core' { readonly useDateFormat: UnwrapRef readonly useDebounce: UnwrapRef readonly useDebounceFn: UnwrapRef - readonly useDebouncedRefHistory: UnwrapRef< - typeof import('@vueuse/core')['useDebouncedRefHistory'] - > + readonly useDebouncedRefHistory: UnwrapRef readonly useDeviceMotion: UnwrapRef readonly useDeviceOrientation: UnwrapRef readonly useDevicePixelRatio: UnwrapRef readonly useDevicesList: UnwrapRef readonly useDisplayMedia: UnwrapRef - readonly useDocumentVisibility: UnwrapRef< - typeof import('@vueuse/core')['useDocumentVisibility'] - > + readonly useDocumentVisibility: UnwrapRef readonly useDraggable: UnwrapRef readonly useDropZone: UnwrapRef readonly useElementBounding: UnwrapRef @@ -445,9 +439,7 @@ declare module '@vue/runtime-core' { readonly useIdle: UnwrapRef readonly useImage: UnwrapRef readonly useInfiniteScroll: UnwrapRef - readonly useIntersectionObserver: UnwrapRef< - typeof import('@vueuse/core')['useIntersectionObserver'] - > + readonly useIntersectionObserver: UnwrapRef readonly useInterval: UnwrapRef readonly useIntervalFn: UnwrapRef readonly useKeyModifier: UnwrapRef @@ -475,13 +467,9 @@ declare module '@vue/runtime-core' { readonly usePermission: UnwrapRef readonly usePointer: UnwrapRef readonly usePointerSwipe: UnwrapRef - readonly usePreferredColorScheme: UnwrapRef< - typeof import('@vueuse/core')['usePreferredColorScheme'] - > + readonly usePreferredColorScheme: UnwrapRef readonly usePreferredDark: UnwrapRef - readonly usePreferredLanguages: UnwrapRef< - typeof import('@vueuse/core')['usePreferredLanguages'] - > + readonly usePreferredLanguages: UnwrapRef readonly useRafFn: UnwrapRef readonly useRefHistory: UnwrapRef readonly useResizeObserver: UnwrapRef @@ -507,9 +495,7 @@ declare module '@vue/runtime-core' { readonly useTextareaAutosize: UnwrapRef readonly useThrottle: UnwrapRef readonly useThrottleFn: UnwrapRef - readonly useThrottledRefHistory: UnwrapRef< - typeof import('@vueuse/core')['useThrottledRefHistory'] - > + readonly useThrottledRefHistory: UnwrapRef readonly useTimeAgo: UnwrapRef readonly useTimeout: UnwrapRef readonly useTimeoutFn: UnwrapRef diff --git a/components.d.ts b/components.d.ts index 8d8df25..3bd3540 100644 --- a/components.d.ts +++ b/components.d.ts @@ -22,10 +22,14 @@ declare module '@vue/runtime-core' { ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] + IEpAim: typeof import('~icons/ep/aim')['default'] + IEpCopyDocument: typeof import('~icons/ep/copy-document')['default'] IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] VanButton: typeof import('vant/es')['Button'] VanImage: typeof import('vant/es')['Image'] + VanSwipe: typeof import('vant/es')['Swipe'] + VanSwipeItem: typeof import('vant/es')['SwipeItem'] } } diff --git a/package-lock.json b/package-lock.json index de9127b..275bba3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "cow-code-low-code", "version": "0.0.0", "dependencies": { + "@vant/touch-emulator": "^1.3.2", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", "element-plus": "^2.2.12", @@ -30,6 +31,7 @@ "@rushstack/eslint-patch": "^1.1.0", "@types/node": "^16.11.47", "@types/sass": "^1.43.1", + "@types/sortablejs": "^1.13.0", "@types/uuid": "^8.3.4", "@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue-jsx": "^2.0.0", @@ -1416,6 +1418,12 @@ "@types/node": "*" } }, + "node_modules/@types/sortablejs": { + "version": "1.13.0", + "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.13.0.tgz", + "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==", + "dev": true + }, "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmmirror.com/@types/unist/-/unist-2.0.6.tgz", @@ -1628,6 +1636,11 @@ "@popperjs/core": "^2.9.2" } }, + "node_modules/@vant/touch-emulator": { + "version": "1.3.2", + "resolved": "https://registry.npmmirror.com/@vant/touch-emulator/-/touch-emulator-1.3.2.tgz", + "integrity": "sha512-Om6e8kCAnmk/q8byngKreff7Hyn6XxwOGr8yedP3y3LEVoE+iyj8/+Mn+AYvGEQ00GK0MlgAfyaV4emXAYj1Hw==" + }, "node_modules/@vant/use": { "version": "1.4.1", "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.4.1.tgz", @@ -9700,6 +9713,12 @@ "@types/node": "*" } }, + "@types/sortablejs": { + "version": "1.13.0", + "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.13.0.tgz", + "integrity": "sha512-C3064MH72iEfeGCYEGCt7FCxXoAXaMPG0QPnstcxvPmbl54erpISu06d++FY37Smja64iWy5L8wOyHHBghWbJQ==", + "dev": true + }, "@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmmirror.com/@types/unist/-/unist-2.0.6.tgz", @@ -9847,6 +9866,11 @@ "@popperjs/core": "^2.9.2" } }, + "@vant/touch-emulator": { + "version": "1.3.2", + "resolved": "https://registry.npmmirror.com/@vant/touch-emulator/-/touch-emulator-1.3.2.tgz", + "integrity": "sha512-Om6e8kCAnmk/q8byngKreff7Hyn6XxwOGr8yedP3y3LEVoE+iyj8/+Mn+AYvGEQ00GK0MlgAfyaV4emXAYj1Hw==" + }, "@vant/use": { "version": "1.4.1", "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.4.1.tgz", diff --git a/package.json b/package.json index aaead53..7b4ee08 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "format": "prettier --write ." }, "dependencies": { + "@vant/touch-emulator": "^1.3.2", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", "element-plus": "^2.2.12", @@ -36,6 +37,7 @@ "@rushstack/eslint-patch": "^1.1.0", "@types/node": "^16.11.47", "@types/sass": "^1.43.1", + "@types/sortablejs": "^1.13.0", "@types/uuid": "^8.3.4", "@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue-jsx": "^2.0.0", diff --git a/src/components/editPanel/index.vue b/src/components/editPanel/index.vue index 74ce8a3..8a4f396 100644 --- a/src/components/editPanel/index.vue +++ b/src/components/editPanel/index.vue @@ -4,12 +4,16 @@ class="edit" group="library" item-key="id" + :disabled="isDownCtrlLeft" > @@ -44,6 +44,7 @@ const isShowTrigger = ref(false) .float-tips { // 悬浮菜单 --button-trigger-bottom: 40px; + :deep(.button-trigger-wrapper) { @apply fixed; bottom: calc(40px + var(--button-trigger-bottom)); From 09c6f2e7eb5d91cf3efd9ddd166512d9d5d7230e Mon Sep 17 00:00:00 2001 From: zhiyan <1533460130@qq.com> Date: Wed, 10 Aug 2022 16:58:47 +0800 Subject: [PATCH 077/235] =?UTF-8?q?refactor:=20=E5=BE=AE=E8=B0=83=E4=BB=A3?= =?UTF-8?q?=E7=A0=81&fix=EF=BC=9Aeslint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 3 - src/library/generic/input/textbox/index.vue | 11 +- src/stores/code.ts | 4 +- .../index.module.scss | 0 .../IndefiniteNumberInputBox/index.tsx | 0 .../components}/SwitchWithSlots.tsx | 0 .../components/form-item-list/index.tsx | 85 ++++++++++++ .../components/form-render/index.tsx | 126 +++--------------- .../components/attribute-panel/index.vue | 6 +- 9 files changed, 117 insertions(+), 118 deletions(-) rename src/views/home/components/home-right/components/attribute-panel/components/form-render/components/{ => form-item-list/components}/IndefiniteNumberInputBox/index.module.scss (100%) rename src/views/home/components/home-right/components/attribute-panel/components/form-render/components/{ => form-item-list/components}/IndefiniteNumberInputBox/index.tsx (100%) rename src/views/home/components/home-right/components/attribute-panel/components/form-render/components/{ => form-item-list/components}/SwitchWithSlots.tsx (100%) create mode 100644 src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 00657d3..764bcdc 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,7 +1,4 @@ module.exports = { root: true, extends: ['@element-plus/eslint-config'], - rules: { - 'vue/no-mutating-props': 'off' - } } diff --git a/src/library/generic/input/textbox/index.vue b/src/library/generic/input/textbox/index.vue index 4d8c406..95580ea 100644 --- a/src/library/generic/input/textbox/index.vue +++ b/src/library/generic/input/textbox/index.vue @@ -1,7 +1,7 @@ @@ -82,14 +82,14 @@ export default defineComponent({ type: String, default: 'text', }), - defaultValue: createLibraryComponentPropItem({ + value: createLibraryComponentPropItem({ title: '默认值', belongToPanel: AttributePanelsEnum.generic, formType: AttributePanelFormItemInputTypeEnum.input, type: String, default: '', }), - placehoder: createLibraryComponentPropItem({ + placeholder: createLibraryComponentPropItem({ title: '占位符', belongToPanel: AttributePanelsEnum.generic, formType: AttributePanelFormItemInputTypeEnum.input, @@ -97,8 +97,9 @@ export default defineComponent({ default: 'Please input content!', }), }, - setup(props) { - return {} + setup(props, { emit }) { + const defaultValue = useVModel(props, 'value', emit) + return { defaultValue } }, }) diff --git a/src/stores/code.ts b/src/stores/code.ts index ef4f998..68265ac 100644 --- a/src/stores/code.ts +++ b/src/stores/code.ts @@ -54,12 +54,13 @@ export const useCodeStore = defineStore( */ let focusedLibraryComponentInstanceData = undefined for (const jsonCodeElement of jsonCode.value) { - if (jsonCodeElement.uuid && jsonCodeElement.uuid === focusData.uuid) { + if (jsonCodeElement?.uuid === focusData.uuid) { // console.log(`jsonCodeElement`, jsonCodeElement, jsonCode); focusedLibraryComponentInstanceData = jsonCodeElement break } } + if (!focusedLibraryComponentInstanceData) throw new Error(`not found focusedLibraryComponentData(uuid): ${focusData.uuid}`) @@ -70,6 +71,7 @@ export const useCodeStore = defineStore( break } } + if (!focusedLibraryComponentSchema) throw new Error( `not found focusedLibraryComponentSchema(name): ${focusedLibraryComponentInstanceData.componentName}` diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/IndefiniteNumberInputBox/index.module.scss b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/IndefiniteNumberInputBox/index.module.scss similarity index 100% rename from src/views/home/components/home-right/components/attribute-panel/components/form-render/components/IndefiniteNumberInputBox/index.module.scss rename to src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/IndefiniteNumberInputBox/index.module.scss diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/IndefiniteNumberInputBox/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/IndefiniteNumberInputBox/index.tsx similarity index 100% rename from src/views/home/components/home-right/components/attribute-panel/components/form-render/components/IndefiniteNumberInputBox/index.tsx rename to src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/IndefiniteNumberInputBox/index.tsx diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/SwitchWithSlots.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/SwitchWithSlots.tsx similarity index 100% rename from src/views/home/components/home-right/components/attribute-panel/components/form-render/components/SwitchWithSlots.tsx rename to src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/SwitchWithSlots.tsx diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx new file mode 100644 index 0000000..6a939f0 --- /dev/null +++ b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx @@ -0,0 +1,85 @@ +import { ElFormItem, ElInput, ElOption, ElSelect, ElSlider, ElSwitch } from 'element-plus' +import type { CSSProperties } from 'vue' +import type { LibraryComponentInstanceProps, SelectOption } from '@/types/library-component' +import type { AttributePanelFormItemSchema } from '@/types/panel' +import { AttributePanelFormItemInputTypeEnum } from '@/types/panel' +import IndefiniteNumberInputBox from '@/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/IndefiniteNumberInputBox' +import { SwitchWithSlots } from '@/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/components/SwitchWithSlots' +import { LibraryComponentFormItemLabelPositionEnum } from '@/types/library-component' + +const formItemChildRender = ( + //根据prop名称渲染组件 + propsData: LibraryComponentInstanceProps, + formItemSchema: AttributePanelFormItemSchema +) => { + //input + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.input) { + return + } + //indefiniteNumberInputBox + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox) { + const list = propsData[formItemSchema.name] + if (!Array.isArray(list)) + throw new TypeError( + 'invalid Data at AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox' + ) + return ( + { + if (!Array.isArray(list)) + throw new TypeError( + 'invalid Data at AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox' + ) + list.splice(0, list.length, ...e) + }} + /> + ) + } + //switch + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.switch) { + return ( + <> + + + ) + } + //select + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.select) { + return ( + <> + + {formItemSchema.selectOptions?.map((item: SelectOption) => ( + + ))} + + + ) + } + //switchWithSlots + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.switchWithSlots) { + return + } + //slider + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.slider) { + return + } + return undefined +} + +export default ( + propsData: LibraryComponentInstanceProps, + cursorPropsArray: AttributePanelFormItemSchema[] +) => { + return cursorPropsArray.map((propItem) => { + const style = {} as CSSProperties + if (propItem.labelPosition === LibraryComponentFormItemLabelPositionEnum.top) { + style['display'] = 'block' + } + return ( + + {formItemChildRender(propsData, propItem)} + + ) + }) +} diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/index.tsx index 2c0c5b4..ed08578 100644 --- a/src/views/home/components/home-right/components/attribute-panel/components/form-render/index.tsx +++ b/src/views/home/components/home-right/components/attribute-panel/components/form-render/index.tsx @@ -1,39 +1,10 @@ -import { ElForm, ElFormItem, ElInput, ElOption, ElSelect, ElSlider, ElSwitch } from 'element-plus' -import { SwitchWithSlots } from './components/SwitchWithSlots' -import IndefiniteNumberInputBox from './components/IndefiniteNumberInputBox' +import { ElForm } from 'element-plus' import type { LibraryComponentInstanceProps, LibraryComponentProps, - SelectOption, } from '@/types/library-component' import type { AttributePanelFormItemSchema, AttributePanelsEnum } from '@/types/panel' -import type { CSSProperties } from 'vue' -import { LibraryComponentFormItemLabelPositionEnum } from '@/types/library-component' -import { AttributePanelFormItemInputTypeEnum } from '@/types/panel' - -function getLibraryComponentPropsRecordInAPanel( - propsSchema: LibraryComponentProps, - panel: AttributePanelsEnum -) { - const propsFilterArr = Object.entries(propsSchema).filter((e) => e[1].belongToPanel === panel) - return Object.fromEntries(propsFilterArr) -} - -function getLibraryComponentPropsArrayInAPanel( - propsSchema: LibraryComponentProps, - panel: AttributePanelsEnum -) { - return Object.entries(getLibraryComponentPropsRecordInAPanel(propsSchema, panel)).reduce( - (previousValue, currentValue) => { - previousValue.push({ - ...currentValue[1], - name: currentValue[0], - }) - return previousValue - }, - [] as AttributePanelFormItemSchema[] - ) -} +import FormItemList from '@/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list' /** *渲染表单 @@ -47,83 +18,24 @@ export default function formRender( propsSchema: LibraryComponentProps | undefined ) { if (!propsSchema) return undefined + const $style = useCssModule() - const cursorPropsArray = getLibraryComponentPropsArrayInAPanel(propsSchema, cursorPanel) - // const propsDataRefs = toRefs(propsData); - const formItemChildRender = ( - //根据prop名称渲染组件 - propsData: LibraryComponentInstanceProps, - formItemSchema: AttributePanelFormItemSchema - ) => { - //input - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.input) { - return - } - //indefiniteNumberInputBox - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox) { - const list = propsData[formItemSchema.name] - if (!Array.isArray(list)) - throw new TypeError( - 'invalid Data at AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox' - ) - return ( - { - if (!Array.isArray(list)) - throw new TypeError( - 'invalid Data at AttributePanelFormItemInputTypeEnum.indefiniteNumberInputBox' - ) - list.splice(0, list.length, ...e) - }} - /> - ) - } - //switch - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.switch) { - return ( - <> - - - ) - } - //select - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.select) { - return ( - <> - - {formItemSchema.selectOptions?.map((item: SelectOption) => ( - - ))} - - - ) - } - //switchWithSlots - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.switchWithSlots) { - return - } - //slider - if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.slider) { - return - } - return undefined - } - //渲染整个props列表 - const formItemList = cursorPropsArray.map((propItem) => { - const style = {} as CSSProperties - if (propItem.labelPosition === LibraryComponentFormItemLabelPositionEnum.top) { - style['display'] = 'block' - } - return ( - - {formItemChildRender(propsData, propItem)} - - ) - }) + + const cursorPropsArray = Object.entries(propsSchema) + .filter((e) => e[1].belongToPanel === cursorPanel) + .reduce((previousValue, currentValue) => { + previousValue.push({ + ...currentValue[1], + name: currentValue[0], + }) + return previousValue + }, [] as AttributePanelFormItemSchema[]) + return ( - - {formItemList} - + <> + + {FormItemList(propsData, cursorPropsArray)} + + ) } diff --git a/src/views/home/components/home-right/components/attribute-panel/index.vue b/src/views/home/components/home-right/components/attribute-panel/index.vue index b5b15aa..16b1e76 100644 --- a/src/views/home/components/home-right/components/attribute-panel/index.vue +++ b/src/views/home/components/home-right/components/attribute-panel/index.vue @@ -1,6 +1,7 @@ From 6457ef6bf9ac543813ca59bdd3ff329752c95870 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Sat, 13 Aug 2022 22:28:12 +0800 Subject: [PATCH 115/235] =?UTF-8?q?fix:=20monaco=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E5=86=85=E5=AE=B9=E6=97=B6=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=99=A8=E5=8D=A1=E6=AD=BB=20feat:=20code-tab-pane=E5=8F=8C?= =?UTF-8?q?=E5=90=91=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/monaco-editor/index.vue | 20 +++++++++++-------- .../home-left/components/code-tab-pane.vue | 14 +++++++++++-- .../components/event-tab-pane/index.vue | 7 +++++++ .../event-tab-pane/use-event-trigger.ts | 19 +++++++++++++++++- 4 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/components/monaco-editor/index.vue b/src/components/monaco-editor/index.vue index 084c276..446ada2 100644 --- a/src/components/monaco-editor/index.vue +++ b/src/components/monaco-editor/index.vue @@ -14,6 +14,7 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' import TSWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' +import { throttle } from 'lodash-es' import type { PropType } from 'vue' // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -53,11 +54,11 @@ const props = defineProps({ default: '', }, }) -const modelValue = useVModel(props, 'modelValue') +const emit = defineEmits(['update:modelValue']) +const modelValue = useVModel(props, 'modelValue', emit, { passive: true }) const codeContainerRef = ref>() const editorInstanceRef = shallowRef() -const editorTextModel = ref() function formatCode() { requestAnimationFrame(() => { editorInstanceRef.value?.getAction('editor.action.formatDocument').run() @@ -66,10 +67,10 @@ function formatCode() { watch( modelValue, - (value) => { - editorTextModel.value?.setValue(value) - }, - { deep: true } + throttle(() => { + const content = editorInstanceRef.value?.getValue() + if (modelValue.value !== content) editorInstanceRef.value?.setValue(modelValue.value) + }) ) onMounted(() => { @@ -93,11 +94,14 @@ onMounted(() => { formatCode() }) } - editorTextModel.value = editorInstanceRef.value.getModel()! + editorInstanceRef.value?.onDidChangeModelContent( + throttle(() => { + modelValue.value = editorInstanceRef.value!.getValue()! + }) + ) }) defineExpose({ - editorTextModel, editorInstanceRef, codeContainerRef, formatCode, diff --git a/src/views/home/components/home-left/components/code-tab-pane.vue b/src/views/home/components/home-left/components/code-tab-pane.vue index fa27811..d4ba864 100644 --- a/src/views/home/components/home-left/components/code-tab-pane.vue +++ b/src/views/home/components/home-left/components/code-tab-pane.vue @@ -8,7 +8,6 @@ diff --git a/src/views/home/components/home-right/components/attribute-panel/components/event-tab-pane/use-event-trigger.ts b/src/views/home/components/home-right/components/attribute-panel/components/event-tab-pane/use-event-trigger.ts index 93c36d1..f2f25c3 100644 --- a/src/views/home/components/home-right/components/attribute-panel/components/event-tab-pane/use-event-trigger.ts +++ b/src/views/home/components/home-right/components/attribute-panel/components/event-tab-pane/use-event-trigger.ts @@ -16,22 +16,38 @@ export default function useEventTrigger( const isPopoverShow = ref(false) const dialogIsShowCustomEventTrigger = ref(false) const dialogCustomEventTriggerRef = ref>() + + /** + * 让dialog中的Monaco自适应大小 + */ const unwatchDialogCustomEventTriggerRef = watch( () => dialogCustomEventTriggerRef.value?.dialogContentRef, (val) => { const dialogRootEl: HTMLElement = (val.$ as ComponentInternalInstance).vnode.el as any + const dialogHeaderEl = dialogRootEl.querySelector('header.el-dialog__header')! dialogRootEl.style.setProperty( '--el-dialog-header-height', `${dialogHeaderEl.getBoundingClientRect().height}px` ) + + const dialogFooterEl = dialogRootEl.querySelector('footer.el-dialog__footer')! + dialogRootEl.style.setProperty( + '--el-dialog-footer-height', + `${dialogFooterEl.getBoundingClientRect().height}px` + ) + const dialogBodyEl: HTMLDivElement = dialogRootEl.querySelector('div.el-dialog__body')! dialogBodyEl.style.height = - 'calc(var(--el-dialog-height) - var(--el-dialog-header-height) - var(--el-dialog-padding-primary) * 2)' + 'calc(var(--el-dialog-height) - var(--el-dialog-header-height) - var(--el-dialog-footer-height) - var(--el-dialog-padding-primary) * 2)' unwatchDialogCustomEventTriggerRef() } ) + function onSubmitCustomEventTriggerCode() { + console.log(`submitCustomEventTriggerCode`, dialogIsShowCustomEventTrigger) + } + /** * 添加事件触发器 * @param eventName @@ -68,5 +84,6 @@ export default function useEventTrigger( isPopoverShow, onAddEventTrigger, onDeleteEventTrigger, + onSubmitCustomEventTriggerCode, } } From 158a869e63d42ff9e7edf0b0ba8081d30ed59ff3 Mon Sep 17 00:00:00 2001 From: 20empty <2625502633@qq.com> Date: Sat, 13 Aug 2022 23:10:35 +0800 Subject: [PATCH 116/235] =?UTF-8?q?feat(library):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E4=BA=86=E9=80=9A=E7=9F=A5=E6=A0=8F=E7=89=A9=E6=96=99=EF=BC=8C?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=86=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 109 ++++++++++++++ package.json | 1 + src/library/generic/show/NoticeBar/index.vue | 134 ++++++++++++++++++ src/main.ts | 3 + src/types/panel.ts | 4 + .../components/form-item-list/index.tsx | 4 + types/colorPicker.d.ts | 8 ++ types/components.d.ts | 2 + 8 files changed, 265 insertions(+) create mode 100644 src/library/generic/show/NoticeBar/index.vue create mode 100644 types/colorPicker.d.ts diff --git a/package-lock.json b/package-lock.json index 8e50611..66114da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@vant/touch-emulator": "^1.3.2", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", + "colorpicker-v3": "^2.10.2", "element-plus": "^2.2.12", "lodash": "^4.17.21", "lodash-es": "^4.17.21", @@ -2726,6 +2727,78 @@ "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==", "dev": true }, + "node_modules/colorpicker-v3": { + "version": "2.10.2", + "resolved": "https://registry.npmmirror.com/colorpicker-v3/-/colorpicker-v3-2.10.2.tgz", + "integrity": "sha512-ZWPq5wcugS3NcL7DwYqVSP5mE/x45FK31olGpig+Tko5jUXk0danfEYi1Aei3lgYs+Z0zAfhbhqVuDgOdUs5Mw==", + "dependencies": { + "@vueuse/core": "^7.5.5", + "vue": "^3.2.25" + } + }, + "node_modules/colorpicker-v3/node_modules/@vueuse/core": { + "version": "7.7.1", + "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-7.7.1.tgz", + "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==", + "dependencies": { + "@vueuse/shared": "7.7.1", + "vue-demi": "*" + }, + "peerDependencies": { + "@vue/composition-api": "^1.1.0", + "vue": "^2.6.0 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "vue": { + "optional": true + } + } + }, + "node_modules/colorpicker-v3/node_modules/@vueuse/core/node_modules/@vueuse/shared": { + "version": "7.7.1", + "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-7.7.1.tgz", + "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==", + "dependencies": { + "vue-demi": "*" + }, + "peerDependencies": { + "@vue/composition-api": "^1.1.0", + "vue": "^2.6.0 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "vue": { + "optional": true + } + } + }, + "node_modules/colorpicker-v3/node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.13.7", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz", + "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/commander": { "version": "9.4.0", "resolved": "https://registry.npmmirror.com/commander/-/commander-9.4.0.tgz", @@ -11131,6 +11204,42 @@ "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==", "dev": true }, + "colorpicker-v3": { + "version": "2.10.2", + "resolved": "https://registry.npmmirror.com/colorpicker-v3/-/colorpicker-v3-2.10.2.tgz", + "integrity": "sha512-ZWPq5wcugS3NcL7DwYqVSP5mE/x45FK31olGpig+Tko5jUXk0danfEYi1Aei3lgYs+Z0zAfhbhqVuDgOdUs5Mw==", + "requires": { + "@vueuse/core": "^7.5.5", + "vue": "^3.2.25" + }, + "dependencies": { + "@vueuse/core": { + "version": "7.7.1", + "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-7.7.1.tgz", + "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==", + "requires": { + "@vueuse/shared": "7.7.1", + "vue-demi": "*" + }, + "dependencies": { + "@vueuse/shared": { + "version": "7.7.1", + "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-7.7.1.tgz", + "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==", + "requires": { + "vue-demi": "*" + } + }, + "vue-demi": { + "version": "0.13.7", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz", + "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==", + "requires": {} + } + } + } + } + }, "commander": { "version": "9.4.0", "resolved": "https://registry.npmmirror.com/commander/-/commander-9.4.0.tgz", diff --git a/package.json b/package.json index a5419eb..da6e3f7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@vant/touch-emulator": "^1.3.2", "@vueuse/core": "^9.0.2", "@vueuse/integrations": "^9.0.2", + "colorpicker-v3": "^2.10.2", "element-plus": "^2.2.12", "lodash": "^4.17.21", "lodash-es": "^4.17.21", diff --git a/src/library/generic/show/NoticeBar/index.vue b/src/library/generic/show/NoticeBar/index.vue new file mode 100644 index 0000000..cfcede9 --- /dev/null +++ b/src/library/generic/show/NoticeBar/index.vue @@ -0,0 +1,134 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index d791216..0bef560 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,5 @@ +import ColorPicker from 'colorpicker-v3' +import 'colorpicker-v3/style.css' import App from './App.vue' import router from './router' import pinia from '@/plugins/pinia' @@ -6,6 +8,7 @@ import '@vant/touch-emulator' const app = createApp(App) +app.use(ColorPicker) app.use(router) app.use(pinia) app.mount('#app') diff --git a/src/types/panel.ts b/src/types/panel.ts index a13f6a6..36d4a4d 100644 --- a/src/types/panel.ts +++ b/src/types/panel.ts @@ -47,6 +47,10 @@ export enum AttributePanelFormItemInputTypeEnum { * 滑块 */ slider = 'slider', + /** + * 颜色选择器 + */ + colorPicker = 'colorPicker', } /** diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx index 6a939f0..54fc5cd 100644 --- a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx +++ b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx @@ -64,6 +64,10 @@ const formItemChildRender = ( if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.slider) { return } + //colorPicker + if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.colorPicker) { + return + } return undefined } diff --git a/types/colorPicker.d.ts b/types/colorPicker.d.ts new file mode 100644 index 0000000..02ce308 --- /dev/null +++ b/types/colorPicker.d.ts @@ -0,0 +1,8 @@ +declare module 'colorpicker-v3' { + export default class ColorPicker { + constructor(el: HTMLElement, options: any) + destroy(): void + getColor(): string + setColor(color: string): void + } +} diff --git a/types/components.d.ts b/types/components.d.ts index d1de5ff..6684b6a 100644 --- a/types/components.d.ts +++ b/types/components.d.ts @@ -33,6 +33,7 @@ declare module '@vue/runtime-core' { IEpCopyDocument: typeof import('~icons/ep/copy-document')['default'] IEpDocument: typeof import('~icons/ep/document')['default'] IEpFold: typeof import('~icons/ep/fold')['default'] + IEpMinus: typeof import('~icons/ep/minus')['default'] IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] @@ -42,6 +43,7 @@ declare module '@vue/runtime-core' { VanCollapseItem: typeof import('vant/es')['CollapseItem'] VanField: typeof import('vant/es')['Field'] VanImage: typeof import('vant/es')['Image'] + VanNoticeBar: typeof import('vant/es')['NoticeBar'] VanSwipe: typeof import('vant/es')['Swipe'] VanSwipeItem: typeof import('vant/es')['SwipeItem'] } From 7036438300abacf0435377ece7bfdd4797f118ef Mon Sep 17 00:00:00 2001 From: 20empty <2625502633@qq.com> Date: Sun, 14 Aug 2022 00:18:01 +0800 Subject: [PATCH 117/235] =?UTF-8?q?fix:=20=E8=A7=84=E6=95=B4=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E5=91=BD=E5=90=8D=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../generic/show/{NoticeBar => notice-bar}/index.vue | 0 types/color-picker.d.ts | 3 +++ types/colorPicker.d.ts | 8 -------- 3 files changed, 3 insertions(+), 8 deletions(-) rename src/library/generic/show/{NoticeBar => notice-bar}/index.vue (100%) create mode 100644 types/color-picker.d.ts delete mode 100644 types/colorPicker.d.ts diff --git a/src/library/generic/show/NoticeBar/index.vue b/src/library/generic/show/notice-bar/index.vue similarity index 100% rename from src/library/generic/show/NoticeBar/index.vue rename to src/library/generic/show/notice-bar/index.vue diff --git a/types/color-picker.d.ts b/types/color-picker.d.ts new file mode 100644 index 0000000..905d97c --- /dev/null +++ b/types/color-picker.d.ts @@ -0,0 +1,3 @@ +declare module 'colorpicker-v3' { + export default { install: (app: App) => any } +} diff --git a/types/colorPicker.d.ts b/types/colorPicker.d.ts deleted file mode 100644 index 02ce308..0000000 --- a/types/colorPicker.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare module 'colorpicker-v3' { - export default class ColorPicker { - constructor(el: HTMLElement, options: any) - destroy(): void - getColor(): string - setColor(color: string): void - } -} From e61df9034b6f7a9a0f6708e93793b734e99f4580 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Sun, 14 Aug 2022 00:29:03 +0800 Subject: [PATCH 118/235] =?UTF-8?q?feat:=20colorPick=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/color-picker.d.ts | 120 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 119 insertions(+), 1 deletion(-) diff --git a/types/color-picker.d.ts b/types/color-picker.d.ts index 905d97c..0e00682 100644 --- a/types/color-picker.d.ts +++ b/types/color-picker.d.ts @@ -1,3 +1,121 @@ +/* eslint-disable @typescript-eslint/ban-types */ declare module 'colorpicker-v3' { - export default { install: (app: App) => any } + declare const _default: { + install: (app: App) => void + } + export default _default + + declare const ColorPick: import('vue').DefineComponent< + { + hex: { + type: StringConstructor[] + } + modelValue: { + type: StringConstructor + } + rgba: { + type: StringConstructor + } + defaultColor: { + type: StringConstructor + default: string + } + btnStyle: { + type: ObjectConstructor[] + } + opacity: { + type: (StringConstructor | NumberConstructor)[] + default(): number + } + showOpacity: { + type: BooleanConstructor + default(): boolean + } + standardColor: { + type: ArrayConstructor + default(): string[] + } + themeColor: { + type: ArrayConstructor + default(): string[] + } + }, + () => void, + unknown, + {}, + {}, + import('vue').ComponentOptionsMixin, + import('vue').ComponentOptionsMixin, + { + input: (value: string) => void + } & { + change: (value: { hex: string; rgba: string }) => void + } & { + finish: (value: { hex: string; rgba: string }) => void + } & { + 'update:hex': (hex: string) => void + } & { + 'update:rgba': (rgba: string) => void + } & { + close: (value: { hex: string; rgba: string }) => void + } & { + 'update:modelValue': (value: string) => void + }, + string, + import('vue').VNodeProps & + import('vue').AllowedComponentProps & + import('vue').ComponentCustomProps, + Readonly< + import('vue').ExtractPropTypes<{ + hex: { + type: StringConstructor[] + } + modelValue: { + type: StringConstructor + } + rgba: { + type: StringConstructor + } + defaultColor: { + type: StringConstructor + default: string + } + btnStyle: { + type: ObjectConstructor[] + } + opacity: { + type: (StringConstructor | NumberConstructor)[] + default(): number + } + showOpacity: { + type: BooleanConstructor + default(): boolean + } + standardColor: { + type: ArrayConstructor + default(): string[] + } + themeColor: { + type: ArrayConstructor + default(): string[] + } + }> + > & { + onChange?: (value: { hex: string; rgba: string }) => any + onInput?: (value: string) => any + onFinish?: (value: { hex: string; rgba: string }) => any + onClose?: (value: { hex: string; rgba: string }) => any + 'onUpdate:hex'?: (hex: string) => any + 'onUpdate:rgba'?: (rgba: string) => any + 'onUpdate:modelValue'?: (value: string) => any + }, + { + opacity: string | number + defaultColor: string + showOpacity: boolean + standardColor: unknown[] + themeColor: unknown[] + } + > + export { ColorPick } } From de41bbb6be2ac1a406d21a23a754045369e24ddd Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Sun, 14 Aug 2022 00:48:19 +0800 Subject: [PATCH 119/235] =?UTF-8?q?feat:=20colorPick=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/form-item-list/index.tsx | 2 +- types/color-picker.d.ts | 23 +++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx index 54fc5cd..90757ed 100644 --- a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx +++ b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx @@ -66,7 +66,7 @@ const formItemChildRender = ( } //colorPicker if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.colorPicker) { - return + return } return undefined } diff --git a/types/color-picker.d.ts b/types/color-picker.d.ts index 0e00682..3df721d 100644 --- a/types/color-picker.d.ts +++ b/types/color-picker.d.ts @@ -1,11 +1,14 @@ /* eslint-disable @typescript-eslint/ban-types */ + +import '@vue/runtime-core' + declare module 'colorpicker-v3' { declare const _default: { install: (app: App) => void } export default _default - declare const ColorPick: import('vue').DefineComponent< + declare const ColorPicker: import('vue').DefineComponent< { hex: { type: StringConstructor[] @@ -117,5 +120,21 @@ declare module 'colorpicker-v3' { themeColor: unknown[] } > - export { ColorPick } + export { ColorPicker } +} + +declare module '@vue/runtime-core' { + import type { ColorPicker } from 'colorpicker-v3' + export interface GlobalComponents { + ColorPicker: ColorPicker + } + + interface ComponentCustomProperties { + ColorPicker: ColorPicker + } +} + +declare global { + import { ColorPicker as pick } from 'colorpicker-v3' + const ColorPicker = pick } From a244d9e9fdb2cb9f967f6566872ecc14f5ea2a56 Mon Sep 17 00:00:00 2001 From: JamesCurtis <49338067+james-curtis@users.noreply.github.com> Date: Sun, 14 Aug 2022 01:16:52 +0800 Subject: [PATCH 120/235] =?UTF-8?q?fix:=20colorPick=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.ts | 3 +-- src/plugins/color-picker.ts | 4 ++++ .../components/form-item-list/index.tsx | 2 +- types/color-picker.d.ts | 24 ++++--------------- 4 files changed, 10 insertions(+), 23 deletions(-) create mode 100644 src/plugins/color-picker.ts diff --git a/src/main.ts b/src/main.ts index b9955b4..0708174 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,10 @@ -import ColorPicker from 'colorpicker-v3' -import 'colorpicker-v3/style.css' import App from './App.vue' import router from './router' import pinia from '@/plugins/pinia' import '@/assets/style/tailwind.css' import '@vant/touch-emulator' import directive from '@/directive' +import ColorPicker from '@/plugins/color-picker' const app = createApp(App) diff --git a/src/plugins/color-picker.ts b/src/plugins/color-picker.ts new file mode 100644 index 0000000..88641d6 --- /dev/null +++ b/src/plugins/color-picker.ts @@ -0,0 +1,4 @@ +import ColorPicker from 'colorpicker-v3' +import 'colorpicker-v3/style.css' + +export default ColorPicker diff --git a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx index 90757ed..f2c5fe0 100644 --- a/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx +++ b/src/views/home/components/home-right/components/attribute-panel/components/form-render/components/form-item-list/index.tsx @@ -66,7 +66,7 @@ const formItemChildRender = ( } //colorPicker if (formItemSchema.formType === AttributePanelFormItemInputTypeEnum.colorPicker) { - return + return } return undefined } diff --git a/types/color-picker.d.ts b/types/color-picker.d.ts index 3df721d..4ffe684 100644 --- a/types/color-picker.d.ts +++ b/types/color-picker.d.ts @@ -1,14 +1,15 @@ /* eslint-disable @typescript-eslint/ban-types */ - -import '@vue/runtime-core' +export {} declare module 'colorpicker-v3' { declare const _default: { install: (app: App) => void } export default _default +} - declare const ColorPicker: import('vue').DefineComponent< +declare global { + const colorPicker: import('vue').DefineComponent< { hex: { type: StringConstructor[] @@ -120,21 +121,4 @@ declare module 'colorpicker-v3' { themeColor: unknown[] } > - export { ColorPicker } -} - -declare module '@vue/runtime-core' { - import type { ColorPicker } from 'colorpicker-v3' - export interface GlobalComponents { - ColorPicker: ColorPicker - } - - interface ComponentCustomProperties { - ColorPicker: ColorPicker - } -} - -declare global { - import { ColorPicker as pick } from 'colorpicker-v3' - const ColorPicker = pick } From 08f2db0a1d2e449346ff0b3bfa12513011d1d0fb Mon Sep 17 00:00:00 2001 From: zhiyan <1533460130@qq.com> Date: Sun, 14 Aug 2022 01:42:58 +0800 Subject: [PATCH 121/235] =?UTF-8?q?feat:=20=E6=9C=89Bug=E7=9A=84=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E9=A2=84=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../base-ui/kzy-draggable/index.vue | 6 ++++++ src/components/base-ui/kzy-draggable/types.ts | 1 + src/components/page-draggable/index.vue | 1 + src/library/generic/input/textbox/index.vue | 1 - src/library/generic/show/image/index.vue | 1 + src/stores/code.ts | 13 ++++++++++++ src/utils/previewDragged.tsx | 20 +++++++++++++++++++ src/views/home/components/edit-panel.vue | 6 ++++++ .../library-category-tab-panes/config.ts | 17 ++++++++++++---- 9 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/utils/previewDragged.tsx diff --git a/src/components/base-ui/kzy-draggable/index.vue b/src/components/base-ui/kzy-draggable/index.vue index 8cc9b62..8b191f0 100644 --- a/src/components/base-ui/kzy-draggable/index.vue +++ b/src/components/base-ui/kzy-draggable/index.vue @@ -8,6 +8,7 @@ :disabled="props.disabled" :clone="props.handleClone" :move="props.handleMove" + @end="handleEnd" @change="handleChange" >