From e2e92957793bb6f8b5ed4fef4b5e93591e732676 Mon Sep 17 00:00:00 2001 From: chilingling <26962197+chilingling@users.noreply.github.com> Date: Wed, 10 Jul 2024 01:13:54 -0700 Subject: [PATCH 01/16] fix: dev without alias error (#647) * fix: dev without alias error * fix: usesource alias default to true --- designer-demo/package.json | 1 + .../build/vite-config/src/default-config.js | 4 +-- .../src/vite-plugins/devAliasPlugin.js | 28 +++++++++++-------- packages/design-core/package.json | 1 + 4 files changed, 20 insertions(+), 14 deletions(-) diff --git a/designer-demo/package.json b/designer-demo/package.json index a637cd2a3..bfdb85414 100644 --- a/designer-demo/package.json +++ b/designer-demo/package.json @@ -15,6 +15,7 @@ "@opentiny/tiny-engine-theme-light": "workspace:*", "@opentiny/vue": "~3.14.0", "@opentiny/vue-icon": "~3.14.0", + "@opentiny/vue-locale": "~3.14.0", "@opentiny/vue-design-smb": "~3.14.0", "@opentiny/vue-renderless": "~3.14.0", "@opentiny/vue-theme": "~3.14.0" diff --git a/packages/build/vite-config/src/default-config.js b/packages/build/vite-config/src/default-config.js index fbdbee1ea..cbf430b8e 100644 --- a/packages/build/vite-config/src/default-config.js +++ b/packages/build/vite-config/src/default-config.js @@ -239,9 +239,7 @@ export function useTinyEngineBaseConfig(engineConfig) { : [] ) - if (engineConfig.useSourceAlias) { - config.plugins.push(devAliasPlugin(env)) - } + config.plugins.push(devAliasPlugin(env, engineConfig.useSourceAlias)) return config } diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index 1b5dbf64c..02efc76d1 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -60,13 +60,25 @@ const devAlias = { '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js') } +const getThemePath = (theme, useSourceAlias) => { + if (!['light', 'dark'].includes(theme)) { + return '' + } + + if (useSourceAlias) { + return path.resolve(process.cwd(), `../packages/theme/${theme}/index.less`) + } + + return path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine-theme-${theme}/dist/style.css`) +} + /** * 源码调试插件 * 开启后，会指定 alias 到官方源码 package * @param {*} env * @returns */ -export const devAliasPlugin = (env) => { +export const devAliasPlugin = (env, useSourceAlias) => { return { name: 'vite-plugin-dev-alias', config(config, { command }) { @@ -75,10 +87,8 @@ export const devAliasPlugin = (env) => { return { resolve: { alias: { - ...devAlias, - '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(env.VITE_THEME) - ? path.resolve(process.cwd(), `../packages/theme/${env.VITE_THEME}/index.less`) - : '' + ...(useSourceAlias ? devAlias : {}), + '@opentiny/tiny-engine-theme': getThemePath(env.VITE_THEME, useSourceAlias) } } } @@ -88,12 +98,8 @@ export const devAliasPlugin = (env) => { return { resolve: { alias: { - '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(env.VITE_THEME) - ? path.resolve( - process.cwd(), - `./node_modules/@opentiny/tiny-engine-theme-${env.VITE_THEME}/dist/style.css` - ) - : '' + // 构建不使用 alias + '@opentiny/tiny-engine-theme': getThemePath(env.VITE_THEME, false) } } } diff --git a/packages/design-core/package.json b/packages/design-core/package.json index b5ded7ffc..5b8b3693f 100644 --- a/packages/design-core/package.json +++ b/packages/design-core/package.json @@ -122,6 +122,7 @@ "@opentiny/vue": "^3.14.0", "@opentiny/vue-icon": "^3.14.0", "@opentiny/vue-design-smb": "^3.14.0", + "@opentiny/vue-locale": "^3.14.0", "@opentiny/vue-renderless": "^3.14.0", "@opentiny/vue-theme": "^3.14.0", "vue": "^3.4.23" From 8c5fc76e4c9da28084bec0e81ca42ce0aff4b393 Mon Sep 17 00:00:00 2001 From: chilingling <26962197+chilingling@users.noreply.github.com> Date: Wed, 10 Jul 2024 20:13:59 -0700 Subject: [PATCH 02/16] feat: add build check (#646) --- .github/workflows/push-check.yml | 2 +- packages/toolbars/breadcrumb/package.json | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/push-check.yml b/.github/workflows/push-check.yml index 2fc96cc8c..509d951e4 100644 --- a/.github/workflows/push-check.yml +++ b/.github/workflows/push-check.yml @@ -4,7 +4,7 @@ on: push: branches: [] pull_request: - branches: [develop,main] + branches: [develop,main, refactor/develop] jobs: push-check: diff --git a/packages/toolbars/breadcrumb/package.json b/packages/toolbars/breadcrumb/package.json index 8e96938f8..59d537902 100644 --- a/packages/toolbars/breadcrumb/package.json +++ b/packages/toolbars/breadcrumb/package.json @@ -25,7 +25,9 @@ "homepage": "https://opentiny.design/tiny-engine", "dependencies": { "@opentiny/tiny-engine-common": "workspace:*", - "@opentiny/tiny-engine-meta-register": "workspace:*" + "@opentiny/tiny-engine-http": "workspace:*", + "@opentiny/tiny-engine-meta-register": "workspace:*", + "@opentiny/tiny-engine-utils": "workspace:*" }, "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", From b8da6052e19669759b033e238a10ae86f757c1ba Mon Sep 17 00:00:00 2001 From: lichunn <46984087+lichunn@users.noreply.github.com> Date: Wed, 10 Jul 2024 20:30:33 -0700 Subject: [PATCH 03/16] fix: data-source dependency configurator package (#622) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: data-source dependency configurator package * fix：resolve review * feat: troubleshooting plugin dependencies * feat：将CanvasDragItem移到common --- packages/canvas/drag-drop/index.js | 1 - packages/canvas/index.js | 1 - .../src => common/component}/CanvasDragItem.vue | 1 + .../component/I18nInput.vue} | 1 + .../component/MetaCodeEditor.vue} | 2 +- packages/common/component/index.js | 3 +++ packages/configurator/src/index.js | 12 ++++++------ .../RelatedEditorConfigurator.vue | 8 ++++---- packages/plugins/block/package.json | 2 -- .../plugins/block/src/BlockPropertyForm.vue | 17 ++++++++--------- packages/plugins/bridge/package.json | 1 - packages/plugins/data/package.json | 1 - packages/plugins/datasource/package.json | 2 -- .../datasource/src/DataSourceFieldForm.vue | 7 +++---- packages/plugins/materials/package.json | 1 - .../materials/src/meta/component/src/Main.vue | 3 +-- packages/plugins/page/package.json | 1 - packages/plugins/page/src/PageInputOutput.vue | 12 ++++++------ packages/plugins/robot/package.json | 1 - packages/plugins/schema/package.json | 1 - packages/plugins/script/package.json | 1 - packages/plugins/tree/package.json | 1 - 22 files changed, 34 insertions(+), 46 deletions(-) delete mode 100644 packages/canvas/drag-drop/index.js rename packages/{canvas/drag-drop/src => common/component}/CanvasDragItem.vue (99%) rename packages/{configurator/src/i18n-configurator/I18nConfigurator.vue => common/component/I18nInput.vue} (99%) rename packages/{configurator/src/code-configurator/CodeConfigurator.vue => common/component/MetaCodeEditor.vue} (99%) diff --git a/packages/canvas/drag-drop/index.js b/packages/canvas/drag-drop/index.js deleted file mode 100644 index 937581830..000000000 --- a/packages/canvas/drag-drop/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as CanvasDragItem } from './src/CanvasDragItem.vue' diff --git a/packages/canvas/index.js b/packages/canvas/index.js index 0ec3200f5..1abd379d2 100644 --- a/packages/canvas/index.js +++ b/packages/canvas/index.js @@ -11,7 +11,6 @@ */ import { CanvasBreadcrumb } from './breadcrumb' export { createRender } from './render' -export { CanvasDragItem } from './drag-drop' // meta app import CanvasContainer from './container' diff --git a/packages/canvas/drag-drop/src/CanvasDragItem.vue b/packages/common/component/CanvasDragItem.vue similarity index 99% rename from packages/canvas/drag-drop/src/CanvasDragItem.vue rename to packages/common/component/CanvasDragItem.vue index 1d05a5075..2a5f47e49 100644 --- a/packages/canvas/drag-drop/src/CanvasDragItem.vue +++ b/packages/common/component/CanvasDragItem.vue @@ -17,6 +17,7 @@ export default { emits: ['click'], setup(props, { emit }) { const canvasApi = getMetaApi('engine.canvas').canvasApi + const dragstart = (e) => { if (props.data && canvasApi.value?.dragStart) { const data = deepClone(props.data) diff --git a/packages/configurator/src/i18n-configurator/I18nConfigurator.vue b/packages/common/component/I18nInput.vue similarity index 99% rename from packages/configurator/src/i18n-configurator/I18nConfigurator.vue rename to packages/common/component/I18nInput.vue index 477a015aa..b65a33075 100644 --- a/packages/configurator/src/i18n-configurator/I18nConfigurator.vue +++ b/packages/common/component/I18nInput.vue @@ -41,6 +41,7 @@ import { IconClose, IconLanguage } from '@opentiny/vue-icon' import { computed, ref, watchEffect } from 'vue' export default { + name: 'I18nInput', components: { TinyInput: Input, BindI18n, diff --git a/packages/configurator/src/code-configurator/CodeConfigurator.vue b/packages/common/component/MetaCodeEditor.vue similarity index 99% rename from packages/configurator/src/code-configurator/CodeConfigurator.vue rename to packages/common/component/MetaCodeEditor.vue index 2e757e5d6..8a5530866 100644 --- a/packages/configurator/src/code-configurator/CodeConfigurator.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -66,7 +66,7 @@ + diff --git a/designer-demo/src/canvas.js b/packages/canvas/init-canvas/canvas.js similarity index 89% rename from designer-demo/src/canvas.js rename to packages/canvas/init-canvas/canvas.js index fc3fb5f5c..cbfae1846 100644 --- a/designer-demo/src/canvas.js +++ b/packages/canvas/init-canvas/canvas.js @@ -9,7 +9,6 @@ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. * */ - -import { createRender } from '@opentiny/tiny-engine/canvas' +import { createRender } from '../render' createRender(window.parent.TinyGlobalConfig) diff --git a/packages/canvas/init-canvas/init-canvas.js b/packages/canvas/init-canvas/init-canvas.js new file mode 100644 index 000000000..cdac3432d --- /dev/null +++ b/packages/canvas/init-canvas/init-canvas.js @@ -0,0 +1,14 @@ +import canvasScript from './canvas?url&build=canvas' +import canvasHtml from './canvas.html?raw' + +export function initCanvas(importMap = {}, importStyleUrls = []) { + return { + html: canvasHtml + .replace('', ``) + .replace( + '', + importStyleUrls.map((styleUrl) => ``).join('\n') + ) + .replace('', ``) + } +} diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js index dcee72a78..b02335f67 100644 --- a/packages/canvas/render/src/RenderMain.js +++ b/packages/canvas/render/src/RenderMain.js @@ -12,6 +12,8 @@ import { h, provide, inject, nextTick, shallowReactive, reactive, ref, watch, watchEffect } from 'vue' import { I18nInjectionKey } from 'vue-i18n' +import TinyVue from '@opentiny/vue' +import * as TinyVueIcon from '@opentiny/vue-icon' import { useBroadcastChannel } from '@vueuse/core' import { constants, utils as commonUtils } from '@opentiny/tiny-engine-utils' import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render' @@ -63,13 +65,13 @@ const setUtils = (data, clear, isForceRefresh) => { const utilsCollection = {} // 目前画布还不具备远程加载utils工具类的功能，目前只能加载TinyVue组件库中的组件工具 data?.forEach((item) => { - const util = window.TinyVue[item.content.exportName] + const util = TinyVue[item.content.exportName] if (util) { utilsCollection[item.name] = util } // 此处需要把工具类中的icon图标也加入utils上下文环境 - const utilIcon = window.TinyVueIcon[item.content.exportName] + const utilIcon = TinyVueIcon[item.content.exportName] if (utilIcon) { utilsCollection[item.name] = utilIcon } diff --git a/packages/canvas/render/src/runner.js b/packages/canvas/render/src/runner.js index 720405a29..136352723 100644 --- a/packages/canvas/render/src/runner.js +++ b/packages/canvas/render/src/runner.js @@ -10,17 +10,12 @@ * */ -import * as Vue from 'vue' -import * as VueI18n from 'vue-i18n' +import { createApp } from 'vue' import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common' import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n' -import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core' -import TinyVue from '@opentiny/vue' -import * as TinyVueIcon from '@opentiny/vue-icon' import Main, { api } from './RenderMain' -import { getComponent, blockSlotDataMap } from './render' import lowcode from './lowcode' -import { camelize, capitalize } from '@vue/shared' +import { supportUmdBlock } from './supportUmdBlock' const dispatch = (name, data) => { window.parent.document.dispatchEvent(new CustomEvent(name, data)) @@ -31,68 +26,10 @@ const initRenderContext = () => { TinyI18nHost.lowcode = lowcode - // 目前先兼容老区块发布的代码，后期区块发布整改后再删除 - window.React = {} - window.React.createElement = Vue.h - - // 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑 - window.Vue = { - ...Vue, - resolveComponent(...args) { - // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块 - const component = Vue.resolveComponent(args[0]) - if (component && typeof component === 'string') { - return getComponent(capitalize(camelize(args[0]))) - } else { - return component - } - }, - // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData } - renderSlot(...args) { - // 获取当前vue的实例 - const instance = Vue.getCurrentInstance() - - // 获取当前区块名称 - const blockName = instance.attrs.dataTag - - const [, slotName, slotData] = args - - // 如果是作用域插槽，则获取作用域插槽传递过来的参数 - if (slotData) { - if (blockSlotDataMap[blockName]) { - blockSlotDataMap[blockName][slotName] = slotData - } else { - blockSlotDataMap[blockName] = { [slotName]: slotData } - } - } - - /** - * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值 - * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback()); - **/ - if (slotName === 'default') { - args[2] = args[2] || {} - args[2].name = slotName - } - - return Vue.renderSlot(...args) - } - } - - window.VueI18n = VueI18n - window.TinyVue = TinyVue - window.TinyVueIcon = TinyVueIcon - window.TinyWebcomponentCore = TinyWebcomponentCore - window.TinyI18nHost = TinyI18nHost window.TinyLowcodeComponent = {} window.TinyComponentLibs = {} - Object.entries(TinyVue).forEach(([_key, component]) => { - const { name } = component - if (name) { - window.TinyLowcodeComponent[name] = component - } - }) + supportUmdBlock() document.addEventListener('updateDependencies', updateDependencies) } @@ -121,7 +58,7 @@ const create = () => { dispatch('canvasReady', { detail: renderer }) - App = Vue.createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost) + App = createApp(Main).use(TinyI18nHost).provide(I18nInjectionKey, TinyI18nHost) App.config.globalProperties.lowcodeConfig = window.parent.TinyGlobalConfig App.mount(document.querySelector('#app')) diff --git a/packages/canvas/render/src/supportUmdBlock.js b/packages/canvas/render/src/supportUmdBlock.js new file mode 100644 index 000000000..b07d50658 --- /dev/null +++ b/packages/canvas/render/src/supportUmdBlock.js @@ -0,0 +1,61 @@ +import * as Vue from 'vue' +import * as VueI18n from 'vue-i18n' +import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core' +import * as TinyVueIcon from '@opentiny/vue-icon' +import TinyVue from '@opentiny/vue' +import TinyI18nHost from '@opentiny/tiny-engine-common/js/i18n' +import { camelize, capitalize } from '@vue/shared' +import { blockSlotDataMap, getComponent } from './render' + +// 和 @opentiny/tiny-engine-block-build 打包umd方式相适配 +export function supportUmdBlock() { + // 不能采用new Proxy代理Vue的方案，在编译后的vue会报错警告，采用一下方案扩展用于注入一些区块加载逻辑 + window.Vue = { + ...Vue, + resolveComponent(...args) { + // 此处先执行vue内部的解析组件的方法，如果可以拿到组件对象则直接返回，反之则去注册区块 + const component = Vue.resolveComponent(args[0]) + if (component && typeof component === 'string') { + return getComponent(capitalize(camelize(args[0]))) + } else { + return component + } + }, + // renderSlot方法第三个参数是作用域插槽传递的数据，格式{ data: vue.unref(state).componentData } + renderSlot(...args) { + // 获取当前vue的实例 + const instance = Vue.getCurrentInstance() + + // 获取当前区块名称 + const blockName = instance.attrs.dataTag + + const [, slotName, slotData] = args + + // 如果是作用域插槽，则获取作用域插槽传递过来的参数 + if (slotData) { + if (blockSlotDataMap[blockName]) { + blockSlotDataMap[blockName][slotName] = slotData + } else { + blockSlotDataMap[blockName] = { [slotName]: slotData } + } + } + + /** + * vue源码中的renderSlot会忽略default插槽的名称，所以这里必须手动添加args第三个参数的name值 + * vue源码如右所示：if (name !== 'default') props.name = name; return createVNode('slot', props, fallback && fallback()); + **/ + if (slotName === 'default') { + args[2] = args[2] || {} + args[2].name = slotName + } + + return Vue.renderSlot(...args) + } + } + + window.VueI18n = VueI18n + window.TinyVue = TinyVue + window.TinyVueIcon = TinyVueIcon + window.TinyWebcomponentCore = TinyWebcomponentCore + window.TinyI18nHost = TinyI18nHost +} diff --git a/packages/canvas/scripts/canvas-vite.config.js b/packages/canvas/scripts/canvas-vite.config.js new file mode 100644 index 000000000..d5e3588a0 --- /dev/null +++ b/packages/canvas/scripts/canvas-vite.config.js @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2023 - present TinyEngine Authors. + * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import nodePolyfill from 'rollup-plugin-polyfill-node' +// https://vitejs.dev/config/ +export default defineConfig({ + base: './', + plugins: [ + vue(), + vueJsx(), + { + name: 'vite-plugin-style-inline-loader', + apply: 'build', + enforce: 'post', + generateBundle(_, bundle) { + const jsFiles = Object.keys(bundle).filter((fileName) => fileName.endsWith('.js')) + jsFiles.forEach((jsFileName) => { + const importedCssFile = [...bundle[jsFileName].viteMetadata.importedCss] + const importCSSContent = importedCssFile.map((cssFileName) => bundle[cssFileName].source).join() + let IIFEcss = '' + if (importCSSContent) { + IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify( + importCSSContent + )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()` + } + bundle[jsFileName].code += IIFEcss + importedCssFile.forEach((cssFileName) => { + delete bundle[cssFileName] + }) + }) + } + } + ], + publicDir: false, + build: { + cssCodeSplit: true, + rollupOptions: { + plugins: [nodePolyfill({ include: null })], + external: [ + 'vue', + 'vue-i18n', + // 以下内容由于区块和物料公用需要external + '@opentiny/vue', + '@opentiny/vue-icon' + ] + }, + minify: true + } +}) diff --git a/packages/canvas/scripts/vite-plugin-separate-build.js b/packages/canvas/scripts/vite-plugin-separate-build.js new file mode 100644 index 000000000..ecb7a37d9 --- /dev/null +++ b/packages/canvas/scripts/vite-plugin-separate-build.js @@ -0,0 +1,120 @@ +import { build } from 'vite' + +const buildRE = /(?:\?|&)build=(?.*?)(?:&|$)/ +const queryRE = /[?#].*$/ + +const bundleCache = new WeakMap() + +function cleanUrl(url) { + return url.replace(queryRE, '') +} +function saveEmitBundleAssets(config, asset) { + const bundleMap = bundleCache.get(config) + bundleMap.assets.set(asset.fileName, asset) +} + +async function bundleBuildEntry(config, options) { + const viteConfigFile = options.customBuildConfig[options.buildConfig] + const { + output: [outputChunk, ...outputChunks] + } = await build({ + configFile: viteConfigFile, + build: { + rollupOptions: { + input: options.entries + } + } + }) + + // handle sourceMap + const { map: sourcemap, fileName: chunkFileName } = outputChunk + if (sourcemap) { + if (config.build.sourcemap === 'hidden' || config.build.sourcemap === true) { + saveEmitBundleAssets(config, { + fileName: chunkFileName + '.map', + source: sourcemap.toString() + }) + } + } + + // handle assets + outputChunks.forEach((assets) => { + if (assets.type === 'assets') { + saveEmitBundleAssets(config, assets) + } else if (assets.type === 'chunk') { + saveEmitBundleAssets(config, { + fileName: assets.fileName, + source: assets.code + }) + } + }) + return outputChunk +} + +function isSameContent(a, b) { + if (typeof a === 'string') { + if (typeof b === 'string') { + return a === b + } + return Buffer.from(a).equals(b) + } + return Buffer.from(b).equals(a) +} + +export async function vitePluginBuildEntry(customBuildConfig) { + let config + return { + name: 'vite-plugin-build-entry', + apply: 'build', + enforce: 'pre', + configResolved(resolveConfig) { + config = resolveConfig + }, + buildStart() { + bundleCache.set(config, { + assets: new Map(), + bundle: new Map(), + fileNameHash: new Map() + }) + }, + async load(id) { + const match = buildRE.exec(id) + if (!match) { + return + } + const file = cleanUrl(id) + const { code } = await bundleBuildEntry(config, { + customBuildConfig, + buildConfig: match.groups.name, + entries: [file] + }) + const formatBase64 = (code) => { + return 'data:text/javascript;base64,' + Buffer.from(code).toString('base64') + } + return `export default ${JSON.stringify(formatBase64(code))}\n` + }, + generateBundle(opts, bundle) { + if (opts.__vite_skip_assets_emit__) { + return + } + const bundleMap = bundleCache.get(config) + bundleMap.assets.forEach((asset) => { + const duplicateAsset = bundle[asset.fileName] + if (duplicateAsset) { + const content = duplicateAsset.type === 'asset' ? duplicateAsset.source : duplicateAsset.code + if (isSameContent(content, asset.source)) { + return + } + } + this.emitFile({ + type: 'asset', + fileName: asset.fileName, + source: asset.source + }) + bundleMap.assets.clear() + }) + } + } +} + +export default vitePluginBuildEntry diff --git a/packages/canvas/vite.config.js b/packages/canvas/vite.config.js index 5ab5e7e14..a5e4deeb3 100644 --- a/packages/canvas/vite.config.js +++ b/packages/canvas/vite.config.js @@ -14,57 +14,44 @@ import { defineConfig } from 'vite' import path from 'path' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' -import { terser } from 'rollup-plugin-terser' import generateComments from '@opentiny/tiny-engine-vite-plugin-meta-comments' +import { vitePluginBuildEntry } from './scripts/vite-plugin-separate-build' // https://vitejs.dev/config/ export default defineConfig({ - resolve: { - alias: { - '@': path.resolve(__dirname, 'src') - } - }, + base: './', + plugins: [ - vue({ - template: { - compilerOptions: { - isCustomElement: (tag) => tag.startsWith('tiny-i18n-host') - } - } - }), + vue(), vueJsx(), - { ...terser({ module: true }), enforce: 'post' }, - { - apply: 'build', - enforce: 'post', - generateBundle(_, bundle) { - const cssFileName = 'style.css' - const jsFileName = 'index.js' - const { [cssFileName]: cssBundle } = bundle - let IIFEcss = '' - - if (cssBundle) { - IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.innerText = ${JSON.stringify( - cssBundle.source - )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()` - delete bundle[cssFileName] - } - - bundle[jsFileName].code += IIFEcss - } - }, - generateComments() + generateComments(), + vitePluginBuildEntry({ + canvas: path.resolve(__dirname, './scripts/canvas-vite.config.js') + }) ], publicDir: false, build: { - cssCodeSplit: false, + cssCodeSplit: true, lib: { - entry: path.resolve(__dirname, './index.js'), + entry: { + index: path.resolve(__dirname, './index.js') + }, name: 'canvas', fileName: () => 'index.js', formats: ['es'] }, rollupOptions: { + output: { + entryFileNames: '[name].js', + chunkFileNames: '[name].js', + assetFileNames: '[name].[ext]', + banner: (chunk) => { + if (['index'].includes(chunk.name)) { + return `import "./${chunk.name}.css"` + } + return '' + } + }, external: ['vue', '@vueuse/core', 'vue-i18n', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/] }, minify: true diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js index b378d6950..3d6c3a7d9 100644 --- a/packages/design-core/vite.config.js +++ b/packages/design-core/vite.config.js @@ -46,8 +46,7 @@ export default defineConfig({ sourcemap: true, lib: { entry: { - index: path.resolve(__dirname, 'index.js'), - canvas: path.resolve(__dirname, './src/canvas/canvas.js') + index: path.resolve(__dirname, 'index.js') }, name: 'tiny-engine', fileName: (_, entryName) => `${entryName}.js`, diff --git a/packages/engine-cli/template/designer/env/.env.alpha b/packages/engine-cli/template/designer/env/.env.alpha index 1816a0471..6cd7ceea6 100644 --- a/packages/engine-cli/template/designer/env/.env.alpha +++ b/packages/engine-cli/template/designer/env/.env.alpha @@ -1,7 +1,7 @@ # alpha mode, used by the "build:alpha" script NODE_ENV=production -VITE_CDN_DOMAIN=https://npm.onmicrosoft.cn +VITE_CDN_DOMAIN=https://unpkg.com VITE_LOCAL_IMPORT_MAPS=false VITE_LOCAL_BUNDLE_DEPS=false # VITE_ORIGIN= diff --git a/packages/engine-cli/template/designer/env/.env.production b/packages/engine-cli/template/designer/env/.env.production index 04b27fbc3..8768ec32c 100644 --- a/packages/engine-cli/template/designer/env/.env.production +++ b/packages/engine-cli/template/designer/env/.env.production @@ -1,7 +1,7 @@ # prod mode, used by the "build:prod" script NODE_ENV=production -VITE_CDN_DOMAIN=https://npm.onmicrosoft.cn +VITE_CDN_DOMAIN=https://unpkg.com VITE_LOCAL_IMPORT_MAPS=false VITE_LOCAL_BUNDLE_DEPS=false #VITE_ORIGIN= diff --git a/packages/engine-cli/template/designer/public/mock/bundle.json b/packages/engine-cli/template/designer/public/mock/bundle.json index 2a1d74cc1..d8c18ecaf 100644 --- a/packages/engine-cli/template/designer/public/mock/bundle.json +++ b/packages/engine-cli/template/designer/public/mock/bundle.json @@ -20,8 +20,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElInput" }, @@ -300,8 +300,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElButton" }, @@ -621,8 +621,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElForm" }, @@ -1078,8 +1078,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElFormItem" }, @@ -1428,8 +1428,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElTable" }, @@ -2666,8 +2666,8 @@ "npm": { "package": "element-plus", "version": "2.4.2", - "script": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.full.mjs", - "css": "https://npm.onmicrosoft.cn/element-plus@2.4.2/dist/index.css", + "script": "https://unpkg.com/element-plus@2.4.2/dist/index.full.mjs", + "css": "https://unpkg.com/element-plus@2.4.2/dist/index.css", "dependencies": null, "exportName": "ElTableColumn" }, @@ -2732,8 +2732,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CarouselItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "容器组件", @@ -2866,8 +2868,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Carousel", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "容器组件", @@ -4601,8 +4605,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "ButtonGroup", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "category": "general", @@ -4760,8 +4766,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Row", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 5, @@ -4910,8 +4918,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Form", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 5, @@ -5263,8 +5273,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "FormItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 12, @@ -5398,8 +5410,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Col", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -5680,8 +5694,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Button", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -6020,8 +6036,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Input", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -6435,8 +6453,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Radio", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -6674,8 +6694,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Select", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 8, @@ -7082,8 +7104,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Switch", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 9, @@ -7284,8 +7308,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Search", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -7563,8 +7589,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Checkbox", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 4, @@ -7822,8 +7850,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CheckboxButton", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -8013,8 +8043,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CheckboxGroup", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -8224,8 +8256,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "DialogBox", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 4, @@ -8504,8 +8538,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tabs", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 10, @@ -8789,8 +8825,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "TabItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -8902,8 +8940,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Select", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -9040,8 +9080,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "BreadcrumbItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -9133,8 +9175,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Collapse", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -9265,8 +9309,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "CollapseItem", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -9380,8 +9426,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Grid", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 2, @@ -10302,8 +10350,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Pager", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -10539,8 +10589,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "PopEditor", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 6, @@ -10905,8 +10957,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tree", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 12, @@ -11243,8 +11297,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "TimeLine", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 3, @@ -11452,8 +11508,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Tooltip", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 11, @@ -11674,8 +11732,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Popover", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 7, @@ -12160,8 +12220,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "DatePicker", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, @@ -12576,8 +12638,10 @@ "npm": { "package": "@opentiny/vue", "exportName": "Numeric", - "version": "", - "destructuring": true + "version": "3.14.0", + "destructuring": true, + "script": "https://unpkg.com/@opentiny/vue@~3.14/runtime/tiny-vue.mjs", + "css": "https://unpkg.com/@opentiny/vue-theme@~3.14/index.css" }, "group": "component", "priority": 1, diff --git a/packages/plugins/help/package.json b/packages/plugins/help/package.json index 979b15cc3..7ff10d262 100644 --- a/packages/plugins/help/package.json +++ b/packages/plugins/help/package.json @@ -35,6 +35,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "vue": "^3.4.15" } } diff --git a/packages/plugins/materials/package.json b/packages/plugins/materials/package.json index c234cb24e..709aa8b24 100644 --- a/packages/plugins/materials/package.json +++ b/packages/plugins/materials/package.json @@ -38,6 +38,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "vue": "^3.4.15" } } diff --git a/packages/plugins/page/package.json b/packages/plugins/page/package.json index c2d0e50bf..8ecb22e26 100644 --- a/packages/plugins/page/package.json +++ b/packages/plugins/page/package.json @@ -37,6 +37,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "@opentiny/vue-renderless": "^3.14.0", "vue": "^3.4.15" } diff --git a/packages/plugins/robot/package.json b/packages/plugins/robot/package.json index f934a8205..ecc0463f4 100644 --- a/packages/plugins/robot/package.json +++ b/packages/plugins/robot/package.json @@ -35,6 +35,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "@opentiny/vue-renderless": "^3.14.0", "vue": "^3.4.15" } diff --git a/packages/plugins/schema/package.json b/packages/plugins/schema/package.json index 9c2f5ba33..20ad4dafd 100644 --- a/packages/plugins/schema/package.json +++ b/packages/plugins/schema/package.json @@ -37,6 +37,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "vue": "^3.4.15" } } diff --git a/packages/settings/props/package.json b/packages/settings/props/package.json index 3ed7271c1..60567656c 100644 --- a/packages/settings/props/package.json +++ b/packages/settings/props/package.json @@ -38,6 +38,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-renderless": "^3.14.0", "@opentiny/vue-icon": "^3.14.0", "vue": "^3.4.15" } diff --git a/packages/settings/styles/package.json b/packages/settings/styles/package.json index dc525e69a..60e26490a 100644 --- a/packages/settings/styles/package.json +++ b/packages/settings/styles/package.json @@ -40,6 +40,7 @@ }, "peerDependencies": { "@opentiny/vue": "^3.14.0", + "@opentiny/vue-icon": "^3.14.0", "@opentiny/vue-renderless": "^3.14.0", "vue": "^3.4.15" } From 52d2432d6cd3f05112cf442539c8eec4c6769c92 Mon Sep 17 00:00:00 2001 From: lichunn <46984087+lichunn@users.noreply.github.com> Date: Fri, 23 Aug 2024 01:49:36 -0700 Subject: [PATCH 16/16] =?UTF-8?q?Feat=EF=BC=9Atoolbar=20style=20improvemen?= =?UTF-8?q?t=20(#755)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add grouping to toolbar * feat:sort out the status and API of the layout * fix:remove unused bags * feat: 工具栏左侧调整 * feat: 间距调整 * fix: remove methods that do not exist * fix: 去掉多余配置 --- designer-demo/registry.js | 8 +- packages/design-core/assets/locked.svg | 8 +- packages/design-core/assets/unlocked.svg | 8 +- packages/design-core/index.js | 1 + packages/layout/index.js | 5 +- packages/layout/src/DesignPlugins.vue | 33 ++--- packages/layout/src/DesignToolbars.vue | 52 ++++++- packages/layout/src/Main.vue | 3 +- packages/layout/src/ToolbarCollapse.vue | 2 +- packages/layout/src/composable/Layout.md | 149 ++++++++++++++++++++ packages/layout/src/composable/useLayout.js | 26 ++-- packages/plugins/help/src/HelpIcon.vue | 8 +- packages/theme/common/base.less | 2 +- packages/theme/dark/toolbar.less | 2 + packages/theme/light/toolbar.less | 4 +- packages/theme/light/variable.less | 6 + packages/toolbars/breadcrumb/src/Main.vue | 28 ++-- packages/toolbars/generate-vue/src/Main.vue | 11 +- packages/toolbars/lock/meta.js | 3 +- packages/toolbars/lock/src/Main.vue | 3 +- packages/toolbars/save/src/Main.vue | 6 +- 21 files changed, 283 insertions(+), 85 deletions(-) create mode 100644 packages/layout/src/composable/Layout.md diff --git a/designer-demo/registry.js b/designer-demo/registry.js index 8ccf1ec08..205484003 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -15,6 +15,7 @@ import { Fullscreen, Lang, Logo, + Lock, Media, Redoundo, Save, @@ -49,11 +50,7 @@ import engineConfig from './engine.config' export default { root: { id: 'engine.root', - metas: [ - EditorInfoService, - AppService, - GenerateCodeService - ] + metas: [EditorInfoService, AppService, GenerateCodeService] }, config: engineConfig, layout: Layout, @@ -68,6 +65,7 @@ export default { toolbars: [ Logo, Breadcrumb, + Lock, Media, Redoundo, Collaboration, diff --git a/packages/design-core/assets/locked.svg b/packages/design-core/assets/locked.svg index dab711e5a..35529079d 100644 --- a/packages/design-core/assets/locked.svg +++ b/packages/design-core/assets/locked.svg @@ -3,10 +3,6 @@ Created with Pixso. - - - - - - + + diff --git a/packages/design-core/assets/unlocked.svg b/packages/design-core/assets/unlocked.svg index bb3ff8104..4c327c3d1 100644 --- a/packages/design-core/assets/unlocked.svg +++ b/packages/design-core/assets/unlocked.svg @@ -3,10 +3,6 @@ Created with Pixso. - - - - - - + + diff --git a/packages/design-core/index.js b/packages/design-core/index.js index 9325a0ba4..11a30f5fc 100644 --- a/packages/design-core/index.js +++ b/packages/design-core/index.js @@ -6,6 +6,7 @@ export { default as Fullscreen } from '@opentiny/tiny-engine-toolbar-fullscreen' export { default as Lang } from '@opentiny/tiny-engine-toolbar-lang' export { default as Checkinout } from '@opentiny/tiny-engine-toolbar-checkinout' export { default as Logo } from '@opentiny/tiny-engine-toolbar-logo' +export { default as Lock } from '@opentiny/tiny-engine-toolbar-checkinout' export { default as Media } from '@opentiny/tiny-engine-toolbar-media' export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo' export { default as Save } from '@opentiny/tiny-engine-toolbar-save' diff --git a/packages/layout/index.js b/packages/layout/index.js index 44f1b814b..ad10ee478 100644 --- a/packages/layout/index.js +++ b/packages/layout/index.js @@ -9,7 +9,10 @@ export default { component, options: { configProvider: TinyConfigProvider, - configProviderDesign: designSmbConfig + configProviderDesign: designSmbConfig, + isShowLine: true, + isShowCollapse: true, + toolbars: {} }, metas: [LayoutService] } diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue index 1ce111431..00b1c7678 100644 --- a/packages/layout/src/DesignPlugins.vue +++ b/packages/layout/src/DesignPlugins.vue @@ -55,14 +55,14 @@
@@ -74,7 +74,7 @@