From 858cf689653060445e06122d31dc81129db33fa8 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 11 Nov 2024 03:41:21 -0800 Subject: [PATCH 01/19] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E5=88=9D=E5=A7=8B=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/page/src/composable/usePage.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index c99072cc4c..256091162b 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -20,7 +20,9 @@ const DEFAULT_PAGE = { page_content: { componentName: 'Page', css: '', - props: {}, + props: { + style: 'padding: 24px;' + }, lifeCycles: {}, children: [], dataSource: { From 48b8883dd350998743cce70d7bcb3e29a0da7bdd Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 11 Nov 2024 03:41:47 -0800 Subject: [PATCH 02/19] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E9=97=B4?= =?UTF-8?q?=E8=B7=9D=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../settings/styles/src/components/spacing/SpacingSetting.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue index 1e950ae87f..86cc30a1ff 100644 --- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue +++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue @@ -45,7 +45,7 @@ export default { emits: useEvent(), setup(props, { emit }) { let sliderFlag = true - const options = [0, 10, 20, 40, 60, 100, 140, 220] + const options = [0, 4, 8, 12, 16, 20, 24, 32] const isReset = computed(() => Boolean(props.property.value)) const isMargin = computed( () => props.property.type === SPACING_PROPERTY.Margin || props.property.type === POSITION_PROPERTY.Position From 0c2e9be613692d000980ab5c114fb4b7a2db4f45 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 20 Nov 2024 17:59:51 -0800 Subject: [PATCH 03/19] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=9D=A2=E6=9D=BF=E5=AD=97=E4=BD=93=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/typography/TypographyGroup.vue | 97 +++++++++++++++++-- 1 file changed, 89 insertions(+), 8 deletions(-) diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 9d6c5ac131..6f967f3b64 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -38,7 +38,7 @@ -
+
- - +
+ + PX +
@@ -182,6 +187,22 @@ export default { const { setPosition } = useModal() const fontFamilyOptions = [ + { + label: '微软雅黑', + value: '"Microsoft YaHei", "微软雅黑", sans-serif' + }, + { + label: '苹方', + value: 'PingFang SC' + }, + { + label: '黑体', + value: 'SimHei' + }, + { + label: '宋体', + value: 'SimSun' + }, { label: 'Arial', value: 'Arial, "Helvetica Neue", Helvetica' @@ -312,6 +333,45 @@ export default { } ] + const sizeOptions = [ + { + label: '9', + value: '9' + }, + { + label: '10', + value: '10' + }, + { + label: '11', + value: '11' + }, + { + label: '12', + value: '12' + }, + { + label: '14', + value: '14' + }, + { + label: '16', + value: '16' + }, + { + label: '18', + value: '18' + }, + { + label: '20', + value: '20' + }, + { + label: '24', + value: '24' + } + ] + const alignOptions = [ { icon: 'text-align-left', @@ -389,7 +449,8 @@ export default { const state = reactive({ value: '400', - fontFamilyValue: 'Arial, "Helvetica Neue", Helvetica' + fontFamilyValue: '"Microsoft YaHei", "微软雅黑", sans-serif', + sizeValue: '' }) const selectedAlign = ref('') @@ -460,6 +521,12 @@ export default { } } + const selectFontSize = (type) => { + if (type) { + updateStyle({ 'font-size': type + 'px' }) + } + } + const selectFontFamily = (type) => { if (type) { updateStyle({ [TYPO_PROPERTY.FontFamily]: type }) @@ -480,8 +547,10 @@ export default { selectFontStyle, selectedTextDecoration, selectTextDecoration, + selectFontSize, openSetting, selectOptions, + sizeOptions, state, selectFontWeight, fontFamilyOptions, @@ -513,6 +582,11 @@ export default { grid-template-columns: 45% auto; } + &.font-split { + gap: 4px 8px; + grid-template-columns: 56% auto; + } + &.more { grid-template-columns: 1fr; } @@ -609,6 +683,13 @@ export default { .color-wrap { width: 210px; } + .font-size { + display: flex; + font-size: 12px; + color: var(--te-common-text-weaken); + align-items: center; + gap: 4px; + } } .typography-font-row { From a95ec2a3e6799d1871c50778cd50f32d4135dcfa Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 20 Nov 2024 18:53:20 -0800 Subject: [PATCH 04/19] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4CanvasRowColCon?= =?UTF-8?q?tainer=E7=BB=84=E4=BB=B6=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/meta/CanvasRowColContainer.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/builtinComponent/src/meta/CanvasRowColContainer.json b/packages/builtinComponent/src/meta/CanvasRowColContainer.json index 3281b14a0e..4609c76b21 100644 --- a/packages/builtinComponent/src/meta/CanvasRowColContainer.json +++ b/packages/builtinComponent/src/meta/CanvasRowColContainer.json @@ -68,21 +68,21 @@ "schema": { "componentName": "CanvasRowColContainer", "props": { - "rowGap": "20px" + "rowGap": "16px" }, "children": [ { "componentName": "CanvasRow", "props": { - "rowGap": "20px", - "colGap": "20px" + "rowGap": "16px", + "colGap": "16px" }, "children": [ { "componentName": "CanvasCol", "props": { - "rowGap": "20px", - "colGap": "20px", + "rowGap": "16px", + "colGap": "16px", "grow": true, "shrink": true, "widthType": "auto" From ab44bd2da3a5956405cc5617f084954d2786b3d2 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 25 Nov 2024 01:28:22 -0800 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20=E7=94=BB=E5=B8=83=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=B7=BB=E5=8A=A0=E8=83=8C=E6=99=AF=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/page/src/composable/usePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index 256091162b..cf36341e51 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -21,7 +21,7 @@ const DEFAULT_PAGE = { componentName: 'Page', css: '', props: { - style: 'padding: 24px;' + style: 'padding: 24px;background: #FFFFFF;' }, lifeCycles: {}, children: [], From f9fbf1a4c0881a126a52d0fc307155941f5787ee Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 25 Nov 2024 01:30:17 -0800 Subject: [PATCH 06/19] =?UTF-8?q?feat:=20=E5=8C=BA=E5=9D=97=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/materials/src/composable/useMaterial.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js index 91365bfea7..8c32ae25f4 100644 --- a/packages/plugins/materials/src/composable/useMaterial.js +++ b/packages/plugins/materials/src/composable/useMaterial.js @@ -60,12 +60,20 @@ const generateNode = ({ type, component }) => { const snippet = getSnippet(component) || {} const schema = { componentName: component, - props: {}, - ...snippet + ...snippet, + props: { + ...snippet.props, + style: 'margin: 8px;' + } } if (type === 'block') { schema.componentType = 'Block' + schema.props.style = 'margin: 16px;' + } + + if (component === 'Text') { + schema.props.style = 'margin: 8px;display: inline-block;' } return schema From 1de4df22b01c686ad4f41183ffbcc2b6ff9779ad Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 4 Dec 2024 01:54:22 -0800 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=AD=97=E7=AC=A6=E4=B8=B2=E8=BD=AC=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/utils/src/utils/index.js | 55 +++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js index d7f16ddf2e..2ba44172b4 100644 --- a/packages/utils/src/utils/index.js +++ b/packages/utils/src/utils/index.js @@ -381,3 +381,58 @@ export const string2Obj = (string) => { return obj } + +/** + * 指定-转化为驼峰命名 + * @param {*} string + * @returns + */ + +export const toCamelCase = (str) => { + return str.replace(/[-\s]+(.)?/g, (match, group1) => (group1 ? group1.toUpperCase() : '')) +} + +/** + * 驼峰转化为连字符形式 + * @param {*} string + * @returns + */ + +export const convertCamelToKebab = (string) => { + return string.replace(/([A-Z])/g, '-$1').toLowerCase() +} + +/** + * 样式字符串转对象 + * @param {*} string + * @returns + */ + +export const styleString2Obj = (styleString) => { + const styles = styleString.trim().split(';') + + const styleObject = styles.reduce((obj, pair) => { + const [key, value] = pair.split(':') + if (key && value) { + obj[toCamelCase(key.trim())] = value.trim() + } + return obj + }, {}) + return styleObject +} + +/** + * 对象转样式字符串 + * @param {*} string + * @returns + */ + +export const obj2StyleString = (obj) => { + let str = '' + + for (let key in obj) { + str += `${convertCamelToKebab(key)}: ${obj[key]}; ` + } + str = str.slice(0, -2) + return str +} From ece61c18608f0801a34893785d1c052f4c7e0c05 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 11 Dec 2024 03:07:42 -0800 Subject: [PATCH 08/19] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E6=A0=B7=E5=BC=8F=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/render/src/builtin/builtin.json | 1 + packages/plugins/materials/index.js | 11 +++++++++- .../materials/src/composable/useMaterial.js | 9 +++----- packages/plugins/page/index.js | 6 +++++ packages/plugins/page/src/Main.vue | 4 ++-- packages/plugins/page/src/PageSetting.vue | 4 ++-- .../plugins/page/src/composable/usePage.js | 22 +++++++++++++++---- packages/plugins/robot/src/Main.vue | 4 ++-- 8 files changed, 44 insertions(+), 17 deletions(-) diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json index ad56e67abb..924f197cfe 100644 --- a/packages/canvas/render/src/builtin/builtin.json +++ b/packages/canvas/render/src/builtin/builtin.json @@ -468,6 +468,7 @@ "schema": { "componentName": "Text", "props": { + "style": "display: inline-block;", "text": "TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。" } } diff --git a/packages/plugins/materials/index.js b/packages/plugins/materials/index.js index dc6136c033..95ae843fa9 100644 --- a/packages/plugins/materials/index.js +++ b/packages/plugins/materials/index.js @@ -26,7 +26,16 @@ export default { options: { defaultTabId: 'engine.plugins.materials.component', displayComponentIds: ['engine.plugins.materials.component', 'engine.plugins.materials.block'], - basePropertyOptions + basePropertyOptions, + useBaseStyle: true, + blockBaseStyle: { + className: 'block-base-style', + style: 'margin: 16px;' + }, + componentBaseStyle: { + className: 'component-base-style', + style: 'margin: 8px;' + } }, components: { header: MaterialHeader diff --git a/packages/plugins/materials/src/composable/useMaterial.js b/packages/plugins/materials/src/composable/useMaterial.js index 8c32ae25f4..8e371085f8 100644 --- a/packages/plugins/materials/src/composable/useMaterial.js +++ b/packages/plugins/materials/src/composable/useMaterial.js @@ -58,22 +58,19 @@ const getSnippet = (component) => { const generateNode = ({ type, component }) => { const snippet = getSnippet(component) || {} + const schema = { componentName: component, ...snippet, props: { ...snippet.props, - style: 'margin: 8px;' + className: getOptions(meta.id).useBaseStyle ? getOptions(meta.id).componentBaseStyle.className : '' } } if (type === 'block') { schema.componentType = 'Block' - schema.props.style = 'margin: 16px;' - } - - if (component === 'Text') { - schema.props.style = 'margin: 8px;display: inline-block;' + schema.props.className = getOptions(meta.id).useBaseStyle ? getOptions(meta.id).blockBaseStyle.className : '' } return schema diff --git a/packages/plugins/page/index.js b/packages/plugins/page/index.js index b9b07781be..de0203d4c9 100644 --- a/packages/plugins/page/index.js +++ b/packages/plugins/page/index.js @@ -19,6 +19,12 @@ export default { ...metaData, apis: api, entry, + options: { + pageBaseStyle: { + className: 'page-base-style', + style: 'padding: 24px;background: #FFFFFF;' + } + }, components: { PageGeneral }, diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue index 2101637cf0..470df51459 100644 --- a/packages/plugins/page/src/Main.vue +++ b/packages/plugins/page/src/Main.vue @@ -69,7 +69,7 @@ export default { }, setup() { const { pageState } = useCanvas() - const { pageSettingState, DEFAULT_PAGE, isTemporaryPage, initCurrentPageData } = usePage() + const { pageSettingState, getDefaultPage, isTemporaryPage, initCurrentPageData } = usePage() const pageTreeRef = ref(null) const ROOT_ID = pageSettingState.ROOT_ID @@ -83,7 +83,7 @@ export default { closeFolderSettingPanel() pageSettingState.isNew = true pageSettingState.currentPageData = { - ...DEFAULT_PAGE, + ...getDefaultPage(), parentId: ROOT_ID, route: '', name: 'Untitled', diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue index 4558d22746..8c9e6dc085 100644 --- a/packages/plugins/page/src/PageSetting.vue +++ b/packages/plugins/page/src/PageSetting.vue @@ -121,7 +121,7 @@ export default { setup(props, { emit }) { const { requestCreatePage, requestDeletePage } = http const { - DEFAULT_PAGE, + getDefaultPage, pageSettingState, changeTreeData, isCurrentDataSame, @@ -161,7 +161,7 @@ export default { } const createPage = async () => { - const { page_content, ...other } = DEFAULT_PAGE + const { page_content, ...other } = getDefaultPage() const { page_content: page_content_state, ...pageSettingStateOther } = pageSettingState.currentPageData const createParams = { ...other, diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index cf36341e51..868e083606 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -12,6 +12,7 @@ import { reactive, ref } from 'vue' import { extend, isEqual } from '@opentiny/vue-renderless/common/object' +import { getOptions } from '@opentiny/tiny-engine-meta-register' const DEFAULT_PAGE = { app: '', @@ -20,9 +21,7 @@ const DEFAULT_PAGE = { page_content: { componentName: 'Page', css: '', - props: { - style: 'padding: 24px;background: #FFFFFF;' - }, + props: {}, lifeCycles: {}, children: [], dataSource: { @@ -58,6 +57,21 @@ const pageSettingState = reactive({ const isTemporaryPage = reactive({ saved: false }) + +const getDefaultPage = () => { + const materialsOptions = getOptions('engine.plugins.materials') + const pageOptions = getOptions('engine.plugins.appmanage') + + DEFAULT_PAGE.page_content.props.className = pageOptions.pageBaseStyle.className + DEFAULT_PAGE.page_content.css = + `.${pageOptions.pageBaseStyle.className}{\r\n ${pageOptions.pageBaseStyle.style}\r\n}\r\n` + + (materialsOptions.useBaseStyle + ? `.${materialsOptions.blockBaseStyle.className}{\r\n ${materialsOptions.blockBaseStyle.style}\r\n}\r\n.${materialsOptions.componentBaseStyle.className}{\r\n ${materialsOptions.componentBaseStyle.style}\r\n}\r\n` + : '') + + return DEFAULT_PAGE +} + const isCurrentDataSame = () => { const data = pageSettingState.currentPageData || {} const dataCopy = pageSettingState.currentPageDataCopy || {} @@ -136,7 +150,7 @@ const COMMON_PAGE_GROUP_ID = 1 export default () => { return { - DEFAULT_PAGE, + getDefaultPage, selectedTemplateCard, pageSettingState, isTemporaryPage, diff --git a/packages/plugins/robot/src/Main.vue b/packages/plugins/robot/src/Main.vue index 9efd418bdb..89d82b461e 100644 --- a/packages/plugins/robot/src/Main.vue +++ b/packages/plugins/robot/src/Main.vue @@ -146,7 +146,7 @@ export default { const selectedModel = ref(AIModelOptions[0]) const { confirm } = useModal() - const { pageSettingState, DEFAULT_PAGE } = usePage() + const { pageSettingState, getDefaultPage } = usePage() const ROOT_ID = pageSettingState.ROOT_ID const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) watchEffect(() => { @@ -174,7 +174,7 @@ export default { pageSettingState.isNew = true pageSettingState.isAIPage = true pageSettingState.currentPageData = { - ...DEFAULT_PAGE, + ...getDefaultPage(), parentId: ROOT_ID, route: 'temporaryPage', name: 'TemporaryPage', From 9e3f95a5cbaae9d2f617f61a87734ecea7278734 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 11 Dec 2024 07:57:28 -0800 Subject: [PATCH 09/19] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E5=BC=B9=E6=80=A7?= =?UTF-8?q?=E7=9B=92=E5=AD=90=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../render/src/builtin/CanvasFlexBox.vue | 64 +++++++++ .../canvas/render/src/builtin/builtin.json | 135 ++++++++++++++++++ packages/canvas/render/src/builtin/index.js | 3 +- packages/canvas/render/src/render.js | 4 +- 4 files changed, 204 insertions(+), 2 deletions(-) create mode 100644 packages/canvas/render/src/builtin/CanvasFlexBox.vue diff --git a/packages/canvas/render/src/builtin/CanvasFlexBox.vue b/packages/canvas/render/src/builtin/CanvasFlexBox.vue new file mode 100644 index 0000000000..e6d4c0275c --- /dev/null +++ b/packages/canvas/render/src/builtin/CanvasFlexBox.vue @@ -0,0 +1,64 @@ + + + + diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json index 924f197cfe..2e871c3600 100644 --- a/packages/canvas/render/src/builtin/builtin.json +++ b/packages/canvas/render/src/builtin/builtin.json @@ -59,6 +59,129 @@ } } }, + { + "icon": "Box", + "name": { + "zh_CN": "flexBox" + }, + "component": "div", + "schema": { + "slots": {}, + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ + { + "property": "flexDirection", + "type": "String", + "defaultValue": "row", + "bindState": true, + "label": { + "text": { + "zh_CN": "排列方向" + } + }, + "cols": 12, + "rules": [], + "widget": { + "component": "SelectConfigurator", + "props": { + "options": [ + { + "label": "row", + "value": "row" + }, + { + "label": "row-reverse", + "value": "row-reverse" + }, + { + "label": "column", + "value": "column" + }, + { + "label": "column-reverse", + "value": "column-reverse" + } + ] + } + } + }, + { + "property": "gap", + "defaultValue": 8, + "label": { + "text": { + "zh_CN": "间距" + } + }, + "widget": { + "component": "NumberConfigurator" + }, + "description": { + "zh_CN": "控制容器内水平和垂直的间距" + }, + "labelPosition": "left" + }, + { + "property": "padding", + "defaultValue": 8, + "label": { + "text": { + "zh_CN": "内边距" + } + }, + "widget": { + "component": "NumberConfigurator" + }, + "labelPosition": "left" + } + ] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" + }, + "description": { + "zh_CN": "点击时触发的回调函数" + }, + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" + } + }, + "shortcuts": { + "properties": [] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true, + "isContainer": true, + "nestingRule": { + "childWhitelist": [], + "descendantBlacklist": [] + } + } + }, { "icon": "slot", "name": { @@ -449,6 +572,18 @@ "componentName": "div", "props": {} } + }, + { + "name": { + "zh_CN": "弹性盒子容器" + }, + "screenshot": "", + "snippetName": "flexBox", + "icon": "Box", + "schema": { + "componentName": "div", + "props": {} + } } ] }, diff --git a/packages/canvas/render/src/builtin/index.js b/packages/canvas/render/src/builtin/index.js index f857ff1a18..c7e3d514c4 100644 --- a/packages/canvas/render/src/builtin/index.js +++ b/packages/canvas/render/src/builtin/index.js @@ -17,5 +17,6 @@ import CanvasIcon from './CanvasIcon.vue' import CanvasSlot from './CanvasSlot.vue' import CanvasImg from './CanvasImg.vue' import CanvasPlaceholder from './CanvasPlaceholder.vue' +import CanvasFlexBox from './CanvasFlexBox.vue' -export { CanvasText, CanvasBox, CanvasCollection, CanvasIcon, CanvasSlot, CanvasImg, CanvasPlaceholder } +export { CanvasText, CanvasBox, CanvasCollection, CanvasIcon, CanvasSlot, CanvasImg, CanvasPlaceholder, CanvasFlexBox } diff --git a/packages/canvas/render/src/render.js b/packages/canvas/render/src/render.js index 1c5c4a36c9..9a4dcb54c7 100644 --- a/packages/canvas/render/src/render.js +++ b/packages/canvas/render/src/render.js @@ -28,7 +28,8 @@ import { CanvasText, CanvasSlot, CanvasImg, - CanvasPlaceholder + CanvasPlaceholder, + CanvasFlexBox } from './builtin' const { BROADCAST_CHANNEL } = constants @@ -66,6 +67,7 @@ const Mapper = { slot: CanvasSlot, Template: CanvasBox, Img: CanvasImg, + flexBox: CanvasFlexBox, CanvasRow, CanvasCol, CanvasRowColContainer, From 29a26eb441173f377c372a4ba5a8ae88b9c985d7 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Wed, 11 Dec 2024 22:13:55 -0800 Subject: [PATCH 10/19] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4flexBox?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/builtinComponent/index.js | 1 + .../src/components/CanvasFlexBox.vue | 39 +++++ .../src/meta/CanvasFlexBox.json | 141 ++++++++++++++++++ packages/builtinComponent/src/meta/index.js | 5 +- .../canvas/render/src/builtin/builtin.json | 135 ----------------- packages/canvas/render/src/builtin/index.js | 3 +- packages/canvas/render/src/render.js | 7 +- packages/vue-generator/src/constant/index.js | 7 + 8 files changed, 195 insertions(+), 143 deletions(-) create mode 100644 packages/builtinComponent/src/components/CanvasFlexBox.vue create mode 100644 packages/builtinComponent/src/meta/CanvasFlexBox.json diff --git a/packages/builtinComponent/index.js b/packages/builtinComponent/index.js index 99242b77a4..b178d01250 100644 --- a/packages/builtinComponent/index.js +++ b/packages/builtinComponent/index.js @@ -1,4 +1,5 @@ export { default as CanvasCol } from './src/components/CanvasCol.vue' export { default as CanvasRow } from './src/components/CanvasRow.vue' export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue' +export { default as CanvasFlexBox } from './src/components/CanvasFlexBox.vue' export { default as meta } from './src/meta' diff --git a/packages/builtinComponent/src/components/CanvasFlexBox.vue b/packages/builtinComponent/src/components/CanvasFlexBox.vue new file mode 100644 index 0000000000..2cd087ee27 --- /dev/null +++ b/packages/builtinComponent/src/components/CanvasFlexBox.vue @@ -0,0 +1,39 @@ + + + + diff --git a/packages/builtinComponent/src/meta/CanvasFlexBox.json b/packages/builtinComponent/src/meta/CanvasFlexBox.json new file mode 100644 index 0000000000..1317b37215 --- /dev/null +++ b/packages/builtinComponent/src/meta/CanvasFlexBox.json @@ -0,0 +1,141 @@ +{ + "component": { + "icon": "Box", + "name": { + "zh_CN": "弹性盒子容器" + }, + "component": "FlexBox", + "schema": { + "slots": {}, + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [ + { + "property": "flexDirection", + "type": "String", + "defaultValue": "row", + "bindState": true, + "label": { + "text": { + "zh_CN": "排列方向" + } + }, + "cols": 12, + "rules": [], + "widget": { + "component": "SelectConfigurator", + "props": { + "options": [ + { + "label": "row", + "value": "row" + }, + { + "label": "row-reverse", + "value": "row-reverse" + }, + { + "label": "column", + "value": "column" + }, + { + "label": "column-reverse", + "value": "column-reverse" + } + ] + } + } + }, + { + "property": "gap", + "defaultValue": "8px", + "label": { + "text": { + "zh_CN": "间距" + } + }, + "widget": { + "component": "InputConfigurator" + }, + "description": { + "zh_CN": "控制容器内水平和垂直的间距" + }, + "labelPosition": "left" + }, + { + "property": "padding", + "defaultValue": "8px", + "label": { + "text": { + "zh_CN": "内边距" + } + }, + "widget": { + "component": "InputConfigurator" + }, + "labelPosition": "left" + } + ] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" + }, + "description": { + "zh_CN": "点击时触发的回调函数" + }, + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" + } + }, + "shortcuts": { + "properties": [] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true, + "isContainer": true, + "nestingRule": { + "childWhitelist": [], + "descendantBlacklist": [] + } + } + }, + "snippet": { + "name": { + "zh_CN": "弹性盒子容器" + }, + "screenshot": "", + "snippetName": "FlexBox", + "icon": "Box", + "schema": { + "componentName": "FlexBox", + "props": { + "flexDirection": "row", + "gap": "8px", + "padding": "8px" + } + } + } +} diff --git a/packages/builtinComponent/src/meta/index.js b/packages/builtinComponent/src/meta/index.js index 2480e70515..14fac9ff60 100644 --- a/packages/builtinComponent/src/meta/index.js +++ b/packages/builtinComponent/src/meta/index.js @@ -1,16 +1,17 @@ import CanvasCol from './CanvasCol.json' import CanvasRow from './CanvasRow.json' import CanvasRowColContainer from './CanvasRowColContainer.json' +import CanvasFlexBox from './CanvasFlexBox.json' export default { - components: [CanvasCol.component, CanvasRow.component, CanvasRowColContainer.component], + components: [CanvasCol.component, CanvasRow.component, CanvasRowColContainer.component, CanvasFlexBox.component], snippets: [ { group: 'layout', label: { zh_CN: '布局与容器' }, - children: [CanvasRowColContainer.snippet] + children: [CanvasRowColContainer.snippet, CanvasFlexBox.snippet] } ] } diff --git a/packages/canvas/render/src/builtin/builtin.json b/packages/canvas/render/src/builtin/builtin.json index 2e871c3600..924f197cfe 100644 --- a/packages/canvas/render/src/builtin/builtin.json +++ b/packages/canvas/render/src/builtin/builtin.json @@ -59,129 +59,6 @@ } } }, - { - "icon": "Box", - "name": { - "zh_CN": "flexBox" - }, - "component": "div", - "schema": { - "slots": {}, - "properties": [ - { - "label": { - "zh_CN": "基础信息" - }, - "description": { - "zh_CN": "基础信息" - }, - "collapse": { - "number": 6, - "text": { - "zh_CN": "显示更多" - } - }, - "content": [ - { - "property": "flexDirection", - "type": "String", - "defaultValue": "row", - "bindState": true, - "label": { - "text": { - "zh_CN": "排列方向" - } - }, - "cols": 12, - "rules": [], - "widget": { - "component": "SelectConfigurator", - "props": { - "options": [ - { - "label": "row", - "value": "row" - }, - { - "label": "row-reverse", - "value": "row-reverse" - }, - { - "label": "column", - "value": "column" - }, - { - "label": "column-reverse", - "value": "column-reverse" - } - ] - } - } - }, - { - "property": "gap", - "defaultValue": 8, - "label": { - "text": { - "zh_CN": "间距" - } - }, - "widget": { - "component": "NumberConfigurator" - }, - "description": { - "zh_CN": "控制容器内水平和垂直的间距" - }, - "labelPosition": "left" - }, - { - "property": "padding", - "defaultValue": 8, - "label": { - "text": { - "zh_CN": "内边距" - } - }, - "widget": { - "component": "NumberConfigurator" - }, - "labelPosition": "left" - } - ] - } - ], - "events": { - "onClick": { - "label": { - "zh_CN": "点击事件" - }, - "description": { - "zh_CN": "点击时触发的回调函数" - }, - "type": "event", - "functionInfo": { - "params": [], - "returns": {} - }, - "defaultValue": "" - } - }, - "shortcuts": { - "properties": [] - }, - "contentMenu": { - "actions": [] - } - }, - "configure": { - "loop": true, - "isContainer": true, - "nestingRule": { - "childWhitelist": [], - "descendantBlacklist": [] - } - } - }, { "icon": "slot", "name": { @@ -572,18 +449,6 @@ "componentName": "div", "props": {} } - }, - { - "name": { - "zh_CN": "弹性盒子容器" - }, - "screenshot": "", - "snippetName": "flexBox", - "icon": "Box", - "schema": { - "componentName": "div", - "props": {} - } } ] }, diff --git a/packages/canvas/render/src/builtin/index.js b/packages/canvas/render/src/builtin/index.js index c7e3d514c4..f857ff1a18 100644 --- a/packages/canvas/render/src/builtin/index.js +++ b/packages/canvas/render/src/builtin/index.js @@ -17,6 +17,5 @@ import CanvasIcon from './CanvasIcon.vue' import CanvasSlot from './CanvasSlot.vue' import CanvasImg from './CanvasImg.vue' import CanvasPlaceholder from './CanvasPlaceholder.vue' -import CanvasFlexBox from './CanvasFlexBox.vue' -export { CanvasText, CanvasBox, CanvasCollection, CanvasIcon, CanvasSlot, CanvasImg, CanvasPlaceholder, CanvasFlexBox } +export { CanvasText, CanvasBox, CanvasCollection, CanvasIcon, CanvasSlot, CanvasImg, CanvasPlaceholder } diff --git a/packages/canvas/render/src/render.js b/packages/canvas/render/src/render.js index 9a4dcb54c7..1a6df91ec6 100644 --- a/packages/canvas/render/src/render.js +++ b/packages/canvas/render/src/render.js @@ -17,7 +17,7 @@ import { constants, utils } from '@opentiny/tiny-engine-utils' import babelPluginJSX from '@vue/babel-plugin-jsx' import { transformSync } from '@babel/core' import i18nHost from '@opentiny/tiny-engine-i18n-host' -import { CanvasRow, CanvasCol, CanvasRowColContainer } from '@opentiny/tiny-engine-builtin-component' +import { CanvasRow, CanvasCol, CanvasRowColContainer, CanvasFlexBox } from '@opentiny/tiny-engine-builtin-component' import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../../common' import { context, conditions, setNode, getDesignMode, DESIGN_MODE } from './context' @@ -28,8 +28,7 @@ import { CanvasText, CanvasSlot, CanvasImg, - CanvasPlaceholder, - CanvasFlexBox + CanvasPlaceholder } from './builtin' const { BROADCAST_CHANNEL } = constants @@ -67,7 +66,7 @@ const Mapper = { slot: CanvasSlot, Template: CanvasBox, Img: CanvasImg, - flexBox: CanvasFlexBox, + CanvasFlexBox, CanvasRow, CanvasCol, CanvasRowColContainer, diff --git a/packages/vue-generator/src/constant/index.js b/packages/vue-generator/src/constant/index.js index b45bf828c4..dc331d6ed6 100644 --- a/packages/vue-generator/src/constant/index.js +++ b/packages/vue-generator/src/constant/index.js @@ -2195,6 +2195,13 @@ export const BUILTIN_COMPONENTS_MAP = [ package: '@opentiny/tiny-engine-builtin-component', version: '^1.0.1', destructuring: true + }, + { + componentName: 'CanvasFlexBox', + exportName: 'CanvasFlexBox', + package: '@opentiny/tiny-engine-builtin-component', + version: '^1.0.1', + destructuring: true } ] From c53acbb1d3fd69370d1fb3aef9981efbf9e13a59 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Thu, 12 Dec 2024 19:11:51 -0800 Subject: [PATCH 11/19] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0Section?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BB=A5=E5=8F=8A=E6=B8=85=E7=A9=BA=E7=94=BB?= =?UTF-8?q?=E5=B8=83=E4=BF=9D=E7=95=99=E5=9F=BA=E7=A1=80=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/builtinComponent/index.js | 1 + .../src/components/CanvasFlexBox.vue | 17 +++- .../src/components/CanvasSection.vue | 15 ++++ .../src/meta/CanvasFlexBox.json | 86 ++++++++++++++++++- .../src/meta/CanvasSection.json | 71 +++++++++++++++ packages/builtinComponent/src/meta/index.js | 11 ++- .../canvas/DesignCanvas/src/api/useCanvas.js | 18 ++-- packages/canvas/render/src/render.js | 9 +- packages/vue-generator/src/constant/index.js | 7 ++ 9 files changed, 221 insertions(+), 14 deletions(-) create mode 100644 packages/builtinComponent/src/components/CanvasSection.vue create mode 100644 packages/builtinComponent/src/meta/CanvasSection.json diff --git a/packages/builtinComponent/index.js b/packages/builtinComponent/index.js index b178d01250..d9976790dd 100644 --- a/packages/builtinComponent/index.js +++ b/packages/builtinComponent/index.js @@ -2,4 +2,5 @@ export { default as CanvasCol } from './src/components/CanvasCol.vue' export { default as CanvasRow } from './src/components/CanvasRow.vue' export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue' export { default as CanvasFlexBox } from './src/components/CanvasFlexBox.vue' +export { default as CanvasSection } from './src/components/CanvasSection.vue' export { default as meta } from './src/meta' diff --git a/packages/builtinComponent/src/components/CanvasFlexBox.vue b/packages/builtinComponent/src/components/CanvasFlexBox.vue index 2cd087ee27..7d05af1dff 100644 --- a/packages/builtinComponent/src/components/CanvasFlexBox.vue +++ b/packages/builtinComponent/src/components/CanvasFlexBox.vue @@ -9,7 +9,7 @@ import { computed, defineProps } from 'vue' import { getStyleValue } from './helper' const props = defineProps({ - lexDirection: { + flexDirection: { type: String, default: 'row' }, @@ -20,20 +20,33 @@ const props = defineProps({ padding: { type: [String, Number], default: '8px' + }, + alignItems: { + type: String, + default: 'center' + }, + justifyContent: { + type: String, + default: 'flex-start' } }) const styles = computed(() => ({ flexDirection: props.flexDirection, gap: getStyleValue(props.gap), - padding: getStyleValue(props.padding) + padding: getStyleValue(props.padding), + alignItems: props.alignItems, + justifyContent: props.justifyContent })) diff --git a/packages/builtinComponent/src/components/CanvasSection.vue b/packages/builtinComponent/src/components/CanvasSection.vue new file mode 100644 index 0000000000..2d2994fa3f --- /dev/null +++ b/packages/builtinComponent/src/components/CanvasSection.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/builtinComponent/src/meta/CanvasFlexBox.json b/packages/builtinComponent/src/meta/CanvasFlexBox.json index 1317b37215..1b6323f019 100644 --- a/packages/builtinComponent/src/meta/CanvasFlexBox.json +++ b/packages/builtinComponent/src/meta/CanvasFlexBox.json @@ -4,7 +4,7 @@ "name": { "zh_CN": "弹性盒子容器" }, - "component": "FlexBox", + "component": "CanvasFlexBox", "schema": { "slots": {}, "properties": [ @@ -86,6 +86,86 @@ "component": "InputConfigurator" }, "labelPosition": "left" + }, + { + "property": "justifyContent", + "type": "String", + "defaultValue": "flex-start", + "bindState": true, + "label": { + "text": { + "zh_CN": "水平对齐方式" + } + }, + "cols": 12, + "rules": [], + "widget": { + "component": "SelectConfigurator", + "props": { + "options": [ + { + "label": "flex-start", + "value": "flex-start" + }, + { + "label": "flex-end", + "value": "flex-end" + }, + { + "label": "center", + "value": "center" + }, + { + "label": "space-between", + "value": "space-between" + }, + { + "label": "space-around", + "value": "space-around" + } + ] + } + } + }, + { + "property": "alignItems", + "type": "String", + "defaultValue": "center", + "bindState": true, + "label": { + "text": { + "zh_CN": "垂直对齐方式" + } + }, + "cols": 12, + "rules": [], + "widget": { + "component": "SelectConfigurator", + "props": { + "options": [ + { + "label": "center", + "value": "center" + }, + { + "label": "flex-end", + "value": "flex-end" + }, + { + "label": "flex-start", + "value": "flex-start" + }, + { + "label": "baseline", + "value": "baseline" + }, + { + "label": "stretch", + "value": "stretch" + } + ] + } + } } ] } @@ -127,10 +207,10 @@ "zh_CN": "弹性盒子容器" }, "screenshot": "", - "snippetName": "FlexBox", + "snippetName": "CanvasFlexBox", "icon": "Box", "schema": { - "componentName": "FlexBox", + "componentName": "CanvasFlexBox", "props": { "flexDirection": "row", "gap": "8px", diff --git a/packages/builtinComponent/src/meta/CanvasSection.json b/packages/builtinComponent/src/meta/CanvasSection.json new file mode 100644 index 0000000000..f8fe812de8 --- /dev/null +++ b/packages/builtinComponent/src/meta/CanvasSection.json @@ -0,0 +1,71 @@ +{ + "component": { + "icon": "Box", + "name": { + "zh_CN": "Section" + }, + "component": "CanvasSection", + "schema": { + "slots": {}, + "properties": [ + { + "label": { + "zh_CN": "基础信息" + }, + "description": { + "zh_CN": "基础信息" + }, + "collapse": { + "number": 6, + "text": { + "zh_CN": "显示更多" + } + }, + "content": [] + } + ], + "events": { + "onClick": { + "label": { + "zh_CN": "点击事件" + }, + "description": { + "zh_CN": "点击时触发的回调函数" + }, + "type": "event", + "functionInfo": { + "params": [], + "returns": {} + }, + "defaultValue": "" + } + }, + "shortcuts": { + "properties": [] + }, + "contentMenu": { + "actions": [] + } + }, + "configure": { + "loop": true, + "isContainer": true, + "nestingRule": { + "childWhitelist": [], + "descendantBlacklist": [] + } + } + }, + "snippet": { + "name": { + "zh_CN": "Section" + }, + "screenshot": "", + "snippetName": "CanvasSection", + "icon": "Box", + "schema": { + "componentName": "CanvasSection", + "props": {} + } + } +} diff --git a/packages/builtinComponent/src/meta/index.js b/packages/builtinComponent/src/meta/index.js index 14fac9ff60..7521af69aa 100644 --- a/packages/builtinComponent/src/meta/index.js +++ b/packages/builtinComponent/src/meta/index.js @@ -2,16 +2,23 @@ import CanvasCol from './CanvasCol.json' import CanvasRow from './CanvasRow.json' import CanvasRowColContainer from './CanvasRowColContainer.json' import CanvasFlexBox from './CanvasFlexBox.json' +import CanvasSection from './CanvasSection.json' export default { - components: [CanvasCol.component, CanvasRow.component, CanvasRowColContainer.component, CanvasFlexBox.component], + components: [ + CanvasCol.component, + CanvasRow.component, + CanvasRowColContainer.component, + CanvasFlexBox.component, + CanvasSection.component + ], snippets: [ { group: 'layout', label: { zh_CN: '布局与容器' }, - children: [CanvasRowColContainer.snippet, CanvasFlexBox.snippet] + children: [CanvasRowColContainer.snippet, CanvasFlexBox.snippet, CanvasSection.snippet] } ] } diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js index 2be05169b7..1c8ce3f97c 100644 --- a/packages/canvas/DesignCanvas/src/api/useCanvas.js +++ b/packages/canvas/DesignCanvas/src/api/useCanvas.js @@ -13,7 +13,7 @@ /* eslint-disable no-new-func */ import { reactive, ref } from 'vue' import { constants } from '@opentiny/tiny-engine-utils' -import { useHistory } from '@opentiny/tiny-engine-meta-register' +import { useHistory, getMetaApi } from '@opentiny/tiny-engine-meta-register' const { COMPONENT_NAME } = constants @@ -80,11 +80,17 @@ const resetBlockCanvasState = async (state = {}) => { await resetCanvasState(state) } -const getDefaultSchema = (componentName = 'Page', fileName = '') => ({ - ...defaultSchema, - componentName, - fileName -}) +const getDefaultSchema = (componentName = 'Page', fileName = '') => { + const DEFAULT_PAGE = getMetaApi('engine.service.page').getDefaultPage() + + return { + ...defaultSchema, + props: DEFAULT_PAGE.page_content.props, + css: DEFAULT_PAGE.page_content.css, + componentName, + fileName + } +} const setSaved = (flag = false) => { pageState.isSaved = flag diff --git a/packages/canvas/render/src/render.js b/packages/canvas/render/src/render.js index 1a6df91ec6..9a7b32a931 100644 --- a/packages/canvas/render/src/render.js +++ b/packages/canvas/render/src/render.js @@ -17,7 +17,13 @@ import { constants, utils } from '@opentiny/tiny-engine-utils' import babelPluginJSX from '@vue/babel-plugin-jsx' import { transformSync } from '@babel/core' import i18nHost from '@opentiny/tiny-engine-i18n-host' -import { CanvasRow, CanvasCol, CanvasRowColContainer, CanvasFlexBox } from '@opentiny/tiny-engine-builtin-component' +import { + CanvasRow, + CanvasCol, + CanvasRowColContainer, + CanvasFlexBox, + CanvasSection +} from '@opentiny/tiny-engine-builtin-component' import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../../common' import { context, conditions, setNode, getDesignMode, DESIGN_MODE } from './context' @@ -66,6 +72,7 @@ const Mapper = { slot: CanvasSlot, Template: CanvasBox, Img: CanvasImg, + CanvasSection, CanvasFlexBox, CanvasRow, CanvasCol, diff --git a/packages/vue-generator/src/constant/index.js b/packages/vue-generator/src/constant/index.js index dc331d6ed6..eb0d9c719c 100644 --- a/packages/vue-generator/src/constant/index.js +++ b/packages/vue-generator/src/constant/index.js @@ -2202,6 +2202,13 @@ export const BUILTIN_COMPONENTS_MAP = [ package: '@opentiny/tiny-engine-builtin-component', version: '^1.0.1', destructuring: true + }, + { + componentName: 'CanvasSection', + exportName: 'CanvasSection', + package: '@opentiny/tiny-engine-builtin-component', + version: '^1.0.1', + destructuring: true } ] From 4ba79470c7e755bdcfc89f3d87a4b1084cb602a1 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Thu, 12 Dec 2024 22:49:49 -0800 Subject: [PATCH 12/19] =?UTF-8?q?fix:=E6=A0=B7=E8=B0=83=E6=95=B4=E6=97=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=BA=E7=A1=80=E7=B1=BB=E5=90=8D=E5=88=A4?= =?UTF-8?q?=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/settings/styles/src/js/useStyle.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js index cf93da8f53..582dbfd941 100644 --- a/packages/settings/styles/src/js/useStyle.js +++ b/packages/settings/styles/src/js/useStyle.js @@ -12,7 +12,7 @@ import { computed, reactive, watch } from 'vue' import { useBroadcastChannel } from '@vueuse/core' -import { useCanvas, useHistory, useProperties as useProps } from '@opentiny/tiny-engine-meta-register' +import { useCanvas, useHistory, useProperties as useProps, getOptions } from '@opentiny/tiny-engine-meta-register' import { formatString } from '@opentiny/tiny-engine-common/js/ast' import { constants, utils } from '@opentiny/tiny-engine-utils' import { parser, stringify, getSelectorArr } from './parser' @@ -307,6 +307,13 @@ const updateStyle = (properties) => { const { addHistory } = useHistory() const { getSchema: getCanvasPageSchema, updateRect } = canvasApi.value const schema = getSchema() || getCanvasPageSchema() + const pageOptions = getOptions('engine.plugins.appmanage') + const materialsOptions = getOptions('engine.plugins.materials') + const baseClassGroup = [ + `.${pageOptions.pageBaseStyle.className}`, + `.${materialsOptions.blockBaseStyle.className}`, + `.${materialsOptions.componentBaseStyle.className}` + ] schema.props = schema.props || {} if (properties) { @@ -321,7 +328,7 @@ const updateStyle = (properties) => { const classNames = schema.props.className || '' // 不存在选择器，需要生成一个随机类名，添加到当前选中组件中，然后写入到全局样式 - if (!currentSelector && typeof classNames === 'string') { + if ((!currentSelector || baseClassGroup.includes(currentSelector)) && typeof classNames === 'string') { randomClassName = genRandomClassNames(schema?.componentName || 'component') let newClassNames = randomClassName.slice(1) From c677f8e6fe67d588a6d9f19ace94d2cd8c7611cf Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Sun, 15 Dec 2024 18:21:24 -0800 Subject: [PATCH 13/19] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=9C=A8?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=9D=A2=E6=9D=BF=E9=80=89=E6=8B=A9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=97=B6=EF=BC=8C=E4=B8=A4=E4=B8=AA=E7=B1=BB=E5=90=8D?= =?UTF-8?q?=E5=90=8C=E6=97=B6=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/settings/styles/src/js/useStyle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js index 582dbfd941..f705aec27e 100644 --- a/packages/settings/styles/src/js/useStyle.js +++ b/packages/settings/styles/src/js/useStyle.js @@ -255,7 +255,7 @@ watch( (value) => value.pureSelector === classNameList && value.mouseState === mouseState ) const style = matchStyles.length ? matchStyles[0].rules : {} - state.style = style + state.style = { ...style } }, { deep: true @@ -288,7 +288,7 @@ const updateGlobalStyle = (newSelector) => { state.styleObject[currentSelector] = { ...(state.styleObject[currentSelector] || {}), - rules: state.style + rules: { ...state.style } } if (!Object.keys(state.style).length) { From b048a58854279ca726f34d851f4a71d02e2d0c1a Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Sun, 15 Dec 2024 19:41:01 -0800 Subject: [PATCH 14/19] =?UTF-8?q?fix=EF=BC=9A=E8=B0=83=E6=95=B4=E5=AE=B9?= =?UTF-8?q?=E5=99=A8=E9=BB=98=E8=AE=A4=E5=86=85=E5=AE=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CanvasFlexBox.vue | 3 + .../render/src/builtin/CanvasFlexBox.vue | 64 ------------------- 2 files changed, 3 insertions(+), 64 deletions(-) delete mode 100644 packages/canvas/render/src/builtin/CanvasFlexBox.vue diff --git a/packages/builtinComponent/src/components/CanvasFlexBox.vue b/packages/builtinComponent/src/components/CanvasFlexBox.vue index 7d05af1dff..593443dc6b 100644 --- a/packages/builtinComponent/src/components/CanvasFlexBox.vue +++ b/packages/builtinComponent/src/components/CanvasFlexBox.vue @@ -48,5 +48,8 @@ const styles = computed(() => ({ padding: v-bind('styles.padding'); align-items: v-bind('styles.alignItems'); justify-content: v-bind('styles.justifyContent'); + :deep(.canvas-container) { + width: 100%; + } } diff --git a/packages/canvas/render/src/builtin/CanvasFlexBox.vue b/packages/canvas/render/src/builtin/CanvasFlexBox.vue deleted file mode 100644 index e6d4c0275c..0000000000 --- a/packages/canvas/render/src/builtin/CanvasFlexBox.vue +++ /dev/null @@ -1,64 +0,0 @@ - - - - From 974a79a79eb56469712b465ba9fb69ef9492efe2 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 16 Dec 2024 01:07:23 -0800 Subject: [PATCH 15/19] fix: fix review --- .../canvas/DesignCanvas/src/api/useCanvas.js | 6 ++-- packages/plugins/page/src/Main.vue | 27 +++++++++++------ .../plugins/page/src/composable/usePage.js | 29 ++++++++++++++----- packages/utils/src/utils/index.js | 15 +++++----- 4 files changed, 49 insertions(+), 28 deletions(-) diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.js b/packages/canvas/DesignCanvas/src/api/useCanvas.js index 1c8ce3f97c..a43b8c400d 100644 --- a/packages/canvas/DesignCanvas/src/api/useCanvas.js +++ b/packages/canvas/DesignCanvas/src/api/useCanvas.js @@ -81,12 +81,12 @@ const resetBlockCanvasState = async (state = {}) => { } const getDefaultSchema = (componentName = 'Page', fileName = '') => { - const DEFAULT_PAGE = getMetaApi('engine.service.page').getDefaultPage() + const DEFAULT_PAGE = getMetaApi('engine.service.page')?.getDefaultPage() || { page_content: { props: {}, css: '' } } return { ...defaultSchema, - props: DEFAULT_PAGE.page_content.props, - css: DEFAULT_PAGE.page_content.css, + props: DEFAULT_PAGE.page_content?.props || {}, + css: DEFAULT_PAGE.page_content?.css || '', componentName, fileName } diff --git a/packages/plugins/page/src/Main.vue b/packages/plugins/page/src/Main.vue index 470df51459..4305c78bf7 100644 --- a/packages/plugins/page/src/Main.vue +++ b/packages/plugins/page/src/Main.vue @@ -82,15 +82,24 @@ export default { const createNewPage = (group) => { closeFolderSettingPanel() pageSettingState.isNew = true - pageSettingState.currentPageData = { - ...getDefaultPage(), - parentId: ROOT_ID, - route: '', - name: 'Untitled', - page_content: { - lifeCycles: {} - }, - group + try { + const defaultPage = getDefaultPage() + if (!defaultPage) { + throw new Error('Failed to get default page configuration') + } + pageSettingState.currentPageData = { + ...getDefaultPage(), + ...defaultPage, + parentId: ROOT_ID, + route: '', + name: 'Untitled', + page_content: { + lifeCycles: {} + }, + group + } + } catch (error) { + // console.error('Failed to create new page:', error) } pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData) state.isFolder = false diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index 868e083606..5980286de4 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -58,18 +58,31 @@ const isTemporaryPage = reactive({ saved: false }) +const generateCssString = (pageOptions, materialsOptions) => { + const baseStyle = `.${pageOptions.pageBaseStyle.className}{\r\n ${pageOptions.pageBaseStyle.style}\r\n}\r\n` + + if (!materialsOptions.useBaseStyle) { + return baseStyle + } + + return `${baseStyle}.${materialsOptions.blockBaseStyle.className}{\r\n ${materialsOptions.blockBaseStyle.style}\r\n}\r\n.${materialsOptions.componentBaseStyle.className}{\r\n ${materialsOptions.componentBaseStyle.style}\r\n}\r\n` +} + const getDefaultPage = () => { const materialsOptions = getOptions('engine.plugins.materials') const pageOptions = getOptions('engine.plugins.appmanage') - DEFAULT_PAGE.page_content.props.className = pageOptions.pageBaseStyle.className - DEFAULT_PAGE.page_content.css = - `.${pageOptions.pageBaseStyle.className}{\r\n ${pageOptions.pageBaseStyle.style}\r\n}\r\n` + - (materialsOptions.useBaseStyle - ? `.${materialsOptions.blockBaseStyle.className}{\r\n ${materialsOptions.blockBaseStyle.style}\r\n}\r\n.${materialsOptions.componentBaseStyle.className}{\r\n ${materialsOptions.componentBaseStyle.style}\r\n}\r\n` - : '') - - return DEFAULT_PAGE + return { + ...DEFAULT_PAGE, + page_content: { + ...DEFAULT_PAGE.page_content, + props: { + ...DEFAULT_PAGE.page_content.props, + className: pageOptions.pageBaseStyle.className + }, + css: generateCssString(pageOptions, materialsOptions) + } + } } const isCurrentDataSame = () => { diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js index 2ba44172b4..f3c784d064 100644 --- a/packages/utils/src/utils/index.js +++ b/packages/utils/src/utils/index.js @@ -412,7 +412,10 @@ export const styleString2Obj = (styleString) => { const styles = styleString.trim().split(';') const styleObject = styles.reduce((obj, pair) => { - const [key, value] = pair.split(':') + const colonIndex = pair.indexOf(':') + if (colonIndex === -1) return obj + const key = pair.slice(0, colonIndex) + const value = pair.slice(colonIndex + 1) if (key && value) { obj[toCamelCase(key.trim())] = value.trim() } @@ -428,11 +431,7 @@ export const styleString2Obj = (styleString) => { */ export const obj2StyleString = (obj) => { - let str = '' - - for (let key in obj) { - str += `${convertCamelToKebab(key)}: ${obj[key]}; ` - } - str = str.slice(0, -2) - return str + return Object.entries(obj) + .map(([key, value]) => `${convertCamelToKebab(key)}: ${value}`) + .join('; ') } From b81b7d24ec184fbf5fd2ce72df3fe15a19170257 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 16 Dec 2024 01:26:30 -0800 Subject: [PATCH 16/19] fix:fix review --- packages/plugins/page/src/composable/usePage.js | 4 ++++ packages/utils/src/utils/index.js | 15 +++++++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index 5980286de4..cd5a3bd09a 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -72,6 +72,10 @@ const getDefaultPage = () => { const materialsOptions = getOptions('engine.plugins.materials') const pageOptions = getOptions('engine.plugins.appmanage') + if (!materialsOptions || !pageOptions || !pageOptions.pageBaseStyle) { + return { ...DEFAULT_PAGE } + } + return { ...DEFAULT_PAGE, page_content: { diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js index f3c784d064..5e570f1a51 100644 --- a/packages/utils/src/utils/index.js +++ b/packages/utils/src/utils/index.js @@ -399,7 +399,10 @@ export const toCamelCase = (str) => { */ export const convertCamelToKebab = (string) => { - return string.replace(/([A-Z])/g, '-$1').toLowerCase() + return string + .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') + .replace(/([a-z])([A-Z])/g, '$1-$2') + .toLowerCase() } /** @@ -409,8 +412,11 @@ export const convertCamelToKebab = (string) => { */ export const styleString2Obj = (styleString) => { - const styles = styleString.trim().split(';') + if (!styleString || typeof styleString !== 'string') { + return {} + } + const styles = styleString.trim().split(';') const styleObject = styles.reduce((obj, pair) => { const colonIndex = pair.indexOf(':') if (colonIndex === -1) return obj @@ -431,7 +437,12 @@ export const styleString2Obj = (styleString) => { */ export const obj2StyleString = (obj) => { + if (!obj || typeof obj !== 'object') { + return '' + } + return Object.entries(obj) + .filter(([, value]) => value != null) .map(([key, value]) => `${convertCamelToKebab(key)}: ${value}`) .join('; ') } From 4794e7cf019244e3cf3040e77d5c1fa4837b6459 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Mon, 16 Dec 2024 01:41:58 -0800 Subject: [PATCH 17/19] fix: fix review --- packages/plugins/page/src/composable/usePage.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/plugins/page/src/composable/usePage.js b/packages/plugins/page/src/composable/usePage.js index cd5a3bd09a..ef8b1da8ad 100644 --- a/packages/plugins/page/src/composable/usePage.js +++ b/packages/plugins/page/src/composable/usePage.js @@ -59,13 +59,22 @@ const isTemporaryPage = reactive({ }) const generateCssString = (pageOptions, materialsOptions) => { + if (!pageOptions?.pageBaseStyle?.className || !pageOptions?.pageBaseStyle?.style) { + return '' + } + + const formatCssRule = (className, style) => `.${className} {\n ${style.trim()}\n}\n` const baseStyle = `.${pageOptions.pageBaseStyle.className}{\r\n ${pageOptions.pageBaseStyle.style}\r\n}\r\n` if (!materialsOptions.useBaseStyle) { return baseStyle } - return `${baseStyle}.${materialsOptions.blockBaseStyle.className}{\r\n ${materialsOptions.blockBaseStyle.style}\r\n}\r\n.${materialsOptions.componentBaseStyle.className}{\r\n ${materialsOptions.componentBaseStyle.style}\r\n}\r\n` + return [ + formatCssRule(pageOptions.pageBaseStyle.className, pageOptions.pageBaseStyle.style), + formatCssRule(materialsOptions.blockBaseStyle.className, materialsOptions.blockBaseStyle.style), + formatCssRule(materialsOptions.componentBaseStyle.className, materialsOptions.componentBaseStyle.style) + ].join('\n') } const getDefaultPage = () => { From 47366e976ca9f1bf1fc568683bc66d4499c27b83 Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Thu, 19 Dec 2024 00:05:40 -0800 Subject: [PATCH 18/19] =?UTF-8?q?fix:=E5=AE=B9=E5=99=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=90=8D=E4=BB=A5=E5=8F=8A=E5=B1=9E=E6=80=A7=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=E4=B8=AD=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/meta/CanvasFlexBox.json | 36 +++++++++---------- .../src/meta/CanvasSection.json | 4 +-- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/builtinComponent/src/meta/CanvasFlexBox.json b/packages/builtinComponent/src/meta/CanvasFlexBox.json index 1b6323f019..625a3ac672 100644 --- a/packages/builtinComponent/src/meta/CanvasFlexBox.json +++ b/packages/builtinComponent/src/meta/CanvasFlexBox.json @@ -2,7 +2,7 @@ "component": { "icon": "Box", "name": { - "zh_CN": "弹性盒子容器" + "zh_CN": "弹性容器" }, "component": "CanvasFlexBox", "schema": { @@ -39,19 +39,19 @@ "props": { "options": [ { - "label": "row", + "label": "水平,起点在左端", "value": "row" }, { - "label": "row-reverse", + "label": "水平,起点在右端", "value": "row-reverse" }, { - "label": "column", + "label": "垂直,起点在上沿", "value": "column" }, { - "label": "column-reverse", + "label": "垂直,起点在下沿", "value": "column-reverse" } ] @@ -104,23 +104,23 @@ "props": { "options": [ { - "label": "flex-start", + "label": "左对齐", "value": "flex-start" }, { - "label": "flex-end", + "label": "右对齐", "value": "flex-end" }, { - "label": "center", + "label": "居中", "value": "center" }, { - "label": "space-between", + "label": "两端对齐,子元素间隔相等", "value": "space-between" }, { - "label": "space-around", + "label": "子元素两侧间隔相等", "value": "space-around" } ] @@ -144,23 +144,23 @@ "props": { "options": [ { - "label": "center", + "label": "交叉轴的中点对齐", "value": "center" }, { - "label": "flex-end", - "value": "flex-end" + "label": "交叉轴的起点对齐", + "value": "flex-start" }, { - "label": "flex-start", - "value": "flex-start" + "label": "交叉轴的终点对齐", + "value": "flex-end" }, { - "label": "baseline", + "label": "以子元素第一行文字的基线对齐", "value": "baseline" }, { - "label": "stretch", + "label": "占满容器高度", "value": "stretch" } ] @@ -204,7 +204,7 @@ }, "snippet": { "name": { - "zh_CN": "弹性盒子容器" + "zh_CN": "弹性容器" }, "screenshot": "", "snippetName": "CanvasFlexBox", diff --git a/packages/builtinComponent/src/meta/CanvasSection.json b/packages/builtinComponent/src/meta/CanvasSection.json index f8fe812de8..44c2ffd837 100644 --- a/packages/builtinComponent/src/meta/CanvasSection.json +++ b/packages/builtinComponent/src/meta/CanvasSection.json @@ -2,7 +2,7 @@ "component": { "icon": "Box", "name": { - "zh_CN": "Section" + "zh_CN": "全宽居中布局" }, "component": "CanvasSection", "schema": { @@ -58,7 +58,7 @@ }, "snippet": { "name": { - "zh_CN": "Section" + "zh_CN": "全宽居中布局" }, "screenshot": "", "snippetName": "CanvasSection", From 210c9dd3a0ddc8bc5a74817d67a7f17d7e36611c Mon Sep 17 00:00:00 2001 From: lichunn <269031597@qq.com> Date: Thu, 19 Dec 2024 00:22:33 -0800 Subject: [PATCH 19/19] fix: fix review --- .../components/typography/TypographyGroup.vue | 40 +------------------ 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue index 6f967f3b64..92c431c9e5 100644 --- a/packages/settings/styles/src/components/typography/TypographyGroup.vue +++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue @@ -333,44 +333,8 @@ export default { } ] - const sizeOptions = [ - { - label: '9', - value: '9' - }, - { - label: '10', - value: '10' - }, - { - label: '11', - value: '11' - }, - { - label: '12', - value: '12' - }, - { - label: '14', - value: '14' - }, - { - label: '16', - value: '16' - }, - { - label: '18', - value: '18' - }, - { - label: '20', - value: '20' - }, - { - label: '24', - value: '24' - } - ] + const sizes = ['9', '10', '11', '12', '14', '16', '18', '20', '24'] + const sizeOptions = sizes.map((size) => ({ label: size, value: size })) const alignOptions = [ {