From 8dccc4f789a17ccee00bc9f9ef5dda482b237c98 Mon Sep 17 00:00:00 2001 From: haixin <1875934025@qq.com> Date: Wed, 13 Mar 2024 20:06:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20element-plus=E5=AE=9E=E7=8E=B0=E6=8C=89?= =?UTF-8?q?=E9=9C=80=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bug.md | 3 +- packages/editor/auto-imports.d.ts | 9 +++ packages/editor/components.d.ts | 43 +++++++++++++ packages/editor/package.json | 9 +-- .../editor/src/components/FormPreview.vue | 6 +- packages/editor/src/components/PropsPanel.vue | 4 +- packages/editor/src/main.ts | 11 ++-- packages/editor/vite.config.ts | 15 ++++- packages/form/auto-imports.d.ts | 9 +++ packages/form/components.d.ts | 63 +++++++++++++++++++ packages/form/package.json | 5 +- packages/form/src/main.ts | 16 ++--- packages/form/vite.config.ts | 18 +++++- playground/components.d.ts | 40 ++++++++++++ playground/package.json | 4 +- playground/vite.config.ts | 3 +- 16 files changed, 225 insertions(+), 33 deletions(-) create mode 100644 packages/editor/auto-imports.d.ts create mode 100644 packages/editor/components.d.ts create mode 100644 packages/form/auto-imports.d.ts create mode 100644 packages/form/components.d.ts diff --git a/bug.md b/bug.md index 3a6da30..b976569 100644 --- a/bug.md +++ b/bug.md @@ -25,4 +25,5 @@ - 布局优化 参考(https://epic.kcz66.com/demo/element-plus/) - 新增签名、评价表单 - 表单新增提示,间距,html -- tab选中 初始化 \ No newline at end of file +- tab选中 初始化 +- 异步加载 loading 过度动画 如jsonEditor \ No newline at end of file diff --git a/packages/editor/auto-imports.d.ts b/packages/editor/auto-imports.d.ts new file mode 100644 index 0000000..1d89ee8 --- /dev/null +++ b/packages/editor/auto-imports.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + +} diff --git a/packages/editor/components.d.ts b/packages/editor/components.d.ts new file mode 100644 index 0000000..8258e3d --- /dev/null +++ b/packages/editor/components.d.ts @@ -0,0 +1,43 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { + ComponentList: typeof import('./src/components/ComponentList.vue')['default'] + ElButton: typeof import('element-plus/es')['ElButton'] + ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDrawer: typeof import('element-plus/es')['ElDrawer'] + ElEmpty: typeof import('element-plus/es')['ElEmpty'] + ElFooter: typeof import('element-plus/es')['ElFooter'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] + ElHeader: typeof import('element-plus/es')['ElHeader'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElMain: typeof import('element-plus/es')['ElMain'] + ElOption: typeof import('element-plus/es')['ElOption'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + ElTooltip: typeof import('element-plus/es')['ElTooltip'] + ElTree: typeof import('element-plus/es')['ElTree'] + ElUpload: typeof import('element-plus/es')['ElUpload'] + FormPreview: typeof import('./src/components/FormPreview.vue')['default'] + GlobalFormList: typeof import('./src/components/globalFormList.vue')['default'] + JsonEditor: typeof import('./src/components/jsonEditor.vue')['default'] + Nav: typeof import('./src/components/Nav.vue')['default'] + NavList: typeof import('./src/components/NavList.vue')['default'] + PropsPanel: typeof import('./src/components/PropsPanel.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + Shape: typeof import('./src/components/Shape.vue')['default'] + Workspace: typeof import('./src/components/Workspace.vue')['default'] + } +} diff --git a/packages/editor/package.json b/packages/editor/package.json index 62d8e54..ff87dff 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,6 +1,6 @@ { "name": "starfish-editor", - "version": "1.1.6", + "version": "1.1.9", "main": "dist/starfish-editor.umd.js", "style": "dist/style.css", "module": "dist/starfish-editor.es.js", @@ -16,8 +16,7 @@ }, "scripts": { "dev": "vite", - "build": "vite build", - "prepublish": "npm version && npm run build" + "build": "vite build" }, "dependencies": { "@babel/core": "^7.18.5", @@ -34,7 +33,7 @@ "keycon": "^1.1.2", "mitt": "^3.0.0", "nanoid": "^4.0.0", - "starfish-form": "^1.2.3", + "starfish-form": "^1.2.6", "vue": "^3.2.37", "vue-codemirror": "^6.1.1", "vuedraggable": "^4.1.0", @@ -45,6 +44,8 @@ "cross-env": "^7.0.3", "live-server": "^1.2.2", "rollup-plugin-visualizer": "^5.8.3", + "unplugin-auto-import": "^0.17.5", + "unplugin-vue-components": "^0.26.0", "sass": "^1.42.1", "typescript": "^4.3.4", "vite": "^2.9.12", diff --git a/packages/editor/src/components/FormPreview.vue b/packages/editor/src/components/FormPreview.vue index 8c2c93d..726ff44 100644 --- a/packages/editor/src/components/FormPreview.vue +++ b/packages/editor/src/components/FormPreview.vue @@ -76,7 +76,7 @@ import formStore from "@/controller/form"; import { Dynamicform } from "starfish-form"; import uiControl from "@/controller/ui"; import Clipboard from "clipboard"; -import { json } from "@codemirror/lang-json"; +// import { json } from "@codemirror/lang-json"; // import Codemirror from 'vue-codemirror' export default defineComponent({ components: { @@ -90,7 +90,7 @@ export default defineComponent({ const formResult = computed(() => formStore.get("formResult")); const globalDatas = computed(() => formStore?.get("globalDatas")); const pageType = computed(() => uiControl?.get("pageType")); - const extensions = [json()]; + // const extensions = [json()]; const codeDialog = ref(); const code = ref(); let clipboard: Clipboard; @@ -111,7 +111,7 @@ export default defineComponent({ }); const JsonViewerDialog = ref(); return { - extensions, + // extensions, code, pageType, codeDialog, diff --git a/packages/editor/src/components/PropsPanel.vue b/packages/editor/src/components/PropsPanel.vue index 61bb780..2067ede 100644 --- a/packages/editor/src/components/PropsPanel.vue +++ b/packages/editor/src/components/PropsPanel.vue @@ -8,7 +8,7 @@ v-model="activeName" class="demo-tabs" @tab-click="handleClick" - style="height: 100%" + style="height: 100%" > @@ -305,7 +305,7 @@ export default defineComponent({ () => [newAllmainlist.value, newCurControl.value?.data], ([, b], [, d]) => { if (activeName.value == "json" && jsonCenter.value) { - jsonCenter.value.initJsonCenter(); + jsonCenter.value.initJsonCenter(); } if (historyFlag.value) { hisContrl?.set("historyFlag", false); diff --git a/packages/editor/src/main.ts b/packages/editor/src/main.ts index ad9900d..fa2b941 100644 --- a/packages/editor/src/main.ts +++ b/packages/editor/src/main.ts @@ -18,11 +18,12 @@ export default { window.VueContext = { $Flex: flex, }; - app - .use(ElementPlus, { - locale: zhCn, - }) - .use(StarfishForm); + // 合并使用的 + app.use(StarfishForm); + const starfishformlist = app.config.globalProperties.$formcomponents; + for (const key in starfishformlist) { + app.component(key, starfishformlist[key]); + } app.component( "CustomDialog", defineAsyncComponent(() => import("@/common/CustomDialog.vue")) diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts index 6cfcf6c..85e006c 100644 --- a/packages/editor/vite.config.ts +++ b/packages/editor/vite.config.ts @@ -3,7 +3,10 @@ import dts from 'vite-plugin-dts'; import vue from "@vitejs/plugin-vue"; import path from "path"; import pkg from './package.json'; -import Visualizer from 'rollup-plugin-visualizer' +import visualizer from 'rollup-plugin-visualizer' +import AutoImport from "unplugin-auto-import/vite"; +import Components from "unplugin-vue-components/vite"; +import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; const alias: any = [ { find: "@", @@ -19,7 +22,6 @@ if (process.env.NODE_ENV != "production") { } export default defineConfig({ plugins: [ - Visualizer(), dts({ outputDir: path.join(path.resolve(__dirname, 'dist'), "types"), include: ['src/**/*'], @@ -28,6 +30,15 @@ export default defineConfig({ logDiagnostics: true }), vue(), + visualizer({ + open: true, //在默认用户代理中打开生成的文件 + }), + AutoImport({ + resolvers: [ElementPlusResolver()], + }), + Components({ + resolvers: [ElementPlusResolver()], + }), ], resolve: { alias, diff --git a/packages/form/auto-imports.d.ts b/packages/form/auto-imports.d.ts new file mode 100644 index 0000000..1d89ee8 --- /dev/null +++ b/packages/form/auto-imports.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + +} diff --git a/packages/form/components.d.ts b/packages/form/components.d.ts new file mode 100644 index 0000000..5a461c0 --- /dev/null +++ b/packages/form/components.d.ts @@ -0,0 +1,63 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { + CheckBox: typeof import('./src/components/CheckBox/index.vue')['default'] + ColorSelect: typeof import('./src/components/ColorSelect/index.vue')['default'] + Date: typeof import('./src/components/Date/index.vue')['default'] + DateTime: typeof import('./src/components/DateTime/index.vue')['default'] + ElAlert: typeof import('element-plus/es')['ElAlert'] + ElAside: typeof import('element-plus/es')['ElAside'] + ElButton: typeof import('element-plus/es')['ElButton'] + ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] + ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] + ElCol: typeof import('element-plus/es')['ElCol'] + ElCollapse: typeof import('element-plus/es')['ElCollapse'] + ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] + ElColorPicker: typeof import('element-plus/es')['ElColorPicker'] + ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElDivider: typeof import('element-plus/es')['ElDivider'] + ElDropdown: typeof import('element-plus/es')['ElDropdown'] + ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] + ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] + ElFooter: typeof import('element-plus/es')['ElFooter'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] + ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] + ElMain: typeof import('element-plus/es')['ElMain'] + ElOption: typeof import('element-plus/es')['ElOption'] + ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSlider: typeof import('element-plus/es')['ElSlider'] + ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect'] + ElTooltip: typeof import('element-plus/es')['ElTooltip'] + InputNumber: typeof import('./src/components/InputNumber/index.vue')['default'] + JsonEditor: typeof import('./src/components/JsonEditor/index.vue')['default'] + Radio: typeof import('./src/components/Radio/index.vue')['default'] + RichText: typeof import('./src/components/RichText/index.vue')['default'] + Rule: typeof import('./src/components/Rule/index.vue')['default'] + Selected: typeof import('./src/components/Selected/index.vue')['default'] + Selecteds: typeof import('./src/components/Selecteds/index.vue')['default'] + ShowRule: typeof import('./src/components/ShowRule/index.vue')['default'] + Slider: typeof import('./src/components/Slider/index.vue')['default'] + Switch: typeof import('./src/components/Switch/index.vue')['default'] + Text: typeof import('./src/components/Text/index.vue')['default'] + TextArea: typeof import('./src/components/TextArea/index.vue')['default'] + Time: typeof import('./src/components/Time/index.vue')['default'] + } +} diff --git a/packages/form/package.json b/packages/form/package.json index a67ccca..1be96ec 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,6 +1,6 @@ { "name": "starfish-form", - "version": "1.2.5", + "version": "1.2.6", "main": "dist/starfish-form.mjs", "style": "dist/style.css", "module": "dist/starfish-form.mjs", @@ -32,6 +32,9 @@ "@vitejs/plugin-vue": "^2.3.3", "sass": "^1.35.1", "typescript": "^4.5.4", + "rollup-plugin-visualizer": "^5.8.3", + "unplugin-auto-import": "^0.17.5", + "unplugin-vue-components": "^0.26.0", "vite": "^4.5.2", "vite-plugin-dts": "^1.2.0", "vue-tsc": "^0.34.7" diff --git a/packages/form/src/main.ts b/packages/form/src/main.ts index 2e55d9d..8658c2b 100644 --- a/packages/form/src/main.ts +++ b/packages/form/src/main.ts @@ -73,12 +73,13 @@ import _ from "@/utils/_"; // formcomponents[Action.ControlType] = Action; const utilFuns: any = {}; -const files = import.meta.glob(["./common/*", "./components/*/*", "./layout/*", "!./components/RichText/index.vue", "!./components/JsonEditor/index.vue", "!./components/Rule/index.vue", "!./common/formAction.vue"], { eager: true }); +const files: any = import.meta.glob(["./common/*", "./components/*/*", "./layout/*", "!./components/RichText/index.vue", "!./components/JsonEditor/index.vue", "!./components/Rule/index.vue", "!./common/formAction.vue"], { eager: true }); Object.keys(files).forEach((fileName) => { const result = files[fileName].default; - utilFuns[result.ControlType] = result; + if (fileName.indexOf(".vue") != -1) { + utilFuns[result.ControlType] = result; + } }); - // 把size过大组件异步加载 // 富文本 @@ -108,12 +109,11 @@ Rule.rule = _.getJsonValidate(); utilFuns[Rule.ControlType] = Rule; const install = (app: App) => { app.config.globalProperties.$formcomponents = utilFuns; - for (const key in utilFuns) { - app.component(key, utilFuns[key]); - } + // for (const key in utilFuns) { + // app.component(key, utilFuns[key]); + // } }; - -export { default as Dynamicform } from "./starfish-form.vue"; +export const Dynamicform = defineAsyncComponent(() => import("./starfish-form.vue")); export default { install, diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts index 4e7911b..c78c972 100644 --- a/packages/form/vite.config.ts +++ b/packages/form/vite.config.ts @@ -2,8 +2,11 @@ import { defineConfig } from "vite"; import dts from "vite-plugin-dts"; import vue from "@vitejs/plugin-vue"; import path from "path"; -import pkg from './package.json'; - +import pkg from "./package.json"; +import visualizer from "rollup-plugin-visualizer"; +import AutoImport from "unplugin-auto-import/vite"; +import Components from "unplugin-vue-components/vite"; +import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ @@ -15,6 +18,15 @@ export default defineConfig({ logDiagnostics: true, }), vue(), + visualizer({ + open: true, //在默认用户代理中打开生成的文件 + }), + AutoImport({ + resolvers: [ElementPlusResolver()], + }), + Components({ + resolvers: [ElementPlusResolver()], + }), ], resolve: { alias: [ @@ -34,7 +46,7 @@ export default defineConfig({ entry: "src/main.ts", name: "StarfishForm", fileName: "starfish-form", - formats: ['es'], + formats: ["es"], }, rollupOptions: { diff --git a/playground/components.d.ts b/playground/components.d.ts index 0d60187..0b85d6d 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -7,8 +7,48 @@ export {} declare module 'vue' { export interface GlobalComponents { + ElAlert: typeof import('element-plus/es')['ElAlert'] + ElAside: typeof import('element-plus/es')['ElAside'] ElButton: typeof import('element-plus/es')['ElButton'] + ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] + ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] + ElCol: typeof import('element-plus/es')['ElCol'] + ElCollapse: typeof import('element-plus/es')['ElCollapse'] + ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] + ElColorPicker: typeof import('element-plus/es')['ElColorPicker'] + ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElDivider: typeof import('element-plus/es')['ElDivider'] + ElDrawer: typeof import('element-plus/es')['ElDrawer'] + ElDropdown: typeof import('element-plus/es')['ElDropdown'] + ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] + ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] + ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElFooter: typeof import('element-plus/es')['ElFooter'] + ElForm: typeof import('element-plus/es')['ElForm'] + ElFormItem: typeof import('element-plus/es')['ElFormItem'] + ElHeader: typeof import('element-plus/es')['ElHeader'] + ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] + ElMain: typeof import('element-plus/es')['ElMain'] + ElOption: typeof import('element-plus/es')['ElOption'] + ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSlider: typeof import('element-plus/es')['ElSlider'] + ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect'] + ElTooltip: typeof import('element-plus/es')['ElTooltip'] + ElTree: typeof import('element-plus/es')['ElTree'] + ElUpload: typeof import('element-plus/es')['ElUpload'] Form: typeof import('./src/components/Form.vue')['default'] Home: typeof import('./src/components/Home.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/playground/package.json b/playground/package.json index 5e794f7..cff48d9 100644 --- a/playground/package.json +++ b/playground/package.json @@ -11,8 +11,8 @@ "dependencies": { "@element-plus/icons-vue": "^2.0.8", "element-plus": "^2.2.12", - "starfish-editor": "^1.1.6", - "starfish-form": "^1.2.5", + "starfish-editor": "^1.1.9", + "starfish-form": "^1.2.6", "vite": "^4.5.2", "vue": "^3.2.37", "vue-router": "^4.1.3" diff --git a/playground/vite.config.ts b/playground/vite.config.ts index 1d0558c..06ff412 100644 --- a/playground/vite.config.ts +++ b/playground/vite.config.ts @@ -19,6 +19,7 @@ const alias: any = [ replacement: path.resolve(__dirname, "../packages/editor/src/components"), }, ]; +console.log(process.env.NODE_ENV) if (process.env.NODE_ENV != "production") { alias.push({ find: /^starfish-form\/dist\/style.css/, @@ -97,8 +98,6 @@ export default defineConfig({ main: path.resolve(__dirname, "index.html"), }, output: { - manualChunks: { - }, chunkFileNames: "static/js/[name]-[hash].js", entryFileNames: "static/js/[name]-[hash].js", assetFileNames: "static/[ext]/[name]-[hash].[ext]",